Эти онлайн-сервисы помогут вам в игровой форме прокачать навыки в работе с HTML, CSS и JavaScript. А также проверить чувство стиля.
Вспомнить программирование
CodeCombat
Игра помогает развить навыки алгоритмического мышления — научиться разбивать сложные проблемы на простые задачи. Уровни построены так, чтобы поэтапно отрабатывать синтаксис и усложняющиеся конструкции языка программирования.
Плюс игры — можно выбрать из нескольких языков. Минус — некоторые уровни доступны только по подписке. Но и в бесплатной версии достаточно задач для практики.
Язык игры: русский
Языки программирования: JavaScript, Python, C++
CodinGame
Онлайн-платформа с набором мини-игр и головоломок для изучения языков программирования. Сложность задач нарастает постепенно: первые уровни могут показаться скучными, но дальше найдётся над чем поломать голову.
Платформа тренирует навык оптимизации кода и помогает готовиться к техническим собеседованиям. Своё решение задачи можно сравнить с ответами других разработчиков. Это помогает расширить кругозор, посмотреть на разные подходы к программированию.
Мировые рейтинги и соревнования делают обучение ещё более увлекательным. Особенность платформы — десятки языков программирования на выбор.
Язык игры: английский, французский
Языки программирования: 25 языков, включая JavaScript, Python, C++, PHP, Go
Elevator Saga
В игре с помощью JavaScript нужно программировать лифт, чтобы перевозить пассажиров в соответствии с заданными условиями. На каждом уровне задачи помогают отточить логику и навык асинхронного программирования.
Задача игры кажется примитивной: лифт ездит вверх и вниз, а вам нужно перевезти всех пассажиров за заданное время. Но при решении нужно создавать очереди запросов, планировать приоритеты, чтобы не выполнять лишних действий. Навыки оптимизации кода пригодятся, чтобы повысить быстродействие реального веб-приложения.
Язык игры: английский
Язык программирования: JavaScript
Поработать со стилями CSS
Flexbox Froggy
Игра, в которой нужно использовать свойства CSS Flexbox, чтобы помочь лягушкам добраться до кувшинок. В игре 24 уровня, на каждом из которых объясняется и отрабатывается новое свойство Flexbox, от базовых justify-content и align-items до более сложных, таких как order и align-self.
Игра — наглядная демонстрация работы Flexbox для верстальщиков и разработчиков фронтенда. На примерах можно разобраться в принципах построения адаптивных макетов.
Язык игры: русский
Язык программирования: CSS
Grid Garden
Игра, которая помогает освоить или повторить CSS Grid Layout. Вам нужно выращивать морковки, поливать грядки и убирать сорняки с помощью свойств Grid. Каждый из 28 уровней посвящён конкретному свойству, начиная с базовых grid-column-start и заканчивая более сложными, такими как grid-template-areas.
Игра помогает разработчикам освоить создание сложных сеток и лучше понять принципы двумерных макетов. Grid Garden пригодится верстальщикам и фронтендерам, которые работают с адаптивными интерфейсами.
Язык игры: русский
Язык программирования: CSS
CSS Diner
Игра, которая помогает освоить CSS-селекторы. Игроку нужно выбирать элементы на виртуальном столе, задавая правильные селекторы. В игре 32 уровня, которые начинаются с простых задач и постепенно усложняются. Можно пропустить скучные уровни и сразу начать с самого трудного.
Практика в CSS Diner поможет начинающим разработчикам разобраться с принципами специфичности CSS.
Язык игры: английский
Язык программирования: CSS
Работаем с внешним видом сайта
Designercize
Инструмент для генерации случайных задач на проектирование интерфейсов. Проверять то, что у вас получилось, никто не будет, но это отличный вариант для тех, кому не хватает идей, чтобы попрактиковаться. А ограничение по времени добавляет азарт.
В решении задач тренируйте навыки быстрого прототипирования и креативного мышления. Это хороший способ проверить способность работать в условиях жёстких ограничений и пополнить портфолио интересными проектами.
Язык игры: английский
Язык программирования: любой
Can’t Unsee
Игра для проверки и развития навыков UI/UX-дизайна. Игроку нужно выбрать из двух почти идентичных вариантов интерфейса наиболее корректный с точки зрения дизайна.
Практика поможет разработчикам, которые работают с интерфейсами, развить внимание к деталям, принципам композиции, контраста и типографики. Отличный способ повысить насмотренность, чтобы замечать мелкие детали в своей работе.
Язык игры: английский
Языки программирования: не требуется
Тренажёр Ильяхова
Тренажёр Ильяхова — 35 простых заданий для верстальщиков и разработчиков интерфейсов, в которых нужно выбирать между вариантами вёрстки. Упражнения помогут понять, как лучше структурировать текст, улучшить типографику и интерфейс.
Тренажёр поможет замечать ошибки в вёрстке и создавать интерфейсы, которые соответствуют современным стандартам веб-дизайна.
Язык игры: русский
Язык программирования: не требуется
Акакие игры для разработчиков знаете вы? Рассказывайте в комментариях, что вы используете для необременительного обучения и повторения.
Источник: vc.ru
