Kurs · Modul 287
Websites mit CSS gestalten
Nach diesem Kurs setzt du einen Gestaltungsentwurf aus Figma sauber und wartbar in CSS um, vom einzelnen Button bis zur responsiven Kampagnenseite. Du weisst, warum eine Regel gewinnt, und löst Konflikte in den DevTools ohne !important. Du rechnest Box Model, Einheiten, Rasterspalten und fliessende Schriftgrössen sicher nach, baust Komponenten mit Flexbox und Seitenlayouts mit Grid, entwickelst nach Mobile First und legst Farben, Schriften und Abstände als Design-Tokens an, inklusive Dark Mode. Dabei achtest du auf Kontraste, sichtbare Fokuszustände und reduzierte Bewegung. Neun Lektionen, 60 Aufgaben mit 14 Code-Laboren, ein Praxisprojekt und eine Prüfungssimulation bereiten dich auf den Kompetenznachweis vor. Üben musst du selbst, aber du weisst jederzeit, was du übst und warum.
Dein nächster Schritt
Wie der Browser CSS liest: Kaskade, Spezifität, Vererbung
Du verstehst, warum eine Regel gewinnt, berechnest Spezifität und findest Konflikte in den DevTools in Sekunden. · 40 Min.
Dein KI-Lerncoach
Lernen mit KI, aber richtig
Der Tutor kennt dieses Modul, deine Lektion und deine Aufgaben. Er führt dich zur Lösung, statt sie vorzusagen.
Training
…
Aufgaben gelöst
Karteikarten
…
Karten im Kurs
Praxisprojekt
…
Meilensteine
Prüfung
…
bestes Ergebnis
Deine Kompetenzen
offen begonnen sicher gemeistert
Berechnet aus deinen gelösten Aufgaben. Ziel für den Kompetenznachweis: überall mindestens «sicher» auf Stufe 2.
| 1 · Grundlagen | 2 · Fortgeschritten | 3 · Erweitert | |
|---|---|---|---|
| A · Kaskade und Selektoren | 0% | 0% | – |
| B · Box Model, Einheiten und Typografie | – | – | – |
| C · Komponenten mit Flexbox | – | – | – |
| D · Layouts mit Grid | – | – | – |
| E · Responsive Design | – | – | – |
| F · Gestaltungssystem und Zustände | – | – | – |
Abzeichen
Lektionen
- 1Wie der Browser CSS liest: Kaskade, Spezifität, VererbungDu verstehst, warum eine Regel gewinnt, berechnest Spezifität und findest Konflikte in den DevTools in Sekunden.Gratis40 Min.
- 2Moderne Selektoren, BEM und Cascade LayersDu setzt :is(), :where() und :has() gezielt ein, benennst Klassen nach BEM und ordnest gewachsenes CSS mit @layer.40 Min.
- 3Das Box Model: Inhalt, Padding, Rahmen, MarginDu rechnest Breiten mit content-box und border-box nach, verstehst Margin-Collapsing und verhinderst Überlauf.35 Min.
- 4Einheiten und lesbare TypografieDu wählst begründet zwischen px, rem, em, %, vw und ch, setzt eine Typo-Skala in rem um und sorgst für gute Zeilenlängen.40 Min.
- 5Komponenten mit FlexboxDu baust Navigation, Buttons mit Icon und Produktkarten mit Flexbox und verstehst, wie grow und shrink den Platz verteilen.40 Min.
- 6Seitenlayouts mit CSS GridDu überträgst ein 12-Spalten-Raster aus Figma, benennst Bereiche mit grid-template-areas und baust Galerien mit auto-fit und Subgrid.45 Min.
- 7Responsive Design: Mobile First, clamp() und Container QueriesDu baust Seiten nach Mobile First, setzt Breakpoints am Inhalt, berechnest fliessende Schriftgrössen und nutzt Container Queries.45 Min.
- 8Gestaltungssystem: Custom Properties, Tokens und Dark ModeDu legst Farben, Schriften und Abstände als Basis- und Bedeutungs-Tokens an und setzt damit einen Dark Mode um.40 Min.
- 9Zustände, Kontrast und Bewegung barrierefrei gestaltenDu gestaltest Hover-, Fokus-, Aktiv- und Deaktiviert-Zustände, prüfst Kontraste nach WCAG und respektierst reduzierte Bewegung.40 Min.