Project: Blog Page Layout

Components of the Blog Page:

Header: Contains the blog’s title and a navigation menu.
Main Content Area: Includes a sidebar and the main blog content area.
Blog Posts: Individual blog post summaries displayed in a grid layout.
Footer: Contains additional navigation links and social media icons.

Step 1: HTML Structure

Let’s start by creating the HTML structure for the blog page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Blog Practice</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Header Section -->
    <header class="header">
        <div class="container">
            <h1 class="blog-title">My Flexbox Blog</h1>
            <nav class="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Main Content Section -->
    <div class="main-content container">
        <!-- Sidebar Section -->
        <aside class="sidebar">
            <h2>Categories</h2>
            <ul>
                <li><a href="#">Tech</a></li>
                <li><a href="#">Design</a></li>
                <li><a href="#">Lifestyle</a></li>
                <li><a href="#">Travel</a></li>
                <li><a href="#">Food</a></li>
            </ul>
        </aside>

        <!-- Blog Posts Section -->
        <section class="blog-posts">
            <article class="post">
                <img src="https://via.placeholder.com/300" alt="Post 1">
                <h3>Blog Post 1</h3>
                <p>This is a summary of the first blog post. It's an interesting read that covers a variety of topics related to tech and design.</p>
            </article>
            <article class="post">
                <img src="https://via.placeholder.com/300" alt="Post 2">
                <h3>Blog Post 2</h3>
                <p>This is a summary of the second blog post. Dive into the world of design and discover new trends and ideas.</p>
            </article>
            <article class="post">
                <img src="https://via.placeholder.com/300" alt="Post 3">
                <h3>Blog Post 3</h3>
                <p>This is a summary of the third blog post. Explore lifestyle tips and advice to improve your daily routine.</p>
            </article>
            <article class="post">
                <img src="https://via.placeholder.com/300" alt="Post 4">
                <h3>Blog Post 4</h3>
                <p>This is a summary of the fourth blog post. Learn about the best travel destinations and how to plan your next adventure.</p>
            </article>
        </section>
    </div>

    <!-- Footer Section -->
    <footer class="footer">
        <div class="container">
            <nav class="footer-nav">
                <ul>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms of Service</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </nav>
            <div class="footer-social">
                <a href="#"><i class="fab fa-facebook-f"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
            </div>
        </div>
    </footer>
</body>
</html>

Step 2: CSS Styling with Flexbox

Now, we’ll add CSS to create the layout using Flexbox. This will involve setting up Flexbox containers and defining the layout for each component.

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    background-color: #f4f4f4;
    color: #333;
}

/* Container for max-width and centering */
.container {
    width: 85%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header Styles */
.header {
    background-color: #333;
    color: white;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.blog-title {
    font-size: 2rem;
    margin-left: 20px;
}

.nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

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

/* Main Content Styles */
.main-content {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}

/* Sidebar Styles */
.sidebar {
    flex: 1;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.sidebar h2 {
    margin-bottom: 15px;
}

.sidebar ul {
    list-style: none;
    padding-left: 0;
}

.sidebar ul li {
    margin-bottom: 10px;
}

.sidebar ul li a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

/* Blog Posts Section Styles */
.blog-posts {
    flex: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.post {
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    flex: 1 1 calc(50% - 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.post img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.post h3 {
    margin: 15px 0;
}

.post p {
    text-align: center;
    color: #666;
}

/* Footer Styles */
.footer {
    background-color: #333;
    color: white;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

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

.footer-social a {
    color: white;
    margin-left: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .main-content {
        flex-direction: column;
    }

    .blog-posts {
        flex-direction: column;
    }

    .post {
        flex: 1 1 100%;
    }

    .footer {
        flex-direction: column;
        text-align: center;
    }
}

Step 3: Explanation of the Layout

Header:
- The header uses Flexbox to align the blog title and navigation menu. The justify-content: space-between property ensures that the items are spread out, with the title on the left and the nav menu on the right.
Main Content:
- The main content area is a Flexbox container with two children: the sidebar and the blog posts section.
- The sidebar uses flex: 1 to take up less space, while the blog posts section uses flex: 3 to take up more space. This creates a responsive, proportional layout.
Blog Posts:
- Inside the blog posts section, each post is also a Flexbox container set to display in a column layout (flex-direction: column), ensuring that the image, title, and summary are stacked vertically.
- The blog posts are laid out in a grid-like structure using Flexbox, with each post taking up half the width (flex: 1 1 calc(50% - 20px)).
Footer:
- The footer is also a Flexbox container, aligning navigation links and social icons with justify-content: space-between.
Responsive Design:
- Media queries ensure that the layout adjusts for smaller screens. The main content area and blog posts stack vertically, making the page easy to navigate on mobile devices.

Step 4: Putting It All Together

Create the Files:
- Save the HTML code as index.html.
- Save the CSS code as styles.css in the same directory.
Open the Page:
- Open index.html in your browser to see the blog page in action.
- Resize the browser window to see how the layout adjusts for different screen sizes.

Step 5: Practice and Experiment

To practice more with Flexbox, try the following:

Add more blog posts and adjust the layout.
Modify the Flexbox properties (flex-grow, flex-shrink, flex-basis) to see how they affect the layout.
Experiment with different justify-content and align-items values to see how content is aligned and spaced within the containers.

Practice Exercises

Exercise 1: Simple Flex Container

Create a Flexbox container that contains three items. Center the items both horizontally and vertically within the container.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Practice 1</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .item {
            background-color: #333;
            color: white;
            padding: 20px;
            margin: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Answer Explanation:

display: flex; makes the container a Flexbox container.
justify-content: center; centers the items horizontally.
align-items: center; centers the items vertically.
The height: 100vh; ensures the container takes up the full viewport height, allowing vertical centering to be visible.

Exercise 2: Flexbox Columns

Create a Flexbox container where the items are stacked vertically. Ensure that the items are spaced out equally along the vertical axis.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Practice 2</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .item {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>

Answer Explanation:

flex-direction: column; stacks the items vertically.
justify-content: space-between; ensures equal space between the items along the vertical axis.

Exercise 3: Responsive Flexbox Grid

Create a grid layout using Flexbox where you have 4 items. The items should be displayed in two columns on large screens, and in a single column on smaller screens (below 600px width).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Practice 3</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .item {
            flex: 1 1 calc(50% - 20px);
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
        @media (max-width: 600px) {
            .item {
                flex: 1 1 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
</body>
</html>

Answer Explanation:

flex-wrap: wrap; allows items to wrap onto the next line when the container width is reduced.
flex: 1 1 calc(50% - 20px); makes each item take up half the container’s width (minus the gap), effectively creating a two-column layout.
The media query @media (max-width: 600px) changes the flex-basis to 100%, making the items stack in a single column on smaller screens.

Exercise 4: Flexbox with Flex-Grow

Create a Flexbox container with three items. The second item should grow to take up twice as much space as the other items when the container is resized.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Practice 4</title>
    <style>
        .container {
            display: flex;
            gap: 10px;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .item {
            flex-grow: 1;
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .item-2 {
            flex-grow: 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item item-2">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Answer Explanation:

flex-grow: 1; allows items to grow and fill available space equally.
flex-grow: 2; on .item-2 makes this item grow to take up twice as much space as the other items.

Exercise 5: Aligning Items

Create a Flexbox container with three items. Align the first item to the start, the second item to the center, and the third item to the end of the container along the cross-axis.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Practice 5</title>
    <style>
        .container {
            display: flex;
            height: 300px;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .item {
            background-color: #333;
            color: white;
            padding: 20px;
            margin: 0 10px;
        }
        .item-1 {
            align-self: flex-start;
        }
        .item-2 {
            align-self: center;
        }
        .item-3 {
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item-1">Item 1</div>
        <div class="item item-2">Item 2</div>
        <div class="item item-3">Item 3</div>
    </div>
</body>
</html>

Answer Explanation:

align-self is used on individual flex items to override the container’s alignment.
flex-start, center, and flex-end align the items at the start, center, and end of the container’s cross-axis, respectively.

React To-Do App with JSON Server

Day 14 Trading Strategies Bootcamp: Crypto Trading Tools

Day 13 Trading Strategies Bootcamp: Crypto Risk management

React To-Do App with JSON Server

Day 14 Trading Strategies Bootcamp: Crypto Trading Tools

What's Hot

Learn HTML

How to install and create react app

Beauty Salon Booking App – Node, MySql

+385 99 8302 482

Step 1: HTML Structure

Step 2: CSS Styling with Flexbox

Step 3: Explanation of the Layout

Step 4: Putting It All Together

Step 5: Practice and Experiment

Practice Exercises

Exercise 1: Simple Flex Container

Exercise 2: Flexbox Columns

Exercise 3: Responsive Flexbox Grid

Exercise 4: Flexbox with Flex-Grow

Exercise 5: Aligning Items

Other Articles

Practice CSS Positioning

Event Management System Node.JS-MongoDB

Share Article

Popular posts

How to install and create react app

Beauty Salon Booking App – Node, MySql

Pages

Latest posts

Day 14 Trading Strategies Bootcamp: Crypto Trading Tools

Day 13 Trading Strategies Bootcamp: Crypto Risk management

Subscribe Now

What's Hot

+385 99 8302 482

What are you looking for?

Project: Blog Page Layout

Step 1: HTML Structure

Step 2: CSS Styling with Flexbox

Step 3: Explanation of the Layout

Step 4: Putting It All Together

Step 5: Practice and Experiment

Practice Exercises

Exercise 1: Simple Flex Container

Exercise 2: Flexbox Columns

Exercise 3: Responsive Flexbox Grid

Exercise 4: Flexbox with Flex-Grow

Exercise 5: Aligning Items

Other Articles

Share Article

Popular posts

Pages

Latest posts

Subscribe Now