Codae

CSS: Websites gestalten

Die HTML-Website lesbar, responsiv und konsistent gestalten.

12 Kapitel · 96 LektionenFür EinsteigerKostenlosLäuft im Browser

Kurs startenAlle Kurse

Das lernst du

Kursinhalt

  1. Kapitel 1 Styling-Grundlagen

    Elemente gezielt gestalten.

    1. Stylesheet verbinden
    2. Selektoren und Klassen
    3. Farben und Hintergründe
    4. Vererbung
    5. Kaskade und Spezifität debuggen
    6. Erste konsistente Inhaltskarte
    7. Lückentext zu Selektoren
    8. Spezifitäts-Herausforderung

  2. Kapitel 2 Box-Modell und Größen

    Abstände und Maße verstehen.

    1. Content, Padding, Border, Margin
    2. box-sizing
    3. Absolute und relative Einheiten
    4. Breite, Maximalbreite und Überlauf
    5. Abstandsfehler untersuchen
    6. Sauberes Seitenraster vorbereiten
    7. Einheiten-Lückentext
    8. Box-Modell Challenge

  3. Kapitel 3 Typografie und Hierarchie

    Inhalte angenehm lesbar machen.

    1. Schrift und Fallbacks
    2. Schriftgröße und Zeilenhöhe
    3. Textbreite und Ausrichtung
    4. Überschriftenstaffelung
    5. Kontrast und Linkzustände
    6. Kleine redaktionelle Seite gestalten
    7. Typografie-Lückentext
    8. Lesbarkeits-Challenge

  4. Kapitel 4 Flexbox

    Elemente in einer Richtung anordnen.

    1. Flex-Container und Achsen
    2. Ausrichtung und Abstand
    3. Wachstum und Schrumpfen
    4. Umbruch
    5. Kaputte Navigation reparieren
    6. Responsive Toolbar und Kartenreihe
    7. Flexbox-Lückentext
    8. Flexbox-Layout Challenge

  5. Kapitel 5 Grid

    Zweidimensionale Layouts bauen.

    1. Spalten und Zeilen
    2. fr, gap und minmax
    3. Elemente platzieren
    4. Automatische Kartenraster
    5. Verschachtelte Layouts
    6. Produktübersicht gestalten
    7. Grid-Lückentext
    8. Grid-Meister-Challenge

  6. Kapitel 6 Responsive Websites

    Verschiedene Ansichten unterstützen.

    1. Mobile zuerst
    2. Media Queries
    3. Flexible Bilder
    4. Flüssige Typografie
    5. Kleine und große Ansichten debuggen
    6. Detailseite responsiv umbauen
    7. Media Query Lückentext
    8. Responsiv-Challenge

  7. Kapitel 7 Komponenten und Zustände

    Wiederverwendbare Oberflächen gestalten.

    1. CSS-Variablen als Tokens
    2. Buttons und Formulare
    3. Hover, Fokus und aktive Zustände
    4. Positionierung und Ebenen
    5. Transition plus reduzierte Bewegung
    6. Kleines Komponenten-Set bauen
    7. Zustände-Lückentext
    8. Komponenten-Challenge

  8. Kapitel 8 Website fertig gestalten

    Ein Design vollständig umsetzen.

    1. Designziel und Tokens festlegen
    2. Header und Hero
    3. Inhalts- und Produktbereiche
    4. Footer und Formulare
    5. Mobile, Fokus und Überlauf prüfen
    6. Fertige Website begründet vorstellen
    7. Projekt-Lückentext
    8. Abschluss-Challenge

  9. Kapitel 9 Animationen und visuelle Effekte

    Websites durch Keyframe-Animationen, Transformationen und visuelle Filter lebendig und dynamisch gestalten.

    1. 2D- und 3D-Transformationen
    2. Einfache Übergänge und Timing-Funktionen
    3. @keyframes und Animationsverläufe
    4. Visuelle Filter und Backdrop-Effekte
    5. Ruckelnde Animationen und Performance debuggen
    6. Interaktives Hero-Banner mit Animationen
    7. Animations-Lückentext
    8. Effekt-Meister-Challenge

  10. Kapitel 10 Barrierefreiheit und sauberer Code

    Websites für alle Nutzer zugänglich machen und CSS-Strukturen wartbar halten.

    1. Barrierefreie Fokus-Indikatoren
    2. Farbkontraste und Lesbarkeit
    3. Screenreader-only Inhalte
    4. Reduzierte Bewegung und Nutzerpräferenzen
    5. Barrierefreiheit-Fehler im CSS beheben
    6. Barrierefreies Formular-Design
    7. A11y- und Clean-Code-Lückentext
    8. Inklusive UI-Komponenten-Challenge

  11. Kapitel 11 Performance und CSS-Architektur

    CSS-Dateien skalierbar organisieren, Ladezeiten optimieren und Best Practices für große Projekte anwenden.

    1. Modularer Aufbau und @import
    2. BEM-Namenskonvention
    3. CSS-Dateigröße und Rendering-Blockaden
    4. Ungenutzten Code und Spezifitätsschulden reduzieren
    5. Architektur-Fehler und hohe Spezifität debuggen
    6. Strukturierte Design-System-Basis
    7. Architektur- und BEM-Lückentext
    8. Refactoring-Challenge für Legacy-CSS

  12. Kapitel 12 Capstone-Projekt und Ausblick

    Das gesamte erlernte CSS-Wissen in einer vollständigen, professionellen, responsiven und barrierefreien Webanwendung anwenden.

    1. Capstone-Planung und semantisches Layout
    2. Design-Tokens und globale Architektur
    3. Komplexes Grid- und Flexbox-Dashboard
    4. Interaktive Komponenten mit Zuständen und Animationen
    5. Responsive Fehler und Layout-Abstürze beheben
    6. Vollständige responsive Web-App umsetzen
    7. Capstone-Lückentext zu Best Practices
    8. Finale CSS-Meister-Challenge

So funktioniert jede Lektion

Keine stundenlangen Videos. Jede Lektion ist eine kurze Runde, die du selbst machst, bis die Idee sitzt.

  1. Lesen

    Eine kurze Erklärung und eine klare Aufgabe. Gerade genug, um loszulegen.

  2. Schreiben

    Du tippst den Code selbst, in einem echten Editor direkt im Browser.

  3. Ausführen

    Führ ihn aus und sieh sofort, was dein Programm wirklich tut.

  4. Prüfen

    Prüfen sagt dir, ob die Aufgabe gelöst ist, und was noch fehlt, falls nicht.

Gut zu wissen

Weitere Kurse