Building a Recipe Book
Introduction
You have learned the basics of CSS, including classes, IDs, selectors, properties, and the box model. Now, it’s time to put your skills to the test by incorporating CSS into your recipe book website project. With CSS, you’ll be able to enhance the visual appeal of your website and demonstrate your proficiency in styling web pages. Show off your knowledge by using CSS to make your recipe book look even more amazing!
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
Homepage:
The homepage will serve as an introduction to your website. We’ve given you some ideas as to how you can style your homepage, but if you have better ideas/want to experiment in other ways, feel free to do so! Think of our project details as just a starting template.
The homepage should have:
- A title that says “Welcome to My Recipe Book!” with a custom font.
- The homepage should have an image that represents your website with some border around it.
- The homepage should have a short description that explains what your website is all about with a background color and padding.
- The homepage should have three buttons or links that take the user to each recipe page with a hover effect on each button.
For example, you might lay out your links this:
<body>
<button><a href="recipe1.html"></button>
<button><a href="recipe2.html"></button>
<button><a href="recipe3.html"></button>
</body>Recipe Pages:
With the homepage out of the way, let’s take a look at what we’re going to include on our recipe page! For the most part, our content on this recipe page will be the exact same as what we had on our HTML Recipe Book Project.
Here is what should be on your recipe pages:
- A title that says the name of the recipe
- A picture or two of the recipe
- List of ingredients required for the recipe
- List of instructions to make the recipe
- Link back to the homepage
To find your recipe content 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 up to now in your CSS course. Make sure to use classes, IDs, selectors, properties, and the box model. You can even use some of those fancy :hover that we talked about in our CSS Pseudo-Selectors lesson! Just make sure to style the webpage how you want! Feel free to move things around with what you learned in our Box Model Lesson with margin and padding. It’s all up to you how you style the site!
To make your website visually appealing, you can use color schemes, different font styles, and background images. You can also experiment with different box model properties like margin, padding, and border to create different effects.
If you need any help with your project, you can join our Discord server where we will be able to help you in case something is not working like how you wanted.
Helpful Tips:
- Use classes and IDs to target specific elements on your pages. For example, you can use a class to target all of your recipe titles and give them a custom font style.
- Use selectors to target specific elements based on their tag name, class, or ID. For example, you can use the img selector to target all of your images and add a border around them.
- Use the box model to adjust the spacing between elements. For example, you can use the margin property to add space around your recipe instructions.
- Validate your CSS code using a validator such as the W3C CSS Validator to ensure that your code is error-free and follows best practices.
Find an issue/typo/error with our content? Please report it here