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

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 podría pensar, 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

Flexbox Zombies es un juego / curso increíblemente bien desarrollado que promete enseñarte cómo usar flexbox con un juego intuitivo, atractivo y que se refuerza a sí mismo que gira principalmente en torno a ti disparando zombies con armas controladas por el código de 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 puedes olvidar que estás aprendiendo CSS.

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 para aprenderlo. 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 » Grid Critters «. 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 diseños unidimensionales (fila o columna), por lo que para proyectos y plantillas más grandes, querrá recurrir a la cuadrícula (tal vez con algunos contenedores de flexbox dentro de las celdas de la cuadrícula). Una vez que lo descubres, es ordenado, limpio y sorprendente, pero puede haber un poco de curva de aprendizaje, que es donde Grid Garden (y los Grid Critters antes mencionados) pueden ayudar.

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

¿Ya conoce los conceptos básicos de flexbox pero no puede mantener «justificar» y «alinear» completamente recto? Flexbox Defense 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 te alineas a ti mismo, 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

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 muchas actualizaciones 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

Si revisó Grid Garden y Flexbox Froggy, ya ha visto algunos ejemplos del trabajo de CodePip . 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!

¡Si te ha gustado vota con 5 Estrellas!
(Votos: 0 Promedio: 0)

Escribe Aquí Tu Comentario