Welcome to CSS Project 2 - Simple Blog Layout

This project will guide you through creating a simple blog layout using HTML and CSS. It's designed for beginners with basic knowledge of HTML and CSS.

Hardware Setup

Ensure you have the following hardware components:

A computer with internet access.
A keyboard and mouse for typing and navigation.

Software Requirements

Here are the software tools you'll need for this project:

Any code editor (e.g., Visual Studio Code, Sublime Text).
A web browser (e.g., Chrome, Firefox).

Knowledge Prerequisites

To successfully complete this project, you should be familiar with the following concepts:

Basic understanding of HTML and CSS.

Difficulty Rating

Easy Difficulty

Project Time!!!

“Make the decision, make another. Remake one past, you cannot.” - Yoda

Project Steps:

Done

Download and install Visual Studio Code or your preferred code editor.
Open your code editor and create a new folder for your project.
Inside the folder, create a new file named index.html and another file named styles.css.

Done

Open index.html and add the following basic HTML structure:





    
    
    My Blog
    


    
        Welcome to My Blog
    
    
        
            Home
            Posts
            About
            Contact
        
    
    
        Home
        Welcome to my blog. Here you will find various posts about different topics.
    
    
        Posts
        
            Post Title 1
            This is the first post on my blog.
        
        
            Post Title 2
            This is the second post on my blog.
        
    
    
        About
        This is the about section where you can write about yourself or the blog.
    
    
        Contact
        Get in touch with me via the contact form.
    
    
        © 2024 My Blog

Done

Open styles.css and add the following CSS to style your blog layout:


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #333;
    color: #fff;
    padding: 1em 0;
    text-align: center;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    background-color: #444;
}

nav ul li {
    margin: 0 1em;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 0.5em;
}

nav ul li a:hover {
    background-color: #555;
}

section {
    padding: 2em;
    margin: 2em 0;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

article {
    margin-bottom: 2em;
}

footer {
    text-align: center;
    padding: 1em 0;
    background-color: #333;
    color: #fff;
}

Save the file and open index.html in your web browser to see your styled blog layout.

Welcome to CSS Project 2 - Simple Blog Layout

Hardware Setup

Software Requirements

Knowledge Prerequisites

Difficulty Rating

Easy Difficulty

Project Time!!!

Project Steps:

Home

Posts

Post Title 1

Post Title 2

About

Contact

Congratulations! You've created a simple blog layout using HTML and CSS. Now you're ready to tackle more complex projects.