Interaktiver Kurs Im Browser Anfänger
CSS Box-Modell, Positionierung, Flexbox und Grid. Geübt wird da, wo mehrere Eigenschaften zusammenwirken, und am Ende steht dein eigenes Portfolio.
Hier geht es los
Abschnitt 1 · CSS anschalten
Was ist CSS?
Lektion 1 von 5 · Noch nicht begonnen
Kurs starten
Die Lektionen öffnest du mit dem Basis Konto, das kostet nichts. Damit bleibt
auch erhalten, was du geschafft hast, auf jedem Gerät.
Deine Strecke 0 von 16 Abschnitten erledigt
01 CSS anschalten
, noch offen 02 Selektoren
, noch offen 03 Kaskade und Vererbung
, noch offen 04 Das Box-Modell
, noch offen 05 Werte, Einheiten und Farben
, noch offen 06 Typografie
, noch offen 07 Hintergründe, Rahmen und Tiefe
, noch offen 08 Positionierung
, noch offen 09 Flexbox
, noch offen 10 Grid
, noch offen 11 Flex oder Grid? Layouts zusammensetzen
, noch offen 12 Responsiv gestalten
, noch offen 13 Bewegung
, noch offen 14 Komponenten in der Praxis
, noch offen 15 Modernes CSS
, noch offen 16 Sauberes CSS
, noch offen
Ein Punkt ist ein Abschnitt, jeder endet mit einem kurzen Test. Ein Klick schlägt ihn unten auf. 01 CSS anschalten 0 / 5 02 Selektoren 0 / 8 03 Kaskade und Vererbung 0 / 6 04 Das Box-Modell 0 / 7 05 Werte, Einheiten und Farben 0 / 6 06 Typografie 0 / 7 07 Hintergründe, Rahmen und Tiefe 0 / 6 08 Positionierung 0 / 8 09 Flexbox 0 / 9 10 Grid 0 / 9 11 Flex oder Grid? Layouts zusammensetzen 0 / 5 12 Responsiv gestalten 0 / 7 13 Bewegung 0 / 6 14 Komponenten in der Praxis 0 / 6 15 Modernes CSS 0 / 7 16 Sauberes CSS 0 / 6 Abschnitt 1
CSS anschalten 1.1 Was ist CSS? 1.2 Die CSS-Regel 1.3 CSS einbinden 1.4 Kommentare, Fehler und was der Browser verwirft 1.5 Test zum Abschnitt Test Am Ende des Abschnitts
Ein kurzer Test, eine Frage nach der anderen.
2.1 Typ, Klasse und ID 2.2 Kombinatoren und Gruppen 2.3 Attribut-Selektoren 2.4 Zustände mit Pseudoklassen 2.5 Struktur mit Pseudoklassen 2.6 Pseudoelemente 2.7 Die Navigation ohne Extra-Klassen Projekt 2.8 Test zum Abschnitt Test Am Ende des Abschnitts
Die Navigation ohne Extra-Klassen
Lektion 2.7 · Aufgabe mit Prüfliste
Danach ein kurzer Test, eine Frage nach der anderen.
Abschnitt 3
Kaskade und Vererbung 3.1 Wie der Browser entscheidet 3.2 Spezifität rechnen 3.3 Vererbung 3.4 @layer und !important 3.5 Einen Stilkonflikt auflösen Projekt 3.6 Test zum Abschnitt Test Am Ende des Abschnitts
Einen Stilkonflikt auflösen
Lektion 3.5 · Aufgabe mit Prüfliste
Danach ein kurzer Test, eine Frage nach der anderen.
Abschnitt 4
Das Box-Modell 4.1 Die vier Ringe 4.2 box-sizing 4.3 Breite, Höhe und ihre Grenzen 4.4 Margin Collapsing 4.5 display und overflow 4.6 Die Projektkarte Projekt 4.7 Test zum Abschnitt Test Am Ende des Abschnitts
Die Projektkarte
Lektion 4.6 · Aufgabe mit Prüfliste
Danach ein kurzer Test, eine Frage nach der anderen.
Abschnitt 5
Werte, Einheiten und Farben 5.1 Einheiten 5.2 Farben 5.3 Rechnen im Stylesheet 5.4 Custom Properties 5.5 Die Design-Tokens des Portfolios Projekt 5.6 Test zum Abschnitt Test Am Ende des Abschnitts
Die Design-Tokens des Portfolios
Lektion 5.5 · Aufgabe mit Prüfliste
Danach ein kurzer Test, eine Frage nach der anderen.
6.1 Schriftfamilien und Font-Stacks 6.2 Größe, Zeilenhöhe und Gewicht 6.3 Eigene Schriften einbinden 6.4 Text auszeichnen und ausrichten 6.5 Umbruch und Überlauf 6.6 Der Hero-Text Projekt 6.7 Test zum Abschnitt Test Am Ende des Abschnitts
Der Hero-Text
Lektion 6.6 · Aufgabe mit Prüfliste
Danach ein kurzer Test, eine Frage nach der anderen.
Abschnitt 7
Hintergründe, Rahmen und Tiefe 7.1 Hintergrundfarbe und -bild 7.2 Größe, Position und Verläufe 7.3 Rahmen und Radien 7.4 Schatten und Tiefe 7.5 Der Hero mit Bild Projekt 7.6 Test zum Abschnitt Test Am Ende des Abschnitts
Der Hero mit Bild
Lektion 7.5 · Aufgabe mit Prüfliste
Danach ein kurzer Test, eine Frage nach der anderen.
Abschnitt 8
Positionierung 8.1 Der normale Fluss 8.2 position: relative 8.3 position: absolute und der Bezugsrahmen 8.4 position: fixed 8.5 position: sticky 8.6 z-index und der Stacking Context 8.7 Badge, Overlay und klebende Kopfzeile Projekt 8.8 Test zum Abschnitt Test Am Ende des Abschnitts
Badge, Overlay und klebende Kopfzeile
Lektion 8.7 · Aufgabe mit Prüfliste
Danach ein kurzer Test, eine Frage nach der anderen.
9.1 Die zwei Achsen 9.2 Richtung und Umbruch 9.3 Verteilen auf der Hauptachse 9.4 Ausrichten auf der Querachse 9.5 Abstände mit gap 9.6 Wachsen und schrumpfen 9.7 Die Kopfzeile Projekt 9.8 Gleiche Höhen und der klebende Fuß Projekt 9.9 Test zum Abschnitt Test Am Ende des Abschnitts
Die Kopfzeile
Lektion 9.7 · Aufgabe mit Prüfliste
Gleiche Höhen und der klebende Fuß
Lektion 9.8 · Aufgabe mit Prüfliste
Danach ein kurzer Test, eine Frage nach der anderen.
10.1 Zeilen und Spalten 10.2 repeat(), minmax() und auto-fit 10.3 Elemente platzieren 10.4 Benannte Bereiche 10.5 Ausrichten im Raster 10.6 Das implizite Raster 10.7 subgrid 10.8 Projektraster und Seitenlayout Projekt 10.9 Test zum Abschnitt Test Am Ende des Abschnitts
Projektraster und Seitenlayout
Lektion 10.8 · Aufgabe mit Prüfliste
Danach ein kurzer Test, eine Frage nach der anderen.
Mit Lektion 10.1 anfangen Abschnitt 11
Flex oder Grid? Layouts zusammensetzen 11.1 Wann Flex, wann Grid, wann beides 11.2 Zentrieren 11.3 Ein Raster von Hand 11.4 Die halbe Startseite Projekt 11.5 Test zum Abschnitt Test Am Ende des Abschnitts
Die halbe Startseite
Lektion 11.4 · Aufgabe mit Prüfliste
Danach ein kurzer Test, eine Frage nach der anderen.
Mit Lektion 11.1 anfangen Abschnitt 12
Responsiv gestalten 12.1 Mobile First und der Viewport 12.2 Media Queries 12.3 Nutzervorlieben abfragen 12.4 Flexible Bilder und Medien 12.5 Container Queries 12.6 Dark Mode und jeder Bildschirm Projekt 12.7 Test zum Abschnitt Test Am Ende des Abschnitts
Dark Mode und jeder Bildschirm
Lektion 12.6 · Aufgabe mit Prüfliste
Danach ein kurzer Test, eine Frage nach der anderen.
Mit Lektion 12.1 anfangen 13.1 transition 13.2 transform 13.3 @keyframes und animation 13.4 Bewegung mit Rücksicht 13.5 Das Menü, das auffährt Projekt 13.6 Test zum Abschnitt Test Am Ende des Abschnitts
Das Menü, das auffährt
Lektion 13.5 · Aufgabe mit Prüfliste
Danach ein kurzer Test, eine Frage nach der anderen.
Mit Lektion 13.1 anfangen Abschnitt 14
Komponenten in der Praxis 14.1 Buttons und ihre Zustände 14.2 Formulare gestalten 14.3 Listen und Tabellen 14.4 Overlay und Untermenü ohne JavaScript 14.5 Das Kontaktformular Projekt 14.6 Test zum Abschnitt Test Am Ende des Abschnitts
Das Kontaktformular
Lektion 14.5 · Aufgabe mit Prüfliste
Danach ein kurzer Test, eine Frage nach der anderen.
Mit Lektion 14.1 anfangen Abschnitt 15
Modernes CSS 15.1 @supports: Neues sicher einsetzen 15.2 CSS Nesting 15.3 @property: getypte Variablen 15.4 @scope: Stile begrenzen 15.5 Ankerpositionierung 15.6 Übergänge aus dem Nichts und Scroll-Bewegung Projekt 15.7 Test zum Abschnitt Test Am Ende des Abschnitts
Übergänge aus dem Nichts und Scroll-Bewegung
Lektion 15.6 · Aufgabe mit Prüfliste
Danach ein kurzer Test, eine Frage nach der anderen.
Mit Lektion 15.1 anfangen Abschnitt 16
Sauberes CSS 16.1 Struktur und Namen 16.2 Logische Eigenschaften 16.3 Fehler finden mit den DevTools 16.4 Deine erste eigene style.css 16.5 Das Portfolio fertigstellen Projekt 16.6 Test zum Abschnitt Test Am Ende des Abschnitts
Das Portfolio fertigstellen
Lektion 16.5 · Aufgabe mit Prüfliste
Danach ein kurzer Test, eine Frage nach der anderen.
Mit Lektion 16.1 anfangen 01 CSS anschalten 0 / 5 1.1 Was ist CSS? 1.2 Die CSS-Regel 1.3 CSS einbinden 1.4 Kommentare, Fehler und was der Browser verwirft 1.5 Test zum Abschnitt Test 02 Selektoren 0 / 8 2.1 Typ, Klasse und ID 2.2 Kombinatoren und Gruppen 2.3 Attribut-Selektoren 2.4 Zustände mit Pseudoklassen 2.5 Struktur mit Pseudoklassen 2.6 Pseudoelemente 2.7 Die Navigation ohne Extra-Klassen Projekt 2.8 Test zum Abschnitt Test 03 Kaskade und Vererbung 0 / 6 3.1 Wie der Browser entscheidet 3.2 Spezifität rechnen 3.3 Vererbung 3.4 @layer und !important 3.5 Einen Stilkonflikt auflösen Projekt 3.6 Test zum Abschnitt Test 04 Das Box-Modell 0 / 7 4.1 Die vier Ringe 4.2 box-sizing 4.3 Breite, Höhe und ihre Grenzen 4.4 Margin Collapsing 4.5 display und overflow 4.6 Die Projektkarte Projekt 4.7 Test zum Abschnitt Test 05 Werte, Einheiten und Farben 0 / 6 5.1 Einheiten 5.2 Farben 5.3 Rechnen im Stylesheet 5.4 Custom Properties 5.5 Die Design-Tokens des Portfolios Projekt 5.6 Test zum Abschnitt Test 06 Typografie 0 / 7 6.1 Schriftfamilien und Font-Stacks 6.2 Größe, Zeilenhöhe und Gewicht 6.3 Eigene Schriften einbinden 6.4 Text auszeichnen und ausrichten 6.5 Umbruch und Überlauf 6.6 Der Hero-Text Projekt 6.7 Test zum Abschnitt Test 07 Hintergründe, Rahmen und Tiefe 0 / 6 7.1 Hintergrundfarbe und -bild 7.2 Größe, Position und Verläufe 7.3 Rahmen und Radien 7.4 Schatten und Tiefe 7.5 Der Hero mit Bild Projekt 7.6 Test zum Abschnitt Test 08 Positionierung 0 / 8 8.1 Der normale Fluss 8.2 position: relative 8.3 position: absolute und der Bezugsrahmen 8.4 position: fixed 8.5 position: sticky 8.6 z-index und der Stacking Context 8.7 Badge, Overlay und klebende Kopfzeile Projekt 8.8 Test zum Abschnitt Test 09 Flexbox 0 / 9 9.1 Die zwei Achsen 9.2 Richtung und Umbruch 9.3 Verteilen auf der Hauptachse 9.4 Ausrichten auf der Querachse 9.5 Abstände mit gap 9.6 Wachsen und schrumpfen 9.7 Die Kopfzeile Projekt 9.8 Gleiche Höhen und der klebende Fuß Projekt 9.9 Test zum Abschnitt Test 10 Grid 0 / 9 10.1 Zeilen und Spalten 10.2 repeat(), minmax() und auto-fit 10.3 Elemente platzieren 10.4 Benannte Bereiche 10.5 Ausrichten im Raster 10.6 Das implizite Raster 10.7 subgrid 10.8 Projektraster und Seitenlayout Projekt 10.9 Test zum Abschnitt Test Mit Lektion 10.1 anfangen 11 Flex oder Grid? Layouts zusammensetzen 0 / 5 11.1 Wann Flex, wann Grid, wann beides 11.2 Zentrieren 11.3 Ein Raster von Hand 11.4 Die halbe Startseite Projekt 11.5 Test zum Abschnitt Test Mit Lektion 11.1 anfangen 12 Responsiv gestalten 0 / 7 12.1 Mobile First und der Viewport 12.2 Media Queries 12.3 Nutzervorlieben abfragen 12.4 Flexible Bilder und Medien 12.5 Container Queries 12.6 Dark Mode und jeder Bildschirm Projekt 12.7 Test zum Abschnitt Test Mit Lektion 12.1 anfangen 13 Bewegung 0 / 6 13.1 transition 13.2 transform 13.3 @keyframes und animation 13.4 Bewegung mit Rücksicht 13.5 Das Menü, das auffährt Projekt 13.6 Test zum Abschnitt Test Mit Lektion 13.1 anfangen 14 Komponenten in der Praxis 0 / 6 14.1 Buttons und ihre Zustände 14.2 Formulare gestalten 14.3 Listen und Tabellen 14.4 Overlay und Untermenü ohne JavaScript 14.5 Das Kontaktformular Projekt 14.6 Test zum Abschnitt Test Mit Lektion 14.1 anfangen 15 Modernes CSS 0 / 7 15.1 @supports: Neues sicher einsetzen 15.2 CSS Nesting 15.3 @property: getypte Variablen 15.4 @scope: Stile begrenzen 15.5 Ankerpositionierung 15.6 Übergänge aus dem Nichts und Scroll-Bewegung Projekt 15.7 Test zum Abschnitt Test Mit Lektion 15.1 anfangen 16 Sauberes CSS 0 / 6 16.1 Struktur und Namen 16.2 Logische Eigenschaften 16.3 Fehler finden mit den DevTools 16.4 Deine erste eigene style.css 16.5 Das Portfolio fertigstellen Projekt 16.6 Test zum Abschnitt Test Mit Lektion 16.1 anfangen 108 Lektionen 89 Aufgaben mit Prüfliste 16 Abschnittstests läuft im Browser das Basis Konto reicht
