Blog

Blog · Templates

Free Blog Website Template (HTML & CSS, 2026)

A clean, responsive blog homepage template in HTML and CSS — header, featured post, a responsive article grid and footer — accessible, readable and easy to customize.

XCODX Team · 4 min read

This free blog website template is a clean, readable blog homepage in plain HTML and CSS: a header with navigation, a featured post, a responsive grid of article cards and a footer. It’s accessible, mobile-first, and themed with CSS variables — a solid starting point for a personal blog, a company blog or a newsletter archive.

What you get

  • A blog homepage: header nav, a featured post, an article grid and footer.
  • A responsive card grid that reflows with auto-fit + minmax (no media queries).
  • Readable typography, accessible semantics (<article>, <time>), and clear hierarchy.
  • CSS-variable theming and zero dependencies.

The HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The Blog</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="site-header">
    <a href="#" class="brand">The Blog</a>
    <nav aria-label="Primary">
      <a href="#">Articles</a>
      <a href="#">Topics</a>
      <a href="#">About</a>
    </nav>
  </header>

  <main class="container">
    <article class="featured">
      <p class="kicker">Featured</p>
      <h1><a href="#">How we cut our build time in half</a></h1>
      <p class="excerpt">A practical look at the changes that made the biggest
        difference — from caching to parallelism — with real numbers.</p>
      <p class="meta"><time datetime="2026-07-20">Jul 20, 2026</time> &middot; 6 min read</p>
    </article>

    <h2 class="section-title">Latest articles</h2>
    <div class="grid">
      <article class="post">
        <p class="tag">Performance</p>
        <h3><a href="#">Understanding Core Web Vitals</a></h3>
        <p class="excerpt">What LCP, INP and CLS actually measure, and how to improve them.</p>
        <p class="meta"><time datetime="2026-07-18">Jul 18, 2026</time> &middot; 8 min</p>
      </article>
      <article class="post">
        <p class="tag">CSS</p>
        <h3><a href="#">A complete guide to CSS Grid</a></h3>
        <p class="excerpt">Two-dimensional layouts made simple, with copy-paste examples.</p>
        <p class="meta"><time datetime="2026-07-12">Jul 12, 2026</time> &middot; 10 min</p>
      </article>
      <article class="post">
        <p class="tag">JavaScript</p>
        <h3><a href="#">Async JavaScript, explained</a></h3>
        <p class="excerpt">Promises, async/await and the event loop without the confusion.</p>
        <p class="meta"><time datetime="2026-07-05">Jul 5, 2026</time> &middot; 9 min</p>
      </article>
    </div>
  </main>

  <footer class="site-footer">
    <p>&copy; 2026 The Blog. Written by humans.</p>
  </footer>
</body>
</html>

The CSS

:root {
  --bg: #ffffff; --surface: #f7f8fb; --text: #14181f; --muted: #5b6472;
  --accent: #4f46e5; --border: #e6e9f0; --max: 1040px; --measure: 62ch;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.65; }
a { color: inherit; }

.site-header, .container, .site-footer { max-width: var(--max); margin-inline: auto; padding: 20px; }
.site-header { display: flex; justify-content: space-between; align-items: center; }
.brand { font-weight: 800; font-size: 20px; text-decoration: none; }
.site-header nav { display: flex; gap: 20px; }
.site-header nav a { color: var(--muted); text-decoration: none; }
.site-header nav a:hover { color: var(--text); }

.featured { padding: 40px 0; border-bottom: 1px solid var(--border); }
.kicker { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.featured h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.15; letter-spacing: -.02em; margin: 10px 0 14px; max-width: var(--measure); }
.featured h1 a { text-decoration: none; }
.excerpt { color: var(--muted); max-width: var(--measure); }
.meta { color: var(--muted); font-size: 14px; margin-top: 12px; }

.section-title { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 40px 0 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.post { border: 1px solid var(--border); border-radius: 14px; padding: 22px; background: var(--surface); }
.tag { color: var(--accent); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.post h3 { font-size: 20px; line-height: 1.25; margin: 8px 0 10px; }
.post h3 a { text-decoration: none; }
.post h3 a:hover { color: var(--accent); }

.site-footer { color: var(--muted); border-top: 1px solid var(--border); margin-top: 40px; }

How to customize

  • Posts: duplicate a <article class="post"> for each article; the grid reflows automatically.
  • Readability: the --measure variable caps line length at ~62 characters — the sweet spot for reading. Keep it.
  • Rebrand: change --accent and the fonts; for a dark theme, flip --bg/--text and set color-scheme: dark.
  • Article pages: build a matching post layout with the same header/footer and a single readable column.
  • Go dynamic: generate the cards from Markdown files or a CMS, or use a static-site generator like Astro (see the web development roadmap).

Frequently asked questions

What makes a good blog layout?
Readability first: a comfortable line length (around 60–70 characters), clear heading hierarchy, generous line height and spacing, and strong contrast. A scannable homepage — a featured post plus a grid of recent articles with tags and read times — helps visitors find what they want. This template is built around those principles.
Is this blog template responsive?
Yes. It’s mobile-first with a fluid featured headline (clamp()) and an article grid that uses repeat(auto-fit, minmax(260px, 1fr)), so cards reflow from three columns to one as the screen narrows — with no media queries needed. The reading width is capped for comfort on large screens.
How do I turn this into a real, updatable blog?
Two common paths: generate the pages from Markdown files with a static-site generator (Astro is popular for content sites and ships zero JS by default), or connect a headless CMS and render the posts dynamically. Either way, reuse this template’s markup and CSS for the homepage and a matching single-post layout.
Can I use this for a company or newsletter blog?
Yes — it’s free for personal and commercial use with no attribution required. Swap the branding, colors and content, add your posts, and it works equally well as a personal blog, a company blog or a newsletter archive. Pair it with an email signup (see the coming-soon template) to grow subscribers.

Edit this blog homepage live in XCODX Studio. See also the portfolio website template, the complete guide to CSS Grid and HTML best practices.

Keep reading

Templates

Free Coming Soon Page Template (HTML, CSS & JS, 2026)

A polished coming-soon / launching-soon page template with a live countdown timer and an email signup — responsive, accessible and ready to collect subscribers before you launch.

· 5 min read Templates

Free Contact Form Template (HTML, CSS & JS, 2026)

An accessible contact form template in HTML, CSS and JavaScript — name, email and message fields with inline validation and a success message — responsive and ready to connect to your backend.

· 4 min read Templates

Free Admin Dashboard Template (HTML & CSS, 2026)

A responsive admin dashboard template in HTML and CSS — sidebar navigation, top bar, stat cards and a data table — using CSS Grid, accessible and easy to extend.

· 4 min read