52 подписчика

🕹 Подборка игр для изучения фронтенд-разработки

#подборка #frontend

В моём университетском курсе по фронтенду есть домашняя работа, целью которой является прохождение трёх игр (это уже почти классика):

1) Flexbox Froggy — https://flexboxfroggy.com/#ru

Игра про лягушек и кувшинки, которая учит основам вёрстки с помощью flexbox, формирует начальное понимание об использовании flex-контейнеров и позволяет запомнить и закрепить основные свойства, необходимые для работы с flexbox.

2) Grid Garden — https://cssgridgarden.com/#ru

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

3) Learn git branching — https://learngitbranching.js.org/?locale=ru_RU

Тренажёр по git, в котором довольно много теории, подающейся в игровой форме. Но учит эта игра не только базовым вещам, но и более продвинутому уровню (rebase, remotes, etc.). Проверено на личном опыте: все мои подчинённые джуны обязаны проходить эту игру, когда учатся правильной работе с git.

Недавно я задумался о том, какие ещё есть способы для изучения тех же технологий, прочитал несколько подборок и выделил ещё 3 наиболее интересных, на мой взгляд, игры:

1) Grid Attack — https://codingfantasy.com/games/css-grid-attack

Игра в стиле мультяшного фэнтези на целых 80 уровней, в которых нужно защищать своего героя от атаки монстров путём определения корректных значений для различных свойств CSS Grid.

2) FlexBox Adventure — https://codingfantasy.com/games/flexboxadventure

Восьмибитная графика, приятные анимации и обучение CSS, больше тут добавить нечего. Лично мне — понравилось.

3) JSRobot — https://lab.reaal.me/jsrobot/

Ещё одна восьмибитная игра, но в этот раз уже по JS, здесь вы учитесь управляться с экземплярами классов, вызывать их методы, чтобы всячески управлять роботом на экране, ведя его к цели каждого из представленных уровней.

💬 Есть что добавить? Поделись в комментариях :)

1 минута

29 ноября 2023