Recursos CSS curados: documentación, generadores y práctica

Mapa final de recursos CSS fiables y organizados por categoría para seguir aprendiendo sin enlaces rotos.

Esta lección recopila recursos de calidad para consultar, practicar y validar compatibilidad en proyectos reales.

El objetivo no es leer todo de golpe, sino saber dónde buscar rápidamente según el problema que tengas.

Agrupar recursos por propósito reduce ruido y acelera aprendizaje continuo.

  • Primera parada para entender especificación y comportamiento real.
  • Aprender CSS exige iterar y ver resultados reales.
  • Ahorra tiempo en tareas repetitivas sin perder control.
  • Esta lección recopila recursos de calidad para consultar, practicar y validar compatibilidad en proyectos reales.
  • El objetivo no es leer todo de golpe, sino saber dónde buscar rápidamente según el problema que tengas.

Documentación técnica fiable

Primera parada para entender especificación y comportamiento real.

Práctica y experimentación

Aprender CSS exige iterar y ver resultados reales.

Generadores y utilidades

Ahorra tiempo en tareas repetitivas sin perder control.

CSS
77

Recursos CSS curados: documentación, generadores y práctica

Mapa final de recursos CSS fiables y organizados por categoría para seguir aprendiendo sin enlaces rotos.

Código del tema: display: grid; gap: 1rem;

📘 Teoría

Documentación técnica fiable

Primera parada para entender especificación y comportamiento real.

1

MDN CSS

Referencia principal en español para propiedades, selectores y guías.

  • https://developer.mozilla.org/es/docs/Web/CSS
2

web.dev Learn CSS

Ruta estructurada y moderna de fundamentos a temas avanzados.

  • https://web.dev/learn/css/
3

CSSWG Drafts

Borradores de especificaciones para features recientes.

  • https://drafts.csswg.org/

Práctica y experimentación

Aprender CSS exige iterar y ver resultados reales.

1

CodePen

Prototipado rápido de snippets y componentes.

  • https://codepen.io/
2

Frontend Mentor

Retos con diseño real para practicar responsive y componentes.

  • https://www.frontendmentor.io/
3

CSS Battle

Entrenamiento de precisión y creatividad con CSS.

  • https://cssbattle.dev/

Generadores y utilidades

Ahorra tiempo en tareas repetitivas sin perder control.

1

CSS Gradient

Generador de gradientes editable.

  • https://cssgradient.io/
2

Can I Use

Compatibilidad por navegador para features CSS.

  • https://caniuse.com/
3

Animista

Animaciones CSS listas para ajustar y copiar.

  • https://animista.net/

🧪 Aprende probando

Ejemplo Demo: plan de consulta por problema Qué recurso abrir según tipo de duda.

🏁 Retos

Reto Reto: checklist de investigación Completa una mini-guía de pasos para depurar una feature CSS.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .