Подборка

онлайн-игр для

изучения CSS

Веб-разработчикам часто приходится создавать аккуратный и привлекательный интерфейс для сайтов и приложений. Сейчас существует множество концепций и технологий, о которых им необходимо знать: SCSS, адаптивный дизайн, Grid Layout и Flexbox – и это далеко не полный список. Даже если мы используем их в работе каждый день, мы обычно помним только самые распространенные правила.  Так почему бы не попрактиковаться с этими технологиями в процессе игры и сделать обучение более увлекательным?  Есть некоторое количество онлайн-игр, которые позволяют нам прокачать наши навыки дизайна и поддерживать их интересным способом. Давайте познакомимся с ними! 

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

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

Чтобы достичь нашей цели и вырастить целый огород, нам нужно научиться правильно определять столбцы, строки и области шаблона сетки. 

Это первая из двух платных игр в нашей подборке и стоит она 129$, к слову. Но зато выглядит она поистине, как маленький шедевр дизайна.  Согласно сюжету, мы должны использовать наши знания сетки CSS, чтобы спасти пришельцев от вымирания! На каждом уровне от нас требуется выполнять все более сложные задания, чтобы добиться успеха и продвинуться дальше по сюжету. 

Игру разработал Дэйв Геддес, бывший IT-архитектор, который полностью посвятил себя разработке образовательных платформ. На сайте вы можете прочитать описание и цели данного проекта, а также правила CSS Grid, использованные для создания домашней страницы игры. 

В CSS Battle мы должны воспроизвести предоставленный нам макет изображения с наименьшим возможным кодом. В этом мы соревнуемся с другими игроками, чтобы получить наивысший балл в таблице лидеров.

Как вы можете видеть на скриншотах, макеты могут быть совсем простые («пилотная битва» для новичков), но постепенно они становятся все сложнее и интереснее.

Помогите Фрогги и его друзьям отыскать их кувшинки, написав CSS-код! Flexbox Froggy черпает вдохновение из классической аркадной игры Frogger и таких веб-игр, как блестящие CSS Diner и Erase All Kittens, где вы узнаете о селекторах CSS и разметке HTML соответственно. А еще она как две капли воды похожа на Grid Garden, где мы ранее поливали грядки с морковкой. 

На этот раз мы осваиваем другую область знаний: нам нужно доставить лягушек домой с помощью инструкций CSS Flexbox. Благодаря им, мы контролируем выравнивание, интервалы и обертывание элементов на веб-странице для достижения нашей цели. 

Игра Flexbox defence также очень похожа на те игры, где мы выращивали морковь и спасали лягушек, но теперь перед нами классическая задача - «защита башни».

Сюжет основан на типичных играх формата tower defense, но здесь для размещения наших предметов мы пишем инструкции на CSS. Мы используем свойство justify-content в главном контейнере для того, чтобы разместить каждую башню в наиболее эффективной позиции. 

А это вторая платная игра в подборке Франческо Лирдини, и она также была разработана Дейвом Геддесом (см. выше Gridcritters про спасение пришельцев. Здесь мы стреляем из арбалета по зомби. С помощью Flexbox можно прицелиться из арбалета, поразить зомби и в конце концов выжить. В этой игре графика и история также весьма впечатляют! Каждый раздел раскрывает новую часть сюжета, помогает изучить что-то новое о flexbox и заставляет вас обороняться от живучих зомби, которые вынуждают вас закреплять свои новые навыки – от этого зависит ваша жизнь! 

Интересную игру предложил в комментариях подписчик Франческо по имени Джоэл Лузадо. Вот она: cantunsee.space Если вы ищете интересный способ проверить, насколько вы хороши как дизайнер пользовательского интерфейса – это развлечение для вас. По сути, она основана на простом принципе детских игр «найди разницу», но с элементами UI.  А вот просто отличный пример того, как «надо» проектировать и разрабатывать пользовательский интерфейс: https://userinyerface.com