Recursos para practicar CSS

¿Alguna vez dijiste “el diseño no es para mi”, “no tengo habilidad para el estilo” o “nunca necesitaré saber CSS”?

La negación como raíz de los males

Si respondiste “sí” a alguna de estas afirmaciones puedo entenderte, prefiero trabajar en el backend y tocar lo menos posible la parte del frontend porque no es lo tuyo. También es probable que hayas intentado echarle el guante en tus inicios al aprender a programar para la web y en algún punto te sentiste como Peter Griffin en este gif.

El motivo de por qué sucede esto es porque nos negamos a entender como funciona CSS y así como aceptaste entender la herencia prototipal de JavaScript o la concurrencia de Golang. Después comienza la frustración y en el peor de los casos tiramos la toalla cuando tenemos un mundo de posibilidades por que arreglas una cosa y se rompen diez.

Recordemos que CSS al final del día es un lenguaje y como tal obedece a los lineamientos del pensamiento computacional: realizará las instrucciones de forma procedimental con la misma precisión que un humano podría seguirlas, en tanto sean claras.

Lo único que debes hacer es entender su lógica, reglas y practicar así como has hecho con otros lenguajes o tecnologías. Así que te comparto algunos sitios donde puedes practicar tus habilidades.

Lugares para practicar CSS

Flexbox Froggy

Existe desde 2015, así que es probable que ya lo conocieras y la premisa es simple: tienes ranas que debes ordenarlas en sus lirios correspondientes utilizando display: flexy Flexbox.

Cuentas con 24 retos diferentes donde la dificultad irá incrementando al mismo tiempo que entiendes mejor esta parte de CSS, con más de 20 idiomas distintos incluyendo español

CSS Grid Garden

De mano del mismo autor que Flexbox Froggy, en este juego te encargarás de utilizar CSS Grid Layout para distribuir correctamente zanahorias, colocarles agua y eliminar hierba mala.

Tienes 28 niveles a tu disposición que te ayudarán a tener una mejor alineación de tus contenidos en CSS.

CSS Diner

Otro divertido juego en el que debes seleccionar alimentos y platos utilizando la herencia de CSS para dominar la especificidad de tus estilos. Suena más complejo de lo que es, siendo que entender esto se vuelve bastante útil para que tus estilos se apliquen únicamente a los elementos que asignes y de la forma que indiques.

Acá son 32 retos que de igual forma la dificultad progresará conforme vayas avanzando hasta tener muy claro como funciona la herencia en CSS.

Flexbox Defense

Inspirado en los anteriores juegos de Flexbox te presento este tower defense donde te encargarás de colocar estratégicamente algunas torretas para evitar que las oleadas enemigas lleguen del punto A al punto B.

Es una gran oportunidad de repasar Flexbos a través de los 12 niveles que nos ofrece, aunque llegado a este punto quizá busques algo más profundo y recomiendo abroches tus cinturones para lo que viene.

CSS Battle

La cosa se vuelve más seria pues en este sitio no solo se trata de cumplir retos sino que también compites contra otras personas. Aún así no dejes que esto te distraiga del objetivo principal: replicar una imagen con el menor código posible.

Hay muchos retos para participar donde puedes incluso aparecer en la tabla de clasificación si te lo propones. Esto puede ser el principio de lograr dibujos con CSS, lo cual se verá reflejado con un mayor dominio de las hojas de estilo para la web.

Flexplorer

Esta herramienta es bastante didáctica donde podrás simular la distribución de elementos con Flexbox. Tienes la posibilidad de modificar parámetros, ver el código generado y un resultado visual inmediato.

Mi recomendación es que jamás debas depender del código generado por otras aplicaciones, al mismo tiempo que debes experimentar todo lo necesario para entender lo que aparece en pantalla.

CSS Grid Playground

Al igual que Flexplorer acá podemos poner previsualizar la distribución y forma de elementos utilizando CSS Grid. Bastante práctico para practicar estilos y saber cuales serán los resultados.

Unfolding the Box Model

La primera vez que visité este sitio me voló la mente pues está enfocado 100% a las transformaciones 3D de CSS y mostrar un poco de los resultados sorprendentes que se puede lograr cuando llegas a un nivel bastante avanzado.

El sitio por sí no te lleva a poner en práctica o aprender algo nuevo, es más bien un demo del cual podemos estudiar su repositorio para después replicar los efectos e implementarlos en nuestros proyectos.

Ok, quiero comenzar ya mismo

Es momento de que le des una nueva oportunidad a CSS para reconciliarte, recuerda que eres una persona distinta a la de hace años, meses o semanas y ahora nunca quieres parar de aprender.

Para eso tenemos un curso en el que puedes aprender HTML y CSS desde cero. Una vez lo apruebes continuar tu aprendizaje en el Curso de Responsive Design: Maquetación Mobile First para crear un producto 100% real donde pondrás en práctica bastantes estilos de CSS.