Webpage project using the CSS Box Model

The Box Model is essential in controlling the spacing, borders, padding, and margin of elements on the page. We’ll design a simple, clean, and modern blog layout with a header, main content area, sidebar, and footer.

Project Overview

This project will include:

A header with the blog’s title and navigation links.
A main content area with a featured article and a grid of blog posts.
A sidebar with a search bar, categories, and recent posts.
A footer with some basic information and links.

Step 1: Project Structure

First, create the following files and directories:

blog-project/
│
├── index.html
├── styles.css
└── images/  (optional, for any images you may want to use)

Step 2: HTML Structure

Here’s the HTML structure for the blog layout:

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

    <!-- Main Content Section -->
    <main class="container main-content">
        <!-- Featured Article -->
        <section class="featured-article">
            <h2>Featured Article</h2>
            <img src="https://source.unsplash.com/random/800x400" alt="Featured" class="featured-image">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. Duis et enim in turpis consectetur elementum.</p>
        </section>

        <!-- Blog Posts Section -->
        <section class="blog-posts">
            <h2>Recent Posts</h2>
            <div class="post-grid">
                <article class="post">
                    <img src="https://source.unsplash.com/random/300x200" alt="Post 1">
                    <h3>Blog Post 1</h3>
                    <p>Short description of blog post 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </article>
                <article class="post">
                    <img src="https://source.unsplash.com/random/300x200" alt="Post 2">
                    <h3>Blog Post 2</h3>
                    <p>Short description of blog post 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </article>
                <article class="post">
                    <img src="https://source.unsplash.com/random/300x200" alt="Post 3">
                    <h3>Blog Post 3</h3>
                    <p>Short description of blog post 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </article>
            </div>
        </section>

        <!-- Sidebar Section -->
        <aside class="sidebar">
            <div class="search-bar">
                <input type="text" placeholder="Search...">
                <button type="button">Search</button>
            </div>
            <div class="categories">
                <h3>Categories</h3>
                <ul>
                    <li><a href="#">Web Development</a></li>
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Marketing</a></li>
                </ul>
            </div>
            <div class="recent-posts">
                <h3>Recent Posts</h3>
                <ul>
                    <li><a href="#">Understanding the CSS Box Model</a></li>
                    <li><a href="#">How to Use Flexbox in Modern Design</a></li>
                    <li><a href="#">Top 10 Web Design Trends for 2024</a></li>
                </ul>
            </div>
        </aside>
    </main>

    <!-- Footer Section -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 My Modern Blog | <a href="#">Privacy Policy</a></p>
        </div>
    </footer>
</body>
</html>

Step 3: CSS Styling

Let’s style the webpage using modern design principles while focusing on the Box Model.

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

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

/* Container */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header Styles */
.header {
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;
}

.header .blog-title {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

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

.nav a {
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    padding: 5px 10px;
}

.nav a:hover {
    background-color: #555;
    border-radius: 5px;
}

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

/* Featured Article */
.featured-article {
    flex: 2;
    background-color: white;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.featured-article .featured-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    border-radius: 5px;
}

/* Blog Posts */
.blog-posts {
    flex: 3;
    background-color: white;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.post {
    background-color: #f8f9fa;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: box-shadow 0.3s ease;
}

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

.post h3 {
    margin-bottom: 10px;
}

.post:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Sidebar Styles */
.sidebar {
    flex: 1;
    background-color: white;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.sidebar .search-bar {
    display: flex;
    margin-bottom: 20px;
}

.sidebar .search-bar input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px 0 0 5px;
    outline: none;
}

.sidebar .search-bar button {
    padding: 10px 20px;
    border: none;
    background-color: #333;
    color: white;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
}

.sidebar h3 {
    margin-bottom: 10px;
}

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

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

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

.sidebar ul li a:hover {
    color: #007bff;
}

/* Footer Styles */
.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 20px;
}

.footer a {
    color: #007bff;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

Explanation of the CSS

Box Model Basics:
- box-sizing: border-box; is used globally to ensure that padding and borders are included within the element’s width and height.
- Padding, margins, and borders are carefully used to control spacing and element sizes.
Header:
- The header has a dark background with centered text, using padding to create space around the content. Navigation links use padding and border-radius to enhance their hover effect.
Main Content:
- The main content is a flex container with a gap between its child elements. This layout makes it responsive, allowing the sidebar and content to adjust their sizes naturally.
- The featured-article and blog-posts sections use padding, margins, and borders to separate content and create a clean, modern look.
Blog Posts Grid:
- The blog posts are arranged in a grid using grid-template-columns and gap. Each post has padding, a light background, and a hover effect with a box shadow.
Sidebar:
- The sidebar contains a search bar, categories, and recent posts. Flexbox is used within the search bar to align the input and button. The categories and recent posts lists are styled with padding and hover effects.
Footer:
- The footer has a consistent background color with centered text. Links change color on hover, improving the user experience.

Practice Task

Adjust Spacing:
- Experiment with the padding and margin values in the .main-content, .post, and .sidebar sections to see how it affects the layout.
Modify Border and Box Shadows:
- Change the border color, width, and style for .featured-article, .post, and .sidebar to see how it impacts the design.
- Adjust the box-shadow values on the .post hover effect to make it more or less prominent.
Change Layout with Flexbox:
- Try changing the flex values (flex: 2, flex: 3, etc.) for the .featured-article, .blog-posts, and .sidebar sections to see how they resize relative to each other.
Experiment with Colors:
- Modify the background colors and text colors across the different sections to personalize the design to your taste.
Responsive Design:
- Add media queries to change the layout on smaller screens, such as stacking the sidebar below the content instead of beside it.

Step 4: Viewing the Project

Save the index.html and styles.css files in your project directory.
Open the index.html file in your web browser to see your modern blog-style webpage in action.

This project provides a solid foundation for understanding and practicing the CSS Box Model in a real-world layout, allowing you to control spacing, borders, padding, and layout with precision.

Practice Task 1: Adjust Spacing

Objective: Experiment with the padding and margin values in the .main-content, .post, and .sidebar sections to see how it affects the layout.

Solution:

You can change the padding and margin values in the .main-content, .post, and .sidebar sections to see how they alter the spacing. Here are a few examples:

/* Adjusting the spacing in the main content */
.main-content {
    display: flex;
    gap: 40px; /* Increased gap between sections */
    margin-top: 40px; /* Increased top margin */
}

/* Adjusting padding and margin in the post items */
.post {
    background-color: #f8f9fa;
    padding: 30px; /* Increased padding inside the post */
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px; /* Added margin to separate posts vertically */
}

/* Adjusting spacing in the sidebar */
.sidebar {
    flex: 1;
    background-color: white;
    padding: 30px; /* Increased padding inside the sidebar */
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 20px; /* Added margin on top to separate from the content */
}

Outcome:

By increasing the padding and margins, the content becomes more spaced out, providing a cleaner and less crowded layout.

Practice Task 2: Modify Border and Box Shadows

Objective: Change the border color, width, and style for .featured-article, .post, and .sidebar to see how it impacts the design. Adjust the box-shadow values on the .post hover effect.

Solution:

Here are some modifications to the border and box-shadow properties:

/* Modifying border and box-shadow for the featured article */
.featured-article {
    flex: 2;
    background-color: white;
    padding: 20px;
    border: 2px dashed #007bff; /* Changed border to dashed with blue color */
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2); /* Added a subtle box shadow */
}

/* Modifying border and box-shadow for the post items */
.post {
    background-color: #f8f9fa;
    padding: 20px;
    border: 2px solid #555; /* Changed border color to a darker shade */
    border-radius: 10px;
    transition: box-shadow 0.3s ease;
}

.post:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Increased box-shadow on hover */
}

/* Modifying border for the sidebar */
.sidebar {
    flex: 1;
    background-color: white;
    padding: 20px;
    border: 3px dotted #ff6347; /* Changed border to dotted with tomato color */
    border-radius: 10px;
}

Outcome:

Changing the borders and box shadows creates a distinct style for each section. The dashed and dotted borders make the layout more playful, while box shadows add depth to the design.

Practice Task 3: Change Layout with Flexbox

Objective: Change the flex values (flex: 2, flex: 3, etc.) for the .featured-article, .blog-posts, and .sidebar sections to see how they resize relative to each other.

Solution:

Modify the flex values to control the relative size of each section:

.main-content {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

/* Adjusting the flex values */
.featured-article {
    flex: 3; /* Increased size of featured article */
    background-color: white;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.blog-posts {
    flex: 2; /* Decreased size of blog posts section */
    background-color: white;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.sidebar {
    flex: 1; /* Kept the sidebar size the same */
    background-color: white;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

Outcome:

The featured article now takes up more space, while the blog posts section is reduced. This change highlights the featured article more prominently in the layout.

Practice Task 4: Experiment with Colors

Objective: Modify the background colors and text colors across the different sections to personalize the design.

Solution:

Here are some examples of color changes:

.header {
    background-color: #282c34; /* Darker background color for header */
    color: #61dafb; /* Lighter text color for contrast */
    padding: 20px;
    text-align: center;
}

.featured-article {
    background-color: #f0f8ff; /* Light blue background for the article */
    padding: 20px;
    border: 1px solid #61dafb;
    border-radius: 8px;
}

.post {
    background-color: #ffe4b5; /* Soft orange color for the posts */
    padding: 20px;
    border: 1px solid #cd853f; /* Darker border for contrast */
    border-radius: 8px;
}

.sidebar {
    background-color: #fafad2; /* Light yellow color for the sidebar */
    padding: 20px;
    border: 1px solid #bdb76b;
    border-radius: 8px;
}

.footer {
    background-color: #282c34;
    color: #61dafb;
    text-align: center;
    padding: 20px;
    margin-top: 20px;
}

Outcome:

The use of soft and contrasting colors gives the blog a fresh, modern look. This makes different sections stand out while maintaining a cohesive design.

Practice Task 5: Responsive Design

Objective: Add media queries to change the layout on smaller screens, such as stacking the sidebar below the content instead of beside it.

Solution:

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

    .sidebar {
        margin-top: 20px;
    }
}

Outcome:

When the screen width is below 768px, the layout switches to a vertical stack, with the sidebar moving below the main content. This ensures the layout remains user-friendly on smaller screens.

By completing these practice tasks, you’ve explored how to manipulate the Box Model and Flexbox properties to control layout, spacing, and design elements. These exercises will help you gain a deeper understanding of CSS layout techniques and how to apply them in your own projects.

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

Webpage project using the CSS Box Model

Project Overview

Step 1: Project Structure

Step 2: HTML Structure

Step 3: CSS Styling

Explanation of the CSS

Practice Task

Step 4: Viewing the Project

Practice Task 1: Adjust Spacing

Solution:

Practice Task 2: Modify Border and Box Shadows

Solution:

Practice Task 3: Change Layout with Flexbox

Solution:

Practice Task 4: Experiment with Colors

Solution:

Practice Task 5: Responsive Design

Solution:

Other Articles

Practice Flex Design CSS

Practice CSS Positioning

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?

Webpage project using the CSS Box Model

Project Overview

Step 1: Project Structure

Step 2: HTML Structure

Step 3: CSS Styling

Explanation of the CSS

Practice Task

Step 4: Viewing the Project

Practice Task 1: Adjust Spacing

Solution:

Practice Task 2: Modify Border and Box Shadows

Solution:

Practice Task 3: Change Layout with Flexbox

Solution:

Practice Task 4: Experiment with Colors

Solution:

Practice Task 5: Responsive Design

Solution:

Other Articles

Share Article

Popular posts

Pages

Latest posts

Subscribe Now