A recipe card

Open project · after lesson 4: Boxes

Make a recipe card for something you can cook or make: the ingredients in a table with amounts, the steps as a numbered list, and CSS that makes it look like a card (a border, padding, a background).

One way it could look. Yours will be different.

You'll use

These light up when your code uses them. Click one to see where you learned it.

tables (<table>, <tr>, <td>, <th>)class selectors (.name)the box (padding, border, margin, width, height)

Try it yourselfYour edits are saved in this browser.

Milestones

Tick each one when it is true of your project. Nobody marks it: be honest with yourself.

The ingredients are in a table with a heading row.
The steps are a numbered list.
A class selector gives the card a border, padding and a width, so it looks like a card.

Make it yours

A second card, with the same class, for another recipe.
Rounded corners and a shadow.
Different colours for the heading row.

Looking back

What was the hardest part, and how did you get past it?

Tick every milestone first.

A recipe card

You'll use

Milestones

Make it yours

Looking back

★ A recipe card

★ A recipe card

Built with

Milestones

The hardest part