Научете CSS Grid Layout (забавния начин) с грид градина

Повечето уеб разработчици познават играта Flexbox Froggy ви учи на основите на flexbox от нулата. Тази безплатна игра стана вирусна и все още е изключително ценна за обучението на хората как да кодират с flexbox.

Е, същият разработчик, който е направил тази игра има съвсем нова игра Наречен Градинска градина.

Тази игра работи по подобен начин, но ви учи как да кодират CSS мрежи. Това е сравнително нова функция, но тя е хвана бързо и Grid Garden е лесно най-добрият начин да научите.

Всичко в Грид Гардън следва подобен стил на преподаване като Flexbox Froggy. Той е създаден от същия разработчик, Thomas Park, така че можете да очаквате подобно ниво на трудност и използваемост.

По подразбиране започвате от първо ниво с a общо 28 нива от началото до края. Винаги можете пропуснете нивата ако смятате, че някой е твърде труден, но намирам, че винаги е добре да работите с тях само като освежаващо.

Ако нямате представа как работят свойствата, свързани с мрежата, ще намерите много думи в Google. CSS оформлението на мрежата е a напълно нов модул със собствен синтаксис и функции.

Силно препоръчвам да се играя с грид-градината, когато имате шанс. На практика е Детска площадка на CSS developer за изучаване и изучаване на всички свойства на оформлението на мрежата.

Не мога да кажа, че тази игра ще ви направи експерт в CSS мрежите. Само изграждането на проекти и практикуването на много неща могат да ви доведат до експертно ниво. Но, Grid Garden е забавен начин да започнете без обичайния стрес, който влиза в изучаването на нещо ново.

Целият проект е напълно свободен и отворен на GitHub, ако искате да го изтеглите на местно ниво, за да изучите или разширите. Можете също така да споделите мислите си с създателя на Twitter @thomashpark.