Day 8 - Hero Sections and CTAs

Housekeeping

• Achievements Round 2 dropbox opened in Brightspace
• CNT 260 Assignment 1 marks will be released later this morning
• Late-start challenge
  • If 18 students submit an achievement by end-of-class tomorrow, we start at 9am on Monday!

Slides: Heros and Banners with Flexbox

Demos

• Banners with nested flexbox
• Hero sections

Activity: Hero Section

Create your own full-viewport hero section:

1. Select an large-format image on your file system or on Lorem Picsum for your background image;
2. Create a full-viewport <header> with a height of 100vh;
3. Add a CSS background image using the image you selected;
4. Add HTML content of your choice to the <header>;
5. Using Flexbox (of Grid), position your content over top your background image so that it’s pretty and readable.

Assignment 1 Solution Review

• TBA: Assignment example solution

Lab Time

Late-start challenge

If 18 students submit an achievement by end-of-class tomorrow, we start at 9am on Monday!

Submit your project to Achievements Round 2 in Brightspace.

Prep

Reading list

• Backgrounds and Borders

Watch list

• Layout Land by Jen Simmons
  • Introduction to Viewport Units
  • Unlocking the Power of CSS Overrides
    • This is Part 4 of a 7-part series. Parts 1-3 are listed below as optional (but recommended) background theory.

Search list

• “best hero sections”
• “hero section css”
• “call to action css”

Digging Deeper (optional)

• Resilient CSS by Jen Simmons
  • Part 1: Introduction to Resilient CSS
  • Part 2: The Secrets of “Can I Use”
  • Part 3: How Browsers Handle Errors in CSS