🍓 Online Recipe Project
Step-by-Step Guide
What You'll Learn:
Transform plain text into a beautifully formatted HTML recipe page using basic HTML tags!
📚 Project: Strawberry Ice Cream Recipe
Press "Next" to begin the tutorial →
📋 Project Overview
In this project, you'll transform plain text into a properly formatted HTML recipe page using basic HTML tags.
What We're Building:
- A recipe page with a clear title
- Formatted ingredients list with bold measurements and italic descriptions
- A visual separator between sections
- Step-by-step instructions in paragraphs
🎯 Goal: Learn to use HTML tags to structure and format content
Step 1: Add the Main Heading
🎯 Goal: Make "Strawberry Ice Cream" stand out as the page title
What to do:
- Find the line that says
Strawberry Ice Cream
- Wrap it in
<h1> tags
<h1>Strawberry Ice Cream</h1>
💡 Why: The <h1> tag creates the largest heading, perfect for your recipe title.
Step 2: Format the Ingredients List
🎯 Goal: Make measurements bold and ingredient names italic
What to do:
- Wrap measurements (like "1 1/2 cups") in
<strong> tags
- Wrap ingredient descriptions in
<em> tags
- Add
<br> at the end of each line
<strong>1 1/2 cups</strong> <em>strawberries, hulled and diced</em><br>
Step 2: All Ingredients
Repeat for all 5 ingredients:
<strong>1 1/2 cups</strong> <em>strawberries, hulled and diced</em><br>
<strong>1/2 cup</strong> <em>granulated sugar</em><br>
<strong>1 cup</strong> <em>heavy whipping cream</em><br>
<strong>1/2 cup</strong> <em>half and half</em><br>
<strong>1 tsp</strong> <em>vanilla extract</em><br>
💡 Why: <strong> makes text bold, <em> makes it italic, and <br> creates a line break.
Step 3: Add a Horizontal Rule
🎯 Goal: Separate ingredients from instructions
What to do:
- After the last ingredient line, add a horizontal rule
<hr>
💡 Why: The <hr> tag creates a visual divider between sections.
✨ This creates a nice separation between your ingredients and instructions!
Step 4: Format the Instructions
🎯 Goal: Put each instruction step in its own paragraph
What to do:
- Wrap each numbered instruction (steps 1-5) in
<p> tags
<p>1. In a large bowl, mix strawberries and sugar.
Allow to sit 15-20 minutes, or until the strawberries
have released their juices.</p>
Repeat for all 5 steps
💡 Why: The <p> tag creates paragraphs with proper spacing between each instruction.
✅ Final Checklist
Make sure your recipe has all of these:
- Page has one <h1> heading
- All 5 ingredients have bold measurements and italic descriptions
- Each ingredient line ends with <br>
- Horizontal rule (<hr>) separates ingredients from instructions
- All 5 instruction steps are wrapped in <p> tags
🎉 If you have all these, your recipe is complete!
🏷️ Key HTML Tags Used
| Tag |
Purpose |
Example |
<h1> |
Main heading |
<h1>Strawberry Ice Cream</h1> |
<strong> |
Bold text |
<strong>1 cup</strong> |
<em> |
Italic text |
<em>sugar</em> |
<br> |
Line break |
text<br> |
<hr> |
Horizontal rule |
<hr> |
<p> |
Paragraph |
<p>Step 1...</p> |
🎉 Congratulations! 🎉
You've completed the Online Recipe Project!
What You Learned:
- How to structure content with headings
- How to format text with bold and italic
- How to use line breaks and horizontal rules
- How to organize content with paragraphs
🚀 You're ready to build more HTML projects!
