Flexbox Froggy: лягушки учат CSS

Что это

Flexbox Froggy — браузерная игра для изучения CSS flexbox. На каждом уровне нужно помочь лягушкам добраться до кувшинок своего цвета, прописав правильные CSS-свойства. Игру сделали в Codepip — это студия, которая выпускает обучающие игры по веб-разработке. Слева — описание задания и поле для кода, справа — пруд с лягушками, где сразу видно результат.

Почему мы это выбрали

Flexbox — одна из тех вещей, которые проще понять руками, чем по документации. Здесь каждый уровень — маленькая задачка: justify-content, align-items, flex-direction, order, flex-wrap. Пишете строчку кода и сразу видите, куда прыгнули лягушки. Ошиблись — они сидят не там, поправили — встали на место. Такая мгновенная обратная связь работает лучше любого конспекта.

Нам нравится, что игра не ограничивается новичками. Можно выбрать уровень сложности: начальный, средний без подсказок и экспертный — без подсказок и со случайными уровнями. Есть режим для людей с нарушением цветовосприятия, а интерфейс переведён на русский и ещё несколько десятков языков. Если вы искали, как быстро разобраться во flexbox, это, пожалуй, самый приятный способ.

С чего начать

• Переключите язык на русский в настройках, если так удобнее.
• Пройдите уровни по порядку: каждый добавляет одно новое свойство.
• Когда застрянете, читайте подсказки к свойствам прямо в описании уровня.
• После прохождения попробуйте экспертный режим, чтобы проверить себя без подсказок.
• Затем переходите к Grid Garden от тех же авторов — там похожим способом изучается CSS Grid.

Кому подойдёт

Начинающим веб-разработчикам и верстальщикам, дизайнерам, которые хотят понимать код, и всем, кто вечно гуглит, как выровнять блок по центру.

Коротко о главном

Flexbox Froggy бесплатная? Да, игра открывается в браузере и проходится бесплатно.

Есть ли Flexbox Froggy на русском? Да, русский есть в списке языков в настройках.

Что пройти после Flexbox Froggy? Авторы предлагают Grid Garden для CSS Grid и Anchoreum.