Introduction
A blog layout is one of the most common website structures used in real-world projects. In this project, you’ll build a clean and responsive blog layout with posts, sidebar, and footer using HTML & CSS.
What You’ll Learn
- Creating a blog layout structure
- Designing blog post cards
- Building a sidebar section
- Using Flexbox for layout
- Adding responsive design
- Structuring a real-world webpage
This one will feel like a real website.
📝 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Blog Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header -->
<header class="header">
<h1>My Blog</h1>
</header>
<!-- Main Content Area -->
<div class="container">
<!-- Blog Posts -->
<main class="posts">
<article class="post">
<h2>First Blog Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#">Read More</a>
</article>
<article class="post">
<h2>Second Blog Post</h2>
<p>Praesent commodo cursus magna, vel scelerisque nisl.</p>
<a href="#">Read More</a>
</article>
<article class="post">
<h2>Third Blog Post</h2>
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
<a href="#">Read More</a>
</article>
</main>
<!-- Sidebar -->
<aside class="sidebar">
<h3>About Me</h3>
<p>I write about web development and programming.</p>
<h3>Categories</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</aside>
</div>
<!-- Footer -->
<footer class="footer">
<p>© 2026 My Blog</p>
</footer>
</body>
</html>
🎨 style.css
body {
font-family: Arial, sans-serif;
margin: 0;
background: #f4f4f4;
}
/* Header */
.header {
background: #333;
color: white;
padding: 20px;
text-align: center;
}
/* Container Layout */
.container {
display: flex;
max-width: 1000px;
margin: 30px auto;
gap: 20px;
}
/* Posts */
.posts {
flex: 3;
}
.post {
background: white;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
}
.post h2 {
margin-top: 0;
}
.post a {
text-decoration: none;
color: #0077ff;
}
.post a:hover {
text-decoration: underline;
}
/* Sidebar */
.sidebar {
flex: 1;
background: white;
padding: 20px;
border-radius: 5px;
}
/* Footer */
.footer {
background: #333;
color: white;
text-align: center;
padding: 15px;
margin-top: 20px;
}
/* Responsive */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
🧩 Step-by-Step Explanation
Step 1: Create the Basic Structure
You start by creating a simple HTML structure with a header, main content area, sidebar, and footer.
<header>→ Website title<main>→ Blog posts<aside>→ Sidebar content<footer>→ Copyright
👉 This structure is commonly used in real blog websites.
Step 2: Add Blog Posts Section
Inside the <main> tag, multiple <article> elements are used.
Each blog post includes:
- Title (
<h2>) - Short description (
<p>) - “Read More” link
👉 This creates a clean card-style blog layout.
Step 3: Create Sidebar
The sidebar is added using the <aside> tag.
It includes:
- About section
- Categories list
👉 Sidebars are useful for navigation and extra information.
Step 4: Apply Flexbox Layout
The .container uses:
display: flex;gap: 20px;
👉 This places:
- Blog posts on the left
- Sidebar on the right
👉 Flexbox makes layout alignment simple and responsive.
Step 5: Style Blog Cards
Each .post has:
- White background
- Padding
- Rounded corners
- Margin between posts
👉 This creates a modern card UI design.
Step 6: Add Responsive Design
Using media query:
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
👉 On small screens:
- Sidebar moves below posts
- Layout becomes mobile-friendly
💡 Real-World Use of Blog Layout
A blog layout like this is widely used in real-world websites such as:
- Personal blogs
- News websites
- Tech tutorial platforms
- Company content sections
Understanding this layout helps you build structured websites that are easy to read and navigate.
👉 Many professional websites use a similar structure with posts and sidebar.
What You Can Modify in This Project
👉 Encourage users to experiment (very important for engagement)
🎨 Design Improvements
- Change colors (dark theme / light theme)
- Add Google Fonts
- Improve spacing and typography
🖼️ Add Images to Blog Posts
<img src="image.jpg" alt="Blog Image">
👉 Makes blog visually attractive
🔗 Make “Read More” Functional
- Link to separate blog pages
- Create multiple HTML files
📱 Improve Responsiveness
- Adjust font sizes for mobile
- Add better spacing for small screens
📌 Add Navigation Menu
- Add navbar in header
- Include links like Home, About, Contact
💡 Advanced Improvements (Optional)
- Add CSS Grid instead of Flexbox
- Add hover effects on cards
- Add animations
⚡ Pro Tips for Better Blog Design
- Keep content readable with proper spacing
- Use consistent font sizes and colors
- Highlight important sections using headings
- Avoid overcrowding the sidebar
- Maintain visual hierarchy
👉 Good design improves user experience and engagement.
🔗 Related Posts
- 👉 Personal Portfolio Website Using HTML & CSS (Beginner Project)
- 👉 Modern Landing Page Design Using HTML & CSS (Step-by-Step Guide)
- 👉 Simple Product Page Design Using HTML & CSS (Beginner Tutorial)
- 👉 CSS Flexbox Complete Guide (Layout Made Easy)
- 👉 CSS Grid Layout Tutorial with Examples
- 👉 Responsive Design in CSS (Media Queries Explained)