Im zweiten Teil haben wir das zweispaltige Layout mit CSS Grid gebaut – Hauptbereich links, Sidebar rechts. Jetzt füllen wir dieses Layout mit echten Inhalten: Cards, Bilder, Links und kleine Komponenten, die die Seite übersichtlicher und lebendiger machen.
Das CSS wird dabei erweitert, aber nicht neu gedacht. Das Grundgerüst aus Teil 1 und 2 bleibt vollständig erhalten – wir bauen nur obendrauf.
Die erweiterte Website – Beispiel 3Was sich in der HTML-Struktur ändert
Im Hauptbereich kommen zwei neue Dinge dazu: ein Card-Grid mit mehreren <article>-Elementen und ein hervorgehobener Inhaltsblock. In der Sidebar ergänzen wir weitere Infoboxen. Die grundlegende Struktur aus .layout, .main-content, .sidebar und .box bleibt unverändert.
Cards im Hauptbereich
Eine Card ist ein eigenständiger Inhaltsbereich – meistens mit Bild, Überschrift, kurzem Text und einem Link. Karten eignen sich gut, um mehrere gleichwertige Themen nebeneinander darzustellen, zum Beispiel Kategorien, Artikel oder Themenübersichten.
Die drei Cards stehen in einem .card-grid, das selbst wieder ein Grid ist – diesmal mit zwei Spalten:
<div class="card-grid">
<article class="card">
<img src="bilder/html.jpg" alt="Laptop mit geöffneter Website" class="card-image">
<div class="card-content">
<h3>💻 HTML lernen</h3>
<p>
HTML ist die Grundstruktur jeder Website. Hier beginnt fast jedes Webprojekt.
</p>
<a href="#" class="card-link">Mehr über HTML</a>
</div>
</article>
<article class="card">
<img src="bilder/css.jpg" alt="Code auf einem Bildschirm" class="card-image">
<div class="card-content">
<h3>🎨 CSS gestalten</h3>
<p>
Mit CSS wird aus einfachem HTML eine ansprechende und übersichtliche Website.
</p>
<a href="#" class="card-link">Mehr über CSS</a>
</div>
</article>
<article class="card">
<img src="bilder/links.jpg" alt="Die Welt verlinkt" class="card-image">
<div class="card-content">
<h3>🔗 Links nutzen</h3>
<p>
Links verbinden Seiten miteinander und helfen Besuchern,
sich auf der Website zurechtzufinden.
</p>
<a href="#" class="card-link">Mehr über Links</a>
</div>
</article>
</div>
Die Links zeigen auf # – das ist ein Anker, der auf die aktuelle Seite selbst verweist, ohne zu einer bestimmten Stelle zu springen. Das ist bei Beispielseiten eine saubere Lösung: Der Link sieht aus wie ein echter Link und verhält sich auch so (Cursor wechselt, Farbe stimmt), aber er führt nirgendwo hin, das man noch nicht kennt. In einer echten Website würde hier die Zieladresse stehen.
Emojis im HTML mit HTML-Entitäten
Die kleinen Symbole in den Überschriften – 💻 , 🎨 , 🔗 – sind keine Bilder. Es sind Emojis, die als HTML-Entitäten geschrieben werden. Zum Beispiel steht 💻 für den Laptop-Emoji. Das Muster ist immer gleich: ein kaufmännisches Und, dann eine Raute, dann eine Zahl, dann ein Semikolon.
Diese Schreibweise heißt numerische Zeichenreferenz. Die Zahl dahinter ist der Unicode-Codepunkt des Zeichens – jedes Emoji und jedes Sonderzeichen hat eine eindeutige Nummer. Der Vorteil: Die Datei bleibt reines ASCII, und der Browser zeigt das Emoji trotzdem korrekt an – unabhängig davon, ob der Texteditor oder die Datenbank mit Unicode zurechtkommt.
Du kannst die Zahl zum Beispiel auf emojipedia.org nachschlagen oder direkt in der Zeichentabelle deines Systems. Alternativ kannst du Emojis auch direkt ins HTML kopieren – in modernen Editoren und Browsern funktioniert das ebenfalls problemlos.
Bilder mit alt und class="card-image"
Jede Card hat ein Bild, das in einem separaten Ordner namens bilder/ liegt. Der Pfad src="bilder/html.jpg" ist relativ zur HTML-Datei – der Browser sucht also im Unterordner bilder, der neben der index.html liegt.
Wichtig ist das alt-Attribut. Es enthält einen kurzen beschreibenden Text, der das Bild für Menschen zugänglich macht, die es nicht sehen können – zum Beispiel weil sie einen Screenreader benutzen oder weil das Bild nicht geladen werden konnte. Suchmaschinen lesen das alt-Attribut ebenfalls und nutzen es, um den Bildinhalt einzuordnen.
Ein gutes alt-Attribut beschreibt, was auf dem Bild zu sehen ist – nicht, was das Bild bedeuten soll. alt="Laptop mit geöffneter Website" ist gut. alt="HTML" oder alt="Bild" sind schlechte Alternativen.
Die Klasse card-image übernimmt die Darstellung des Bildes innerhalb der Card. Ohne CSS-Regeln würde das Bild je nach Originalgröße aus dem Layout herausragen oder zu klein erscheinen. Daher greifen zwei Regeln:
.card-image {
width: 100%;
height: auto;
max-width: 100%;
object-fit: cover;
}
width: 100% sorgt dafür, dass das Bild immer die volle Breite der Card ausfüllt. height: auto passt die Höhe proportional an, damit das Bild nicht verzerrt wird. max-width: 100% verhindert zusätzlich, dass das Bild über den Rand des Containers hinauswächst – das ist eine Absicherung, die besonders auf kleineren Bildschirmen greift. object-fit: cover ist eine optionale Ergänzung: Sie bewirkt, dass das Bild seinen Bereich vollständig ausfüllt und dabei gleichmäßig zugeschnitten wird, wenn Höhe und Breite nicht zum Seitenverhältnis des Originals passen.
Zusätzlich steht im allgemeinen CSS eine globale Regel für alle Bilder:
img {
max-width: 100%;
display: block;
}
display: block ist hier sinnvoll, weil Bilder standardmäßig Inline-Elemente sind. Als Inline-Element entsteht unterhalb des Bildes ein kleiner Leerraum durch die Grundlinie des Textes – das sieht in Cards unschön aus. display: block behebt das.
Hover-Effekt mit box-shadow und rgba
Wenn man mit der Maus über eine Card fährt, verändert sie sich leicht: Sie hebt sich ein wenig an, und der Schatten wird tiefer und dunkler. Das passiert mit einer CSS-Transition und zwei Zuständen – dem normalen Zustand und dem :hover-Zustand:
.card {
background-color: snow;
border-radius: 0.8rem;
overflow: hidden;
box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-0.4rem);
box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.25);
}
box-shadow nimmt mehrere Werte: den horizontalen Versatz, den vertikalen Versatz, die Unschärfe (blur) und die Farbe. Der Versatz 0 0.4rem bedeutet: kein seitlicher Schatten, nur nach unten. Die Farbe ist rgba(0, 0, 0, 0.08).
rgba steht für Red, Green, Blue, Alpha. Die ersten drei Werte bestimmen die Farbe – hier 0, 0, 0, also Schwarz. Der vierte Wert ist die Deckkraft: 0 ist vollständig transparent, 1 ist vollständig sichtbar. 0.08 ergibt einen sehr zarten, kaum sichtbaren Schatten im Normalzustand. Beim Hover wechselt der Wert auf 0.25 – der Schatten wird deutlich sichtbarer.
transition: transform 0.2s ease, box-shadow 0.2s ease sorgt dafür, dass diese Veränderung nicht abrupt passiert, sondern weich über 0,2 Sekunden übergeht. ease ist dabei eine vordefinierte Beschleunigungskurve: langsam starten, schnell werden, langsam enden – das fühlt sich natürlicher an als ein linearer Übergang.
transform: translateY(-0.4rem) verschiebt die Card beim Hover um 0,4rem nach oben. Das erzeugt den Eindruck, dass sie sich leicht abhebt – kombiniert mit dem stärkeren Schatten wirkt das wie ein echter Tiefeneffekt.
Links im Text und als Button
Es gibt zwei verschiedene Link-Stile in diesem Beispiel: .card-link am Ende jeder Card und .text-link für Links direkt im Fließtext. Beide teilen dieselben CSS-Regeln:
.card-link,
.text-link {
color: royalblue;
text-decoration: none;
font-weight: bold;
transition: color 0.2s ease;
}
.card-link:hover,
.text-link:hover {
color: darkblue;
text-decoration: underline;
}
Beide Klassen gelten für <a>-Elemente, aber in unterschiedlichen Kontexten. .card-link steht am Ende einer Card und wirkt wie ein kleiner Handlungsaufforderung. .text-link sitzt direkt im Fließtext und bleibt dort lesbar, ohne optisch zu dominieren. Dass beide dieselbe Farbe und dasselbe Verhalten haben, sorgt für ein einheitliches Erscheinungsbild.
Das erweiterte CSS im Überblick
Gegenüber Teil 2 kommen folgende Blöcke dazu – der Rest bleibt unverändert:
/* Neu in Teil 3: Card-Grid */
.card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 2rem;
}
/* Neu in Teil 3: Card-Komponente */
.card {
background-color: snow;
border-radius: 0.8rem;
overflow: hidden;
box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-0.4rem);
box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.25);
}
.card-image {
width: 100%;
height: auto;
max-width: 100%;
object-fit: cover;
}
.card-content {
padding: 1.6rem;
}
.card-content h3 {
margin-bottom: 1rem;
}
/* Neu in Teil 3: Link-Stile */
.card-link,
.text-link {
color: royalblue;
text-decoration: none;
font-weight: bold;
transition: color 0.2s ease;
}
.card-link:hover,
.text-link:hover {
color: darkblue;
text-decoration: underline;
}
repeat(2, 1fr) ist eine kompaktere Schreibweise für 1fr 1fr. Es bedeutet: Erstelle zwei gleich breite Spalten. Das repeat() ist besonders praktisch, wenn viele Spalten gleicher Breite entstehen sollen – statt 1fr 1fr 1fr 1fr schreibt man einfach repeat(4, 1fr).
Sidebar mit weiteren Infoboxen
Die Sidebar bekommt in Teil 3 zwei zusätzliche Boxen – eine mit Hinweisen, eine mit einem Ausblick auf den nächsten Teil. Strukturell ist das keine Neuerung: Es sind einfach weitere <div class="box">-Elemente, die untereinander gestapelt werden. Das margin-bottom: 2rem in .box sorgt dabei für den Abstand zwischen den Boxen.
<aside class="sidebar">
<div class="box">
<h2>Sidebar</h2>
<p>
Auch in der Sidebar können wir jetzt mehr Inhalt einbauen.
</p>
</div>
<div class="box">
<h3>💡 Hinweise</h3>
<p>
Bilder, Karten und Links machen die Seite lebendiger
und helfen bei der Struktur.
</p>
</div>
<div class="box">
<h3>➜ Nächster Schritt</h3>
<p>
Im nächsten Teil kümmern wir uns um die Navigation, Typografie und Zeichenabstand.
</p>
</div>
</aside>Was bisher entstanden ist
Nach drei Teilen hat unsere Beispielseite eine klare Struktur: ein festes Layout mit Hauptbereich und Sidebar, echte Inhaltskomponenten wie Cards mit Hover-Effekt, Bilder mit korrektem alt-Attribut und Links mit einheitlichem Stil. Das CSS ist schrittweise gewachsen, ohne dass wir etwas von früher überschrieben hätten.
Im nächsten Teil schauen wir uns die Navigation an – wie man eine Menüleiste baut und welche HTML- und CSS-Konzepte dahinterstecken.