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.
- Your recipe page should contain a
DOCTYPE
tag. - Your recipe page should include an
html
element with ahead
andbody
element as children. - You should have a
title
element within thehead
element with the text “Recipes.” - You should see an
h1
element that has the textChocolate Fudge
. - You should see a related image with an
alt
attribute. - There should be an
h2
element with the text “Description” under the image. - You should see a couple of paragraphs under “Description” that describe the recipe.
- There should be an
h2
element with the text “Ingredients.” - Under the “Ingredients” heading there should be an unordered list with the ingredients needed for the recipe.
- Under the list of ingredients add another heading called “Steps.”
- You should see an ordered list with a couple of steps needed to complete the recipe.
- Under the steps there should be an
h2
element with the text “More Recipes.” - 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.
- 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.