Lær CSS Grid Layout (The Fun Way) med Grid Garden
De fleste webudviklere kender Flexbox Froggy-spillet som lærer dig det grundlæggende i flexbox fra starten. Dette gratis spil gik viralt, og det er stadig utroligt værdifuldt for at lære folk at kode med flexbox.
Nå, den samme udvikler, der lavede det spil har et helt nyt spil hedder Gitterhave.
Dette spil fungerer på en lignende måde, men lærer dig hvordan man kode CSS-net. Det er en forholdsvis ny funktion, men det er fanger hurtigt og Grid Garden er let den bedste måde at lære.
Alt i Grid Garden følger a lignende undervisning stil som Flexbox Froggy. Det blev skabt af den samme udvikler, Thomas Park, så du kan forvente et lignende vanskelighedsniveau og brugervenlighed.
Som standard starter du på niveau et med a i alt 28 niveauer fra start til slut. Du kan altid springe over niveauer hvis du tror, at det er for svært, men jeg finder det altid godt at arbejde igennem dem alle lige som en genopfriskning.
Hvis du ikke har nogen idé om, hvordan netværksrelaterede egenskaber fungerer, finder du dig selv Googling mange ord. CSS-gitterlayoutet er a helt nyt modul med sin egen syntaks og funktioner.
Jeg anbefaler stærkt toying rundt med Grid Garden, når du får chancen. Det er praktisk taget a CSS-udviklerens legeplads til at lære og studere alle de forskellige grid layout egenskaber.
Jeg kan ikke sige, at dette spil vil gøre dig til en ekspert i CSS-net. Kun byggeprojekter og træning meget kan bringe dig til ekspertniveau. Men Grid Garden er en sjov måde at komme i gang uden alt det sædvanlige stress, der går i at lære noget nyt.
Hele projektet er helt gratis og åbnes på GitHub, hvis du vil downloade det lokalt for at studere eller udvide. Du kan også dele dine tanker med skaberen på Twitter @thomashpark.
