Изучите CSS Grid Layout (Веселый путь) с Grid Garden

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

Ну, тот же разработчик, который сделал эту игру, имеет совершенно новую игру под названием Сетка Садовая,

Читайте также: Введение в модуль CSS Grid Layout

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Эта игра работает аналогичным образом, но учит вас, как кодировать CSS-сетки. Это относительно новая функция, но она быстро завоевывает популярность, и Grid Garden – лучший способ учиться.
Все в Grid Garden следует тому же стилю обучения, что и Flexbox Froggy. Он был создан тем же разработчиком, Томас ПаркТаким образом, вы можете ожидать аналогичного уровня сложности и удобства использования.

По умолчанию вы начинаете с первого уровня с общим количеством уровней от 28 до начала. Вы всегда можете пропустить уровни, если считаете, что какой-то слишком сложный, но я считаю, что всегда полезно прорабатывать их все просто для повышения квалификации.
Если вы не знаете, как работают свойства, связанные с сеткой, вы обнаружите, что гуглите много слов. CSS сетка является полностью новый модуль со своим собственным синтаксисом и функциями.

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

Я не могу сказать, что эта игра сделает вас экспертом в сетках CSS. Только строительные проекты и много практики могут привести вас к уровню эксперта. Но Grid Garden – это интересный способ начать без всякого обычного стресса, связанного с изучением чего-то нового.

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

Читайте также: Руководство по CSS Grid Layout Fr Unit

            <script async src="https://triu.ru/wp-content/litespeed/localres/aHR0cHM6Ly9wbGF0Zm9ybS50d2l0dGVyLmNvbS93aWRnZXRzLmpz" charset="utf-8"></script>