Lernen Sie das CSS-Rasterlayout (Der Spaß) mit dem Rastergarten

Die meisten Webentwickler kennen das Flexbox Froggy-Spiel bringt Ihnen die Grundlagen der Flexbox bei von Grund auf neu. Dieses kostenlose Spiel ist viral geworden und es ist immer noch unglaublich wertvoll, um Menschen das Codieren mit Flexbox beizubringen.

Nun, der gleiche Entwickler, der das Spiel gemacht hat hat ein brandneues Spiel namens Gittergarten.

Dieses Spiel funktioniert auf ähnliche Weise, lehrt Sie aber wie man CSS-Grids codiert. Es ist eine relativ neue Funktion, aber es ist schnell anziehen und Grid Garden ist der beste Weg, um zu lernen.

Alles im Gartengarten folgt a ähnlicher Unterrichtsstil als Flexbox Froggy. Es wurde vom selben Entwickler, Thomas Park, erstellt, sodass Sie ein ähnliches Maß an Schwierigkeit und Benutzerfreundlichkeit erwarten können.

Standardmäßig beginnen Sie auf Stufe 1 mit einem insgesamt 28 Stufen vom Start zum Ziel. Du kannst immer Ebenen überspringen Wenn Sie denken, dass einige zu hart sind, finde ich, dass es immer gut ist, sie alle nur als Auffrischung durchzuarbeiten.

Wenn Sie keine Ahnung haben, wie gitterbezogene Eigenschaften funktionieren, werden Sie viele Wörter googeln. Das CSS-Rasterlayout ist a völlig neues Modul mit eigener Syntax und Funktionen.

Ich empfehle Ihnen, mit Grid Garden herumzuspielen, wann immer Sie die Chance dazu haben. Es ist praktisch eine Spielplatz für CSS-Entwickler zum Lernen und Studieren aller verschiedenen Rasterlayout-Eigenschaften.

Ich kann nicht sagen, dass dieses Spiel Sie zu einem Experten für CSS-Grids machen wird. Nur Projekte zu bauen und viel zu üben, kann Sie auf Expertenniveau bringen. Aber Grid Garden ist eine unterhaltsame Art und Weise, ohne all den üblichen Stress zu beginnen, der dazu führt, etwas Neues zu lernen.

Das gesamte Projekt ist kostenlos und auf GitHub verfügbar, wenn Sie es lokal herunterladen möchten, um zu studieren oder zu erweitern. Sie können Ihre Gedanken auch mit dem Ersteller auf Twitter @thomashpark teilen.