Project: Recipe page

Overview of the 5-lesson project: a recipe page with lists and tables.

Project: Recipe page

In this 5-lesson project you'll build a Chocolate Cake recipe page. Each lesson adds one piece, and by the final lesson you'll have a complete recipe page.

You'll use:

Document skeleton (DOCTYPE, html, head, body)
meta charset, viewport, title, lang
h1 heading and paragraphs
strong and em for emphasis
Unordered ingredient list (ul, li)
Ordered steps (ol, li)
Baking table (table, thead, tbody)

Ready? Let's start.

Project roadmap

Here's how we'll build the project step by step:

Skeleton: Write the document skeleton and the head section.
Title and summary: Add the recipe name with h1 and the summary with p.
Ingredients: Write the ingredient list with ul and li.
Steps and table: Add the steps with ol and the baking table with table.
Final: Complete the page with figure and hr.

Each lesson's starting code contains the previous lesson's solution; you only add the new piece.

Exercise Write the empty document skeleton

Start the project with an empty HTML document skeleton. Include <!DOCTYPE html>, <html>, <head>, and <body>. Add lang="en" to <html>; inside <head> add meta charset=utf-8, viewport, and title with content Chocolate Cake.

Show example solution

Write an empty HTML document skeleton. Inside head, add charset, viewport, and title.
Example solution:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Chocolate Cake</title>
  </head>
  <body>
    <!-- add recipe title and summary -->
  </body>
</html>

Test yourself

How do lessons progress in project groups?
- Each lesson takes the previous solution and adds a new piece
- Each lesson starts from scratch
- Lessons are independent of each other
- Only the final lesson has code
Show answer

Each lesson takes the previous solution and adds a new piece — Correct. Each lesson adds a new piece to the previous solution, so the recipe page grows step by step.
Complete the DOCTYPE declaration
```
<!DOCTYPE ____>
```
Show answer
```
<!DOCTYPE html>
```
Match each skeleton part to its role

<head>

Metadata and title
<body>

Visible content
<html>

Document root
<title>

Tab title

Next lesson: Recipe title and summary

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies