Grid Garden: ein Spiel, um CSS Grids zu lernen

CSS-LogoZwei Fundstücke im WWW: Spiele, um CSS Grids und CSS Flexbox zu lernen und sich darin auszuprobieren.

Cascading Style Sheets (englisch für „gestufte Gestaltungsbögen“, kurz CSS) sind ein wichtiges Mittel, um Gestaltungsanweisungen für Websites zu erstellen. CSS wurde entwickelt, um Darstellungsvorgaben weitgehend von den Inhalten zu trennen. So werden etwa Layout, Farben und Typografie uvm. in einer separaten Datei gespeichert. Gab es anfangs nur einfache Darstellungsanweisungen, so wurden im Lauf der Zeit komplexere Module hinzugefügt, mit denen z. B. Animationen und für verschiedene Ausgabemedien verschiedene Darstellungen definiert werden können.

Inzwischen gibt es neben den sogenannten „Flexboxen“ (CSS Flexbox) auch das CSS Grid Layout, mit dem sich als Gestaltungsraster so etwas wie der Satzspiegel für Websites erstellen lässt.

Mit dem Spiel Grid Garden kann man den Umgang mit CSS Grids lernen. Das Spiel mit zu wässernden Karotten in einem Garten fängt einfach ein, aber gegen Ende wird es durchaus schwierig. Der Autor dieses Beitrags scheiterte am Level 20 of 28 (dieses und das nächstgenannte Spiel sind in Englisch und beide Verweise öffenen in neuen Fenstern!) und den folgenden.

Mit dem ähnlichen Spiel Flexbox Froggy kann man anhand von Fröschen und mittels CSS Flexbox lernen, wie ein flexibles Layout funktioniert.

Viel Spaß!

Ronald M. Filkas

Gelernter Schriftsetzer im Handsatz, Studium der Germanistik, zertifiziert abgeschlossene Fortbildungen „Web-Publishing Schwerpunkt DTP“ und Online-Redaktion, langjährige Erfahrungen als Schriftsetzer/ DTP-Fachkraft und als Korrektor und Lektor in Druckereien, Redaktionen und Verlagen. Mehr? Seite „Über mich“!

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.