How To Build A Blog Layout Example

<!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>