Projekt: Blog-Layout erstellen
Baue ein vollständiges Blog-Layout mit HTML und CSS: Artikelseite, Sidebar, Kommentare und responsives Design.
Aktualisiert:
Projekt: Blog-Layout
In diesem letzten Projekt baust du ein vollstaendiges Blog-Layout. Blogs haben besondere Anforderungen: optimale Lesebreite, klare Typografie, Sidebar und eine ansprechende Artikeldarstellung. Hier setzt du alles zusammen, was du gelernt hast.
Was wir bauen
Das Blog-Layout besteht aus:
- Header mit Logo und Navigation
- Blog-Uebersichtsseite mit Featured Post und Card-Grid
- Einzelartikel-Layout mit optimaler Lesebreite
- Sidebar mit Widgets
- Kommentar-Sektion
- Responsives Design (Mobile First)
- Footer mit Spalten
Schritt 1: Die Blog-Uebersichtsseite (index.html)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="WebDev Blog - Tutorials und Artikel ueber Webentwicklung">
<title>WebDev Blog - HTML, CSS & JavaScript lernen</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="container">
<nav class="nav">
<a href="/" class="nav-logo">
WebDev<span>Blog</span>
</a>
<ul class="nav-links">
<li><a href="/" aria-current="page">Startseite</a></li>
<li><a href="/tutorials">Tutorials</a></li>
<li><a href="/about">Ueber mich</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav>
</div>
</header>
<main class="main">
<div class="container">
<div class="blog-layout">
<!-- Blog-Inhalt -->
<div class="blog-content">
<h1 class="page-title">Aktuelle Artikel</h1>
<!-- Featured Post -->
<article class="post-featured">
<div class="post-featured-image">
<div class="image-placeholder">Featured Bild</div>
</div>
<div class="post-featured-content">
<div class="post-meta">
<span class="post-category">CSS</span>
<time datetime="2026-03-10">10. Maerz 2026</time>
</div>
<h2><a href="/post.html">CSS Grid: Der vollstaendige Guide fuer 2026</a></h2>
<p>Lerne CSS Grid von Grund auf. In diesem umfassenden Tutorial decken
wir alles ab -- von den Grundlagen bis zu fortgeschrittenen Techniken
wie Subgrid und auto-fit.</p>
<a href="/post.html" class="read-more">Weiterlesen</a>
</div>
</article>
<!-- Post-Grid -->
<div class="post-grid">
<article class="post-card">
<div class="post-card-image">
<div class="image-placeholder small">Bild</div>
</div>
<div class="post-card-content">
<div class="post-meta">
<span class="post-category">HTML</span>
<time datetime="2026-03-08">8. Maerz 2026</time>
</div>
<h3><a href="#">Semantisches HTML: Warum es wichtig ist</a></h3>
<p>Semantische Tags verbessern Barrierefreiheit, SEO und Code-Qualitaet.</p>
</div>
</article>
<article class="post-card">
<div class="post-card-image">
<div class="image-placeholder small">Bild</div>
</div>
<div class="post-card-content">
<div class="post-meta">
<span class="post-category">CSS</span>
<time datetime="2026-03-05">5. Maerz 2026</time>
</div>
<h3><a href="#">Container Queries: Die Zukunft ist da</a></h3>
<p>Wie Container Queries die Art veraendern, wie wir responsive Designs bauen.</p>
</div>
</article>
<article class="post-card">
<div class="post-card-image">
<div class="image-placeholder small">Bild</div>
</div>
<div class="post-card-content">
<div class="post-meta">
<span class="post-category">JavaScript</span>
<time datetime="2026-03-01">1. Maerz 2026</time>
</div>
<h3><a href="#">Moderne JavaScript-Patterns 2026</a></h3>
<p>Die besten Patterns und Techniken fuer sauberes, modernes JavaScript.</p>
</div>
</article>
<article class="post-card">
<div class="post-card-image">
<div class="image-placeholder small">Bild</div>
</div>
<div class="post-card-content">
<div class="post-meta">
<span class="post-category">Tools</span>
<time datetime="2026-02-25">25. Feb. 2026</time>
</div>
<h3><a href="#">VS Code Tipps fuer Webentwickler</a></h3>
<p>Erweiterungen, Shortcuts und Einstellungen, die dich produktiver machen.</p>
</div>
</article>
</div>
</div>
<!-- Sidebar -->
<aside class="sidebar">
<div class="widget">
<h3 class="widget-title">Ueber den Blog</h3>
<p>WebDev Blog teilt Tutorials und Tipps rund um
HTML, CSS und JavaScript -- fuer Anfaenger und Fortgeschrittene.</p>
</div>
<div class="widget">
<h3 class="widget-title">Kategorien</h3>
<ul class="category-list">
<li><a href="#">HTML <span>(12)</span></a></li>
<li><a href="#">CSS <span>(18)</span></a></li>
<li><a href="#">JavaScript <span>(15)</span></a></li>
<li><a href="#">Tools <span>(6)</span></a></li>
<li><a href="#">Barrierefreiheit <span>(4)</span></a></li>
</ul>
</div>
<div class="widget">
<h3 class="widget-title">Newsletter</h3>
<p>Erhalte neue Artikel direkt in dein Postfach.</p>
<form class="newsletter-form">
<input type="email" placeholder="Deine E-Mail" required>
<button type="submit" class="btn btn-primary btn-block">Abonnieren</button>
</form>
</div>
</aside>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div>
<a href="/" class="nav-logo">WebDev<span>Blog</span></a>
<p>Webentwicklung lernen -- einfach und verstaendlich.</p>
</div>
<div>
<h4>Navigation</h4>
<ul>
<li><a href="/">Startseite</a></li>
<li><a href="/tutorials">Tutorials</a></li>
<li><a href="/about">Ueber mich</a></li>
</ul>
</div>
<div>
<h4>Rechtliches</h4>
<ul>
<li><a href="#">Impressum</a></li>
<li><a href="#">Datenschutz</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 WebDev Blog. Alle Rechte vorbehalten.</p>
</div>
</div>
</footer>
</body>
</html>Schritt 2: Die Einzelartikel-Seite (post.html)
Erstelle eine zweite Datei post.html fuer den Artikel:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid: Der vollstaendige Guide | WebDev Blog</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="container">
<nav class="nav">
<a href="/" class="nav-logo">WebDev<span>Blog</span></a>
<ul class="nav-links">
<li><a href="/">Startseite</a></li>
<li><a href="/tutorials">Tutorials</a></li>
<li><a href="/about">Ueber mich</a></li>
</ul>
</nav>
</div>
</header>
<main class="main">
<article class="article-full">
<header class="article-header container-narrow">
<div class="post-meta">
<span class="post-category">CSS</span>
<time datetime="2026-03-10">10. Maerz 2026</time>
<span>8 Min. Lesezeit</span>
</div>
<h1>CSS Grid: Der vollstaendige Guide fuer 2026</h1>
<p class="article-intro">
CSS Grid ist das maechtigste Layout-System in CSS.
In diesem Guide lernst du alles -- von den Grundlagen
bis zu fortgeschrittenen Techniken.
</p>
</header>
<div class="article-hero">
<div class="image-placeholder wide">Artikelbild</div>
</div>
<div class="article-body container-narrow">
<h2>Was ist CSS Grid?</h2>
<p>
CSS Grid ist ein zweidimensionales Layout-System, das
Zeilen und Spalten gleichzeitig kontrolliert. Im Gegensatz
zu Flexbox, das fuer eindimensionale Layouts gedacht ist,
eignet sich Grid perfekt fuer komplexe Seitenstrukturen.
</p>
<h2>Grid aktivieren</h2>
<p>Um Grid zu nutzen, setzt du einfach <code>display: grid</code>
auf den Container:</p>
<pre><code>.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}</code></pre>
<h2>Praktisches Beispiel</h2>
<p>
Hier ist ein vollstaendiges Beispiel fuer ein responsives
Card-Layout mit CSS Grid:
</p>
<pre><code>.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}</code></pre>
<p>
Das <code>auto-fit</code> mit <code>minmax()</code> sorgt dafuer,
dass sich die Spalten automatisch an die verfuegbare Breite anpassen.
</p>
<blockquote>
<p>"CSS Grid hat die Art, wie wir Layouts bauen, fundamental veraendert."</p>
<footer>-- Rachel Andrew, CSS Grid Expertin</footer>
</blockquote>
<h2>Fazit</h2>
<p>
CSS Grid ist unverzichtbar fuer moderne Webentwicklung. In Kombination
mit Flexbox hast du alle Werkzeuge, die du fuer jedes Layout brauchst.
</p>
</div>
<!-- Tags -->
<div class="article-tags container-narrow">
<span class="tag">CSS</span>
<span class="tag">Grid</span>
<span class="tag">Layout</span>
<span class="tag">Tutorial</span>
</div>
<!-- Autor-Box -->
<div class="author-box container-narrow">
<div class="author-avatar">
<div class="image-placeholder avatar">M</div>
</div>
<div class="author-info">
<strong>Max Mustermann</strong>
<p>Frontend-Entwickler und Autor von WebDev Blog. Schreibt ueber
HTML, CSS, JavaScript und alles rund um die Webentwicklung.</p>
</div>
</div>
</article>
<!-- Kommentare -->
<section class="comments container-narrow">
<h2>Kommentare (2)</h2>
<div class="comment">
<div class="comment-avatar">
<div class="image-placeholder avatar small-avatar">A</div>
</div>
<div class="comment-content">
<div class="comment-header">
<strong>Anna</strong>
<time datetime="2026-03-11">11. Maerz 2026</time>
</div>
<p>Super erklaert! Endlich verstehe ich den Unterschied
zwischen auto-fit und auto-fill.</p>
</div>
</div>
<div class="comment">
<div class="comment-avatar">
<div class="image-placeholder avatar small-avatar">T</div>
</div>
<div class="comment-content">
<div class="comment-header">
<strong>Thomas</strong>
<time datetime="2026-03-12">12. Maerz 2026</time>
</div>
<p>Genau das Tutorial, das ich gesucht habe. Danke!</p>
</div>
</div>
<!-- Kommentar-Formular -->
<form class="comment-form">
<h3>Kommentar schreiben</h3>
<div class="form-row">
<div class="form-group">
<label for="c-name">Name</label>
<input type="text" id="c-name" required>
</div>
<div class="form-group">
<label for="c-email">E-Mail</label>
<input type="email" id="c-email" required>
</div>
</div>
<div class="form-group">
<label for="c-message">Kommentar</label>
<textarea id="c-message" rows="4" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Kommentar absenden</button>
</form>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer-bottom">
<p>© 2026 WebDev Blog. Alle Rechte vorbehalten.</p>
</div>
</div>
</footer>
</body>
</html>Schritt 3: Das komplette CSS (style.css)
/* ===== RESET & VARIABLEN ===== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--primary: #e44d26;
--primary-dark: #c0392b;
--text: #1e293b;
--text-light: #64748b;
--bg: #ffffff;
--bg-alt: #f8fafc;
--border: #e2e8f0;
--radius: 8px;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
}
html { scroll-behavior: smooth; }
body {
font-family: system-ui, -apple-system, sans-serif;
color: var(--text);
line-height: 1.6;
background: var(--bg);
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
/* ===== LAYOUT ===== */
.container { width: min(90%, 1200px); margin: 0 auto; }
.container-narrow { width: min(90%, 720px); margin: 0 auto; }
/* ===== COMPONENTS ===== */
.btn {
display: inline-block;
padding: 0.6rem 1.5rem;
background: var(--primary);
color: white;
border: none;
border-radius: var(--radius);
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-primary { background: var(--primary); color: white; }
.btn-block { width: 100%; text-align: center; }
.image-placeholder {
background: var(--bg-alt);
border: 1px solid var(--border);
display: grid;
place-items: center;
color: var(--text-light);
font-size: 0.9rem;
border-radius: var(--radius);
}
.image-placeholder.small { height: 180px; }
.image-placeholder.wide { height: 400px; border-radius: 0; }
.image-placeholder.avatar {
width: 60px;
height: 60px;
border-radius: 50%;
font-weight: bold;
font-size: 1.25rem;
}
.image-placeholder.small-avatar {
width: 40px;
height: 40px;
font-size: 1rem;
}
.post-meta {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.875rem;
color: var(--text-light);
margin-bottom: 0.5rem;
}
.post-category {
background: color-mix(in srgb, var(--primary), white 85%);
color: var(--primary);
padding: 0.15rem 0.75rem;
border-radius: 99px;
font-weight: 600;
font-size: 0.8rem;
}
.tag {
display: inline-block;
background: var(--bg-alt);
color: var(--text-light);
padding: 0.2rem 0.75rem;
border-radius: 99px;
font-size: 0.8rem;
margin-right: 0.25rem;
}
/* ===== NAVIGATION ===== */
.header {
background: var(--bg);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(10px);
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.nav-logo {
font-size: 1.35rem;
font-weight: 800;
}
.nav-logo span { color: var(--primary); }
.nav-links { display: flex; gap: 2rem; }
.nav-links a {
color: var(--text-light);
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--primary); }
/* ===== BLOG LAYOUT ===== */
.main { padding: 2rem 0 4rem; }
.blog-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 3rem;
align-items: start;
}
.page-title {
font-size: 2rem;
margin-bottom: 2rem;
}
/* ===== FEATURED POST ===== */
.post-featured {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 3rem;
background: var(--bg-alt);
border-radius: var(--radius);
overflow: hidden;
}
.post-featured-image .image-placeholder {
height: 100%;
min-height: 280px;
border-radius: 0;
}
.post-featured-content {
padding: 2rem 2rem 2rem 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.post-featured h2 {
font-size: 1.5rem;
margin-bottom: 0.75rem;
line-height: 1.3;
}
.post-featured h2 a:hover { color: var(--primary); }
.post-featured p {
color: var(--text-light);
margin-bottom: 1rem;
}
.read-more {
color: var(--primary);
font-weight: 600;
}
.read-more:hover { text-decoration: underline; }
/* ===== POST GRID ===== */
.post-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.post-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: box-shadow 0.3s, transform 0.3s;
}
.post-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-3px);
}
.post-card-content {
padding: 1.25rem;
}
.post-card h3 {
font-size: 1.05rem;
margin-bottom: 0.5rem;
line-height: 1.4;
}
.post-card h3 a:hover { color: var(--primary); }
.post-card p { color: var(--text-light); font-size: 0.9rem; }
/* ===== SIDEBAR ===== */
.sidebar { position: sticky; top: 80px; }
.widget {
padding: 1.5rem;
background: var(--bg-alt);
border-radius: var(--radius);
margin-bottom: 1.5rem;
}
.widget-title {
font-size: 1.1rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--primary);
}
.widget p { color: var(--text-light); font-size: 0.95rem; }
.category-list li {
padding: 0.5rem 0;
border-bottom: 1px solid var(--border);
}
.category-list a {
display: flex;
justify-content: space-between;
color: var(--text-light);
transition: color 0.2s;
}
.category-list a:hover { color: var(--primary); }
.category-list span { color: var(--text-light); font-size: 0.85rem; }
.newsletter-form input {
width: 100%;
padding: 0.6rem;
border: 1px solid var(--border);
border-radius: var(--radius);
margin: 0.75rem 0;
font-size: 0.95rem;
}
/* ===== ARTICLE PAGE ===== */
.article-header { text-align: center; padding: 3rem 0 2rem; }
.article-header h1 {
font-size: clamp(1.75rem, 4vw, 2.75rem);
line-height: 1.2;
margin-bottom: 1rem;
}
.article-intro {
font-size: 1.15rem;
color: var(--text-light);
line-height: 1.7;
}
.article-hero { margin-bottom: 2rem; }
.article-body h2 {
font-size: 1.5rem;
margin: 2.5rem 0 1rem;
}
.article-body p {
margin-bottom: 1.25rem;
font-size: 1.05rem;
line-height: 1.8;
}
.article-body code {
background: var(--bg-alt);
padding: 0.15rem 0.4rem;
border-radius: 4px;
font-size: 0.9em;
}
.article-body pre {
background: #1e293b;
color: #e2e8f0;
padding: 1.5rem;
border-radius: var(--radius);
overflow-x: auto;
margin-bottom: 1.5rem;
}
.article-body pre code {
background: none;
padding: 0;
font-size: 0.9rem;
line-height: 1.7;
}
.article-body blockquote {
border-left: 4px solid var(--primary);
padding: 1rem 1.5rem;
margin: 1.5rem 0;
background: var(--bg-alt);
border-radius: 0 var(--radius) var(--radius) 0;
}
.article-body blockquote footer {
margin-top: 0.5rem;
color: var(--text-light);
font-size: 0.9rem;
}
.article-tags {
padding: 2rem 0;
border-top: 1px solid var(--border);
margin-top: 2rem;
}
/* ===== AUTHOR BOX ===== */
.author-box {
display: flex;
gap: 1.5rem;
align-items: center;
padding: 2rem;
background: var(--bg-alt);
border-radius: var(--radius);
margin: 2rem auto;
}
.author-info strong { display: block; margin-bottom: 0.25rem; }
.author-info p { color: var(--text-light); font-size: 0.9rem; }
/* ===== KOMMENTARE ===== */
.comments {
margin-top: 3rem;
padding-top: 2rem;
}
.comments h2 { margin-bottom: 2rem; }
.comment {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border);
}
.comment-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.25rem;
}
.comment-header time { color: var(--text-light); font-size: 0.85rem; }
.comment-content p { color: var(--text-light); font-size: 0.95rem; }
.comment-form { margin-top: 2rem; }
.comment-form h3 { margin-bottom: 1rem; }
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 500; margin-bottom: 0.25rem; }
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.6rem;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 1rem;
font-family: inherit;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(228, 77, 38, 0.15);
}
/* ===== FOOTER ===== */
.footer {
background: #0f172a;
color: #94a3b8;
padding: 3rem 0 1.5rem;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.footer h4 { color: white; margin-bottom: 0.75rem; }
.footer li { margin-bottom: 0.5rem; }
.footer a { color: #94a3b8; transition: color 0.2s; }
.footer a:hover { color: white; }
.footer-bottom {
border-top: 1px solid #1e293b;
padding-top: 1.5rem;
text-align: center;
font-size: 0.85rem;
}
/* ===== FOCUS ===== */
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
.blog-layout { grid-template-columns: 1fr; }
.sidebar { position: static; }
.post-featured { grid-template-columns: 1fr; }
.post-featured-content { padding: 1.5rem; }
}
@media (max-width: 650px) {
.nav-links { display: none; }
.post-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition-duration: 0.01ms !important; }
}Die Schluesselkonzepte
Optimale Lesebreite
.container-narrow {
width: min(90%, 720px);
margin: 0 auto;
}Eine Lesebreite von 60-75 Zeichen (ca. 700px) ist ideal fuer laengere Texte.
Blog-Layout mit Grid
.blog-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 3rem;
}Sticky Sidebar
.sidebar {
position: sticky;
top: 80px; /* Abstand fuer die fixierte Navigation */
}Erweiterungsideen
- Tag-Filter fuer die Artikeluebersicht
- Dark Mode mit Custom Properties
- Lesefortschrittsanzeige oben auf der Seite
- Verwandte Artikel unter dem Hauptartikel
- Social Share Buttons fuer das Teilen von Artikeln
- Paginierung fuer die Artikelliste
Was kommt als Naechstes?
Herzlichen Glueckwunsch! Du hast den gesamten HTML & CSS Kurs abgeschlossen. Du beherrschst jetzt:
- Semantisches HTML5
- Modernes CSS mit Flexbox, Grid und Custom Properties
- Responsive Design mit Mobile First
- Barrierefreiheit und SEO-Grundlagen
Der naechste Schritt? Lerne JavaScript, um deine Webseiten interaktiv zu machen!
Zusammenfassung
- Ein Blog-Layout besteht aus Uebersichtsseite und Einzelartikel-Seite
- CSS Grid fuer das Hauptlayout (Content + Sidebar)
- Optimale Lesebreite (ca. 720px) fuer Artikeltexte
- Sticky Sidebar mit
position: sticky - Featured Post als hervorgehobener Artikel im Grid
- Kommentar-Sektion mit Formular
- Responsive: Sidebar rutscht auf Mobile unter den Inhalt
Pro-Tipp: Nutze dein Blog-Layout als Vorlage fuer ein echtes Blog-Projekt! Kombiniere es mit einem Static Site Generator wie Astro, Hugo oder Eleventy, um automatisch HTML-Seiten aus Markdown-Dateien zu generieren. So kannst du dich auf den Inhalt konzentrieren, waehrend das Tool den Rest erledigt.