Skip to Content

HTML Project

To complete the HTML section of your tech prep work, you will need to build a simple website using HTML.

The website will consist of a main index page which will have links to a few recipes. The website will not look very pretty by the time you have finished, but we will be moving onto CSS (style!) next.

Requirements

There requirements have also been included in the starter code below as HTML comments. You can use these to organize your work.

  1. Your recipe page should contain a DOCTYPE tag.
  2. Your recipe page should include an html element with a head and body element as children.
  3. You should have a title element within the head element with the text “Recipes.”
  4. You should see an h1 element that has the text Chocolate Fudge.
  5. You should see a related image with an alt attribute.
  6. There should be an h2 element with the text “Description” under the image.
  7. You should see a couple of paragraphs under “Description” that describe the recipe.
  8. There should be an h2 element with the text “Ingredients.”
  9. Under the “Ingredients” heading there should be an unordered list with the ingredients needed for the recipe.
  10. Under the list of ingredients add another heading called “Steps.”
  11. You should see an ordered list with a couple of steps needed to complete the recipe.
  12. Under the steps there should be an h2 element with the text “More Recipes.”
  13. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within.
  14. These anchor elements should have an href attribute with the value set to # (they won’t go anywhere).
⚠️

IMPORTANT - SAVE YOUR WORK

You may choose to complete this project using the code editor below or in your own editor of choice, however you must save your work somewhere permanent (either locally as a file on your computer or on GitHub in a repository) for later reference.

The editor below currently does not have a save feature, so be careful when navigating away from or reloading the page. We recommend using a local editor to complete the project; the editor below is only provided for convenience.


Starter Code

Loading...