Skip to content
Cawd Logo Cawd
  • Home
  • About
  • Assignments
  • Student Work
  • Resources
  • Contact

Thursday, October 31st

Thursday, October 31st

Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org

Notes

squirrel eating pumpkin:  I went ahead and carved the pumpkin for you, no need to thank me
  • 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.

Link to files to download to your desktop, then un zip

Break (15 Minutes)

coffee and cookies

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)

pizza

12:40 – 1:05 Literacy in Focus

image of book covers

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

2:05 Dismissal

Cawd Instructors:

Matt Cronin

Will Bohmann

Instragram Facebook Twitter

A little about Cawd:

Serving high school students interested in Computer Animation, Game Design, and Web Development in North Western Vermont.

Students continue at:

University of Vermont Ringling School of Art and Design Northeastern University Rochester Institute of Technology Concordia University

Students find careers at:

Dealer.com Union Street Media Rovers North Prudential Investments DockYard
Navigate to top of page