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

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

Читайте также: 6 хитростей CSS для выравнивания контента по вертикали

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

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

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

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

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

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

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