- HTML
None
- Learning to use various HTML tags
- Receiving and incorporating constructive feedback on a project
In this project you will create a well-designed webpage that displays one of your favorite recipes. It will include the ingredients, the steps needed to make the dish, links to similar recipes, and at least one photo.
Phase 1 of the project involves coding the structure of your webpage using HTML. This includes the ingredients, the steps needed to make the dish, links to similar recipes, and at least one photo.
Phase 2 of the project involves adding styling and pizazz using CSS. This includes changing the font style, font size, colors, and other qualities that interest you.
Phase 3 of the project involves incorporating Bootstrap. You'll add a navigation bar and several other Bootstrap components of your choosing.
Phase 4 of the project involves incorporating jQuery. You'll add at least one interactive element of your choosing.
- You've learned the basic structure of an HTML page
- You've learned the proper syntax for many commonly-used HTML elements
- You've learned how to open an HTML file in Chrome
- Let's put all these things together!
- Create an HTML file
- Code the basic HTML structure
- Add the title of the recipe
- Add a brief background or blurb about the recipe
- Add an unordered list of ingredients
- Add an ordered list of the steps required to make the dish
- Add at least one image
- Add links to similar recipes you found online
- Wrap each section in
<div>tags - Obtain a code review from Techtonica staff once you've fulfilled these requirements
Use the Terminal for navigating around the file system and creating new folders and files. Refer to the lesson on The Command Line Interface if you need guidance on using the Terminal.
When you get to the steps below that ask you to initialize a git repo and track files using git, refer to the lesson on Git and Version Control if you need guidance.
If you do not yet have a directory called techtonica-projects on your Desktop, create one now using the Terminal.
- Navigate to the
techtonica-projectsdirectory. - Create a new directory called
recipe-pagewithin thetechtonica-projectsdirectory. - Navigate to the
recipe-pagedirectory. - Initialize recipe-page as a git repo.
If you have questions, do not disturb your colleagues until you have spent at least 20 minutes troubleshooting on your own. Be sure to format your question using the template we practiced in the Asking Good Questions lesson.
Using the Terminal, ensure you are in the recipe-page directory. Create a new file in this directory called index.html. Open this file in VSCode using the Terminal shortcut to do so.
Using the HTML lesson slides or another online resource, code only the most essential elements for an HTML page (the basic structure). Create a reasonable title given the recipe you are going to showcase. Do not include any code within the <body> tags yet.
PAUSE. Obtain a code review from Techtonica staff.
Once your code is approved by Techtonica staff, navigate to the recipe-page directory and run git status. You should see changes that need to be added and committed. Add and commit them, making sure to write a descriptive commit message in the present tense, such as "Code basic HTML structure."
Using either the <h1> or <h2> header tags, create a header within the <body> tags that displays the title of your recipe.
Open index.html in Chrome to verify that this works.
Once you can see that adding the title worked, run git status. You should see changes that need to be added and committed. Add and commit them, making sure to write a descriptive commit message in the present tense, such as "Add recipe title."
Using the <p> paragraph tags, write a little blurb or background story about the recipe underneath the title. It doesn't need to be long; a few sentences will do. Don't worry about how the text looks on the webpage. We'll make things more readable when we style the text with CSS in Phase 2 of the project!
Refresh index.html in Chrome by pressing <COMMAND> + r.
Once you can see that adding the blurb worked, run git status. You should see changes that need to be added and committed. Add and commit them, making sure to write a descriptive commit message in the present tense, such as "Add recipe description."
Using the <ul> unordered list tags and the <li> list item tags, list the ingredients in the order that they will be used in the recipe. Be sure to include the amount you need of each ingredient!
Refresh index.html in Chrome by pressing <COMMAND> + r to make sure the list appears as you intended.
PAUSE. Obtain a code review from Techtonica staff.
Once your code is approved by Techtonica staff, run git status. You should see changes that need to be added and committed. Add and commit them, making sure to write a descriptive commit message in the present tense, such as "Add list of ingredients."
Using the <ol> ordered list tags and the <li> list item tags, list the steps that are involved in creating the dish.
- If there are distinct parts to the recipe, such as "make frosting" and "make the cupcakes", feel free to use sub-headings and multiple ordered lists to clearly show which steps go with which parts of the recipe.
Refresh index.html in Chrome by pressing <COMMAND> + r.
Once you can see that adding the list of steps worked, run git status. You should see changes that need to be added and committed. Add and commit them, making sure to write a descriptive commit message in the present tense, such as "Add recipe instructions."
Using the <img> image tag, add an image between the blurb and the list of ingredients.
This should be an image you find online. Do a Google search for "(name of dish) image", like "spaghetti image". Click on the "Images" tab in the upper left (it's just to the right of "All"). When you find an image you like, click on it to see a larger version. Make sure that the width of the image is at least 600 pixels. Then, click on the "View Image" button. Doing this will open a new tab that contains only the image. Copy the URL that appears in the search bar -- this is the URL you can use inside the `src` attribute of your `img` tag!
Here's a short video that walks you through the steps given above.
- You'll need to use the
srcattribute inside the<img>tag in order to specify the URL where the image is hosted. - Specify the width of the image to be 600px using the
"width"attribute.
Underneath the image, include a photo credit that links to the source of the image. This just means to link to the main website that originally posted the image. It could be a food blogger's website or something similar. Hint: You'll need to use a combination of tags for this! You can find the URL of the image's owner by clicking on the "Visit" button instead of the "View Image" button:
PAUSE. Obtain a code review from Techtonica staff.
Once your code is approved by Techtonica staff, run git status. You should see changes that need to be added and committed. Add and commit them, making sure to write a descriptive commit message in the present tense, such as "Add image and image credit."
Place at least 2 links to similar recipes online underneath the recipe's instructions. Refresh the webpage to make sure it worked.
Once you can see that adding the external links worked, run git status. You should see changes that need to be added and committed. Add and commit them, making sure to write a descriptive commit message in the present tense, such as "Add links to more recipes."
Wrap each section (listed below) in its own pair of <div> tags:
- The title and blurb/description. Give this div the class
top. - The image(s) and photo credit(s)
- The list of ingredients
- The list of steps required to make the dish
- The external links to similar recipes
Make sure you maintain the proper levels of indentation after adding the <div> tags!
Let's do another layer of <div>s so we can ultimately use CSS to form this layout:
- Create another
<div>that wraps around both the image/photo credit div and the ingredients div. Give this new, outer<div>the classleft. It should look similar to this:
<div class="left">
<div>
<!-- Image and photo credit go here -->
</div>
<div>
<!-- Ingredients go here -->
</div>
</div>- Create another
<div>that wraps around both the instructions div and the external links div. Give this new, outer<div>the classright. It should look similar to this:
<div class="right">
<div>
<!-- Instructions go here -->
</div>
<div>
<!-- External links go here -->
</div>
</div>PAUSE. Obtain a code review from Techtonica staff.
Once your code is approved by Techtonica staff, run git status. You should see changes that need to be added and committed. Add and commit them, making sure to write a descriptive commit message in the present tense, such as "Put each section in its own div."
- What, if anything, was challening about this phase of the project?
- What did you enjoy the most while working on this phase of the project?
- What questions came to mind as you were working through the steps?
- If you were to explain to a bright child what you worked on during the phase, what would you tell them?
- Using w3Schools or another online resource, incorporate more features into your recipe page using HTML tags. Some ideas:
<table>,<th>,<tr>,<td><button>(Maybe turn external recipe links at the bottom of the page into buttons?)<footer><hr>
- Insert a YouTube video of someone showing how to make the dish