Capstone I: structure and style the landing page

lesson 9-2 · ~12 min · 29/30

The brief

You are building a landing page for a study group: a header with navigation, a hero with a big headline and a call to action, a three-card feature grid, a signup form, and a footer. Every tool comes from this course, and each carries its lesson number so you can jump back.

The skeleton (lesson 2-1) with semantic regions (lesson 3-3):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Study Group</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="site-header">...the lesson 6-3 navbar...</header>
  <main>
    <section class="hero">
      <h1>Learn to build the web</h1>
      <a class="cta" href="#signup">Join us</a>
    </section>
    <section class="features">...three articles...</section>
    <section id="signup">...the form, next lesson...</section>
  </main>
  <footer>© Study Group</footer>
</body>
</html>

Note the viewport meta tag from lesson 7-2. Without it, none of the responsive work below matters on phones.

The wireframe. Every region maps to a unit you have completed, and the gold pill is the call-to-action link.

The stylesheet, section by section

* { box-sizing: border-box; }        /* lesson 5-2 */

body {
  margin: 0;
  font-family: system-ui, sans-serif; /* lesson 4-2 */
  line-height: 1.5;
}

.site-header {
  display: flex;                      /* lesson 6-3 */
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
}

.hero {
  display: flex;                      /* centering recipe, 6-2 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 60vh;                   /* lesson 5-3 */
  text-align: center;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem); /* lesson 7-3 */
}

.features {
  display: grid;                      /* lesson 7-1 */
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 24px;
}

@media (min-width: 768px) {           /* lesson 7-2 */
  .features { grid-template-columns: repeat(3, 1fr); }
}

Mobile-first: one column of cards by default, three from 768px up.

Quiz

The hero uses flex-direction: column. Which property is doing the HORIZONTAL centering of the headline?

Assemble it. The HTML is complete. In the CSS pane, finish the three marked TODOs: 1) make .hero center its content with the column-flex recipe, 2) make .features a one-column grid with a 16px gap, 3) add the min-width: 768px media query that switches .features to three equal columns. Resize the preview to watch the breakpoint fire.

Problem

The feature cards show three columns only from 768px and up. Which CSS feature makes that switch happen?