Sarah DyeWe are ready to wrap up the recipe card project in Skillcrush 101. In today’s post, you will add the last bit of CSS you will need for your site. These additions include a two-column layout so the ingredients and directions are in two columns. The last thing you will do in this post is run your style.css code through a validator to see if there are any errors in your style.css file and make the last round of edits before publishing your recipe card site to the web.
Let’s get started by opening your text editor and getting our files ready to go. You will need your style.css file open, but you will also need the index.html file open in another tab so you can refer to it throughout this post. You will also want the style guide open.
You can either have the style-guide.md file open in your text editor or have the style-guide.md documentation from How to Set Up Recipe Cards HTML File open in your browser. The other item we will need for this post is the W3C CSS Validation Service. The W3C CSS Validation Service will test your CSS code for any errors. You will learn more about this site later in this post, but you can keep this site open in a tab on your browser.
==> Click here to access the W3C CSS Validation Service!
Objective One: Make a Two-Column Layout
We are going to start this post by creating the two-column layout for the instructions and directions. Inside your style.css file, create a new selector called .columns. Inside your new .columns class, we are going to clear the floats. Add the overflow property and set it to auto.
Let’s make new selectors for the directions and ingredients elements. Create a new selector called .directions. The .directions selector will have two properties.
Inside your .directions selector, add the float and width property. Set the float property to left. Have the width property set to 240px.
- Underneath your .directions selector, create a selector called .ingredients. This selector will need 3 CSS properties inside. Inside the .ingredients selector, add the float, width, and margin-right properties.
Set the float property to the left while the width property needs to be set to 205px. The margin-right property needs to be set to 15px.
- Save your style.css file and take a look at your recipe card website in the browser. There will be two columns on the site. The margin-right property helps create some spacing between the columns. If you are having any issues, double-check your CSS properties and selectors.
.columns {
overflow: auto;
}
.directions {
float: left;
width: 240px;
}
.ingredients {
float: left;
margin-right: 15px;
width: 205px;
}
Objective Two: Style the h3 tag
1.Now that we have columns, we are going to start styling the text inside the columns. Up first is the h3 headlines used for the directions and ingredients sections. Create a new selector called .recipe h3.
Inside your .recipe h3 selector, you are going to add the font-size, font-family, and color properties. Set the values for these properties using the style-guide.md documentation. Skillcrush offers students a couple of hints in this step such as the font size matching the smaller font size used in the style guide and the h3 headline using the hex code for red.
2.Add the padding property inside your .recipe h3 selector. Set the value to 6px.
3.You are now going to create a thin border around the top and bottom of the box the headline sits in. Inside your .recipe h3 selector, add border-width, border-style, and border-color properties. Skillcrush wants the border to match the other borders we have used already on the website.
Set the border-width to 1px. Border-style needs to be set to solid while the border-color property needs to use the hex code listed in the style-guide.md documentation. Don’t forget you can simplify this step even more by just using the border property and setting all the values for the border width, border style, and border color together. Make sure you put the border-width first, the border-style second, and border-color should be last.
.recipe h3 {
border: 1px solid #F16059;
}
4.The last thing we need for this headline is to have the text bold and uppercase. Add the text-transform and font-weight properties to the .recipe h3 selector. Set the text-transform property to uppercase. The font-weight property needs to be set to bold.
5.Save your style.css file and check your website in the browser. There is now a thin border at the top and bottom of the box the directions and ingredients headlines are sitting in. The headlines will now look just like the ones used in the design comp. If you are running into any issues, make sure you double-check your selectors and CSS properties.
.recipe h3 {
padding: 6px;
border-width: 1px 0;
border-style: solid;
border-color: #3B3B3B;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #F16059;
}
Objective Three: Style the text in the ingredients class
1.All that is left to do is style the text inside our columns. We are going to start with the text inside the ingredients class. Make a new selector called .ingredients ul.
Inside the .ingredients ul, add the line-height and padding-left properties. Set the line-height property to 24px. We need these properties to reduce the padding we are using.
The default view on browsers comes with lots of padding so developers can use CSS to reduce the padding on sites. On this site, we want to reduce the padding on the left side of the page. Set the padding-left property to 15px.
2.Skillcrush wants students to change the bullet points from circles to squares. Inside the .ingredients ul selector, add the list-style-type property. Set the property to square.
3.Save your style.css file and check your site in your browser. The bullet points will now be square and there will be a little bit of spacing between the bullet points and your list text.
.ingredients ul {
padding-left: 15px;
line-height: 24px;
list-style-type: square;
}
Objective Four: Style the text in the directions class
1.We have one more thing to build on this recipe card website. The last thing we need to style is the directions inside the recipe cards. First, create our last selector called .directions ol.
This will target the ordered list inside the directions. We will need two CSS properties inside of this selector. Add padding-left and line-height properties.
Skillcrush wants the values for these properties to be similar to the ones you used in your .ingredients ul selector. Set the padding-left property to 15px and set the line-height to 24px.
2.Save your style.css file and look at the recipe card website in the browser. The list items in the ol tag should now have some spacing on the left side. When I tested my site in the browser, I noticed that my layout was breaking.
To fix this issue, I changed the line-height property for the .directions ol selector from 24px to 22px. If you are encountering layout issues, Skillcrush says line-height can be the culprit so they recommend students lower line-height values to see what works.
3.Save your style.css file again and double-check your website in the browser. If you run into any issues, play around with the values you set for your line-height and padding.
.directions ol {
padding-left: 15px;
line-height: 22px;
}
Objective Five: Validate your code
You are officially now building your recipe card website. Although it may seem like you are finished for the day, there is one last step you need to do with this project. This is making sure the CSS code is valid and there are no errors.
We can check for errors using the W3C CSS Validation Service. Go to the tab that has the link to W3C CSS Validation Service open. The site has different tabs you can use.
You can either test your CSS code using the address of the site you want to test the file, upload the file, or direct input. You can use any method you like here, but I’m using the direct input method to copy-paste my CSS code. Once you have added your CSS code, click the check button.
The site will then test your code for you and take you to a result page. This page will either tell you what errors you have in your CSS code or you will get a green banner telling you that no errors have been found. If you run into any errors, go back to your style.css file and fix the errors.
Then upload your code again and run the test again. You can do this test as many times as you like. The goal here is to get the green banner telling you that there were no errors in your code.
Conclusion
Congratulations! Your recipe cards website is officially done! All that is left for you to do is publish your website to the web and add the project to your developer portfolio.
You can use the What You Need to Know About Domain and Hosting post to help you get your recipe card website live on the web. If you don’t want to buy a domain or hosting, you can also publish your project in a pen on CodePen. Below is a link to the pen for the recipe card project I made for this tutorial.
There’s one more project left in the Skillcrush 101 course. Up next is the vision board project. In this bonus project, you will be building a vision board website using HTML and CSS. This is another great project you can use in your developer portfolio as well as get more practice with HTML and CSS.
This post was originally published on August 17, 2021 on CodeNewbie. I made minor changes to the original post to work here on DEV.
