Lesson 20 +25 XP

Project 3: My Recipe Page

Project 3: My Recipe Page

Make a page that shows a recipe: ingredients (an unordered list) and steps (an ordered list).

The goal

A solid <h1> title.
A small intro paragraph.
Ingredients as a bullet list.
Steps as a numbered list.
A tasteful <hr> between sections.

Structure example

<article>
  <h1>Grandma's Pancakes</h1>
  <p>A quick, fluffy breakfast that takes 10 minutes.</p>

  <h2>Ingredients</h2>
  <ul>
    <li>2 eggs</li>
    <li>1 cup milk</li>
  </ul>

  <hr>

  <h2>Steps</h2>
  <ol>
    <li>Whisk the eggs.</li>
    <li>Slowly add the milk.</li>
    <li>Cook until golden on both sides.</li>
  </ol>
</article>

Decide this yourself

Should ingredients or steps come first? Justify your choice.
Is the whitespace good? <hr> is a whole block-level break.
Wrap everything in one <article>? It should.

Checklist

[ ] An <h1> for the dish name
[ ] Ingredients in a <ul>
[ ] Steps in an <ol>
[ ] <hr> between sections
[ ] Everything wrapped in <article>

TL;DR

Recipes are the perfect practice: two kinds of lists, some headings, and an <hr> divider.