How to create responsive blog layout in CSS

Last Updated on Oct 10, 2023

Today, we will be creating a responsive blog layout using HTML, CSS, and a little bit of JavaScript. We will create a layout for the blog homepage and the blog posts. Our layout will contain the following:

In this tutorial, we will use four files named index.html, post.html, style.css, and script.js, and an additional two files for the logo and featured image. index.html will be our homepage, and post.html will be used for our blog posts.

HTML (index.html and post.html)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link  rel="stylesheet" href="style.css">
    <title>Responsive Blog Layout in CSS</title>
    <!-- My Font Awesome Kit -->
    <script src="https://kit.fontawesome.com/16c4a07abd.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <nav>
      <div class="navbar" id="navbar">
        <button class="navbar-close" id="navbar-close">&times;</button>
        <a href="./" class="navbar-link"><img src="logo.svg" class="navbar-logo" alt="home"></a>
        <a href="#about" class="navbar-link">About</a>
        <a href="#contact" class="navbar-link">Contact</a>
        <a href="#privacy-policy" class="navbar-link">Privacy Policy</a>
        <a href="#disclaimer" class="navbar-link">Disclaimer</a>
      </div>
      <div class="navbar-small-screen">
        <button id="navbar-open" class="navbar-open"><i class="fas fa-bars"></i></button>
        <a href="./" class="navbar-link"><img src="logo.svg" class="navbar-logo" alt="home"></a>
      </div>
    </nav>
    <script src="script.js"></script>
  </body>
</html>

CSS

/* CSS Reset - Start */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
  background: hsl(0, 0%, 92%);
}
/* CSS Reset - End */

/* Navbar - Start */
.navbar {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: blue;
}
.navbar-logo {
  height: 50px;
  width: auto;
}
.navbar-link {
  padding: 10px 0;
  text-decoration: none;
  color: white;
  font-size: 18px;
  font-weight: 700;
}
.navbar-link:hover {
  color: orange;
}
.navbar-small-screen, .navbar-close {
  display: none;
}

@media screen and (max-width: 992px) {
  .navbar {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 0px;
    visibility: hidden;
    overflow: hidden;
    transition: width .5s, visibility .5s;
  }
  .navbar-link {
    padding: 10px;
  }
  .navbar .navbar-logo {
    display: none;
  }
  .navbar-small-screen {
    display: flex;
    justify-content: space-between;
    background: blue;
  }
  .navbar-open, .navbar-close {
    background: none;
    border: none;
    cursor: pointer;
  }
  .navbar-open {
    padding: 15px;
    font-size: 20px;
    color: white;
  }
  .navbar-close {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    font-size: 40px;
    color: hsl(0, 0%, 80%);
  }
  .navbar-close:hover {
    color: red;
  }
  .show-menu {
    visibility: visible;
    width: 270px;
  }
}
/* Navbar - End */

JavaScript

const openMenuBtn = document.getElementById('navbar-open');
const closeMenuBtn = document.getElementById('navbar-close');

window.addEventListener('click', handleWindowClick);
openMenuBtn.addEventListener('click', handleMenu);
closeMenuBtn.addEventListener('click', handleMenu);

function handleMenu() {
  const navbar = document.getElementById('navbar');
  navbar.classList.toggle('show-menu');
}

function handleWindowClick(e) {
  const navbar = document.getElementById('navbar');
  if(!navbar.contains(e.target) && !openMenuBtn.contains(e.target)) {
    navbar.classList.remove('show-menu');
  }
}

If you need an explanation of the code above, I actually created a tutorial about Responsive Navigation bar using CSS and JavaScript.

Add Responsive Content Layout

index.html (homepage)

<div class="top-container">
  <main class="main-content homepage">
    <div class="blog-post-item">
      Here goes the blog post item...
    </div>
    <div class="blog-post-item">
      Here goes the blog post item...
    </div>
  </main>
  <aside class="side-container">
    <section class="side-content">
      Here goes the side content...
    </section>
    <section class="side-content">
      Here goes the side content... 
    </section>
  </aside>
</div>

post.html (blog post)

<div class="top-container">
  <main class="main-content post">
    Here goes the main content...
  </main>
  <aside class="side-container">
    <section class="side-content">
      Here goes the side content..
    </section>
    <section class="side-content">
      Here goes the side content...
    </section>
  </aside>
</div>

CSS

/* Content Layout - Start*/
.top-container {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}
.main-content {
  flex-basis: 75%;
}
.side-container {
  flex-basis: 25%;
  padding-left: 20px;
}
.main-content, .side-content {
  box-shadow: 0px 0px 8px hsl(0, 0%, 70%);
  background: white;
  margin-bottom: 10px;
}
.side-content {
  padding: 20px;
}

/* For Homepage */
.main-content.homepage {
  display: flex;
  flex-wrap: wrap;
}
.blog-post-item {
  flex-basis: 50%;
  padding: 10px 15px;
}
/* For Blog Post */
.main-content.post {
  padding: 20px;
}

@media screen and (max-width: 992px) {
  .main-content, .side-container, .blog-post-item {
    flex-basis: 100%;
  }
  .top-container, .side-container {
    padding: 20px 0;
  }
}
/* Content Layout - End*/

In our content layout, we used a Responsive Two-column layout using Flexbox twice. One for our top container and one for our homepage.

Add the Main Content

We will make our main content as simple as possible. Our homepage will contain a list of blogs that will have a featured image, blog title, and blog short description, while our blog posts will contain the following: blog title, date, featured image, and paragraphs.

index.html (homepage)

<h1 class="page-title">Homepage</h1>

Insert the code above after the </nav>. We can replace the 'homepage' with our blog category name when creating a page for each category.

Now let's update our main content for our homepage. Update the code below inside our <main>.

<div class="blog-post-item">
  <a href="post.html" class="blog-link">
    <img src="pexels-pixabay-270404.jpg" alt="image1" class="image">
    <h2>Blog Title 1</h2>
  </a>
  <p class="blog-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>		  
</div>
<div class="blog-post-item">
  <a href="post.html" class="blog-link">
    <img src="pexels-pixabay-270404.jpg" alt="image1" class="image">
    <h2>Blog Title 2</h2>
  </a>
  <p class="blog-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>		  
</div>

post.html (blog post)

Now update the blog post content. Update the code below inside our <main>.

<h1 class="blog-title">Here Goes The Blog Title</h1>
<p class="blog-date">Sep 18, 2023</p>
<img src="pexels-pixabay-270404.jpg" alt="image" class="image">
  <div>
    <p class="blog-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p class="blog-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p class="blog-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p class="blog-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p class="blog-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

CSS

/*Content Styling - Start */

/* For Homepage */
.page-title {
  text-align: center;
  margin-top: 12px;
}
.blog-link {
  text-decoration: none;
  color: black;
}
.blog-link:hover {
  color: blue;
}
/* For Blog Post */
.blog-date {
  padding: 5px 0;
  color: hsl(0, 0%, 30%);
}

.blog-text {
  padding: 10px 0;
  line-height: 1.3rem;
  color: hsl(0, 0%, 10%);
}
.image {
  width: 100%;
}

Add the Side Content

We will have 2 side content. One for the about website, and another for a list of blog categories.

HTML (index.html and post.html)

<section class="side-content">
  <h5 class="sidebar-title">About</h5>
  <p class="blog-paragraph">This website's goals is to help you learn, improve, and ...</p>
</section>
<section class="side-content">
  <h5 class="sidebar-title">Categories</h5>
  <ul class="categories-list">
    <li><a href="#0">HTML</a></li>
    <li><a href="#0">CSS</a></li>
    <li><a href="#0">JavaScript</a></li>
    <li><a href="#0">PHP</a></li>
    <li><a href="#0">MySQL</a></li>
  </ul>
</section>

CSS

.sidebar-title {
  font-size: 16px;
}
.categories-list li {
  list-style-type: none;
  padding: 5px 0;
}
.categories-list a {
  text-decoration: none;
  color: hsl(0, 0%, 30%);
}
.categories-list a:hover {
  color: blue;
}

HTML

<footer class="footer">
  &copy;Copyright2023
</footer>

CSS

/* Footer - Start*/
.footer {
  background: hsl(0, 0%, 40%);
  padding: 20px;
  color: white;
  text-align: center;
}
/* Footer - Start*/

Conclusion

In this tutorial, you have learned how to create a blog layout in CSS. We divided our code into 5 sections: responsive navbar, content layout, main content, side content, and the footer.

You will also notice that I extracted some of my code from my other tutorials. It just shows that creating a design layout is not some big design; it is actually created by combining your many small designs and turning them into a whole.

How to create responsive blog layout in CSS

Create the responsive navigation bar

HTML (index.html and post.html)

CSS

JavaScript

Add Responsive Content Layout

index.html (homepage)

post.html (blog post)

CSS

Add the Main Content

index.html (homepage)

post.html (blog post)

CSS

Add the Side Content

HTML (index.html and post.html)

CSS

Finally, Add the Footer

HTML

CSS

Conclusion

How to create responsive navbar using css and JavaScript

How to create a responsive two-column layout using Flexbox

How to make image responsive in CSS

Create a responsive grid layout template in CSS