7 plataformas web para aprender CSS jugando

Aprender CSS es vital para crear sitios web, aplicaciones móviles y otras instancias similares. Hacerlo desde cero, puede resultar gobiante para alguien que reciencia se introduzca en este lenguaje, dada la cantidad de propiedades y variables con las que se trabaja.

Para hacer más llevadero el aprendizaje, se encuentra disponible en la web algunos juegos que colaboran en este proceso. Su aportación se basa en la estrategia del ensayo y error. Al manipular en tiempo real algunos objetos que aparecen en la pantalla, la práctica se vuelve más dinámica gracias a la entrada visual.

Las alternativas enumeradas a continuación son todas de libre acceso.

rana flexbox

Mediante este juego puedes practicar el uso de propiedades como alinear elementos, justificar-contenido, alinear-contenido, dirección de flexión, alinearse, envoltura flexible, flujo flexible y ordenar a través de 24 niveles.

La dificultad sube gradualmente por nivel, indicando al inicio de cada uno las variables con las que se trabajará y su función específica.

Para hacer más dinámico y gráfico el proceso de aprendizaje, los ejemplos muestran una serie de heridas de colores y nenúfares en la pantalla.

Enlaces: rana flexbox

Defensa Flexbox

Esta otra aplicación web funciona de manera similar a la revisión anterior. Consta de 12 niveles en los que se refuerzan el uso de propiedades como alinear elementos, justificar-contenido, dirección de flexión, alinearse y ordenar.

En este juego la dinámica se basa en evitar que los enemigos entrantes superen tus defensas. Al plantar tu estrategia de defensa, terás que posicionar tus torres mediate definiciones CSS.

Enlaces: Defensa Flexbox

Comedor CSS

Este juego se enfoca en reforzar el uso de selectores CSS. A través de 32 niveles explicados detalladamente, se planifican una serie de ejercicios en los que, a través de un editor de CSS y HTML, podrás completar las tareas asignadas.

Dependiendo del nivel, deberás ejecutar órdenes específicas relacionadas con la selección de ciertos elementos que aparecen en la pantalla. En caso de no dominar algún ejercicio en particular, puede consultar pistas en el mismo sitio.

Enlaces: Comedor CSS

jardín de rejilla

A través de 28 niveles con ejercicios, esta aplicación web ofrece un juego con el que puedes reforzar etiquetas como cuadrícula-columna-inicio, grid-column-end, columna de cuadrícula, grid-row-start, fin de fila de cuadrícula, fila de cuadrícula, área de cuadrícula, ordenar, cuadrícula-plantilla-columnas, cuadrícula-plantilla-filas y plantilla de cuadrícula.

Los ejercicios planteados toman como punto de partida una cuadrícula que representa un terreno de cultivo, en el que media CSS hay que distribuir la platación de zanahorias y la distribución de agua.

Enlaces: jardín de rejilla

Diseño it!

A diferencia de las anteriores, esta aplicación web no es un juego en sí, pero rescata muchos elementos de la alternativa anterior para reforzarlos.

Con una estructura menos gamificada, esta plataforma permite crear grillas en tiempo real, según las configuraciones indicadas en el generador de estas estructuras.

En la medida en que se van a realizar cambios, estos se pueden ver reflejados en tiempo real en su monitor de códigos HTML y CSS, los cuales se pueden exportar a CodePen, para archivarlos, compartirlos o trabajarlos posteriores desde ahí.

Enlaces: Diseño it! Cuadrícula

Proyectos de CodePen

Si dominas algunos conceptos básicos, puedes aventurarte en otra clase de plataformas para reforzar tu aprendizaje.

En CodePen, una gran comunidad de usuarios comparte ejemplos de implementación de códigos HTML, CSS y JS. Con sólo buscar proyectos usando las palabras claves adecuadas (por ejemplo menú, encabezamiento, pie de página, animación, diseño.

Enlaces: Código abierto

Batalla CSS

Si quieres poner a prueba tus habilidades con CSS desafiando a otros desarrolladores, este es tu juego. Su objetivo es replicar una imagen señalada escribiendo HTML y CSS utilizando la menor cantidad de código posible.

Al recibir un desafío, se le presentará un editor de código y un visor de progreso. Una vez que envíes tus resultados, podrás ver la puntuación asignada de inmediato.

Como detalle, para que el ejercicio cumpla con su objetivo, no se permite el uso de imágenes ni Javascript. La idea es sacar a lucir tu dominio con el lenguaje CSS al momento de diseñar.

Enlaces: Batalla CSS

La implementación de dinámicas formativas propias de los juegos en espacios, que denominamos “gamificación” del aprendizaje, constituyen una buena estrategia para dar los primeros pasos con el aprendizaje de este idioma o bien, para reforzar conceptos que no son fáciles de retener.