Enséñate CSS Flexbox con el juego Flexbox Froggy

En el pasado hemos pasado por alto flexbox y los conceptos básicos de cómo funciona. Pero la aplicación de flexbox a su flujo de trabajo puede ser un desafío porque es una adición muy complicada a las especificaciones de CSS.

Con Flexbox Froggy puedes aprender todos los principios básicos de flexbox con un juego web divertido que incluye ranas y lilypads . Sé que suena loco, pero esto es en verdad una aplicación web increíble.

Empiezas en el nivel 1 y progresas lentamente a través de 24 niveles diferentes enseñando los muchos aspectos de la orientación de flexbox. Los primeros niveles comienzan fácilmente al pedirle que alinee una o dos ranas a lo largo de un solo contenedor . Las primeras lecciones también incluyen consejos y sugerencias para ayudarlo en el camino.

Pero una vez que pasas la lección 10, las cosas realmente se calientan. Tendrá que aprender cómo reorganizar los elementos dentro de un contenedor, cómo organizar el contenido verticalmente y cómo crear espaciado equidistante entre diferentes filas de contenido diferente.

Las lindas ranitas pueden atraerte, pero asegúrate de que este es un juego difícil.

Sin embargo, desde novatos completos hasta desarrolladores web más experimentados, el juego está hecho para todos los niveles. Las primeras lecciones son simples y las últimas lecciones pueden dejarte encorvado sobre la pantalla con mechones de cabello a tu lado.

El código fuente completo del juego está disponible de forma gratuita en GitHub, por lo que puedes descargarlo y jugarlo localmente si lo deseas.

Además, la aplicación web es multilingüe y ofrece 20 idiomas, incluidos inglés, francés, alemán, italiano, chino, japonés y ruso (y muchos más).

Admitiré que reorganizar las ranas no te convertirá inmediatamente en un maestro de flexbox. Pero estas lecciones están destinadas a familiarizarte con la sintaxis de Flexbox para que puedas sentirte más cómodo trabajando en escenarios del mundo real.

Si eres un desarrollador web de cualquier nivel de habilidad definitivamente deberías probar Flexbox Froggy. Es completamente gratis, bastante divertido de jugar y sorprendentemente educativo.