Durante mi primer año en la universidad, en la clase de Frontend Design, comencé mi camino en CSS, uno de mis lenguajes favoritos. Uno de los mayores desafíos que enfrenté fue el posicionamiento de los elementos dentro del diseño de la página. Aunque existen varias técnicas para lograrlo, una de las más populares y mi favorita es Flexbox.
¿Qué es Flexbox?
Flexbox (Flexible Box) es un modelo de diseño en CSS que permite distribuir y alinear elementos dentro de un contenedor de manera eficiente. Se adapta automáticamente al tamaño de los elementos, lo que lo hace ideal para diseños responsivos. Con Flexbox, puedes controlar la dirección, el orden y el espaciado de los elementos de forma fácil y flexible.
Al principio, la teoría detrás de Flexbox puede parecer abrumadora, especialmente cuando se trata de memorizar todas sus propiedades y valores. Sin embargo, durante mi clase en BYU-Idaho, descubrí una forma muy divertida de aprender: jugando un videojuego. Sí, un videojuego que tiene 24 niveles diseñados para ayudarte a dominar los principios de Flexbox.
Flexbox Froggy
Flexbox Froggy es una aplicación web interactiva, al estilo videojuego, que te permite aprender Flexbox de manera visual y divertida. No necesitas una cuenta para jugar, y cada nivel te presenta un nuevo desafío.
Interfaz del juego
La pantalla del juego está dividida en dos partes:
- Izquierda: Aquí encontrarás la explicación del nivel junto con un editor de código. En este editor escribirás las reglas CSS utilizando propiedades de Flexbox.
- Derecha: Verás el resultado de tu código en tiempo real. En la mayoría de niveles, el objetivo es posicionar a una o varias ranitas sobre sus respectivas hojas utilizando Flexbox.
/* Response for Level 1 in https://flexboxfroggy.com/ */
#pond {
display: flex;
justify-content: flex-end;
}Cada nivel está diseñado para que practiques propiedades específicas como justify-content, align-items, flex-direction, entre otras. Conforme avances, los niveles se vuelven más complejos, lo que te permite afianzar tus conocimientos paso a paso.
Mi experiencia personal
Personalmente, me encantó haber descubierto este juego durante mis estudios universitarios. Aprender debe ser divertido y desafiante. Muchas veces tratamos de memorizar conceptos sin realmente entenderlos, lo cual no es ideal en el mundo de la programación, donde el aprendizaje es constante.
Gracias a esta herramienta, incluso desarrollé un pequeño framework CSS basado en Sass, enfocado en el posicionamiento de elementos usando Flexbox.
Conclusión
Espero que este artículo te haya resultado interesante y entretenido. Te invito a jugar Flexbox Froggy y mejorar tus habilidades en CSS. Estoy seguro de que aprenderás de manera mucho más efectiva.
Seguiré explorando y compartiendo otros juegos online que te permitan aprender programación de forma divertida. ¡No olvides seguirme en mis redes sociales y visitar mi blog, donde publico contenido tanto en inglés como en español!
Link al juego: https://flexboxfroggy.com/
Sobre el Autor:
Marco Antonio Bustillos Quiroz
Bachelor of Science in Web Design and Development (BYU-Idaho)
Full Stack Web Developer con más de 7 años de experiencia en desarrollo Front End y 5 años en desarrollo Back End. Mis proyectos incluyen sitios web, landing pages, aplicaciones web, REST APIs, e-commerce, y mucho más. Mi pasión es crear experiencias digitales impactantes y compartir conocimientos con otros desarrolladores.