Изучите CSS Flexbox с помощью игры Flexbox Froggy

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

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

Вы начинаете с уровня 1 и медленно прокладывайте себе путь через 24 различных уровня обучение многим аспектам ориентации flexbox. Ранние уровни начинаются легко, прося вас выровняйте одну или две лягушки вдоль одного контейнера. Ранние уроки также включают советы и предложения, которые помогут вам в пути.

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

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

тем не мение, от полных новичков до более опытных веб-разработчиков, игра сделана для всех уровней. Ранние уроки - легкий ветерок, а более поздние уроки могут заставить вас сгорбиться на экране с пучками волос на вашей стороне.

Полный исходный код игры доступен бесплатно на GitHub, так что вы можете скачать и играть в нее локально, если хотите.

Плюс веб-приложение многоязычное предлагая 20 языков включая английский, французский, немецкий, итальянский, китайский, японский и русский (плюс многие другие).

Я признаю, что перестановка лягушек не сразу сделает вас мастером flexbox. Но эти уроки предназначены для познакомить вас с синтаксисом flexbox так что вы можете чувствовать себя более комфортно, работая в реальных сценариях.

Если ты веб-разработчик любого уровня квалификации Вы обязательно должны проверить Flexbox Froggy. Это совершенно бесплатно, довольно весело играть и удивительно образовательно.