Los juegos para aprender CSS son la forma más rápida (y divertida) de que se te queden Flexbox, Grid y los selectores: en vez de leer teorÃa, escribes código real y ves el resultado al instante. Te dejo los mejores, todos gratis y en el navegador, ordenados por lo que enseñan.
Juegos para aprender Flexbox
Flexbox Froggy
El clásico por el que empezar. Colocas ranas en su nenúfar escribiendo propiedades de Flexbox. Corto, adictivo y en español. Si solo juegas a uno, que sea este.
Flexbox Defense
Un tower defense en el que colocas las torres con propiedades de Flexbox. Refuerza lo aprendido en Froggy con un formato distinto.
Juegos para aprender CSS Grid
Grid Garden
Riegas tus zanahorias escribiendo CSS Grid. El equivalente a Flexbox Froggy pero para el sistema de rejilla. Imprescindible para dominar Grid.
Juegos para aprender selectores
CSS Diner
32 niveles para dominar los selectores de CSS sirviendo platos en un restaurante. La mejor forma de entender selectores de tipo, clase, hijo o hermano.
Para practicar y retarte
CSS Battle
Reproduces una imagen objetivo con el menor código posible. No es para empezar, sino para afinar y competir cuando ya controlas lo básico.
Por dónde empezar
- Nunca has tocado Flexbox o Grid: Flexbox Froggy y luego Grid Garden.
- Te lÃas con los selectores: CSS Diner.
- Ya controlas y quieres reto: CSS Battle.
Y cuando quieras la teorÃa ordenada detrás del juego, tienes estas guÃas:
Preguntas frecuentes
¿Se puede aprender CSS jugando?
SÃ. Para Flexbox, Grid y los selectores es de lo más eficaz, porque practicas escribiendo código real y ves el resultado al momento.
¿Por dónde empiezo?
Por Flexbox Froggy y luego Grid Garden. Con esos dos cubres los dos sistemas de layout modernos.
¿Son gratis?
SÃ, todos los de esta lista son gratuitos y funcionan directamente en el navegador.
DedÃcales un rato esta semana y notarás el salto. ¿Conoces algún juego de CSS que no esté aquÃ? Cuéntamelo en comentarios.
