hwdtech blog
Подборка онлайн-игр
для изучения CSS
Большая и интересная подборка бесплатных онлайн-игр, которые помогут вам улучшить свои навыки в CSS, даже если раньше вы вообще не знали, что это.
17-12-2019
CSS, игры, обучение, перевод
Время чтения: 5 минут
Франческо Лирдини, senior consultant & Angular trainer в компании Trivadis (Швейцария, Цюрих) недавно опубликовал на dev.to интересный пост – подборку онлайн-игр, с помощью которых можно развивать свои навыки написания кода на CSS. Большинство из этих игр бесплатны и достаточно увлекательны, потому мы решили перевести для вас этот материал и поделиться наиболее полезными на наш взгляд играми. Ссылка на оригинальный пост.
Зачем нам игры?
Веб-разработчикам часто приходится создавать аккуратный и привлекательный интерфейс для сайтов и приложений. Сейчас существует множество концепций и технологий, о которых им необходимо знать: SCSS, адаптивный дизайн, Grid Layout и Flexbox – и это далеко не полный список. Даже если мы используем их в работе каждый день, мы обычно помним только самые распространенные правила.

Так почему бы не попрактиковаться с этими технологиями в процессе игры и сделать обучение более увлекательным?

Есть некоторое количество онлайн-игр, которые позволяют нам прокачать наши навыки дизайна и поддерживать их интересным способом. Давайте познакомимся с ними!
Базовый CSS
CSS Diner
Задача игрока состоит в том, чтобы использовать операторы CSS для выбора определенных элементов интерфейса на экране. Если введенные правила верны, мы можем перейти на следующий уровень. Всего в игре 32 уровня.
Бесплатно
CSS Grid Garden
Это очень простая и милая игра, в которой мы поливаем морковку и опрыскиваем сорняки, а попутно осваиваем сетку CSS. Полезные советы от разработчиков помогают осилить каждый уровень игры.
Чтобы достичь нашей цели и вырастить целый огород, нам нужно научиться правильно определять столбцы, строки и области шаблона сетки.
Бесплатно
Gridcritters
Это первая из двух платных игр в нашей подборке и стоит она 129$, к слову. Но зато выглядит она поистине, как маленький шедевр дизайна.

Согласно сюжету, мы должны использовать наши знания сетки CSS, чтобы спасти пришельцев от вымирания! На каждом уровне от нас требуется выполнять все более сложные задания, чтобы добиться успеха и продвинуться дальше по сюжету.
Игру разработал Дэйв Геддес, бывший IT-архитектор, который полностью посвятил себя разработке образовательных платформ. На сайте вы можете прочитать описание и цели данного проекта, а также правила CSS Grid, использованные для создания домашней страницы игры.
Стоимость: 179 $/129 $ (со скидкой)
CSS Battle
В CSS Battle мы должны воспроизвести предоставленный нам макет изображения с наименьшим возможным кодом. В этом мы соревнуемся с другими игроками, чтобы получить наивысший балл в таблице лидеров.
Как вы можете видеть на скриншотах, макеты могут быть совсем простые («пилотная битва» для новичков), но постепенно они становятся все сложнее и интереснее.
Бесплатно
Flexbox Layout
Flexbox froggy
Помогите Фрогги и его друзьям отыскать их кувшинки, написав CSS-код! Flexbox Froggy черпает вдохновение из классической аркадной игры Frogger и таких веб-игр, как блестящие CSS Diner и Erase All Kittens, где вы узнаете о селекторах CSS и разметке HTML соответственно. А еще она как две капли воды похожа на Grid Garden, где мы ранее поливали грядки с морковкой.
На этот раз мы осваиваем другую область знаний: нам нужно доставить лягушек домой с помощью инструкций CSS Flexbox. Благодаря им, мы контролируем выравнивание, интервалы и обертывание элементов на веб-странице для достижения нашей цели.
Бесплатно
Flexbox defense
Игра Flexbox defence также очень похожа на те игры, где мы выращивали морковь и спасали лягушек, но теперь перед нами классическая задача - «защита башни».
Сюжет основан на типичных играх формата tower defense, но здесь для размещения наших предметов мы пишем инструкции на CSS. Мы используем свойство justify-content в главном контейнере для того, чтобы разместить каждую башню в наиболее эффективной позиции.
Бесплатно
Flexbox Zombies
А это вторая платная игра в подборке Франческо Лирдини, и она также была разработана Дейвом Геддесом (см. выше Gridcritters про спасение пришельцев. Здесь мы стреляем из арбалета по зомби. С помощью Flexbox можно прицелиться из арбалета, поразить зомби и в конце концов выжить. В этой игре графика и история также весьма впечатляют! Каждый раздел раскрывает новую часть сюжета, помогает изучить что-то новое о flexbox и заставляет вас обороняться от живучих зомби, которые вынуждают вас закреплять свои новые навыки – от этого зависит ваша жизнь!
Стоимость: 179 $
НЕ-CSS
Но тоже очень полезно!
Интересную игру предложил в комментариях подписчик Франческо по имени Джоэл Лузадо. Вот она: cantunsee.space Если вы ищете интересный способ проверить, насколько вы хороши как дизайнер пользовательского интерфейса – это развлечение для вас. По сути, она основана на простом принципе детских игр «найди разницу», но с элементами UI.

А вот просто отличный пример того, как «надо» проектировать и разрабатывать пользовательский интерфейс: https://userinyerface.com
Продолжение следует!
Раз в месяц мы делаем рассылку с анонсом новых кейсов и статей, опубликованных на сайте.
Подпишитесь на обновления.
Гарантируем - никакого спама. Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой в отношении обработки персональных данных.