Об этом проекте

Flexbox Froggy — обучающая браузерная игра, созданная Томасом Парком (Thomas Park) для обучения CSS-раскладке flexbox в увлекательной практической форме. Игра предлагает 24 уровня с нарастающей сложностью, на которых игроки должны писать правильные свойства CSS flexbox — например, flex-direction, justify-content, align-items, flex-wrap, align-content, flex-flow и order — чтобы расставить лягушек на соответствующие им лилии. Каждый уровень знакомит с новой концепцией flexbox с кратким пояснением и визуальным предпросмотром. Игроки вводят CSS-код в панель редактора и сразу видят результат: лягушки перемещаются на свои места. Игра полностью работает в браузере на сайте flexboxfroggy.com и не требует установки. Проект распространяется с открытым исходным кодом под лицензией MIT (код) и Creative Commons BY 3.0 (изображения). Он переведён участниками сообщества более чем на 50 языков, включая китайский (упрощённый и традиционный), японский, корейский, испанский, французский, немецкий, русский, арабский и многие другие. Переводы управляются через репозиторий GitHub, где участники могут добавлять новые языки через pull requests. Flexbox Froggy широко упоминается в руководствах по фронтенд-разработке, учебных буткемпах и материалах для изучения CSS как доступная отправная точка для освоения flexbox-раскладки. Исходный код представляет собой статический сайт, пригодный для самостоятельного хостинга или автономного использования.