35

7 juegos con los que aprenderás CSS Grid y Flexbox

52035Puntos

hace un año

¿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.

1. Flexbox Froggy

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.

Flexbox Froggy

2. Knights Of The Flexbox Table

¿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.

Knights Of The Flexbox Table

3. Flexbox Defense

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 Defense

4. Flexbox Zombies

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 Zombies

5. Flexbox Adventure

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.

Flexbox Adventure

6. Grid Garden

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 Garden

7. Grid Attack

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.

Grid Attack

Cuéntanos por cuál juego vas a empezar

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. 💚

Alex
Alex
alexcamachogz

52035Puntos

hace un año

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
2
33342Puntos

El que diseñó Grid Garden tiene una mente retorcida, su aparentemente inocente imagen es una trampa, están difíciles los últimos jaja

2
17450Puntos

Hasta el momento solo he completado Grid Garden

1
177Puntos

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.

1
23625Puntos

Excelente estoy reforzando mis conocimientos para no saber Grid, sino para entender como funciona. #Neverstoplearning. 😊

1
35622Puntos

Soy un master con flexbox, pero me falta pratica con Grid

1
14901Puntos

Que genial! 🤩🔥

1
21300Puntos

Bien, hace un tiempo probe: Flexbox Froggy y Grid Garden.
Voy a ver los otros que tal…
Gracias!💚

1
18740Puntos

🥕🥕🥕 Grid Garden es muy simpático y en una época me ayudó a aprender. Esperemos que los de Flex me gradúen 😆

1
40071Puntos

a ̶j̶u̶g̶a̶r̶ aprender se ha dicho.