Enlaces rápidos
¿Crees que la diversión y el desarrollo web pueden convivir? Si ya te encanta escribir código, esto no debería sorprenderte. Pero muchos desarrolladores nuevos están luchando para Comprender los conceptos básicos de HTML/CSS Y esta lucha puede ser frustrante o francamente molesta.
Quizás Aprender programación CSS es una experiencia frustrante ¡Pero al menos no tiene que ser aburrido! Una de las mejores cosas de aprender programación es que las personas que son buenas codificando también tienen las habilidades para crear los juegos en los que estamos trabajando Enseñar a otros conceptos básicos En lenguaje sencillo. No hay sustituto para la práctica y la experiencia en Aprende programación CSS básica , pero los juegos ciertamente ayudan, y los modelos de diseño más nuevos, como grid y flexbox, en particular, aprovechan el modelo de aprendizaje práctico.
Es por eso que he recopilado un puñado de juegos divertidos para ayudarte a aprender más sobre Lenguaje de programación CSS. Todos estos juegos se pueden jugar gratis en tu navegador y son perfectos Para mejorar tus conocimientos de CSS.
1. Disfruta de CSS
Disfruta de CSS Es una herramienta de diseño visual basada en la web para aprender programación CSS en la página. La interfaz de arrastrar y soltar facilita agregar y diseñar elementos de página como esquinas redondeadas, degradados, sombras de texto y transiciones.
Intenta jugar esto Manifestación Y mira lo que puedes construir. Las opciones solo están limitadas por las capacidades de CSS. Puede guardar y compartir maquetas visuales para presentar ideas o enseñar conceptos específicos de CSS a otros.
Además, todo el código es completamente gratuito y accesible para copiar y pegar en sus proyectos web. también echa un vistazo Lista de elementos de la galería preconstruido con estilos CSS personalizados.
2. Desplegando el modelo de caja
Despliegue No es exactamente un juego, sino un recorrido muy interactivo por el estilo de caja CSS. Los conceptos se muestran visualmente para enseñarle más sobre las transformaciones, los cuadros y los elementos de página de CSS3, y cómo funcionan todos juntos para manipular el contenido de una página.
Esta pequeña aplicación web divertida fue creada por Chris Ruppel y alojada como una página de GitHub para cualquiera que quiera jugar con ella.
El código fuente de todo el proyecto también es de libre acceso en Repositorio GitHub. Puede descargar una copia y alojarla usted mismo o usarla localmente en caso de que se quede varado sin Internet.
3. Sass Meister
Si no está familiarizado con Sass o cualquier otro preprocesador de CSS, se lo está perdiendo. Esta es la mejor manera de escribir y mantener el código CSS, y Sass es un favorito moderno.
con aplicación Aplicación web SassMeister Puedes practicar escribiendo código Sass en tu navegador. La forma tradicional es escribir el código localmente y luego compilar los archivos .SCSS en archivos .CSS.
Sin embargo, con esta gran aplicación puedes escribir código Sass en el navegador y ver cómo se compila en tiempo real. No es un IDE completo como CodePen , pero es un patio de recreo en línea para probar fragmentos de código y jugar con Sass sin tener que instalarlos localmente.
4. Explorador de moscas
La aplicación web de . es Fleexplorer de Bennet Freely Una forma realmente divertida de aprender sobre flexbox sin un juego de estilo de defensa de la torre. Puede jugar con una demostración de contenedor activo utilizando sus propiedades flexibles que limitan la cantidad de elementos en una fila y la relación de aspecto de cada elemento.
Desafortunadamente, no puedo encontrar una manera de ver el código del ejemplo que no sea la función Ver código fuente del navegador. Tener una vista de la fuente integrada en la página sería muy bueno para que pueda copiar y pegar el código en sus propios proyectos.
Pero aún así, esta aplicación web de explorador visual es una forma divertida e interactiva de entender flexbox en teoría.
5. Aplicación Lrn
El último elemento en realidad no está basado en un navegador, sino que se ejecuta en un iPhone (próximamente para Android).
Aplicación LRN Es completamente gratuito y te enseña a escribir código con lecciones accesibles y de pequeño tamaño. Cuenta con mini concursos y desafíos de arte que simulan el mundo real. Dominarás la programación muy rápidamente y podrás aplicar tus conocimientos en la teoría.
Los lenguajes incluyen HTML, CSS, JavaScript, Ruby y Python. Esto significa que puede aprender todos los idiomas de front-end e incluso algunos idiomas de back-end si tiene tiempo.
Y Lrn no es la única aplicación de este tipo. allí Otras aplicaciones De calibre similar, pero Lrn realmente está solo en lo que respecta a la calidad de la educación.
6. CSS Diner: selectores de CSS
Muy hermoso, ¿no? Defina elementos, clases, identificadores... ¿tal vez pseudoclases? ¿Qué más hay ahí? De hecho, hay más formas de seleccionar elementos de las que cree y desea Comedor CSS Le enseña cómo usarlo al pedirle que especifique partes de alimentos usando CSS. Algunos de los desafíos pueden ser un poco confusos, pero así es la programación: no hay nada de malo en buscar en Google.
7. Zombis Flexbox
Zombis flexibles Es un juego/curso desarrollado de manera inverosímil que promete enseñarte a usar flexbox con un juego intuitivo, atractivo y que se refuerza a sí mismo, que en su mayoría gira en torno a disparar a zombis con armas controladas por el código de flexbox. Te lleva desde lo básico hasta los elementos avanzados en varios niveles que se completan con una historia, excelentes gráficos y acción de matar zombis; incluso podrías olvidar que estás aprendiendo CSS.
Flexbox en sí mismo es una gran tecnología para organizar contenido de manera receptiva en una dimensión, y si hace algo con el desarrollo web front-end, debe aprenderlo. Ya sea que lo apagues o no, Flexbox Zombies es una excelente excusa para jugar un juego que realmente te enseña algo. Ojalá toda la educación pudiera ser así, ¿no?
El mismo creador también diseñó un curso de juego para CSS Grid llamado “Criaturas de cuadrícula. No es gratis, pero si te gusta Flexbox Zombies, puedes optar por gastar dinero en él.
8. Jardín de rejilla
Personalmente, creo que flexbox está bien, pero realmente brilla en diseños unidimensionales (filas o columnas), por lo que para proyectos y plantillas más grandes, querrá ir con la cuadrícula (tal vez con algunos contenedores de flexbox dentro de las celdas de la cuadrícula). Una vez que descubras que esto va a ser ordenado, limpio y genial, pero puede haber una pequeña curva de aprendizaje en la que puede ayudar. Jardín de cuadrícula (Y los Grid Critters mencionados anteriormente).
Grid Garden es un juego gratuito en el que tienes que diseñar un jardín para que las zanahorias se rieguen y se eliminen, ¡y la cuadrícula resulta ser perfecta para esta tarea! Le dará una sólida comprensión del posicionamiento básico de la red que luego puede aplicar a los diseños de su sitio.
9. Defensa Flexbox
¿Ya conoce los conceptos básicos de flexbox pero no puede "justificar" y "alinear" perfectamente recto? Defensa Flexbox Un tutorial de flexbox disfrazado de un juego de defensa de la torre que recordará su contenido justificado y se alineará, o morirá. Pero puedes intentarlo de nuevo. Si nunca has sido fanático de esos juegos que aceptan solo una respuesta correcta, este juego te encantará, ya que te permite colocar torres donde quieras y triunfar o fracasar.
10. Ranita Flexbox
Probablemente pasará la tarde jugando en lugar de ir a las lecciones actuales de Flexbox, pero es mejor implementarlo durante unos días o semanas solo para asegurarse de obtener muchos refuerzos de memoria. rana flexbox Perfecto para eso: no lo lleva desde cero, pero si alguna vez olvida los comandos, puede recorrer este juego en unos minutos para recuperar ideas rápidamente.
11. Juegos CodePip
Si ha probado Grid Garden y Flexbox Froggy, ha visto algunos ejemplos en acción códigopip En efecto. Estos son solo dos de los 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 me enseñará esto a programar CSS?
Jugar estos juegos puede ayudarte a aprender Algunos conceptos básicos bien Especialmente si quieres aprender flexbox. Sin embargo, al final, los juegos solo pueden enseñarte las palabras que escribes. Deberías ponerlo en práctica si realmente quieres saber cómo usarlo. ¡Consigue un buen editor de código y algunas ideas que quieras implementar y empieza a hacer garabatos!
