Let's Code A Responsive Blog From Scratch!
It's finally time to put our CSS skills to the test by turning our plain ol' HTML blog into a real beauty! By the end of this tutorial, you will possess the following skillset.
First, A quick recap!
For those of you joining us for the first time, this is what we did over the past two weeks.
<!DOCTYPE html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Home Page</title>
</head>
<body>
<header id="page-header">
<h1 id="blog-title">Welcome To Ijeoma's Blog</h1>
<p class="blog-description">A place where you can learn about web development in bite-size chunks!</p>
</header>
<main id="blog-section">
<section class="blog-content-section">
<article>
<header class="blog-header-1">
<h2 class="blog-title">10 Reasons Why You Must Be On LinkedIn!</h2>
</header>
<p class="blog-content">If there's ever a time to get serious about your professional growth, it's now. With the rising
costs of living...
</p>
<p class="read-more"><a class="read-more-btn" href="#">read more</a></p>
</article>
</section>
<section class="blog-content-section">
<article>
<header class="blog-header-2">
<h2 class="blog-title">How to dress for success and still be you.</h2>
</header>
<p class="blog-content">Is a blazer too much for smart/casual, are open toes sandals too informal and can you
get away with shorts if it's sweltering outside?
</p>
<p class="read-more"><a class="read-more-btn" href="#">read more</a></p>
</article>
</section>
<section class="blog-content-section">
<article>
<header class="blog-header-3">
<h2 class="blog-title">7 Interview Tips That Will Get You Hired.</h2>
</header>
<p class="blog-content">Interviews don't have to be so daunting. In this article, we'll share 7 powerful tips
that will land you that position!
</p>
<p class="read-more"><a class="read-more-btn" href="#">read more</a></p>
</article>
</section>
</main>
<footer>
Copyright ? 2022 | Ijeoma Nelson
</footer>
</body>
</html>
I recommend that you go and watch the videos and read the articles so that you can follow along, as this tutorial focuses on the CSS part of our blog creation.
Here are the links to the previous tutorials:
Styling With CSS
After the closing </title> tag and before the closing </head> tag, open and close the <style> tag, like so.
<style>
</style>
This is how we include CSS in our HTML code.
We finished the previous lesson by styling our blog header and description as shown below.
#page-header {
background-color: #feaca0;
padding-top: 30px;
padding-bottom: 30px;
}
#blog-title {
text-align: center;
font-size: 42px;
text-transform: uppercase;
letter-spacing: 3px;
}
Now, we'll continue to style the rest of our blog.
Write the following code after the blog-title code block.
.blog-content-section {
text-align: center;
margin-bottom: 100px;
}
Here we're telling the browser to centre-align all the text contained in this section. And then we're also giving it a margin of 100px, creating some space before the next piece of content.
Next, we'll style the first blog header section and to do that, type the following code into your code editor.
.blog-header-1 {
font-size: 27px;
margin: 25px 0 25px 0;
padding: 25px 0 25px 0;
background: url('./marissa-grootes-vdaJJbls3xE-unsplash.jpg') no-repeat center center/cover;
width: 50%;
display: inline-block;
text-align: center;
color: #feaca0;
}
The font size is increased to 27px. To create some space on the top and bottom of this element we give it a margin of 25px top, 0px right, 25px bottom and 0px left. Then we add some padding to create space around the blog title. The padding is 25px top, 0px right, 25px bottom and 0px left.
We also add a background image to our blog header section. You can download the royalty-free image here. After downloading the image, move it inside your HTML_Sandbox folder so that you can access it within this project.
The width is set to 50% of the screen size and this helps with the responsiveness. The display: inline-block is what allows us to set a width to this header element.
Text-align: center, centers the blog title and then we finish by setting the font colour to the hex feaca0.
Now, we'll repeat this step for the remaining blog header sections. Write the following code into your code editor.
.blog-header-2 {
font-size: 27px;
margin: 25px 0 25px 0;
padding: 25px 0 25px 0;
background: url('./jonathan-francisca-HY-Nr7GQs3k-unsplash.jpg') no-repeat center center/cover;
width: 50%;
display: inline-block;
text-align: center;
color: #feaca0;
}
.blog-header-3 {
font-size: 27px;
margin: 25px 0 25px 0;
padding: 25px 0 25px 0;
background: url('./cytonn-photography-n95VMLxqM2I-unsplash.jpg') no-repeat center center/cover;
width: 50%;
display: inline-block;
text-align: center;
color: #feaca0;
}
领英推荐
Making it a little fancy!
CSS makes it incredibly easy to take the ordinary and make it a bit more special. Let's add a hover effect to the header so that the background and text change colours when you hover your mouse over them.
To do that, write the following code after the last block of code.
.blog-header-1:hover,
.blog-header-2:hover,
.blog-header-3:hover {
background: none;
background-color: #feaca0;
color: #fff;
cursor: pointer;
}
Notice how we're targeting all the blog headers at once?
That's because, in programming, we don't like to repeat ourselves.
Here we add the psuedo class :hover to the HTML selector .blog-header-1, and 3. This tells the browser to only trigger this block of code when the user interacts with this element with a pointing device like a mouse.
CSS allows you to target multiple HTML selectors and apply the same styling to them. Unlike our header section which contained unique background images for each one, the hover transitions have the same styles and this is why we're targeting them all at once. Otherwise, we would have to write exactly the same code for each blog header and that's bad practice.
Each time someone hovers over our blog header section, the background image will be replaced by a solid colour. The colour of the blog title will be set to white and the mouse cursor will change to a pointer.
Content is King
Our blog page contains snippets of the articles, with a clickable read more button. Let's style that now.
Write the following block of code in your code editor.
.blog-content {
font-size: 20px;
width: 50%;
display: inline-block;
line-height: 1.7;
}
We increase the font-size to 20px and set a width of 50% to correspond with the header section. As you remember from the last time, the display: inline-block; allows us to set a width for this element. The line-height property adds some space between the text so that when it's in mobile mode they're not all squished together. This increases legibility.
Next, we create some space between the blog text and the top of the read more button by 40px. Write the following code into your code editor.
.read-more {
margin-top: 40px;
}
To style the button, write the following code.
.read-more-btn {
background-color: #000;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
padding: 20px 30px;
}
The text-decoration property is one we haven't used before. When set to the value of none, it removes the underline that the browser applies to all links.
We now need to apply the CSS pseudo-class, :hover, to the button so that it changes colour when you hover over it with a mouse. And to do this, write the following code.
.read-more-btn:hover {
background-color: #feaca0;
color: #000;
}
Every time someone hovers over the read more button, the background changes to the colour #feaca0 and the text colour becomes white.
By now, our blog page looks pretty good, but it's not complete as we still need to style the footer. To do this, write the following code in your code editor.
footer {
background-color: #000;
color: #fff;
text-align: center;
padding: 15px 0 15px 0;
letter-spacing: 1px;
}
Here, we begin by setting the background-color to #000, which is the hex color for black. The text is set to white and we centre-align it. We add some padding to the top and bottom so that the text can breathe. And finally, we space out the letters so that they're easier to read.
Final Thoughts
Congratulations on finishing this tutorial!
If you've coded along, you should now have something that looks like this.
Electrical Engineer | Energy Auditor | Revenue Protection Expert
1 年Thank you Ijeoma Nelson for your wonderful HTML/CSS tutorial.
When setting the color property in CSS, remember to use the American spelling of color rather than the British colour. I can't tell you how many times I fell for that when I first started to code.