Chapter 3: Parts is Parts of the Web Page

You are likely familiar with all of the content sectioning elements like <article>, <header>, <main>, and others. However, you may not be clear when to use which elements in what situation. Use these semantic sectioning elements as much as possible, and supplement with <div> only if absolutely required.

Introduction to Content Sectioning

We'll be looking at slides 26-32.

Part 1: Content Sectioning Demo

The first step to good markup is reading the content! In this article on Iceland, see if you can mark up the content with the sectioning elements presented earlier.

• Beginning CodePen
• Ending CodePen

Part 2: You Try It: Initial HTML markup

Here's a web page about the Kaiju Cafe. See if you can mark it up with good semantic HTML.

• Beginning CodePen
• Ending CodePen

Part 3: Level 4 Pseudoclasses: :is(), :where(), :not(), :has()

They're some of the hottest pseudoclasses of the moment! What are the use cases?

• Beginning CodePen
• Ending CodePen

Part 4: You try it: Styling without classes

How much of a web page could you style without using CSS classes? Given the selectors introduced here, see if you can style a page using as few classes as possible.

• Beginning CodePen
• One possible solution (there are many, many others!)