Building a Blog Layout

A blog layout is one of the most commonly built page types on the web. It combines a prominent featured post area, a main article feed, and a sidebar into a single cohesive page. Building one from scratch with HTML and CSS is an excellent way to practice real-world layout skills.

The Two-Column Content Area

Many classic blog layouts feature a two-column structure. This typically uses a wide main column for the article feed and a narrower aside column for widgets like a tag cloud or recent posts. CSS grid is perfect for this:

Inside this grid you place a main tag for the article feed and an aside tag for the sidebar. For mobile devices, a media query can be used to reset the grid to a single column so the sidebar stacks neatly below the articles.

The Featured Post Banner

Most successful blogs highlight their best article prominently above the article feed in a large hero-style banner. This is typically a full-width div or a section with a gradient background, large heading text, and a single "Read Article" button.

The Sidebar

A sidebar is built from a collection of "widgets". These are self-contained blocks each covering a different topic (like a tag cloud, recent posts, or newsletter signup). Widgets are typically represented as separate div elements inside the aside tag, each given a border and padding to visually separate them.

The Footer

A blog footer is an important part of the layout that sits below all the main content. It provides a natural end to the page and gives users a second chance to explore other parts of the site without scrolling all the way back to the top.

Blog footers are usually divided into multiple columns using CSS grid, and typically contain:

Brand column: The blog name and a short description. This reinforces identity and helps new readers understand what the blog is about.
Category links: Direct links to the most popular topic areas on the site.
Site links: Secondary navigation such as About, Contact, Privacy Policy, and Newsletter pages.
Copyright bar: A thin strip at the very bottom with the copyright year and legal notice.

Here's an example of the CSS for a three-column footer:

Full Working Example

Below is a fully styled blog layout featuring a sticky header, a featured post banner, an article card feed, a sidebar with widgets, and a multi-column footer. Resize the window to see the sidebar stack below the articles on narrow screens:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Daily Dev Blog</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Segoe UI', system-ui, sans-serif; color: #374151; background: #f9fafb; line-height: 1.7; }
  a { color: #4f46e5; text-decoration: none; }
  a:hover { text-decoration: underline; }
  img { max-width: 100%; }

/* ---- HEADER ---- */
  header {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 18px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .blog-title {
    font-size: 1.4em;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.5px;
  }
  .blog-title span { color: #4f46e5; }
  header nav a {
    color: #6b7280;
    font-size: 0.9em;
    margin-left: 24px;
    font-weight: 500;
    transition: color 0.2s;
  }
  header nav a:hover { color: #111827; text-decoration: none; }

/* ---- FEATURED POST / HERO ---- */
  .featured {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    padding: 64px 40px;
  }
  .featured-inner {
    max-width: 700px;
    margin: 0 auto;
  }
  .tag-badge {
    display: inline-block;
    background: #4f46e5;
    color: white;
    padding: 4px 14px;
    border-radius: 100px;
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
  }
  .featured h2 {
    font-size: clamp(1.6em, 4vw, 2.4em);
    font-weight: 800;
    color: #111827;
    line-height: 1.25;
    margin-bottom: 14px;
  }
  .featured p {
    color: #6b7280;
    font-size: 1.05em;
    margin-bottom: 28px;
  }
  .featured-meta { font-size: 0.85em; color: #9ca3af; margin-bottom: 24px; }
  .btn-featured {
    display: inline-block;
    padding: 12px 28px;
    background: #4f46e5;
    color: white;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95em;
    transition: background 0.2s, transform 0.2s;
  }
  .btn-featured:hover { background: #4338ca; transform: translateY(-1px); text-decoration: none; }

/* ---- PAGE LAYOUT ---- */
  .page-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    max-width: 1100px;
    margin: 48px auto;
    padding: 0 40px;
  }

/* ---- POST CARDS ---- */
  .post-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    display: flex;
    gap: 0;
    transition: box-shadow 0.2s, transform 0.2s;
  }
  .post-card:hover { box-shadow: 0 4px 20px rgba(79,70,229,0.08); transform: translateY(-2px); }
  .post-thumb {
    width: 110px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6em;
  }
  .post-body { padding: 20px; }
  .post-category {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #4f46e5;
    margin-bottom: 6px;
  }
  .post-body h3 { font-size: 1.05em; font-weight: 700; color: #111827; margin-bottom: 6px; line-height: 1.4; }
  .post-body h3 a { color: inherit; }
  .post-body h3 a:hover { color: #4f46e5; text-decoration: none; }
  .post-body p { font-size: 0.88em; color: #6b7280; margin-bottom: 10px; }
  .post-meta { font-size: 0.8em; color: #9ca3af; }

/* ---- SIDEBAR ---- */
  .sidebar-widget {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
  }
  .widget-title {
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #9ca3af;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f3f4f6;
  }
  .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
  .tag-pill {
    background: #f3f4f6;
    color: #374151;
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 0.82em;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
  }
  .tag-pill:hover { background: #e0e7ff; color: #4f46e5; }
  .recent-post { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
  .recent-post .rp-thumb {
    width: 44px; height: 44px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    background: #f3f4f6;
  }
  .recent-post a { font-size: 0.88em; color: #111827; font-weight: 600; line-height: 1.4; }
  .recent-post a:hover { color: #4f46e5; }
  .recent-post .rp-meta { font-size: 0.78em; color: #9ca3af; margin-top: 2px; }

/* ---- FOOTER ---- */
  footer {
    background: #111827;
    color: #9ca3af;
    margin-top: 60px;
  }
  .footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 40px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
  }
  .footer-brand .blog-title { color: white; margin-bottom: 10px; display: block; }
  .footer-brand p { font-size: 0.9em; line-height: 1.7; }
  .footer-col h4 {
    color: white;
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
  }
  .footer-col ul { list-style: none; }
  .footer-col li { margin-bottom: 8px; }
  .footer-col a { color: #9ca3af; font-size: 0.9em; transition: color 0.2s; }
  .footer-col a:hover { color: white; text-decoration: none; }
  .footer-bottom {
    border-top: 1px solid #1f2937;
    padding: 20px 40px;
    text-align: center;
    font-size: 0.85em;
    max-width: 1100px;
    margin: 0 auto;
  }

/* ---- RESPONSIVE ---- */
  @media (max-width: 768px) {
    .page-layout { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; }
    .featured { padding: 40px 20px; }
  }
  @media (max-width: 520px) {
    header { flex-direction: column; gap: 12px; }
    header nav a:first-child { margin-left: 0; }
  }
</style>
</head>
<body>

<header>
  <div class="blog-title">Daily<span>Dev</span></div>
  <nav>
    <a href="#">Home</a>
    <a href="#">Tutorials</a>
    <a href="#">CSS</a>
    <a href="#">JavaScript</a>
  </nav>
</header>

<div class="featured">
  <div class="featured-inner">
    <span class="tag-badge">Featured</span>
    <h2>The Complete Guide to CSS Grid in 2026</h2>
    <p class="featured-meta">By Sarah Chen &bull; April 5, 2026 &bull; 12 min read</p>
    <p>A deep dive into every feature of CSS Grid, with real-world layouts you can copy and use in your own projects today.</p>
    <a href="#" class="btn-featured">Read Article &rarr;</a>
  </div>
</div>

<div class="page-layout">

<main>
    <div class="post-card">
      <div class="post-thumb" style="background:#eef2ff;">&#128642;</div>
      <div class="post-body">
        <div class="post-category">HTML</div>
        <h3><a href="#">Why Semantic HTML Still Matters in 2026</a></h3>
        <p>Using the right HTML elements isn't just good practice &mdash; it massively improves your SEO and accessibility.</p>
        <div class="post-meta">April 3, 2026 &bull; 5 min read</div>
      </div>
    </div>

<div class="post-card">
      <div class="post-thumb" style="background:#f0fdf4;">&#128736;</div>
      <div class="post-body">
        <div class="post-category">JavaScript</div>
        <h3><a href="#">Build a Live Search Box Without a Framework</a></h3>
        <p>Sometimes Vanilla JS is the perfect tool. Here's how to build a real-time search filter in under 30 lines.</p>
        <div class="post-meta">April 1, 2026 &bull; 8 min read</div>
      </div>
    </div>

<div class="post-card">
      <div class="post-thumb" style="background:#fffbeb;">&#127775;</div>
      <div class="post-body">
        <div class="post-category">CSS</div>
        <h3><a href="#">The 5 CSS Properties Every Developer Forgets</a></h3>
        <p>From <code>aspect-ratio</code> to <code>scroll-margin</code>, stop overlooking these surprisingly useful properties.</p>
        <div class="post-meta">March 29, 2026 &bull; 6 min read</div>
      </div>
    </div>
  </main>

<aside>
    <div class="sidebar-widget">
      <div class="widget-title">Recent Posts</div>
      <div class="recent-post">
        <div class="rp-thumb">&#128421;</div>
        <div>
          <a href="#">10 Debugging Tips for Beginners</a>
          <div class="rp-meta">March 28, 2026</div>
        </div>
      </div>
      <div class="recent-post">
        <div class="rp-thumb">&#128247;</div>
        <div>
          <a href="#">CSS Art: Drawing with Only Code</a>
          <div class="rp-meta">March 25, 2026</div>
        </div>
      </div>
      <div class="recent-post">
        <div class="rp-thumb">&#9881;</div>
        <div>
          <a href="#">My Web Development Setup in 2026</a>
          <div class="rp-meta">March 20, 2026</div>
        </div>
      </div>
    </div>

<div class="sidebar-widget">
      <div class="widget-title">Browse Topics</div>
      <div class="tag-cloud">
        <span class="tag-pill">HTML</span>
        <span class="tag-pill">CSS</span>
        <span class="tag-pill">JavaScript</span>
        <span class="tag-pill">Flexbox</span>
        <span class="tag-pill">Grid</span>
        <span class="tag-pill">A11y</span>
        <span class="tag-pill">SEO</span>
        <span class="tag-pill">Performance</span>
      </div>
    </div>
  </aside>

</div>

<footer>
  <div class="footer-inner">
    <div class="footer-brand">
      <span class="blog-title">Daily<span style="color:#818cf8">Dev</span></span>
      <p>A blog for web developers who love clean code, modern CSS, and building things that matter.</p>
    </div>
    <div class="footer-col">
      <h4>Topics</h4>
      <ul>
        <li><a href="#">HTML Tutorials</a></li>
        <li><a href="#">CSS Techniques</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">Accessibility</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Site</h4>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Newsletter</a></li>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">
    <p>&copy; 2026 DailyDev. All rights reserved.</p>
  </div>
</footer>

</body>
</html>

View Output Full Screen Preview