Grid Garden: ein Spiel, um CSS Grids zu lernen

CSS-LogoZwei Fund­stü­cke im WWW: Spiele, um CSS Grids und CSS Flex­box zu ler­nen und sich darin auszuprobieren. 

Grid Garden: ein Spiel, um CSS Grids zu lernen

Cas­ca­ding Style Sheets (eng­lisch für „gestufte Gestal­tungs­bö­gen“, kurz CSS) sind ein wich­ti­ges Mit­tel, um Gestal­tungs­an­wei­sun­gen für Web­sites zu erstel­len. CSS wurde ent­wi­ckelt, um Dar­stel­lungs­vor­ga­ben weit­ge­hend von den Inhal­ten zu tren­nen. So wer­den etwa Lay­out, Far­ben und Typo­gra­fie uvm. in einer sepa­ra­ten Datei gespei­chert. Gab es anfangs nur ein­fa­che Dar­stel­lungs­an­wei­sun­gen, so wur­den im Lauf der Zeit kom­ple­xere Module hin­zu­ge­fügt, mit denen z. B. Ani­ma­tio­nen und für ver­schie­dene Aus­ga­be­me­dien ver­schie­dene Dar­stel­lun­gen defi­niert wer­den können.

Inzwi­schen gibt es neben den soge­nann­ten „Flex­bo­xen“ (CSS Flex­box) auch das CSS Grid Lay­out, mit dem sich als Gestal­tungs­ras­ter so etwas wie der Satz­spie­gel für Web­sites erstel­len lässt.

Mit dem Spiel Grid Gar­den kann man den Umgang mit CSS Grids ler­nen. Das Spiel mit zu wäs­sern­den Karot­ten in einem Gar­ten fängt ein­fach ein, aber gegen Ende wird es durch­aus schwie­rig. Der Autor die­ses Bei­trags schei­terte am Level 20 of 28 (die­ses und das nächst­ge­nannte Spiel sind in Eng­lisch und beide Ver­weise öffe­nen in neuen Fens­tern!) und den folgenden.

Mit dem ähn­li­chen Spiel Flex­box Froggy kann man anhand von Frö­schen und mit­tels CSS Flex­box ler­nen, wie ein fle­xi­bles Lay­out 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“!

Ein Kommentar

Schreiben Sie einen Kommentar

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