Si tu objetivo es aprender diseño web y te quieres centrar en los aspectos visuales y estéticos desde el lado de la programación, aquí tienes un roadmap o camino de aprendizaje para aprender CSS desde sus bases hasta los frameworks más modernos:
- 1️⃣ Fundamentos
- 2️⃣ Tipos en CSS
- 3️⃣ Colores
- 4️⃣ Tipografías
- 5️⃣ Bases de layout
- 6️⃣ Selectores CSS
- 7️⃣ Layouts
- 8️⃣ Efectos CSS
- 9️⃣ Cascada CSS
- 1️⃣0️⃣ Animaciones CSS
- 1️⃣1️⃣ Responsive
- 1️⃣2️⃣ Calidad de código
- 1️⃣3️⃣ Frameworks
- 1️⃣4️⃣ Metodologías CSS
En la parte inferior del roadmap, explicamos brevemente cada apartado.
1️⃣ Fundamentos
Antes de comenzar a aprender CSS, lo principal es conocer las bases y fundamentos. Hay que conocer la estructura de HTML y sus etiquetas, así como los navegadores más populares y las características especiales que tienen respecto a la compatibilidad.
2️⃣ Tipos en CSS
Una vez tenemos esa base, necesitamos entender que al igual que existen tipos de datos en programación, existen en CSS. Además, es importante conocer los tipos de unidades, así como el concepto de variables CSS.
3️⃣ Colores
Los colores son una parte fundamental del diseño web. No sólo hay que saber todo lo que hay alrededor de ellos, sino que también tenemos que conocer como usar imágenes como fondos, o como crear gradientes o degradados:
4️⃣ Tipografías
Otra parte fundamental del diseño web son las tipografías. Una mala elección tipográfica puede destrozar un diseño, por lo que hay que saber todo sobre ellas: desde los formatos y características, hasta el peso que pueden tener, como cargarlas y librerías o servicios de terceros:
5️⃣ Bases de layout
Antes de comenzar a crear complejos diseños, hay que aprender el modelo de cajas mediante el que funciona CSS. Eso será una buena base para luego entender como desarrollar diseños y layouts complejos.
6️⃣ Selectores CSS
La idea básica de CSS es aplicar estilos a uno o varios elementos HTML. ¿A cuáles? Pues justo eso es de lo que se encargan los selectores CSS. Por otro lado, las pseudoclases o pseudoelementos permiten seleccionar elementos por cuestiones algo más especiales.
7️⃣ Layouts
Hemos llegado al cénit de CSS. Una vez tenemos la suficiente destreza de los conocimientos anteriores, es cuando podemos aprovechar al máximo esquemas de maquetación CSS como Flex o Grid, mediante los cuales se pueden hacer auténticas maravillas. También es importante aprender a utilizar posicionamiento, para casos más concretos:
8️⃣ Efectos CSS
En CSS existen estrategias y multitud de efectos especiales como sombras de texto, de elementos, filtros, máscaras, recortes o modos de fusión. Aprender estas estrategias harán que tus diseños comiencen a verse más profesionales y auténticos.
9️⃣ Cascada CSS
Probablemente, una de las cuestiones más importantes y a la vez más complejas de CSS es el de la Cascada y la Especificidad CSS. Es uno de los temas que más confunde a la mayoría de los desarrolladores, pero que a la vez, muchos desarrolladores no se preocupan en comprender y por lo que les frustra tanto CSS. Quizás puedas saltarte este tema, pero te aseguro que aprenderlo, hará que comiences a ver CSS con otros ojos:
1️⃣0️⃣ Animaciones CSS
Una web estática e inmóvil es una web aburrida. Con las transiciones y las animaciones podemos conseguir que la web interactue con el usuario y responda según sus acciones, ya sean clicks, movimientos de ratón u otras interacciones.
1️⃣1️⃣ Responsive
Hoy en día las páginas se ven desde dispositivos de todo tipo: escritorio, televisores, tablets, móviles, consolas, proyectores, relojes inteligentes, etc... Por lo tanto, nuestra web debe estar adaptada para ver en cualquier tipo de estos dispositivos, no sólo en el que diseñas el sitio web. El responsive es la capacidad de adaptarse a estos dispositivos, y es algo que requiere cierta soltura previa con CSS.
1️⃣2️⃣ Calidad de código
Si ya sabemos crear código CSS, nuestra preocupación se centrará en mejorar su calidad, hacerlo más legible, más organizado y más eficiente. Los linters o estrategias como el Nesting CSS harán que ese objetivo esté más cerca:
1️⃣3️⃣ Frameworks
Cuando trabajamos con CSS nativo se suele tardar mucho en llegar al objetivo. Por ello, es muy habitual que utilicemos frameworks CSS, los cuales nos reducen el tiempo necesario para desarrollar y diseñar componentes, siguiendo patrones frecuentes y adoptando una apariencia común:
1️⃣4️⃣ Metodologías CSS
Una vez conocemos todo lo anterior, tenemos que conocer ciertas metodologías de trabajo relacionadas con CSS, para averiguar cuál se adapta mejor a nuestro caso, y cuál nos puede servir más en nuestro objetivo. Mucha gente comienza directamente por estas herramientas, y al carecer de todo lo anterior, se frustran y no comprenden realmente como funciona CSS. Las metodologías, herramientas o librerías de este apartado deben ser un añadido a lo anterior:
