Sarah DyeYou are now ready to tackle the CSS for your vision board project. Now that the structural HTML is ready to go, you are going to turn your attention to the main.css file and start adding CSS to your vision board project. Although we will be working mostly in the main.css file today, you will still be working in the index.html file by adding new class names to your div tags.
By the end of this post, your vision board project will look like this. So open your text editor and get your code files ready to go. You will want your index.html and main.css files open in different tabs so you can refer to them throughout this project and go back and forth between these files easily. You will also want your style guide documentation open either in your text editor or on your browser since we will be referring to it often as we style the vision board website.
Objective One: Add the large-block and small-block classes to your HTML file.
Let’s start by adding two new class names to our div tags. Inside your index.html, you are going to add new class names to each of your div tags. Certain div tags are going to get the class name large-block while others will get the small-block class name. These classes are going to help us with getting the box sizes to match the ones in the design comp.
- First, we are going to add the small-block class name to the div tags that have a small block size. Six div tags will have the small-block class. Go to div one and add the small-block class name after block.
Repeat with div tags two, three, seven, eight, and nine. Save your index.html file when you are done.
/* Div Two */
<div class="block small-block">
<img src="img/flower.png" alt="flower">
</div>
/* Div Three */
<div class="block small-block">
<p>HTML<br>
CSS<br>
JavaScript<br>
WordPress<br>
Python
</p>
</div>
/* Div Seven */
<div class="block small-block">
<p>Walk Dog ++<br>
Meditate<br>
Yoga<br>
Snuggle Pup
</p>
</div>
/* Div Eight */
<div class="block small-block">
<img src="img/doggo.png" alt="dog">
</div>
/* Div Nine*/
<div class="block small-block">
<p><span class="highlight">Mind & Body</span></p>
<p>Exercise More<br>& Find Zen in<br>
<strong>Challenge</strong></p>
</div>
- Now you are going to add the large-block classes. There will be only 3 div tags that need the large-block class. Div tags four, five, and six all use this class.
Inside your index.html file, add the large-block class name after block in div tag four. Repeat this with div tags five and six. Save your index.html file when you are done.
/* Div Four */
<div class="block large-block">
<p><span class="highlight">Freelance</span></p>
<p>Make Enough Side Cash to<br><strong>Pay off debt</strong></p>
<img src="img/piggy.png" alt="piggy bank">
</div>
/* Div Five */
<div class="block large-block">
<img src="img/eye.png" alt="eye">
<p class="title"><span class="marker">2020</span><br>Vision Board</p>
</div>
/* Div Six */
<div class="block large-block">
<img src="img/plane.png" alt="airplane">
<p><span class="highlight">Travel</span></p>
<p>Plan A Trip Where I Can<br><strong>Work Remotely</strong></p>
</div>
Objective Two: Add background color.
The design comp has the vision board centered in the middle of the page with a background color in the background. Before we start working on the vision board, let’s change the background color of the site. In your main.css file, create a selector called body.
Inside the body selector, add the background-color property. Set the background color to the hex code specified in the style guide documentation. Save your main.css file.
body {
background: #E8E8E8;
}
Objective Three: Set styles for the block class.
1.Add a new selector to your main.css file. Call this new selector block. Inside the block selector, put the width and float properties.
Set the float property to left. You will need to set the width value to 400px.
2.We need one more property in the block class. Add the box-sizing property inside the block selector. Set the value of this property to border-box.
Border-box will add padding to the element without changing the total size. If you need to refresh your memory about the box-sizing property, head over to this post to review the property and see an example. Save your main.css file.
.block {
float: left;
box-sizing: border-box;
width: 400px;
}
Objective Four: Style the Vision Board.
1.Now let’s turn our attention to the vision board. Inside your main.css file, create a new selector called vision-board. Use the # sign to let the computer know we are calling the div with the id vision-board. There are going to be a lot of CSS properties inside this selector so let’s tackle them one by one.
2.Up first is the width and height properties. Add the width and height properties to the vision board selector you just created. Set the width property to 1200px. Have the height property set to 850px.
3.The next property we are going to add is the overflow property. Set the overflow property to auto.
4.Skillcrush wants a background image for the vision board. Add the background-image property to the vision-board selector. Put url() as the value of the background-image property.
Inside the parentheses, you will want to put the link to your background-image. I’m using the background.png image from the Skillcrush starter code files, but you can use any image you like here.
5.We want the background image to cover as much space as possible on the site. Add the background-size property to the vision board selector. Set the value to cover.
6.The last thing you need to do is change the fonts. Add the font-family property. Set the value to the font specified in the style guide documentation.
7.Add the text-transform property. Set the text-transform to uppercase.
8.Save your main.css file and check your vision board website in the browser. The website should now have a background image and the boxes will no longer be stacked on top of each other. If you don’t see this, double-check the values you set for your CSS properties.
vision-board {
width: 1200px;
height: 850px;
overflow: auto;
background: url('../img/background.png');
background-size: cover;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
}
Objective Five: Set styles for large-block and small-block classes.
1.Now that you have the large-block and small-block classes in your index.html file, it is time to set the styles for these two classes. Inside your main.css file, add a new selector called large-block. Inside the large-block selector, set the value to 430px.
2.Create the small-block selector. Add the height property inside and set it to 210px.
3.Save your main.css file and look at your vision board website in the browser. The height of these boxes will now change to be smaller or taller.
.small-block {
height: 210px;
}
.large-block {
height: 430px;
}
Objective Six: Align your text.
The last thing we need to do is align our text. Each box is going to have a different kind of text alignment. So you will need to use class names to help set the alignment of different boxes.
1.In your main.css file, create a new selector called center. Inside the center selector, set the text-align property to center.
2.Underneath the center selector, create a new selector called right. Inside the right selector, add the text-align property. Set the text-align property to right. Save your main.css file.
3.Go to your index.html file. You are now going to add the center class to the div tags that need to be centered on the page. 5 div tags use the center class.
You will add the center class to divs two, three, five, seven, and eight. Add the right class to these div tags.
4.The last thing we are going to do is add the right class to our div tags. Divs six and nine have the right class. Add the right class to these div tags.
5.Save your index.html file. Open your vision board project in the browser. Certain blocks on the vision board will be aligned center or right on the page.
.center {
text-align: center;
}
.right {
text-align: right;
}
Conclusion
Congratulations! You have finished all the objectives in this post. We have some of the CSS on the vision board project.
Now your vision board is slowly starting to look like the design comp Skillcrush has created. If you have run into any issues, always double-check your CSS properties and punctuation for your selectors. We are in the home stretch with the vision board project.
In the next post, we will be adding the last bit of CSS. Some of the things we will be doing include changing background colors, adding highlights to different text components, and getting the spacing just right for different elements. Then we will double-check our CSS code to make sure it is valid before we publish it to the web.
This post was originally published on September 12, 2021 on CodeNewbie. I made minor changes to the original post to work here on DEV.
