Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Notes
- Sweatshirts (need a design team). Sign up here. First sample due Monday, November 4th. AI files located in Public Folders
- Costume Contest – Student Council will judge your costume. Show up at 12:10 during lunch in room D105 (right next to Student Services
9:40 Attendance & Article
9:45 Student Council Vote – Monday
10:00am Parallax & other sweet scroll fx
Today we are going to play around with <div>s (which are generic block elements> and some CSS. We’ll learn about:
- setting background images in CSS
- positioning
- setting background properties including repeat, positioning and cover
- We’ll add some scroll FX – called parallax
Parallax scrolling is when background content on a web page moves at a different speed to the foreground content. This effect is applied using one simple CSS declaration: background-attachment
Activity, using the files provided, we are going to build out a procedure for making a vinaigrette. The focus here is the positioning of the divs, creating classes and using the proper CSS. We’ll build the CSS together so you know what it all means. We’ll also add comments, which is super helpful when learning how to code.
Break (15 Minutes)
11:00 – 12:10 Scolls cont…
In the previous activity, we added background images to our CSS and then used the background properties to adjust what our page looked like.
The next demo will model the smooth scroll which is a built in CSS selector. We’ll set his up using IDs instead of classes. Follow my demo on CodePen.
Gradient scroll with position:fixed
Activity: Create a 5 image parallax scroll documenting a procedure or task. Include the appropriate images and sections of documentation. To earn the A you should have considered a custom font and done some basic styling.
Upload the whole folder to Week 10. Name it Parallax
12:10 Lunch (30 Minutes)
12:40 – 1:05 Literacy in Focus
Grab your book and chill. We’ll be reading today. No computers, no talking. Sit on the couch if you like or move your chair.
1:05 Three Different Stylesheets
Check out CSS Zen Garden – it amazes me what can be done with CSS alone. Using the html code (structure) I’ve provided, you are going to create three variations of this html document.
Begin by making a folder on your desktop and all the usual items we’ve been adding (CSS folder, images folder)Name it CSSthreeWays
Elements, IDs and classes are like little styling handles that allow you to do some pretty great things. For additional inspiration, here is a demo from W3Schools. Do something original. Use color, fonts, gradients, whatever you like.
When complete upload your folder with all content to Week 10. Filename: CSSthreeWays
2:00 Dailies
Link to Dailies and Link to Responses