Building a Recipe Book
Introduction
You have been diligently learning HTML for the past few lessons, and now it‘s time to put all of your newfound knowledge to the test! With the HTML skills you have acquired, you are now ready to create an amazing recipes book website. The website will display your favorite recipes along with your understanding and knowledge of HTML.
Overview
By the end of this project, you should be:
- Confident with the HTML elements and syntax that we learned the last few lessons
- Able to use what you know in HTML to build projects like this
Creating your Recipe Book
Project Description:
For this recipe book project, you will create a website that showcases different recipes. The website will have multiple pages: a homepage and a recipe page for each recipe.
Homepage:
The homepage will serve as an introduction to your website. Here is what should be included in it:
- The homepage should have a title that says “Welcome to My Recipe Book!”.
- The homepage should have an image that represents your website.
- The homepage should have a short description that explains what your website is all about.
- The homepage should have three buttons or links that take the user to each recipe page.
If you’re confused what we mean about “three buttons or links”, here is some starter code to give you an idea of how to do this:
<body>
<a href="recipe1.html"> <!-- Link to first recipe page -->
<a href="recipe2.html"> <!-- Link to second recipe page -->
<a href="recipe3.html"> <!-- Link to third recipe page -->
</body>Recipe Pages:
Let’s get started on our recipe pages now! Here is what should be included in them:
- Title that says the name of the recipe
- Picture of the recipe.
- List of ingredients required for the recipe.
- List of instructions to make recipe
- Link to the homepage
Additional Info:
- Your homepage should have 3 links/buttons that take you to each recipe page. Remember what we learned about absolute and relative linking in this lesson when you are setting up your links!
- To make things easier, you can use websites like Allrecipes or Yumly to find recipes with all the ingredients and instructions to make them. All you have to do is use that info and put it on a website!
- Try to incorporate everything that you have learned in the last few lessons. Make sure to add plenty of links, headers, images, lists, buttons, etc. This should be your capstone project. Something you can show others to display your knowledge of HTML!
- If you need any help with your project, you can join our discord server where we will be able to help you incase something is not working like how you wanted.
- Your homepage should have 3 links/buttons that take you to each recipe page. Remember what we learned about absolute and relative linking in this lesson when you are setting up your links!
Helpful Tips:
- Use headings to organize your content. For example, use h1 for the title of each page, and h2 for subheadings such as “Ingredients” and “Instructions”.
- Use lists to present your ingredients and recipe instructions. For example, use ul and li elements to create bullet-point lists.
- Use links to connect your pages together. For example, use the anchor tag (a) to create links to other pages on your website.
- Use images to make your website visually appealing. For example, use the img tag to insert images of your recipes.
- Validate your HTML code using a validator such as this HTML checker to ensure that your code is error-free and follows best practices.
Find an issue/typo/error with our content? Please report it here