medium HTML & CSS Layout CSS

Recipe Card

The Brief

Build a styled recipe card for a dish of your choice. The card should display: a recipe title, an image, prep/cook times, an ingredients list, and numbered steps. Style everything with proper spacing, a clear visual hierarchy, and a clean layout. Use flexbox or grid to arrange the metadata (prep time, cook time, servings) in a row.

Acceptance Criteria

Tap a criterion to mark it off as you work. Tap a category header to expand or collapse.

1 Has a wrapper element with class recipe-card

2 Contains an img element for the recipe photo

3 Has an h1 or h2 with the recipe title

4 Contains a ul of ingredients (at least 4 items)

5 Contains an ol of cooking steps (at least 3 items)

6 Recipe metadata uses display: flex or display: grid

7 Image fills the width of the card

8 Card has a max-width and is centred on the page

9 Card has rounded corners and a shadow

10 Heading uses a different font-weight or size to body text

💡 Hints 0 / 4

Guest Mode Attempt freely, or log in to earn EXP & CodeCoins.

index.html

Live Preview