Alle Demos aus der Vorlesung zum Nachklicken. Sie bestehen selbst nur aus HTML, CSS und JavaScript, ohne Framework. Rechtsklick → „Seitenquelltext anzeigen“ ist ausdrücklich erlaubt.
Ausprobieren
CSS-WerkstattHTML und CSS nebeneinander, Vorschau sofort. Startet mit einer Startseite ohne CSS.
Selektor-SpielplatzSelektor eintippen, Treffer leuchten auf.
Spezifitäts-DuellZwei Regeln, ein Element: Wer gewinnt, und warum?
Box-InspektorPadding, Border, Margin und box-sizing mit Schiebereglern.
Flexbox-SpielwieseAchsen, justify-content, align-items, wrap.
Grid-SpielwieseSpalten, fr, auto-fill, Bereiche und eine Media Query.
Kurz testen
Was trifft der Selektor?7 Fragen
Welche Regel gewinnt?6 Fragen
CSS Escape RoomDas HTML ist fest. Schaffen Sie es, nur mit CSS das Ziel nachzubauen?
Warum ist der Button rot?Die Leitfrage vom Anfang, zum selbst Nachprüfen in den DevTools
Nachschlagen
MDN: CSS · Flexbox-Übersicht · Grid-Übersicht · Flexbox Froggy · Grid Garden