Build a Responsive Blog Layout | Lecture 49

Let’s begin with Lecture 49 of the HTML5 & CSS3 series. Build a Complete Responsive Blog Layout – Real-World Project. This lecture is for absolute beginners; even kids can follow along and understand.

Table of Contents

🎯 Objective:

By the end of this lecture, you will:

Combine everything you’ve learned into a real-world blog layout
Use semantic HTML , CSS Grid , Flexbox , and media queries together
Create a full page with a header , sidebar , main content , and footer
Add a contact form or comment section at the bottom
Make your layout look great on desktops, tablets, and phones
Have a complete website template to reuse for future projects!

🧱 What You’ll Learn in This Project

SKILL	USE IN THIS PROJECT
Semantic Tags	`<header>`,`<nav>`,`<main>`,`<aside>`,`<footer>`
CSS Grid	For main layout (columns)
Flexbox	For navbars, buttons, cards
Media Queries	Responsive design for mobile
Form Styling	Styled contact form from previous lecture
JavaScript Interaction	Toggle dark mode or menu

Think of it like this:

If all your coding skills are puzzle pieces, today you’re putting them together to make a beautiful picture — your first real website layout !

💻 Try This: Build a Full Blog Layout

Let’s create a new HTML file that shows a responsive blog layout .

Step 1: Create a New File

In your VS Code project folder (MyFirstWebsite), create a new file named:

blog-layout.html

Step 2: Add This Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>My Responsive Blog</title>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --text-color: #333;
            --bg-color: #f9f9f9;
            --card-bg: white;
            --spacing-sm: 10px;
            --spacing-md: 20px;
            --spacing-lg: 40px;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
        }

        header {
            background-color: var(--primary-color);
            color: white;
            padding: var(--spacing-lg);
            text-align: center;
        }

        nav {
            display: flex;
            justify-content: center;
            gap: var(--spacing-md);
            background-color: #2c3e50;
            padding: var(--spacing-sm);
        }

        nav a {
            color: white;
            text-decoration: none;
            font-weight: bold;
        }

        nav a:hover {
            text-decoration: underline;
        }

        .container {
            max-width: 1200px;
            margin: auto;
            padding: var(--spacing-lg);
            display: grid;
            grid-template-columns: 1fr 3fr;
            gap: var(--spacing-lg);
        }

        aside {
            background-color: white;
            padding: var(--spacing-md);
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        aside h3 {
            margin-bottom: var(--spacing-sm);
        }

        main {
            background-color: white;
            padding: var(--spacing-md);
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .post {
            margin-bottom: var(--spacing-md);
        }

        .post h2 {
            color: var(--primary-color);
            margin-bottom: var(--spacing-sm);
        }

        .post p {
            margin-bottom: var(--spacing-sm);
        }

        footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: var(--spacing-md);
            margin-top: var(--spacing-lg);
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .container {
                grid-template-columns: 1fr;
            }

            aside {
                order: -1; /* Show before main on small screens */
            }
        }

        @media (max-width: 768px) {
            nav {
                flex-direction: column;
                align-items: center;
            }
        }

        /* Dark Mode */
        .dark-mode {
            background-color: #1e1e1e;
            color: #eee;
        }

        .dark-mode header,
        .dark-mode .container > *,
        .dark-mode footer,
        .dark-mode aside {
            background-color: #2d2d2d;
            color: #eee;
        }
    </style>
</head>
<body>

    <!-- Header -->
    <header>
        <h1>My Awesome Blog</h1>
        <p>Sharing my journey in web development</p>
    </header>

    <!-- Navigation -->
    <nav>
        <a href="#">Home</a>
        <a href="#">About Me</a>
        <a href="#">Contact</a>
    </nav>

    <!-- Main Content & Sidebar -->
    <div class="container">
        <!-- Sidebar -->
        <aside>
            <h3>About Me</h3>
            <p>Hello! I'm Alex, a young developer learning HTML, CSS, and JavaScript.</p>

            <h3>Categories</h3>
            <ul style="list-style: none; padding-left: 0;">
                <li><a href="#" style="color: var(--primary-color);">Web Development</a></li>
                <li><a href="#" style="color: var(--primary-color);">HTML & CSS</a></li>
                <li><a href="#" style="color: var(--primary-color);">JavaScript</a></li>
            </ul>

            <h3>Latest Posts</h3>
            <ul style="list-style: none; padding-left: 0;">
                <li><a href="#" style="color: var(--primary-color);">Why I Love Web Dev</a></li>
                <li><a href="#" style="color: var(--primary-color);">HTML is Fun!</a></li>
                <li><a href="#" style="color: var(--primary-color);">CSS Makes It Beautiful</a></li>
            </ul>
        </aside>

        <!-- Main Content Area -->
        <main>
            <!-- Blog Post 1 -->
            <article class="post">
                <h2>Learning HTML: My First Steps</h2>
                <p>I started learning HTML last month. I built my first webpage with headings, paragraphs, and links. It was fun!</p>
                <p>Now I can build tables, forms, and even use semantic tags like `<header>`, `<main>`, and `<footer>`.</p>
            </article>

            <!-- Blog Post 2 -->
            <article class="post">
                <h2>CSS Magic: Making Things Look Cool</h2>
                <p>After learning HTML, I discovered CSS. Now I know how to change colors, fonts, and layout using Flexbox and Grid!</p>
                <p>I also made a personal portfolio page and styled it beautifully.</p>
            </article>

            <!-- Blog Post 3 -->
            <article class="post">
                <h2>JavaScript: Bringing Pages to Life</h2>
                <p>Now I’m learning JavaScript so I can add interactivity — like animations, counters, and dynamic messages!</p>
                <p>I’ve already made a to-do list app and a smiley face using Canvas and SVG.</p>
            </article>

            <!-- Contact Form Section -->
            <section id="contact-section">
                <h2>Leave a Comment or Message</h2>
                <form id="contactForm" onsubmit="validateForm(event)">
                    <label for="name">Your Name</label>
                    <input type="text" id="name" name="name" required minlength="2" placeholder="Enter your full name">

                    <label for="email">Email Address</label>
                    <input type="email" id="email" name="email" required placeholder="you@example.com">

                    <label for="message">Your Message</label>
                    <textarea id="message" name="message" rows="5" required minlength="10"></textarea>

                    <button type="submit">Send Message</button>
                </form>

                <div id="formResult" class="success-message" style="margin-top: 20px;"></div>
            </section>
        </main>
    </div>

    <!-- Footer -->
    <footer>
        <p>&copy; 2025 MyBlog. All rights reserved.</p>
        <button onclick="toggleDarkMode()" style="background-color: var(--primary-color); color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer;">Toggle Dark Mode</button>
    </footer>

    <script>
        // Dark Mode Toggle
        function toggleDarkMode() {
            document.body.classList.toggle("dark-mode");
        }

        // Simple Form Validation
        function validateForm(event) {
            event.preventDefault();

            let name = document.getElementById("name").value.trim();
            let email = document.getElementById("email").value.trim();
            let message = document.getElementById("message").value.trim();
            let resultDiv = document.getElementById("formResult");

            if (name === "" || email === "" || message === "") {
                resultDiv.style.display = "block";
                resultDiv.innerHTML = "❌ Please fill in all fields.";
                resultDiv.style.color = "#721c24";
                resultDiv.style.background = "#f8d7da";
                resultDiv.style.border = "1px solid #f5c6cb";
                return false;
            }

            if (message.length < 10) {
                resultDiv.innerHTML = "❌ Message must be at least 10 characters.";
                resultDiv.style.color = "#721c24";
                resultDiv.style.background = "#f8d7da";
                resultDiv.style.border = "1px solid #f5c6cb";
                resultDiv.style.display = "block";
                return false;
            }

            resultDiv.innerHTML = "✅ Thank you, " + name + "! Your message has been received.";
            resultDiv.style.color = "#155724";
            resultDiv.style.background = "#d4edda";
            resultDiv.style.border = "1px solid #c3e6cb";
            resultDiv.style.display = "block";

            document.getElementById("contactForm").reset();
            return false;
        }
    </script>

</body>
</html>

Step 3: Run with Live Server

Right-click the code → Show All Commands → Launch Live Server

🎉 You’ve built a complete responsive blog layout that includes:

A clean, modern header and navigation
A sidebar with About Me and categories
Multiple blog posts
A fully styled and validated contact form
A working dark mode toggle

Build a Complete Responsive Blog Layout — A kid typing into a computer screen and proudly showing off a responsive blog layout that changes from 3 columns on desktop to stacked sections on phone

💡 Bonus: Add a Sticky Sidebar on Desktop

Update your aside styles to stick while scrolling:

@media (min-width: 992px) {
    aside {
        position: sticky;
        top: 80px;
        height: fit-content;
    }
}

Now your sidebar scrolls with you — perfect for long pages!

💡 Bonus: Add a Mobile Menu Toggle

Add a hamburger menu for smaller screens:

Add HTML Before Nav:

<button id="menuToggle" style="display: none; margin: 20px auto; display: block; width: 90%; max-width: 400px; background-color: var(--primary-color); color: white; border: none; padding: 12px; border-radius: 6px; font-size: 16px;">☰ Menu</button>

Add JavaScript:

<script>
    document.getElementById("menuToggle").addEventListener("click", function () {
        let nav = document.querySelector("nav");
        nav.style.display = nav.style.display === "none" ? "flex" : "none";
    });
</script>

Update CSS:

@media (max-width: 768px) {
    nav {
        flex-direction: column;
        display: none;
    }

    #menuToggle {
        display: block;
    }
}

Now users can open/close the menu on mobile — smooth and interactive!

🧪 Try It Yourself!

Add a search bar in the header using <input> and Flexbox
Style your blog posts as cards using box-shadow and border-radius
Add a comment section below each post using JavaScript
Make the dark mode toggle remember preference using localStorage

✅ Summary of What You Built Today

You now have a fully functional blog layout that:

Uses semantic HTML for accessibility and SEO
Applies CSS Grid for two-column layout
Uses Flexbox for navigation and spacing
Is responsive across devices
Has a styled contact form with validation
Includes JavaScript interactivity like dark mode and feedback
Can be reused for your own portfolio , news site , or personal blog

🚀 Final Lecture Preview:

In Lecture 50 , we’ll wrap up the entire series by building a final project: a Personal Portfolio Website that combines everything you’ve learned — from HTML structure to advanced CSS and JavaScript features — giving you a real-world, professional-looking website to showcase your skills!

Stay Updated

If you found this information useful, don’t forget to bookmark this page and Share.

HTML5 and CSS3 Compleate Series