¿Te está costando trabajo conseguir que tus interfaces luzcan exactamente igual al diseño? Esto probablemente sucede porque aún no dominas CSS Grid y Flexbox, te aseguro que al conquistar estos layouts ninguna interfaz va a ser un problema.
Para que puedas dominar estas dos herramientas de CSS te traigo una colección de juegos, sí, de juegos, en los que podrás practicar hasta ser experto o experta en maquetación mientras te diviertes y superas los niveles.
Flexbox Froggy es uno de mis juegos favoritos, ya que personalmente fue como me introduje por primera vez a Flexbox y después me ayudó a reforzar varios conceptos clave.
Este juego consiste en colocar las ranas en las hojas. Tiene 24 niveles y en cada nivel se va reforzando cada propiedad utilizada dentro de Flexbox.
¿Conoces Tailwind CSS? Este juego tiene el mismo concepto que el anterior, pero ahora con caballeros y empleando las clases propias de Tailwind.
Si quieres practicar flexbox utilizando las clases de Tailwind entonces te propongo jugar en Knights of the Flexbox Table.
Flexbox Defense consiste en posicionar las torres de forma apropiada empleando las propiedades de Flexbox para poder atacar a los enemigos y mantenerlos alejados.
Flexbox Zombies tiene unos efectos visuales, banda sonora e historia impresionantes. Es un juego muy completo que además te transporta en cada uno de sus niveles a convertirte en una máster en Flexbox.
Flexbox Adventure es otro gran juego para dominar Flexbox, tiene 24 niveles para que te vuelvas experta en esta herramienta y domines cada una de sus propiedades.
Grid Garden es el juego ideal para aprender a usar CSS Grid. El concepto del juego es regar únicamente las zonas que tienen zanahorias, si logras regar correctamente este terreno a lo largo de los 28 niveles, te volverás alguien competente en CSS Grid.
Grid Attack es un juego muy bueno para aprender sobre CSS Grid, tiene 80 niveles y 3 opciones de dificultad. Lo cual te asegura horas de diversión y aprendizaje.
Si consigues completar los 80 niveles de este juego, podrás dar por sentado que dominas CSS Grid.
Ahora que ya conoces todos estos juegos con los cuales puedes aprender y poner a prueba tus conocimientos de CSS Grid y Flexbox, ¿cuál será el primero que jugarás? Escríbelo en los comentarios y si conoces algún otro juego que ayude a fortalecer estas habilidades no dudes en compartirlo con la comunidad.
Como siempre, te quiero recomendar el curso Diseño Web con CSS Grid y Flexbox porque te ayudará a familiarizarte con los términos, herramientas, flujos de trabajo, tendencias de diseño y más. Si quieres volverte una mejor frontend developer este curso está diseñado para ti.
Recuerda, nunca pares de aprender. 💚
El que diseñó Grid Garden tiene una mente retorcida, su aparentemente inocente imagen es una trampa, están difíciles los últimos jaja
Hasta el momento solo he completado Grid Garden
Eso es bastante conveniente, y creo que es genial que sea posible aprender nueva información jugando. Puedo decir que no hace mucho tiempo, logré descubrir que era posible ganar dinero vendiendo máscaras de cs go en https://dmarket.com/es/ingame-items/item-list/csgo-skins/rifle/ak-47, y creo que la industria del juego debería seguir desarrollándose de esa manera.
Que buen post!
Excelente estoy reforzando mis conocimientos para no saber Grid, sino para entender como funciona. #Neverstoplearning. 😊
Soy un master con flexbox, pero me falta pratica con Grid
Excelente, que didácticos están!!!
Muy buenos juegos.
Que genial! 🤩🔥
Bien, hace un tiempo probe: Flexbox Froggy y Grid Garden.
Voy a ver los otros que tal…
Gracias!💚
🥕🥕🥕 Grid Garden es muy simpático y en una época me ayudó a aprender. Esperemos que los de Flex me gradúen 😆
a ̶j̶u̶g̶a̶r̶ aprender se ha dicho.