Compile Academy Jetzt lernen
{ } Kurs · 61 Lektionen · ca. 400 Minuten

CSS lernen

Mit CSS gibst du Webseiten Farbe, Form und Layout. Vom ersten Selektor bis zu responsiven, animierten Layouts mit Flexbox und Grid.

CSS-Kurs startenCompiler öffnen
  • Selektoren
  • Farben & Schriften
  • Box-Modell
  • Flexbox
  • Grid
  • Responsive Design
  • Animationen
  • Eigene Programme & Vertiefung
  • CSS-Variablen: Farben an einer Stelle
  • clamp: Schrift flexibel begrenzen
  • Bewegung auf Wunsch reduzieren
  • aspect-ratio: eine Form bleibt im Verhältnis
  • object-fit: Bilder passend zuschneiden
  • padding-inline: Abstand in Leserichtung
  • overflow-wrap: lange Wörter umbrechen
  • position: sticky – ein Kopf bleibt sichtbar
  • transform: verschieben und drehen
  • :has() – ein Element reagiert auf seinen Inhalt
  • linear-gradient: ein Farbverlauf
  • :nth-child – jede zweite Zeile
  • Größen mit border-box berechenbar halten
  • Ein Größenverhältnis festlegen
  • Großen Inhalt innerhalb einer Box scrollen
  • Abstände im Layout mit gap setzen
  • Lange Bezeichner umbrechen lassen
  • Eigene Stapelkontexte bewusst erzeugen
  • Lesbares Glas mit begrenztem Backdrop-Blur
  • Fokusmarkierungen mit Abstand lesbar halten
  • Display & Positionierung
  • CSS Grid
  • Transitions & Animationen

Das lernst du

  1. Kapitel 1Selektoren & Verknüpfung – Regeln schreiben und Elemente gezielt auswählen.
    Hallo, CSS! · Klassen & IDs
  2. Kapitel 2Farben, Hintergründe & Schriften – Farbsysteme und Typografie.
    Farben & Schriften
  3. Kapitel 3Das Box-Modell – margin, padding, border – und wie breit eine Box wirklich ist.
    Das Box-Modell
  4. Kapitel 4Display & Positionierung – block, inline, ausblenden und Elemente gezielt platzieren.
    block, inline und inline-block · Ausblenden mit display: none · position: relative – ein kleiner Versatz · position: absolute – genau in die Ecke · Boss: eine Karte mit Hinweis-Badge
  5. Kapitel 5Flexbox – Elemente flexibel in einer Reihe oder Spalte anordnen.
    Flexbox-Labor · Boss: Navigationsleiste
  6. Kapitel 6CSS Grid – Spalten, Zeilen und responsive Raster – ganz ohne Media Queries.
    Spalten mit fr aufteilen · repeat(): viele gleiche Spalten · Über mehrere Spalten: span · Responsiv mit auto-fit und minmax · Boss: eine Bildergalerie im Raster
  7. Kapitel 7Responsive Design – Layouts, die auf jedem Bildschirm funktionieren.
    Media Queries
  8. Kapitel 8Deine Code-Werkstatt – Gelerntes verbinden und einen neuen Baustein entdecken.
    Ein Raster mit CSS Grid
  9. Kapitel 9Werkstatt: Verstehen und selbst bauen – Neue Bausteine in kurzen Erklärungen und eigenen Programmen üben.
    Zustände: hover und Tastaturfokus · Sanfte Übergänge mit transition · Boss: ein responsives Kartenraster
  10. Kapitel 10Neue Werkzeuge für eigene Ideen – Neue Konzepte verstehen, ergänzen und selbst anwenden.
    CSS-Variablen: Farben an einer Stelle · clamp: Schrift flexibel begrenzen · Bewegung auf Wunsch reduzieren
  11. Kapitel 11Mehr können: dein nächstes Übungskapitel – Vier neue Bausteine in kleinen Schritten verstehen und selbst anwenden.
    aspect-ratio: eine Form bleibt im Verhältnis · object-fit: Bilder passend zuschneiden · padding-inline: Abstand in Leserichtung · overflow-wrap: lange Wörter umbrechen
  12. Kapitel 12Meisterkapitel: wie echte Programme gebaut sind – Fünf Bausteine aus echten Projekten – erklärt, verbunden, ergänzt und selbst geschrieben.
    position: sticky – ein Kopf bleibt sichtbar · transform: verschieben und drehen · :has() – ein Element reagiert auf seinen Inhalt · linear-gradient: ein Farbverlauf · :nth-child – jede zweite Zeile
  13. Kapitel 13Projektwerkzeuge: verstehen und anwenden – Acht weitere Bausteine mit Erklärseiten und vier Übungen je Lektion.
    Größen mit border-box berechenbar halten · Ein Größenverhältnis festlegen · Großen Inhalt innerhalb einer Box scrollen · Abstände im Layout mit gap setzen · Lange Bezeichner umbrechen lassen · Eigene Stapelkontexte bewusst erzeugen · Lesbares Glas mit begrenztem Backdrop-Blur · Fokusmarkierungen mit Abstand lesbar halten
  14. Kapitel 14Pseudoklassen & Zustände – :hover, :focus-visible und mehr.
    ::before und ::after: Inhalt aus CSS · :not() – alle außer … · :first-child und :last-child · :checked – auf Häkchen reagieren · Boss: Formularzustände gestalten
  15. Kapitel 15Transitions & Animationen – Sanfte Übergänge, Hover-Effekte und eigene Animationen mit @keyframes.
    transition: Eigenschaft, Dauer, Kurve · Hover-Effekt mit transform: scale · @keyframes: eine eigene Animation · Endlos animieren: infinite und alternate · Boss: ein Ladeindikator
  16. Kapitel 16CSS-Variablen & Struktur – Custom Properties und wartbare Styles.
    var() mit Ersatzwert · Variablen lokal überschreiben · Rechnen mit calc() · Wer gewinnt? Spezifität · Boss: ein Farbschema mit Variablen
  17. Kapitel 18Abschlussprojekt – Responsive, animierte Landingpage.
    Portfolio-Stil 1: Schrift und Lesebreite · Portfolio-Stil 2: die Navigationsleiste · Portfolio-Stil 3: Projektkarten mit Schatten · Portfolio-Stil 4: ein freundliches Formular · Boss: das Portfolio fürs Handy

Abschlussprojekt: Responsive Landingpage

Eine animierte Landingpage, die auf Handy und Desktop gut aussieht.

So funktioniert's

Jede Lektion beginnt mit kurzen Erklärseiten. Danach übst du mit Auswahlfragen, Lückentexten, Code ordnen und eigenem Code – mit Hinweisen und sofortigem Feedback. Kostenlos, ohne Werbung, auf Handy, Tablet und PC.

Jetzt CSS lernen