Worked example ยท reference only

Reading a page

This finished teaching example uses a 2rem gap and two equal columns at 48rem and wider. Below that width it remains one column. Your October 28 starter begins with different values.

Skip to examples

Structure

HTML gives a heading, paragraph, and link their roles. These articles remain in a meaningful sequence when all CSS is removed.

Presentation

The shared card class controls border and padding. The cards container controls the gap and columns. Changing one does not require rewriting the three articles.

Verification

At a wide width this third card begins a new row. At a narrow width all three stack. Inspect the media query to explain why. Longer content can make a row taller; the source does not clip it to a fixed height.