November 30th – December 4th
Class hours: 9:40 – 2:05
Mr. Bohmann | wbohmann@ewsd.org
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
10:35 Academics
11:25 Lunch
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.
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.
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!