So lernst du spielerisch CSS-Techniken wie CSS Grid oder Flexbox

In meiner Zeit bei adesso entwickelten sich einige spannende Konzepte, die der Frontend-Entwicklung zu neuen Höhen verhalfen. Einige Grundlegende habe ich in meiner Funktion als Coach in der Schulung „Grundlagen HTML, CSS & JavaScript“ vermittelt. Um die Schulungsteilnehmerinnen und -teilnehmer nicht mit trockener Theorie zu langweilen, habe ich gerne auf Spiele zurückgegriffen, um das Basiswissen der Teilnehmenden aufzubauen. Drei dieser Onlinespiele möchte ich euch gerne etwas näher vorstellen.

#1 CSS Diner

Darf ich zum Dinner bitten? Dieses Spiel war die Basis für Schulungen, um den Teilnehmenden CSS-Selektoren näher zu bringen oder um ihr Wissen zu diesem Thema aufzufrischen. Das Ziel des Spiels besteht darin, in 32 Levels den gewünschten Teller via CSS-Selektoren herauszupicken. Dabei wird auf eine Oberfläche gesetzt, die einer regulären IDE ähnelt. Jeder Spieler hat also die Möglichkeit, seine eigenen CSS-Selektoren auszuprobieren.

Wie auf der Abbildung zu erkennen ist, befindet sich rechts ein Feld mit Tags. Diese sind den regulären HTML-Tags sehr ähneln, jedoch stellen sie in vereinfachter Form den semantischen Aufbau eines Tisches sowie der darauf liegenden Teller dar. Am Rand finden sich Erläuterung zu einzelnen Selektoren und der Hinweis, wie diese zu verwenden sind. Kommt eine Spielerin oder ein Spieler nicht weiter, gibt es die Schaltfläche „Help, I’m stuck!“ mit nützlichen Hinweisen, um an den gewünschten Teller zu kommen.

Meiner Erfahrung nach funktionieren nicht immer alle Wege. Wer aber gerne knobelt, kommt auch mit anderen Selektoren zum Ziel. Und glücklicherweise gibt es hier nicht nur den einen richtigen Lösungsweg. Also dann: Bon Appetit!

#2 Grid Garden (CSS Grid)

Dieses Spiel verhilft nicht unbedingt zu einem grünen Daumen, jedoch erfahren die Spielenden, wie man mit einem CSS Grid ein Karottenfeld bewässern kann. Ein CSS Grid ermöglicht es, ein Website Layout flexibler zu gestalten und in ein selbst gewähltes Grid zu unterteilen.

HTML ohne CSS

HTML ohne CSS stellt sogenannte Blockelemente untereinander dar. Um Elemente oder Seiten zu gestalten, greift man auf ein Tabellenlayout zurück. Auf diese Weise ist es möglich, Elemente der Webseite zu gliedern und zu gestalten.

Gestaltung mit CSS

Als Ergänzung zum HTML wurde CSS (Cascading Stylesheet) entwickelt, um den Inhalt von der Gestaltung trennen zu können. Glücklicherweise stellte dies das Ende von Tabellenlayouts dar. Seitdem heißt es: DIV-Suppe! Um Elemente nebeneinander darstellen zu können, wurden diese beliebig oft in DIV-Tags verschachtelt und mit CSS-Deklarationen – etwa position:left; - positioniert.

HTML5: weg von der DIV-Suppe

Mit HTML5 wurde ein neuer Standard eingeführt, der dem DOM (Document Object Model) mehr Semantik verliehen hat und der den Aufbau eines Dokumentes logisch und klar erkennbar macht.

Frameworks: einreihen bitte!

Durch die Entwicklung von Frontend Frameworks kam ein neuer Denkansatz hinzu: Spalten und Reihen. Hier kann mit einem Container ein Rahmen für den entsprechenden Inhalt geschaffen werden. Da Blockelemente in aller Regel untereinander stehen, wird der Inhalt in Reihen unterteilt. Innerhalb dieser Reihen werden die Elemente dann nebeneinander dargestellt. Am häufigsten sind 12 Spalten zu finden, die beliebig den Elementen, die sich in dieser Reihe befinden, zugeordnet werden können. Ist die Reihe voll, muss mit einer neuen begonnen werden. Auch dieses Vorgehen führt zu vielen verschachtelten Elementen, hilft aber dabei, durchaus mehr Kontrolle in die Seitenelemente zu bekommen. Mit kleiner werdenden Bildschirmen entstand die Herausforderung, die Elemente anpassungsfähiger zu machen. Wird die verfügbare Breite reduziert, so rutschen die Elemente untereinander.

Die Neuerung: CSS Grid

Neben Flexbox kam recht bald das neue CSS Grid hinzu. Dieses ermöglicht es, innerhalb eines Containers ein selbstdefiniertes Grid zu erzeugen und Elemente diesen Bereichen flexibel zuzuweisen. So kann eine Marginalspalte, die auf dem Desktop neben dem Inhaltsbereich der Seite Platz findet, plötzlich an einer ganz anderen Stelle stehen. Dadurch wird die Möglichkeit geschaffen, dass nicht nur die Elemente der Webseite auf die Bildschirmbreite reagieren, sondern das ganze Layout kann auch auf unterschiedliche Endgeräte antworten. Das Ziel, Inhalt von der Gestaltung zu trennen, rückt damit einen riesigen Schritt näher.

Möhren bewässern, Unkraut vernichten

Lange Rede, kurzer Sinn: Mit Grid Garden wird den Spielerinnen und Spielern ein Grid Layout vorgesetzt, das die verschiedenen Bereiche des virtuellen Beets darstellt. Im ersten von insgesamt 28 Levels muss lediglich das Feld, in dem sich die Möhren befinden, selektiert werden, um dieses zu bewässern. In späteren Levels kommt mit Unkraut eine Herausforderung dazu: Dabei gilt es, mit CSS Grid das Unkraut mit einer toxischen Substanz zu vernichten und die Möhren zu bewässern. Auch hier findet sich ein Editor, der das Grid beinhaltet und einen Bereich offen hält, der bearbeitet werden kann. Auf diese Weise werde die wichtigsten Konzepte von CSS Grid spielerisch vorgestellt.

#3 Flexbox Defense

Bemannt die Türme! Mit Flexbox Defense wird der Einstieg in eine neue Möglichkeit der Positionierung auf Webseiten erleichtert. In diesem Spiel geht es darum, Wehrtürme innerhalb der markierten Felder zu positionieren, um sich so vor feindlichen Kreisen zu verteidigen. Dieses ebenfalls Level-basierte Spiel bietet 12 Angriffswellen, denen sich Spielerinnen und Spieler nur mit neu erlernten Fähigkeiten zur Wehr setzen können.

Was ist Flexbox?

Flexbox ist nach der klassischen Positionierung mit dem altbekannten CSS-Box-Modell eine neue Methode, um Elemente auf der Seite positionieren zu können. Flexbox steht hierbei für „Flexible Layout Box Modell“. Die mit Flexbox positionierten Elemente reagieren dynamisch auf die Bildschirmbreite, in der die Webseite angezeigt wird.

Der Fokus dabei liegt auf einer erleichterten Positionierung, die aber mit Vorsicht zu genießen ist. Ganze Seitenlayouts hiermit zu gestalten wäre nicht ratsam. Die Stärke von Flexbox zeigt sich nämlich eher in einzelnen Elementen und ihrer Positionierung. In Kombination mit dem oben vorgestellten CSS Grid stehen zwei flexible sowie responsive Techniken zur Verfügung, mit denen die Positionierung von Webseiten und die Gestaltung des Layouts ein Kinderspiel wird.

Fazit

Wie ihr gesehen habt, ist es gar nicht so schwer, neue Dinge zu lernen, wenn das Ganze Spaß macht. Und was macht mehr Spaß als ein Onlinespiel? Das gilt vor allem beim Erlernen und Verstehen von vermeintlich komplexen und zunächst schwierig wirkenden Sachverhalten. Verpackt als Onlinegame, wird es zum Kinderspiel. Also: Ran an die Tastatur, fertig, los!

Wenn ihr mehr über spannende Themen aus der adesso-Welt erfahren möchtet, werft auch einen Blick in unsere bisher erschienen Blog-Beiträge.

Auf den Seiten von CSS Diner, Grid Garden und Flexbox Defense könnt ihr das Ganze übrigens selbst ausprobieren.