CSS Grid mit einem virtuellen Gartenspiel lernen

(cssgridgarden.com)

5 Punkte von GN⁺ 2024-06-04 | 1 Kommentare | Auf WhatsApp teilen

Einführung in Grid Garden

Grid Garden ist ein Spiel zum Erlernen des CSS-Grid-Layouts.
Nutzer spielen das Spiel, indem sie mit der Eigenschaft grid-column-start den Bereich mit den Karotten bewässern.

grid-column-start: 3; bedeutet, dass der Bereich bewässert wird, der an der dritten vertikalen Gitterlinie beginnt.
Jede Spalte und jede Zeile des Grids ist so eingestellt, dass sie jeweils 20% einnimmt.

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {}

Pädagogischer Wert: Grid Garden ist ein gutes Tool, um das CSS-Grid-Layout auf unterhaltsame Weise durch ein Spiel zu lernen.
Wichtigkeit der Praxis: Interaktive Lernwerkzeuge wie dieses ermöglichen effektiveres Lernen durch Praxis statt nur durch Theorie.
Technische Relevanz: CSS Grid und Flexbox sind wichtige Techniken im modernen Webdesign, daher ist ein gutes Verständnis davon wichtig.
Empfehlung weiterer Tools: Neben CSS Grid empfiehlt es sich auch, andere Lernwerkzeuge wie CSS Diner zu nutzen.
Hinweis: Nachdem man die Grundkonzepte über das Spiel gelernt hat, ist es auch wichtig, die Anwendung in realen Projekten zu lernen.

GN⁺ 2024-06-04

Die Serie von Rachel Andrews ist auch für Backend-Entwickler sehr hilfreich, um moderne UI-Apps zu entwickeln.
Wir haben 30 Minuten lang mit dem Team eine Show-and-Tell-Session gemacht, an der auch Nicht-Entwickler teilgenommen haben, und sie war nützlich, um grundlegende Programmierfähigkeiten zu entwickeln.
Das Spiel macht Spaß, aber man konzentriert sich dadurch nur auf das Lösen der Aufgaben, was ein tieferes Verständnis behindern kann. Als Lösung wird eine Strafe für die Anzahl der Versuche vorgeschlagen.
Ein Vorteil des Spiels ist, dass man zur Überprüfung der Antwort die absolute Position sehen kann; ein Nachteil ist, dass bei jedem Versuch Google Analytics gesendet wird.
CSS Zen Garden war früher eine hervorragende Quelle, um CSS zu lernen und sich Design-Inspiration zu holen.
Dieses Spiel und Flexbox Froggy eignen sich gut, um CSS-Layouts auf unterhaltsame Weise zu lernen.
Nach den ersten 10 Levels ist mein Frust über CSS noch größer geworden.
Es wird ein Link zu einer früheren großen Diskussion geteilt.
Flexbox Froggy war hilfreicher als Grid Garden. CSS Grid erschließt sich mir nicht richtig.
Jemand fragte sich, ob Subgrid inzwischen enthalten ist.