Leer CSS Grid Layout (The Fun Way) met Grid Garden

De meeste webontwikkelaars kennen het spel Flexbox Froggy dat leert je de basis van flexbox helemaal opnieuw. Deze gratis game ging viraal en het is nog steeds ongelooflijk waardevol om mensen te leren programmeren met flexbox.

Nou, dezelfde ontwikkelaar die dat spel heeft gemaakt heeft een gloednieuw spel riep Grid Garden.

Deze game werkt op een vergelijkbare manier maar leert je hoe CSS-rasters te coderen. Het is een relatief nieuwe functie, maar het is snel vasthouden en Grid Garden is gemakkelijk de beste manier om te leren.

Alles in Grid Garden volgt a vergelijkbare leerstijl als Flexbox Froggy. Het is gemaakt door dezelfde ontwikkelaar, Thomas Park, dus je kunt een vergelijkbaar niveau van moeilijkheid en bruikbaarheid verwachten.

Standaard begin je op niveau één met een in totaal 28 niveaus van begin tot eind. Je kan altijd skip levels als je denkt dat het te moeilijk is, maar ik vind het altijd goed om ze allemaal door te werken, net als een opfriscursus.

Als u geen idee heeft hoe raster-gerelateerde eigenschappen werken, zult u merken dat u veel woorden googelt. De CSS-rasterlay-out is een geheel nieuwe module met zijn eigen syntaxis en functies.

Ik raad ten zeerste aan om samen met Grid Garden te spelen wanneer je de kans krijgt. Het is praktisch een CSS-ontwikkelaarspeelplaats voor het leren en bestuderen van alle verschillende eigenschappen van de rasterlay-out.

Ik kan niet zeggen dat deze game je een expert maakt in CSS-rasters. Alleen het bouwen van projecten en het oefenen van veel kan je naar een expert niveau brengen. Maar Grid Garden is een leuke manier om te beginnen zonder alle gebruikelijke stress die gepaard gaat met het leren van iets nieuws.

Het hele project is volledig gratis en open source op GitHub als je het lokaal wilt downloaden om te studeren of uit te breiden. Je kunt ook je gedachten delen met de maker op Twitter @thomashpark.