HTML Food Recipe Activity

:books: What You'll Learn

In this activity, you will:

• Create organized lists using HTML unordered and ordered lists
• Build a complete recipe webpage with ingredients and steps
• Add links to external recipe sources
• Include images to make your recipe visually appealing
• Practice proper spacing and formatting techniques

Estimated Time: 45-60 minutes

---

:clipboard: Before You Start

Make sure you have:

• Watched the lesson video on HTML Lists
• Access to EduBlocks
• A recipe idea in mind (keep it simple!)
• Any recipe images saved or image URLs ready

---

:movie_camera: Video Tutorial

---

:emoji: Preview

Here's what you'll be creating:

---

:computer: Activity Instructions

:warning: Important! Start Here: Remix this EduBlocks Project!

Remember to click the "Clone" button to create your own copy!

In this project, you will create a delicious recipe webpage using HTML lists!

:art: Building Your Recipe Page

Follow these steps to create your food recipe webpage:

Step One: Add Your Recipe Title (5 minutes)

1. Start with an <h1> heading block
2. Type your recipe name (e.g., "Delicious Egg Sandwich")
3. Make it exciting and descriptive!

:bulb: Tip: Recipe Ideas Some simple recipes to try:

• Peanut Butter & Jelly Sandwich
• Fruit Salad
• Chocolate Milk
• Toast with Toppings

---

Step 2: Add a Recipe Source Link (5 minutes)

1. Create a paragraph block <p>
2. Add an anchor link <a> inside the paragraph
3. Link to your recipe source

Example recipe link: https://recipes.timesofindia.com/recipes/egg-sandwich/rs60018142.cms

:bulb: Tip: Quick Hint You only need 2 blocks for this:

• One <p> block
• One <a> block inside it

---

Step 3: Create Your Ingredients List (10 minutes)

1. Add a subheading <h2> with text "Ingredients"
2. Use an Unordered List <ul> block
3. Add each ingredient as a list item <li>
4. Include quantities (e.g., "2 eggs", "1 cup flour")

:bulb: Tip: List Formatting Unordered lists create bullet points - perfect for ingredients where order doesn't matter!

---

Step 4: Build Your Recipe Steps (15 minutes)

1. Add another subheading <h2> with text "Instructions"
2. Use an Ordered List <ol> block
3. Add each cooking step as a numbered item <li>
4. Include images for important steps

:bulb: Tip: Step-by-Step Success

• Keep each step short and clear
• Start with action words like "Mix", "Add", "Bake"
• Include cooking times and temperatures

---

Step 5: Add Detailed Descriptions (10 minutes)

1. For each step that needs more detail
2. Add a <p> paragraph block after the list item
3. Include helpful tips or warnings

---

Step 6: Create Visual Spacing (5 minutes)

To make your recipe easier to read, add spacing between sections:

:bulb: Tip: Spacing Tips Use <br /> tags to create line breaks between:

• Your title and ingredients
• Ingredients and instructions
• Each major step in complex recipes

:bulb: Tips for Success

:bulb: Tip: Recipe Best Practices

• Choose a simple recipe with 5-8 ingredients maximum
• Use unordered lists (<ul>) for ingredients - order doesn't matter!
• Use ordered lists (<ol>) for cooking steps - order is important!
• Include at least 2-3 images to show key steps
• Write clear, short instructions that are easy to follow
• Add proper spacing with <br /> tags for readability
• Test your links before submitting

---

:wrench: Troubleshooting

Having trouble? Here are solutions to common issues:

My list items aren't showing up

• Make sure each <li> block is inside a <ul> or <ol> block
• Check that you've closed all your tags properly

My images aren't displaying

• Verify your image URL is correct
• Make sure you're using the <img> block with the src attribute

My link isn't working

• Check that your <a> block has the href attribute
• Make sure the URL starts with http:// or https://

My spacing looks wrong

• Use <br /> tags between sections
• Don't put too many <br /> tags in a row

---

:white_check_mark: Final Checklist

Before submitting, make sure your recipe has:

• A clear title using <h1>
• A link to the original recipe source
• An ingredients list using <ul> and <li>
• Step-by-step instructions using <ol> and <li>
• At least 2 images showing the recipe
• Proper spacing between sections
• All links and images working correctly

---

:emoji: Submit Your Project

:warning: Ready to Submit? When you have completed your HTML Food Recipe project:

:dart: Submit Your Project Here

Make sure to test your webpage first - all elements should work properly!

:information_source: Submission Tips

1. Preview your recipe in EduBlocks
2. Check that all images load
3. Test all links
4. Copy your project URL
5. Submit through the form above

Great job! You've learned how to create organized content using HTML lists! :tada: