6 divertidos juegos para ayudarte a aprender CSS fácilmente

Aprender CSS puede ser una experiencia frustrante, ¡pero al menos no tiene por qué ser aburrido! Una de las mejores cosas de aprender a codificar es que las personas que son buenas codificando también tienen las habilidades para crear juegos que enseñan a otras personas a codificar. No hay sustituto para la práctica y la experimentación en el aprendizaje de CSS básico, pero los juegos definitivamente ayudan, y los modelos de diseño más nuevos como grid y flexbox se benefician especialmente de un modelo de aprendizaje práctico.

Aquí hay algunos juegos que le permiten dominar CSS en poco tiempo.

1. CSS Diner: selectores de CSS

Css Games Diner

Bastante básico, ¿verdad? Seleccionar elementos, clases, identificadores … ¿tal vez pseudoclases? ¿Qué más hay ahí? En realidad, hay más formas de seleccionar elementos de las que cree, y CSS Diner quiere enseñarle cómo usarlos pidiéndole que seleccione piezas de comida con CSS. Algunos de los desafíos pueden volverse un poco confusos, pero esto es codificar, no hay que avergonzarse de buscarlo en Google.

2. Flexbox Zombies

Zombis de Flexbox es un juego / curso increíblemente bien desarrollado que promete enseñarte cómo usar flexbox con un juego intuitivo, atractivo y autorreforzador que gira principalmente en torno a ti disparando zombies con armas controladas por el código flexbox. Te lleva desde lo básico hasta lo avanzado a lo largo de varios niveles que se completan con una historia, gráficos geniales y acción para matar zombis; incluso podrías olvidar que estás aprendiendo CSS.

Juegos CSS Flexbox Zombies

Flexbox en sí es una tecnología asombrosa para organizar contenido de manera receptiva en una dimensión, y si hace algo con el desarrollo web front-end, se lo debe a usted mismo. Ya sea que lo hayas pospuesto o no, Flexbox Zombies es una excelente excusa para jugar un juego que realmente te enseña algo. Si tan solo toda la educación pudiera ser así, ¿verdad?

El mismo creador también ha diseñado un curso de juego para CSS Grid llamado “Critters de cuadrícula. ” No es gratis, pero si te gusta Flexbox Zombies, puedes optar por dejar el dinero en efectivo.

3. Grid Garden

Personalmente, creo que flexbox está bien, pero realmente brilla en unidimensional (fila o column), por lo que para proyectos y plantillas más grandes, querrá pasar a la cuadrícula (tal vez con algunos contenedores flexbox dentro de las celdas de la cuadrícula). Una vez que lo descubres, está ordenado, limpio y sorprendente, pero puede haber una pequeña curva de aprendizaje que Jardín de cuadrícula (y los Grid Critters antes mencionados) pueden ayudar.

Css Games Grid Garden

Grid Garden es un juego gratuito en el que tienes que diseñar un jardín para regar tus zanahorias y envenenar las malas hierbas, ¡y resulta que la cuadrícula es perfecta para esta tarea! Le dará una comprensión sólida del posicionamiento básico de la cuadrícula que luego puede aplicar a los diseños de su propio sitio

4. Defensa Flexbox

Flexbox de juegos de CSS

¿Ya conoce los conceptos básicos de flexbox pero no puede mantener “justificar” y “alinear” completamente recto? Defensa Flexbox es un tutorial de flexbox disfrazado de un juego de defensa de torres que se asegurará de que recuerdes que recuerdas tu contenido de justificación y alineación, o morirás. Pero puedes intentarlo de nuevo. Si nunca has sido fanático de esos juegos que solo aceptan una respuesta correcta, esta te gustará, ya que te permite colocar las torres donde quieras y triunfar o fracasar por tu cuenta.

5. Flexbox Froggy

Juegos CSS Flexbox Froggy

Probablemente podría obtener una buena tarde de juego con solo revisar los tutoriales de Flexbox existentes, pero probablemente sea mejor espaciarlo durante unos días o semanas solo para asegurarse de obtener muchos refrescos de memoria. Flexbox Froggy es perfecto para eso: no te lleva de cero, pero si alguna vez te olvidas de los comandos, puedes correr a través de este juego en unos minutos para recuperar la velocidad.

6. Juegos de CodePip

Juegos CSS Codepip

Si revisó Grid Garden y Flexbox Froggy, ha visto algunos ejemplos de El trabajo de CodePip ya. Esos son solo los dos juegos gratuitos que ofrecen. Si se registra para obtener una cuenta profesional en su sitio, también tienen juegos que van desde la revisión general de CSS hasta JavaScript.

¿Cuánto CSS me enseñará esto?

Ejecutar estos juegos puede ayudarte a aprender algunos conceptos básicos bastante bien, especialmente si quieres aprender flexbox. Sin embargo, en última instancia, los juegos solo pueden enseñarle qué palabras escribir. Tendrás que ponerlos en práctica si realmente quieres descubrir cómo usarlos. ¡Consiga un buen editor de código y algunas ideas que quiera implementar y comience a jugar!

¿Es útil este artículo?

¡Compártelo en redes sociales!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *