Lädt...

CSS-Miniprojekt — Gestylte Landingpage

Die CSS-Zusammenfassung hat dein Werkzeug kartiert. Diese Session nutzt es. Du baust von Hand eine kleine gestylte Landingpage: Identitätsleiste, Hero mit klarem Call-to-Action, ein paar Feature-Karten und ein ruhiger Footer. Keine exotische neue Property — nur Fähigkeiten, die du schon geübt hast (Kaskade, Box-Modell, Flex, Grid, Responsive, Fokus).

Direkte Antwort

1) Skizziere zuerst die Abschnitte: Header + Nav, Hero + CTA, Features, Footer.
2) Markiere sie mit semantischem HTML (header, nav, main, section, footer) in einem Container mit max-width.
3) Lege gemeinsame Farben, Abstände und Radien als Custom Properties auf :root.
4) Nutze Flex für die obere Leiste und die Hero-Zeile; Grid für die Feature-Karten.
5) Füge einen Media-Query-Breakpoint hinzu und behalte :focus-visible auf Links und dem CTA.
6) Fertig heißt: die Seite liest sich auf schmaler Breite gut und Tab zeigt weiterhin Fokus — nicht, dass jeder CSS-Trick einmal vorkommt.

Bau-Reihenfolge für diese Landingpage

📊 Landing sections and CSS jobs

Section HTML job CSS job
Header + nav Seitenname + In-Page-Links Flex-Zeile, Gap, ruhiger Hintergrund
Hero Überschrift, kurzer Pitch, primärer CTA Flex oder Stapel; starker Kontrast; klarer Button
Features Drei kurze Karten Grid mit gleichen Spuren und Gap
Footer Kontakt- oder Rechtstext Ruhiges Padding; lesbarer gedämpfter Text
Shared tokens — :root-Farben, Abstände, Radien überall wiederverwendet
Responsive check Viewport-Meta schon im HTML Ein Breakpoint, der Hero/Karten stapelt

Verdrahte zuerst die Struktur, dann die Dekoration. Schöne Verläufe über eine Suppe aus divs sind schwerer zu reparieren als eine schlichte semantische Hülle mit ruhigem CSS.

Schritt 1 — Semantische Hülle

Beginne mit Landmarks. Klassen verfeinern das Aussehen; Elemente benennen Regionen für Leser und Hilfstechnologien.

Landing landmarks shell

html 
<body>
<header class="site-header">
<div class="container header-inner">
<a class="logo" href="#">BrightDesk</a>
<nav class="site-nav" aria-label="Primary">
<a href="#features">Features</a>
<a href="#contact">Contact</a>
</nav>
</div>
</header>

<main>
<section class="hero">
<div class="container hero-inner">
<div class="hero-copy">
<h1>Ship a calm landing with CSS you already know</h1>
<p class="lede">Flex the bar, Grid the cards, keep focus visible.</p>
<a class="btn" href="#features">See features</a>
</div>
</div>
</section>

<section id="features" class="features">
<div class="container">
<h2>What you practice</h2>
<div class="feature-grid">
<article class="card"><h3>Tokens</h3><p>Shared color and space.</p></article>
<article class="card"><h3>Layout</h3><p>Flex and Grid on purpose.</p></article>
<article class="card"><h3>Polish</h3><p>Breakpoint and focus.</p></article>
</div>
</div>
</section>
</main>

<footer id="contact" class="site-footer">
<div class="container">
<p>Practice page — style by hand before frameworks.</p>
</div>
</footer>
</body>

Halte den englischen Demo-Text kurz. Dein eigenes Projekt darf jeden Produktnamen tragen — die Struktur zählt mehr als die Markengeschichte.

Schritt 2 — Design-Tokens auf :root

Ziehe wiederholte Werte in Custom Properties, damit Palette und Abstände konsistent bleiben, wenn du die Seite anpasst.

Shared tokens for the landing

css 
:root {
--bg: #0b1220;
--surface: #111827;
--text: #f8fafc;
--muted: #cbd5e1;
--accent: #38bdf8;
--accent-ink: #0c4a6e;
--radius: 0.75rem;
--space: 1rem;
--max: 960px;
--focus: #fbbf24;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
background: var(--bg);
color: var(--text);
}

.container {
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--space);
}

Tokens sind keine Dekoration — sie stoppen Copy-Paste-Drift. Ändere --accent einmal, und CTA, Links sowie Fokus-Hinweise bleiben ausgerichtet.

Schritt 3 — Flex für Header und Nav

Eine eindimensionale Zeile ist eine Flex-Aufgabe: Logo auf der einen Seite, Links auf der anderen, gleichmäßiger Gap.

Flex header bar

css 
.site-header {
background: var(--surface);
border-bottom: 1px solid #1f2937;
}

.header-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space);
padding: 0.75rem 0;
}

.logo {
color: var(--text);
font-weight: 700;
text-decoration: none;
}

.site-nav {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.site-nav a {
color: var(--muted);
text-decoration: none;
}

.site-nav a:hover {
color: var(--accent);
}

flex-wrap hält die Leiste auf schmalen Screens ehrlich, bevor deine Media Query größere Abschnitte stapelt.

Schritt 4 — Hero-Band

Gib dem Pitch Raum, halte den Kontrast stark und lass den CTA wie die Hauptaktion aussehen.

Hero copy and primary CTA

css 
.hero {
padding: 3rem 0 2.5rem;
background:
radial-gradient(circle at top right, #1e3a5f 0%, transparent 45%),
var(--bg);
}

.hero-inner {
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: 40rem;
}

.hero h1 {
margin: 0;
font-size: clamp(1.75rem, 4vw, 2.5rem);
line-height: 1.15;
}

.lede {
margin: 0;
color: var(--muted);
font-size: 1.05rem;
}

.btn {
display: inline-block;
width: fit-content;
padding: 0.75rem 1.25rem;
border-radius: var(--radius);
background: var(--accent);
color: var(--accent-ink);
font-weight: 700;
text-decoration: none;
}

.btn:hover {
filter: brightness(1.05);
}

clamp auf der Überschrift ist ein kleiner moderner Touch aus früheren Lektionen — nützlich, nicht Pflicht. Der CTA muss lesbar bleiben: Accent-Hintergrund mit dunklerer Tinte, nicht blass auf blass.

Schritt 5 — Grid für Feature-Karten

Zwei Achsen (Zeilen und Spalten gleicher Karten) gehören zu Grid. Halte Karten-Padding und Border ruhig.

Feature cards with Grid

css 
.features {
padding: 2rem 0 3rem;
}

.features h2 {
margin: 0 0 1rem;
}

.feature-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space);
}

.card {
padding: 1.25rem;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid #1f2937;
}

.card h3 {
margin: 0 0 0.5rem;
font-size: 1.1rem;
}

.card p {
margin: 0;
color: var(--muted);
}

.site-footer {
padding: 1.5rem 0 2rem;
border-top: 1px solid #1f2937;
color: var(--muted);
font-size: 0.95rem;
}

Auf dem Handy reicht eine Spalte. Verbreitere das Grid am Breakpoint — erfinde kein drittes Layout-System für drei Karten.

Schritt 6 — Breakpoint und sichtbarer Fokus

Ein ehrlicher Breakpoint plus Fokusringe schließt die Übungsseite ab. Tastaturnutzer müssen weiterhin sehen, wo sie sind.

Widen cards and keep focus visible

css 
@media (min-width: 640px) {
.feature-grid {
grid-template-columns: repeat(3, 1fr);
}

.hero {
padding-top: 4rem;
}
}

a:focus-visible,
.btn:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
}

Barrierefreiheits-Styles hast du schon vertieft gelernt. Hier wendest du nur die Gewohnheit an: nie einen hübschen CTA ohne Fokus-Hinweis ausliefern.

Selbst ausprobieren

  1. Erstelle index.html + styles.css und füge die Landmark-Hülle ein; verknüpfe das Stylesheet.
  2. Füge die :root-Tokens und Body/Container-Regeln hinzu; prüfe, dass die Seite zentriert und lesbar ist.
  3. Style den Header mit Flex und die Feature-Karten mit Grid (eine Spalte, ab 640px drei).
  4. Style den CTA; tabbe durch Logo, Nav und Button — Fokus muss sichtbar bleiben.
  5. Verkleinere auf Handybreite: kein horizontaler Scroll, gestapelte Karten, nutzbare Tipziele.
  6. Optional: wenn du eine Hover-Transition auf .btn setzt, ergänze prefers-reduced-motion.

Häufige Fehler

  • Eine Komponentenbibliothek öffnen, bevor du diese kleine Seite von Hand stylen kannst
  • Jeden Abschnitt mit position: absolute bemalen statt Flex/Grid-Flow
  • max-width am Container weglassen, sodass Zeilen auf großen Screens von Rand zu Rand laufen
  • Fokus-Outlines „fürs Design“ am CTA und den Nav-Links entfernen
  • Fünf Breakpoints für drei Karten statt eines klaren Verbreiterungs-Schritts
  • Letzte Lektionen vergessen: die Zusammenfassung kartierte Skills; Barrierefreiheit verlangte sichtbaren Fokus — beides gilt hier weiter

Zusammenfassung

  • Dieses Miniprojekt verbindet Kursfähigkeiten zu einer gestylten Landingpage
  • Zuerst Struktur (Landmarks), dann Tokens, Flex-Leiste, Grid-Karten, Breakpoint, Fokus
  • Flex für eindimensionales Chrome; Grid für die Feature-Matrix
  • Fertig heißt lesbar auf dem Handy und tastatursicher — nicht framework-fertiges Gerüst
  • Als Nächstes (optional fortgeschritten): CSS !important (important), wenn du tiefere Kaskaden-Randfälle willst; sonst weiter kleine Seiten von Hand üben

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
7
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 70 von 72
Css Tutorial