8 juegos para aprender CSS y disfrutarlo
CSS es un lenguaje que se ha vuelto muy poderoso y aprenderlo puede ser un desafío. En este articulo, vamos a ver 8 juegos para aprender CSS y divertirnos.
Os propongo una lista de 8 juegos para:
- escribir código
- experimentar
- ver el resultado
1- Aprender FLEXBOX CSS
1-1. Flexbox Froggy
Es un juego muy divertido que permite aprender las propiedades de posicionamiento de Flexbox. Tiene 24 niveles con un editor de código y un área visual para ver los resultados. Consiste en desplazar una o varias ranas en sus hojas de lirio.
Es un juego muy eficiente para afianzar sus conocimientos de flexbox. Además está traducido al español.
Enlace al juego: Flexbox Froggy
1-2. Flexbox Defense
Otro juego divertido para aprender las propiedades de Flexbox. En este juego, debes mover las torres utilizando reglas de flexbox para proteger el camino de los ataques enemigos. Tiene 12 niveles y una parte visual interactiva que lo hace parecer a un video juego.
Enlace al juego: Flexbox Defense
1-3. Flexbox Adventure
Otro juego parecido a Flexbox Froggy. Permite de nuevo practicar las propiedades de Flexbox. Lo interesante es que tiene 3 niveles de dificultades y cada uno tiene a sus vez 24 niveles.
Después de haberlos hecho todos, te volverás un especialista en posicionar elementos con flexbox.
Enlace al juego: Flexbox Adventure
2- Aprender GRID LAYOUT CSS
2-1. Grid Garden
Flexbox es fantástico y nos ha cambiado la vida a los diseñadores web y Grid layout va un paso más allá con su modelo de rejilla. Pero tiene una curva de aprendizaje. Y los juegos nos pueden ayudar en esta etapa.
Gris Garden (de los mismos creadores que Flexbox Froggy), es un juego divertido y que cuenta con 28 niveles. Al principio la dificultad es fácil y va aumentando. El juego consiste en regar las zanahorias y mantener el huerto.
Enlace al juego: Grid Garden
2-2. Grid Attack
De los mismos creadores que Flexbox Adventure. Es un juego muy bien logrado. Te embarca en una aventura peligrosa y tienes como misión salvar el mundo de los demonios. Solo podrás utilizar CSS Grid para cumplirla 🙂
El juego tiene 3 niveles de dificultades y cada uno a su vez cuenta con 80 niveles. No se si salvarás el mundo cumpliendo todos esos niveles pero seguro que te volverás especialista en Grid Layout!
Enlace al juego: Grid Attack
3- Aprender a utilizar los SELECTORES CSS
3-1. CSS Diner
Debo admitir que no entendí enseguida este juego, ya que utiliza etiqueta HTML que no existen. Pero al final no importa, hay que leer bien las instrucciones a la derecha de la pantalla y el juego se vuelve muy interesante.
Tiene 32 niveles que permiten practicar todo tipo de selectores de clase, de id, descendiente, universal…
Enlace al juego: CSS Diner
3-2. CSS Speedrun
Me encanta este juego CSS porque permite practicar los selectores con pseudo-clase. En mi opinión, muchos de esas pseudo-clases son mal y poco conocidas. Así que me parece interesante ver algunas a través de este juego. Además tiene abajo un enlace (hint 2) que redirecciona a la web de Mozilla deloper por más explicación.
Tiene 10 niveles y un contador que hace correr el tiempo. A ver cual será el tuyo.
Enlace al juego: CSS Speedrun
4- Aprender propiedades avanzadas de CSS con Guess CSS
A nivel visual, este juego no tiene nada que ver con los anteriores. Su presentación es muy básica es tipo cuestionario.
Su propósito es evaluar tus conocimientos de CSS. Hay tres fragmentos de CSS junto con el código HTML. Y tienes que elegir cuál de los tres fragmentos de CSS produce el resultado que se ve arriba.
Este juego pondrá a prueba su conocimiento en Grid Layout, en Flexbox, en selectores, display y posicionamiento CSS. Es muy completo y aunque estéticamente es muy aburrido, uno se entretiene mucho con sus retos.
Enlace al juego: Guess CSS
Como lo decía al principio, CSS es hoy en día un lenguaje muy poderoso y a veces mal conocido y/o valorado. Seguro que si probáis esos juegos para aprender CSS, vais a descubrir nuevas propiedades o nuevos selectores.
Así que os animo a jugar y más que todo a pasarlo bien.