Lær CSS Grid Layout (The Fun Way) med Grid Garden

De fleste webutviklere kjenner Flexbox Froggy spillet som lærer deg grunnleggende om flexbox fra bunnen av. Dette gratis spillet gikk viralt og det er fortsatt utrolig verdifullt for å lære folk hvordan å kode med flexbox.

Vel, samme utvikler som laget det spillet har et helt nytt spill kalt Grid Garden.

Dette spillet fungerer på en lignende måte, men lærer deg hvordan å kode CSS grids. Det er en relativt ny funksjon, men det er fanger på fort og Grid Garden er lett den beste måten å lære.

Alt i Grid Garden følger a lignende lærestil som Flexbox Froggy. Det ble skapt av samme utvikler, Thomas Park, slik at du kan forvente et lignende vanskelighetsgrad og brukervennlighet.

Som standard starter du på nivå ett med a totalt 28 nivåer fra start til slutt. Du kan alltid hopp over nivåer hvis du tror noe er for vanskelig, men jeg synes det er alltid godt å jobbe gjennom dem alle som en forfriskning.

Hvis du ikke har en anelse om hvordan gridrelaterte egenskaper fungerer, vil du finne deg selv Googling mange ord. CSS-gridoppsettet er a helt ny modul med sin egen syntaks og funksjoner.

Jeg anbefaler på det sterkeste toying rundt med Grid Garden når du får sjansen. Det er praktisk talt a CSS utvikler lekeplass for å lære og studere alle de forskjellige gridlayoutegenskapene.

Jeg kan ikke si at dette spillet vil gjøre deg til en ekspert på CSS-nett. Bare byggeprosjekter og praktiserer mye kan gi deg et ekspertnivå. Men Grid Garden er en morsom måte å komme i gang uten alt det vanlige stresset som går inn i å lære noe nytt.

Hele prosjektet er helt gratis og åpnes på GitHub hvis du vil laste den ned lokalt for å studere eller utvide. Du kan også dele tankene dine med skaperen på Twitter @ thomashpark.