Sarah DyeSkillcrush is always working on ways to improve its courses and stay current with what is happening in tech. When I logged into my Skillcrush account to write A Quick Overview to Skillcrush 102: Intro to JavaScript, I noticed a lot of changes from a new dashboard layout to additions to some of their older courses. One of these additions included two new bonus projects for Skillcrush 101.
After the section on building multiple pages, two new sections are added to help students get extra practice with HTML & CSS. The two new bonus projects are recipe cards and a vision board. I got very excited about seeing these bonus projects in Skillcrush 101 and wanted to cover them as a new series.
Today's post marks the return to Skillcrush 101 to build both of the new Skillcrush 101 bonus projects. The first project that I'll be building is the recipe cards website. This one-page site has three recipe cards stacked on top of each other.
This post will be a general overview of the project I will be making. It will also explain 4 new CSS concepts I'll be using to create specific elements on this site.
Let me introduce the project!
Below is an image of what the finished recipe card site will look like. This is a one-page website with all the recipe cards stacked on each other. Skillcrush wants each recipe card to have two lists for the ingredients and directions.
Students also need to include the prep time and cooking time as well as an image of the dish. Skillcrush provides students with the starter code, a design comp, and a style guide to assist them with this project. You won't be able to recreate this project exactly like the design comp, but you can still follow along with this post and make this project. All the content you'll need for this website is 3 recipes and 3 images.
What's new for this project?
Before you can begin writing any code, there are some brand new CSS concepts you need to become familiar with for the recipe card project. While the bonus projects are designed to give students a chance to review HTML & CSS concepts covered in Skillcrush 101, the bonus projects include brand-new CSS properties and values students need to use to do these projects. These concepts are good for developers to know since they will be using them as well in future projects beyond the Skillcrush course.
There are 4 CSS concepts you will need to know for the recipe website. One concept is brand new CSS values for the display property. The other three concepts are three brand-new CSS properties to help style the website to look more like the design comp.
1. Inline-block
We've already talked about inline and block elements in the A Quick Guide to Div and Structural Tags post. You can revisit this blog post below to review what inline and block elements look like.
Although certain elements can be inline or block, developers can use the display property to change the settings. This means I can change a block element such as a li to be inline. I can also change an inline element like an a to have a block value.
All I need to do is change the value in the selector's display property to inline or block. Below is the code I would write to change the h1's default value from block to inline.
h1 {
display: inline;
}
Inline and block aren't the only values you can set in the display property. As you build the recipe card site, you will be setting a new value to the display property. We'll be using the inline-block value on several elements in this project.
==> Click here to see W3Schools CSS Display property resource!
Inline-block elements are a combination of both block and inline values. These elements will be on the same line as other elements in the browser, but developers can make changes to these elements such as adjusting the width, height, and padding. For example, take a look at the Inline, Block, and Inline-Block pen.
Each of the headlines is set with different display values. The first headline's display property is set to inline. The headline is right next to the image.
The second headline's display property is set to block and the headline is underneath the image. The third headline is similar to the first headline since it is next to the image, but I can play around with the margin and padding to add more spacing to this headline.
2. Vertical-align property
One of the images in this project will use the vertical-align property. This property allows developers to change the vertical alignment of elements. When an element's display property is set to inline or inline-block, developers can change the vertical alignment to top, middle, or bottom.
Developers do this to help the elements line up with each other. Take a look at the vertical alignment pen I created. When you look at the CSS, you will see all the classes have the display property set to inline-block.
The display property needs to be set to get elements to vertically align with each other since it serves as a baseline for all the elements to follow. The top, middle, and bottom classes have the vertical-align property set to different values. This causes the pumpkin image to be vertically aligned in different ways on the page.
The top class has the pumpkin image near the top of the page while the bottom class has the image vertically aligned at the bottom of the page. The middle class puts the pumpkin image in the middle of the page.
==> Click here to read the CSS Tricks Vertical Alignment post!
3. Box-sizing property
Many of the elements in this project will use the box-sizing property and border-box value to size some of the elements on the page. When developers set the box-sizing property, this little bit of code tells the computer to include width, height, padding, border, and content. This is important since it makes it easier for developers to adjust the border and padding without making any changes to the width and height.
Instead, the box-sizing property does all the work for them by subtracting the border and padding from the element's width and height. For example, there is a box on a website. The box's width and height are based on the border or padding. What determines the width and height is the content.
If a developer wants to fit this box inside a certain space, they could add any padding or a border. But this will change the element's width and height. So this developer will have to adjust the width and height of the box to ensure it can fit in the space and still have enough room for padding or a border.
I created a pen to demonstrate how the box-sizing property would work on a website. In this pen, I have created two boxes. These boxes have the same width, height, and padding.
Yet the bottom box can look smaller than the one on the top. This is due to the box-sizing property. This property keeps the width and height from changing so it stays the same size and fits in certain spaces. You can look at this pen below.
==> Click here to read the CSS Tricks Box-Sizing post!
4. List-style-type property
The last property you need to know for this project is the list-style-type property. As you make lists, you'll be using these properties to style these lists on the recipe cards. This is a property I often use when I work on websites.
The list-style-type property allows developers to change the markers on list items. So you can change a bullet point to squares or circles. Ordered lists can change the numbers to decimal points, letters, or Roman numerals.
Take a look at this pen below. This pen features a bunch of lists with the markers styled in different ways. To change all the markers in each list, I set the list-style-type property to certain values.
These values tell the computer what needs to be displayed on the browser. There are a lot of different values you can set with the list-style-type property so feel free to play around with the different values listed in the CSS Tricks blog post.
==> Click here to read the CSS Tricks blog post on list-style-type property!
Conclusion
Congratulations! Now you know 4 new CSS properties. These properties will come in handy as you start to add styles to your recipe cards project.
These are also good properties to be familiar with since you will see them again in the future as you work on your projects. Now you are ready to start building the recipe cards site. The next post in this series will concentrate on setting up all the HTML code.
Although Skillcrush provides students with this code already written up for them, we're writing all the HTML for this project. I'll walk you through what tags you need to how you should name your classes and ids.
This post was originally published on October 20, 2020 on the blog BritishPandaChick Codes. I made minor changes to the original post to work here on DEV.
