Skip to content

HTML Practice 3

Design and build a beautiful, fully-structured HTML recipe page for your favorite dish.

This challenge will test your knowledge of semantic HTML, images, links, and colors while encouraging creativity in styling. You will need to structure your page clearly and use good coding practices, ensuring the page is both accessible and visually appealing.

  1. Semantic HTML: Use proper semantic tags (<header>, <section>, <article>, <footer>, etc.) to structure your content logically.

  2. Recipe Title & Image: Display the recipe name as a heading (<h1>) and include an image of the finished dish.

  3. Ingredients List: Use an unordered list (<ul>) to show the ingredients.

  4. Instructions: Provide step-by-step cooking instructions using an ordered list (<ol>).

  5. Nutritional Information: Include a section for nutritional facts (like calories, proteins, fats, etc.) using a table (<table>).

  6. Links: Add at least one link, either to a cooking tutorial, a similar recipe, or a product used in your recipe (use the <a> tag).

  7. Colors: Style the page with vibrant colors using inline styles or external CSS. Use hex, RGB, or RGBA color formats.

  8. Accessibility: Add alt text for images, and make sure the text is readable with contrasting colors.

  9. Footer: Include a footer with your name, the recipe source (if applicable), and a copyright statement.


Attach the file (recipe.html) to the classroom link created for the assignment.