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

De fleste webutviklere vet Flexbox Froggy-spillet som lærer deg grunnleggende om flexbox fra grunnen 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 som heter Grid Garden .

Dette spillet fungerer på en lignende måte, men lærer deg hvordan du kan kode CSS-nett . Det er en relativt ny funksjon, men det er fange raskt, og Grid Garden er lett den beste måten å lære.

Alt i Grid Garden følger en 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 totalt 28 nivåer fra start til slutt. Du kan alltid hoppe over nivåer hvis du tror det er for vanskelig, men jeg finner det alltid godt å jobbe gjennom dem alle som en forfriskning.

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

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

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 det lokalt for å studere eller utvide. Du kan også dele tankene dine med skaperen på Twitter @ thomashpark.