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? Seleccione 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ñarte cómo usarlos pidiéndote que selecciones trozos 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

Zombies de Flexbox 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 zombis 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.

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 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 «Critters de la 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 un poco de curva de aprendizaje que es donde 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

En relación :  7 de las mejores aplicaciones de edición de fotos para Android

4. Defensa de 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 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

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 desee implementar y comience a jugar!

Moyens Staff
Moyens I/O Staff te ha motivado, brindándote asesoría en tecnología, desarrollo personal, estilo de vida y estrategias que te ayudarán.