We’re going to build one small page and improve it through the whole course. Every concept from here on gets tried on it: selectors, boxes, Flexbox, Grid, responsive rules.

Create a folder and add an index.html file. It’s a landing page with a header, a main section with three feature cards, and a footer:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Brew Notes</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="site-header">
    <a href="/">Brew Notes</a>
    <nav class="site-nav">
      <a href="#features">Features</a>
      <a href="#pricing">Pricing</a>
      <a href="#about">About</a>
    </nav>
  </header>

  <main>
    <section class="hero">
      <h1>Keep track of every coffee you brew</h1>
      <p>Log beans, grind size, and brew time. See what works.</p>
    </section>

    <section class="features" id="features">
      <article class="card">
        <h2>Log a brew</h2>
        <p>Add a brew in three taps, right after you pour it.</p>
      </article>
      <article class="card">
        <h2>Compare beans</h2>
        <p>See which roasters keep showing up in your best cups.</p>
      </article>
      <article class="card">
        <h2>Dial in the grind</h2>
        <p>Track grind settings per brewer and stop guessing.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Made with too much espresso.</p>
  </footer>
</body>
</html>

Notice the class names. site-header, features, card: they describe what the part is, not how it looks. That pays off later, when the look changes and the names still make sense.

Now create styles.css in the same folder. Start with a small foundation:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

The first rule changes how widths are calculated. We’ll cover exactly why in the box model module, so for now take it as a good default. The second removes the browser’s default body margin and sets a readable font and line height.

Open index.html in the browser. It should look plain, with the system font instead of the default serif. If it still looks like the browser default, the stylesheet didn’t load. Check that the href matches the file name and that both files are in the same folder. The Network tab in DevTools shows a red 404 for the CSS file when the path is wrong.

Don’t design anything else yet. The point is to have real content on screen so that every rule we add from now on has something to act on.

Keep this page open in one window and DevTools in another as you continue.

Quick check

Result

You got of right.

Start the course page

Download this course as PDF or EPUB

Download this course as PDF or EPUB