gwecode

css · level 2 check

a responsive recipe board.

Time to build something useful: a recipe board that works on any screen. Each card has a photo, a badge in its corner, a title, a short description and a Cook this button that sits at the bottom of the card, however long the description is.

Most of the CSS is written. Fill in each `____`. Lay the recipes out in a grid: one column on phones, three equal columns from `700px` wide. Make each card a flex column, and push the button down with an `auto` top margin.

Then pin the badge inside its card, make the photos fill their frames without squashing, give the button a `0.2s` transition on `background-color` and show a focus ring for keyboard users. Run it after each blank, on a narrow screen and a wide one.

the page you’re styling
<div class="recipes">
  <div class="recipe">
    <span class="badge">Quick</span>
    <img src="cake.svg" alt="A slice of lemon cake">
    <h3>Lemon cake</h3>
    <p>A soft sponge with a sharp lemon drizzle.</p>
    <a class="cook" href="https://example.com/lemon-cake">Cook this</a>
  </div>
  <div class="recipe">
    <span class="badge">Vegan</span>
    <img src="tree.svg" alt="A bowl of green salad">
    <h3>Garden salad</h3>
    <p>Crunchy leaves, peas and mint, with a maple and mustard dressing that takes one minute to shake together.</p>
    <a class="cook" href="https://example.com/garden-salad">Cook this</a>
  </div>
  <div class="recipe">
    <span class="badge">New</span>
    <img src="ball.svg" alt="A plate of meatballs">
    <h3>Meatballs</h3>
    <p>Tomato sauce and fresh herbs.</p>
    <a class="cook" href="https://example.com/meatballs">Cook this</a>
  </div>
</div>
Fill in every ____ then run the checks.

Run the checks to see your page here.

  1. 1 The recipes sit in a griduses: grid
  2. 2 Wide screens get three equal columnsuses: media queries
  3. 3 Each card is a column with its button at the bottomuses: flexbox
  4. 4 The badge is pinned inside its carduses: positioning
  5. 5 The photos fill their framesuses: pictures that fit
  6. 6 The button glides and shows its focususes: transitions and focus

Take as long as you like and try as many times as you want.