“Create a Blog Layout with HTML/CSS”

on

🖥️ Create a Blog Layout with HTML/CSS

In this tutorial, you'll learn how to build a basic yet responsive blog layout using HTML and CSS. It's perfect for beginners who want to see how a simple webpage is structured.

🔧 What You'll Build

A clean layout with:

  • A header
  • A navigation bar
  • A content area
  • A sidebar
  • A footer

📁 Files to Create

index.html
style.css

📜 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Blog</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>Welcome to My Blog</header>
  <nav>Home | About | Contact</nav>
  <div class="container">
    <main>
      <h2>Blog Post Title</h2>
      <p>This is a sample blog post.</p>
    </main>
    <aside>
      <h3>Sidebar</h3>
      <p>Extra links or info here.</p>
    </aside>
  </div>
  <footer>© 2025 Darchums Technologies Inc.</footer>
</body>
</html>

🎨 style.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header, nav, footer {
  background: #333;
  color: white;
  padding: 10px;
  text-align: center;
}

.container {
  display: flex;
  padding: 20px;
}

main {
  flex: 3;
  margin-right: 20px;
}

aside {
  flex: 1;
  background: #f4f4f4;
  padding: 10px;
}

🚀 Let’s Build More!

This is just the beginning. Stay tuned for more layout and style improvements!

Comments

Post a Comment