CSS Images and Hero Sections

In this session, we'll talk about using background images and flexbox when making Hero sections.

Housekeeping

Daily Standup

In the same groups as last class

Each person takes a turn to answer the following questions:

  1. What did you do yesterday?
  2. What will you do today?
  3. Anything blocking your progress?

2. Hero Sections with Flexbox

Heros and banners slides

Materials

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 (or Grid), position your content over top your background image so that it’s pretty and readable.

Sticky Footers

Materials

Today's Achievement

Hero Banner Show and Tell

In groups of two or three, you will try to find an example of a hero section and answer the following questions:

  • Is there text over an image? What is the contrast ratio?
  • What is the Call to Action? What purpose does the hero section have?
  • Is the hero section responsive? How does it change on mobile devices? How many breakpoints can you see?

You will be presenting your findings in class for your marks:

  • 5 minute time limit
  • Important: Marks will be lost if you pick the same site as someone else! Pick a site that is unique and no one else knows about.

Submission Instructions

Submit your link to the Dropbox in Brightspace and mention your partner.

Lesson Prep

Reading list

Watch list

Digging Deeper (optional)