What you will use in this project
- Tables for structured data
- Ordered and unordered lists
- Page layout with divs and classes
- Responsive viewport meta
HTML Project: Recipe Page
Complete each step in the editor and watch the result as your page takes shape.
Build Recipe Page, step-by-step
Build a complete recipe web page.
Use sections, tables, lists, and a responsive viewport.
How it works
- 1 Follow the steps on the left. Each dot in the stepper bar is one focused chunk of work. Read the instructions, the “What to do” checklist, and any hints.
- 2 Write your code on the right. The editor is yours. Files auto-save as you type. Use the Preview tab to see your work in action.
-
3
Click
Check codewhen you’re ready. We grade your work against the step’s rubric and tell you exactly what passed and what still needs work. - 4 Pass a step to move on. Build the project cumulatively. Pass every step to complete it and earn the full XP.
How it’s graded
This project is broken into 8 steps. Each one has its own pass criterion. Click Check code on every step to verify your progress and earn the full +110 XP.
| # | Step & pass criterion | Weight |
|---|---|---|
| 1 |
Page head
|
15 pts |
| 2 | Page header #header contains an <h1> | 10 pts |
| 3 | Hero image Hero image with src and alt | 10 pts |
| 4 | Ingredients list .ingredients has an <h2> and a <ul> with at least three items | 15 pts |
| 5 | Cooking steps .steps has an <h2> and an <ol> with at least three items | 15 pts |
| 6 | Nutrition table <table> with at least two <th> and three <td> cells | 15 pts |
| 7 | Tips section .tips section has an <h2> and content | 10 pts |
| 8 |
Footer
|
10 pts |
