Enseña a ti mismo CSS Flexbox con el juego Flexbox Froggy Game

En el pasado, hemos pasado por alto flexbox y los conceptos básicos de cómo funciona. Pero en realidad, aplicar flexbox a su flujo de trabajo puede ser desafiante porque es una adición tan complicada a la especificación de CSS.

Con Flexbox Froggy puedes aprende todos los conceptos básicos de flexbox con un divertido juego web que incluye ranas y lilypads. Sé que suena loco, pero esto es en serio una aplicación web impresionante.

Comienzas en el nivel 1 y Trabaja lentamente a través de 24 niveles diferentes Enseñando los muchos aspectos de la orientación flexbox. Los primeros niveles comienzan fáciles pidiéndote que alinear una o dos ranas a lo largo de un solo contenedor. Las lecciones tempranas también incluyen consejos y sugerencias para ayudarte en el camino.

Pero una vez que pasas la lección 10, las cosas realmente se calientan. Tendrás que aprender a re-organizar artículos dentro de un contenedor, cómo organizar contenido verticalmente, y como crear espaciamiento equidistante entre diferentes filas de diferente contenido.

Las ranas pequeñas y lindas pueden atraerlo, pero puede estar seguro de que este es un juego difícil..

sin embargo, Desde principiantes completos hasta desarrolladores web más experimentados., El juego está hecho para todos los niveles. Las primeras lecciones son muy fáciles y las posteriores pueden dejarlo inclinado sobre la pantalla con mechones de cabello a su 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. ofreciendo 20 idiomas incluyendo inglés, francés, alemán, italiano, chino, japonés y ruso (además de muchos otros).

Voy a admitir que reorganizar las ranas no te hará un maestro de inmediato de flexbox. Pero estas lecciones están destinadas a familiarizarse con la sintaxis de flexbox para que pueda sentirse más cómodo trabajando en situaciones reales.

Si eres un Desarrollador web de cualquier nivel de habilidad. Definitivamente deberías revisar Flexbox Froggy. Es completamente gratis, muy divertido de jugar y sorprendentemente educativo..