CSS a fondo: del primer estilo al diseño profesional
Aprende a dar aspecto, orden y vida a tus páginas. Entenderás por qué un estilo se aplica y otro no, y construirás layouts modernos que se adaptan a cualquier pantalla.
Empezar la lección 1 Ver el temarioApuntes claros
Explicaciones con recuadros de nota, advertencia y consejo, y un glosario en cada lección.
Práctica en vivo
Editores dentro de la lección: cambias el código y ves el resultado al instante.
Ejercicios que se corrigen solos
Pegas tu solución y el comprobador te dice punto por punto qué cumples.
Autoevaluación
Preguntas con respuesta inmediata y explicación al final de cada lección.
Antes de empezar
- Haber hecho el curso de HTML (o saber estructurar una página con etiquetas semánticas).
- Un editor de código y un navegador moderno.
- Ganas de probar y equivocarte: los editores en vivo están para eso.
Lo que construirás
- Una tarjeta de producto con sombras y degradados.
- Layouts reales con Flexbox y Grid.
- Una galería que se adapta sola a cualquier pantalla.
- Un tema claro y oscuro con variables.
- Una **landing page completa** y responsiva como proyecto final.
Temario · ≈ 12 horas
-
LECCIÓN 01
Cómo funciona CSS
La cascada, la herencia y cómo depurar con las herramientas del navegador.
Disponible -
LECCIÓN 02
Selectores y especificidad
Combinadores, atributos, pseudoclases, pseudoelementos y especificidad.
Disponible -
LECCIÓN 03
Color, unidades y tipografía
Colores HSL, unidades, tipografía, fuentes web y texto fluido con clamp().
Disponible -
LECCIÓN 04
La caja y el flujo del documento
box-sizing, márgenes, relleno, bordes, display, overflow y proporciones.
Disponible -
LECCIÓN 05
Posicionamiento y capas
relative, absolute, fixed, sticky, z-index y un modal completo.
Disponible -
LECCIÓN 06
Flexbox
Contenedor, ítems, ejes, alineación y los patrones de todos los días.
Disponible -
LECCIÓN 07
CSS Grid
Columnas, fr, minmax, auto-fit, áreas con nombre y formularios alineados.
Disponible -
LECCIÓN 08
Diseño responsivo
Mobile-first, media queries, valores fluidos y container queries.
Disponible -
LECCIÓN 09
Fondos, bordes, sombras y degradados
Degradados, sombras, filtros, efecto cristal y texto con degradado.
Disponible -
LECCIÓN 10
Transiciones y animaciones
Transiciones, transformaciones, @keyframes y movimiento accesible.
Disponible -
LECCIÓN 11
Variables, temas y organización
Variables, modo oscuro, color-mix(), BEM, @layer y anidamiento.
Disponible -
PROYECTO FINAL
Proyecto: landing page responsiva
Una landing page completa y responsiva, con modo oscuro y accesibilidad.
Disponible -
EXTRA OPCIONAL
CSS moderno
dialog, popover, oklch, color-mix, @property y funciones con soporte parcial.
Disponible