Дізнайтеся про CSS Grid Layout (Fun Way) з Grid Garden

Більшість веб-розробників знають гру Flexbox Froggy навчить вас основам flexbox з нуля. Ця безкоштовна гра стала вірусною і все ще неймовірно цінною для навчання людей, як кодувати з flexbox.

Ну, той же розробник, який зробив цю гру має абсолютно нову гру називається Сітка для саду.

Ця гра працює подібним чином, але вчить вас як кодувати сітки CSS. Це відносно нова функція, але це ловити на швидке і Grid Garden - це найкращий спосіб навчитися.

Все в Grid Garden слідує за подібний стиль навчання як Flexbox Froggy. Він був створений тим же розробником, Thomas Park, так що можна очікувати подібного рівня складності і зручності.

За замовчуванням ви починаєте з рівня 1 всього 28 рівнів від початку до кінця. Ви завжди можете пропускати рівні якщо ви вважаєте, що будь-який надто важкий, але я вважаю, що завжди добре працювати через їх усіх, як освіжувач.

Якщо ви не уявляєте, як працюють властивості, пов'язані з мережею, ви знайдете багато слів Google. Розкладка сітки CSS a абсолютно новий модуль з власним синтаксисом і функціями.

Я настійно рекомендую зіграти з Grid Garden, коли ви отримуєте шанс. Це практично Дитячий майданчик розробника CSS для вивчення та вивчення всіх різних властивостей макета сітки.

Не можу сказати, що ця гра зробить вас експертом у CSS-сітках. Тільки будівельні проекти і багато практикуючих можуть привести вас до експертного рівня. Але, Grid Garden - цікавий спосіб розпочати роботу без будь-якого звичного стресу, який переходить у вивчення чогось нового.

Весь проект є повністю безкоштовним і відкритим джерелом на GitHub, якщо ви хочете завантажити його локально для вивчення або розширення. Ви також можете поділитися своїми думками з творцем на Twitter @ thomashpark.