Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Week Twelve
Today’s Notes
- Today is an EHS A Day
- This is week twelve and the last week before the November break
- Friday – Python and Drawing classes as normal
- Game Time Friday at 11:30 or when you return from Drawing- if you are complete with all your work That includes this week’s graph of the week.
- Run Hide Fight – Monthly safety review
- About Me Draft due today – so I can review
- HTML Resume & Flexbox gallery – call me over when you have it
9:40 Attendance
9:45 Monday Mail – make a quick check – you seniors are important!
9:50 20% Showcase
The dropbox for projects is in Google Classroom. Presenting work to each other is not only educational but also a great way to practice and improve your speaking skills.
Filename example: 20%_lastName.(whatever file extension fits)
20% Projects will be declared by the end of the day on Mondays. A project may last more than one week. You might be building towards something. Be specific.
For example: Animation in Blender using a rig, Disappearing effect in After Effects, 2D sidescroller in Unity
When presenting: Three Questions to respond to:
- What did you learn this week?
- What are you working on/showing us?
- What are your next steps? Where do you go from here? / What are you working towards?
10:15 IDs and Classes
HTML elements provide the structure to webpages while the CSS adds the style. JavaScript makes pages interactive.
To help the HTML elements stand out, we can use “styling hooks” by adding IDs and Classes to the elements. Did you know that an element can be loaded up with many classes – handy!
IDs are unique
- Each element can have only one ID
- Each page can only have one element with that ID
Classes are not unique
- You can use the same class on multiple elements
- You can use multiple classes on the same element (just leave a space)
Let’s practice using IDs and add some smooth scrolling to create a simple, scrollable web page linked by IDs. This is a great way to create a one page website. Open CodePen and start a new pen. Name it Smooth Scroll with IDs.
html{
scroll-behavior:smooth;
}We’re not going to build anything ground-breaking here, but we will get to see the concept in action.
We’ll also revisit Flexbox to help with our layout. Ask me about gradients…
10:35 Break
10:45 English with Mx. Yopp
11:30 Parallax Websites using IDs
Let’s continue with our work with classes and <divs> (generic block elements). We’ll learn about:
- setting background images in CSS
- positioning fundamentals
- setting background properties including repeat, positioning and cover
- More scrolling FX – called parallax
Parallax scrolling happens when background content on a webpage moves at a different speed than the foreground content. The effect is applied using one simple CSS declaration: background-attachment.
This is a very nice way to build a multi-page website into one single website.
Activity, using the files provided, we are going to build out a procedure for making a vinaigrette. A vinaigrette is a salad dressing. The focus here is on the positioning of the divs, creating classes and using the proper CSS. Commenting will be helpful. We’ll build this together so you know what it all means.
Link to download the files to your desktop.
Week Twelve Project – Parallax
Think of a procedure or task (walking the dog, brushing teeth, learning to code, drawing a circle, making mac and cheese…..)
Then, create a 5 image parallax scroll documenting that procedure or task. Include the appropriate images and sections of documentation. To earn the A you should consider adding custom fonts and styling to enhance your document’s appearance.
If you can, take your own photos. Original content is best.
Remember to include meta data in the head of your project. Along with author and title.
FTP your entire project folder to the server: Name it Parallax. This project is due Monday, November 28th.
Don’t forget to validate your HTML and CSS. Every error will incur a 1 point deduction from your project score!
Make it nice.
12:15 Lunch
12:45 Monday Model Challenge or Famous Photographer Research
You may choose one of the two. If you choose the model – this is just a sprint. Place your model in dailies for a look at how far you got.
Model Challenge: Pilgrim Hat with three point lighting
1:10 Break
1:20 20% Production Time & Guided Support
- Agency – Week Twelve
- HTML Resume – Show me for credit
- Flexbox PhotoGallery – Show me for credit
- About Me draft – due today
- About Me Headshot – due today
- Parallax Website