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

Week Twelve, Day 2

Week Twelve, Day 2

November 30th – December 4th

Class hours: 9:40 – 2:05
Mr. Bohmann | wbohmann@ewsd.org
image courtesy of Zach Sterns CC attribution/Flickr

9:40 Notes

  • Remote Link for today (if you are not here) – Google Meets
  • CSS GridGarden – like Flexbox Froggy
  • Complete CSS3 Cheatsheet!
  • Logo Competitions – there are two, one has prize money ($100) If you are interested, I will email you the details.

9:45 Attendance & Graph of the Day

Open up a Google Doc. Label it Graph of the Day with today’s date.
When looking at graphs, we’ll be guided by the following questions:

  • What do you notice?
  • What do you wonder? 
  • What’s going on in this graph? Write a catchy headline that captures the graph’s main idea.
  • What impact does this topic have on you and your community?

    Take 5 minutes to write responses to these prompts

10:00 Hero Images & Text, 1/2 & Full Page

A Hero image or text is common description of using large format images and/or text to cover the top of a webpage. This is a nice styling option that can be easily accomplished with a little CSS and some positioning.

By placing the image on the CSS background property we don’t impact accessibility. It is simply a design and aesthetics choice.

Here are a couple good examples from the SurfRider Foundation, Kindeo and Ditto Residential, Airbnb. We’ll make one of these ourselves and see how easy it is.

Link to Hero Files – download and unzip. Open in Atom. Let’s do one together and use a bunch of CSS too.

Activity, using Pexels find an image that would make a suitable hero page. Find a font that matches the theme to your image, layout, etc. You can do a half or whole page. Filename: Hero Upload to your Week 12 folder.

10:25 Mask Break

mask

10:35 Academics

plato

11:25 Lunch

pizza

12:00 Parallax Layouts

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 Download to your desktop, then unzip

1:05 Mask Break

1:15 Pseudo Classes

Pseudo – class selectors select elements that are in a specific state. For example, a:hover {color:blue;} This declaration states that when you hover over the <a> element (like your navigation) turn the text blue.

psuedo classes list

Let’s practice using a CodePen I made. Fork it.

2:05 Dismissal

Remote Days – Homework

Posted at the end of the second in class day of the week will be the remote homework you are to complete. This work will be due at the start of the next in person cohort meeting.

This homework be an extension of learning from the week and may comprise of assigned and independent projects.

Remember, you must be completing articles by 2:05 for each remote day (except Wednesdays) to count for CTE attendance.

#1. Three Different Stylesheets

Check out CSS Zen Garden – it amazes me what can be done with CSS alone. Using the html code (copy html from codepen) 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. Feel free to use the templates that we started with. You do not have to link all your pages together with navigation. But…If you do, I will automatically give you 10 additional points on this assignment.

When complete upload your folder with all content to Week 12. Filename: CSSthreeWays

Don’t forget! Validate your HTML and your CSS

#2. Parallax

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 styling to enhance your document’s appearance.

Upload the whole folder to Week 12. Name it Parallax

Don’t forget! Validate your HTML and your CSS

#3. Article Review / Read

A good and recent article about responsive web design basics from Google. More and more design requires access using multiple display sizes.

Review the article and be prepared to participate in a discussion about it when you return next week.

*If this isn’t enough for you, tackle the GridGarden that I linked above. Email me a screen shot of your final two pages and solutions and I’ll reward you with a homemade treat!

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