CSS Übungen

Praktische Aufgaben zu Buttons, Cards, Navbar, Responsive Layout und Dark Mode. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

• CSS-Grundlagen praktisch festigen
• Layouts ohne unnötiges HTML bauen
• kleine UI-Aufgaben prüfungsnah umsetzen

Erklärung

CSS lernt man durch bewusstes Nachbauen und Prüfen. Arbeite in kleinen Aufgaben: zuerst Struktur verstehen, dann eine Regel ergänzen, anschließend im Browser testen.

Achte besonders auf mobile Darstellung, Tastaturfokus, Kontrast und saubere Abstände.

Beispiele

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding-inline: 1rem;
  border-radius: 0.5rem;
}

Diese Basis eignet sich für Button-Übungen.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

Das Raster ist eine gute Grundlage für das Landingpage-Mini-Projekt.

Typische Fehler

• Nur Desktop prüfen.
• Fokuszustände vergessen.
• CSS schreiben, ohne die HTML-Struktur zu verstehen.

Best Practices

• Prüfe jede Aufgabe bei schmaler und breiter Ansicht.
• Nutze DevTools für Box Model und Grid/Flex-Overlays.
• Schreibe nach der Lösung kurz auf, welche Eigenschaft welchen Effekt hatte.

Kleine Übung

Mini-Projekt: Baue eine einfache Landingpage mit Hero-Bereich, Feature-Karten, Navbar, responsive Grid und Dark Mode über CSS-Variablen.

Zusammenfassung

CSS sollte Gestaltung systematisch lösen: klare Selektoren, wiederkehrende Werte, responsive Layouts und verständliche Zustände. Gute Stylesheets bleiben auch bei wachsenden Seiten wartbar.

Weiterführende Seiten

• Vorherige Seite: CSS Best Practices
• Zur Übersicht
• Responsive Design
• HTML Übungen