Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org
10:05 Today’s Notes & Attendance
Today is a Wacky Wednesday
Call Backs:
- Andrew (Public Issues – 12:25 and Science-1pm)
- Ariel (Science – 12:50)
- Aiden, Kevin, Nick, Finn (English – 12:50)
MMAG meeting: 11:30 – Jerry
CCV Classes on Friday – Lunch Form
Today we will have 4 visitors working with us from 11:00-11:30.
These visitors will work with four students. They will rotate every 5 minutes, so you won’t have to do too much with them for too long.
- Station #1: Josh – Web coding HTML/CSS / Inspecting & changing pages
- Station #2: Alex – SkillsUSA Overview and your winning animation
- Station #3: Jerry – Photography, Editing Photos i Camera Raw
- Station $4: Nick – Visual Effects projects / Editing
10:10 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. We can create this effect with pure CSS. The effect is applied using one simple CSS declaration: background-attachment. However, we may come back to this project and add some JS for some added effects.
This is a very nice way to build a multi-page website into one single website because the sections provide breaks for the viewer.
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.
Now that we have practiced – it is your turn….
Week Thirteen Project – Parallax Website
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. Look at a color palette. Make an attractive layout. You might also consider adding a navigation menu to get to the different sections using IDs – like we did on Tuesday.
If you can, take your own photos. Original content is best and it will boost your overall grade.
Remember to include the meta data in the head of your project. Along with author and title.
Don’t forget to validate your HTML and CSS. Every error will incur a 1 point deduction from your project score!
FTP your entire project folder to your server. If you don’t know how, ask me.
Name it Parallax. This project is due at the end of the day on Monday, December 4th.
Make it nice. Don’t just repeat what I do.
10:50 Break
11:00 Visitors from PreTech
11:30 Positioning Relative & Absolute
When I first started learning web coding I was pretty confused by positioning properties. Especially since flexbox did not exist yet. There are times when you need to position elements and knowing how to use the property can be really helpful.
The position property specifies the type of positioning method used for an element.
There are five different position values:
- static //this is the Default, element renders in order as they appear in the flow of the document
- relative //element is positioned relative to the normal position it would be in relative to itself
- fixed //the element behaves the same as absolute, the element is positioned relative to the browser window
- absolute //the element is positioned relative to its first positioned ancestor element
- sticky //The element is positioned based on the user’s scroll position
Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
We can make sense of all this by fumbling about in CodePen. That is why we use it – it’s a sandbox!
/* mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity; */
11:55 Lunch
12:25 Independent Reading
12:50 Break
1:00 Production Time and Guided Support
- Famous Photographer Assignment – Due, December 11th
- Parallax Website – Due Monday
- Flexbox Photo Gallery – Due Friday
1:50 Dailies
Dailies can be placed in the CAWD2 Dailies Folder on the CAWD2 Public Folders drive