Curso de CSS

Qué es CSS, un poco de historia, qué vas a aprender en este curso y cómo usar los ejemplos y los retos.

Configura un flujo de trabajo real para CSS con VS Code, DevTools y práctica en CodePen sin depender de teoría redundante.

Aprende cómo se escribe CSS: selector, propiedades, valores, comentarios y cómo enlazar una hoja de estilos al HTML.

Aprende por qué reset/normalize debe ir al principio del proyecto y cómo usar referencias modernas para empezar con una base CSS consistente.

Comprende cómo decide el navegador qué regla aplicar: origen de estilos (externo, interno e inline), orden de aparición e importancia.

Cómo se calcula la puntuación de los selectores, cuándo gana una regla sobre otra y por qué conviene evitar !important.

Aprende a seleccionar elementos con la etiqueta, la clase y el id; agrupa selectores para aplicar la misma regla a varios.

Entiende cómo se calcula el tamaño real de un elemento y cómo controlar sus espacios.

Domina las unidades absolutas y relativas para crear diseños flexibles y legibles.

Domina el tamaño intrínseco en CSS para que los componentes se adapten al contenido sin romper layouts.

Personaliza listas sin perder semántica: bullets claros, numeración continua y layouts modernos.

Crea tablas claras con zebra, alineación correcta y patrones responsive sin perder accesibilidad.

Aprende a dominar el flujo del documento con display y a ubicar elementos con position sin romper el layout.

Aprende a definir colores con precisión y a garantizar buen contraste.

Domina variables CSS como sistema de diseño vivo: define tokens, crea temas consistentes y actualiza estilos en tiempo real sin duplicar reglas.

Crea paletas de colores coherentes, accesibles y predecibles usando el espacio de color que entiende la percepción humana.

Aprende a crear gradientes lineales, radiales y cónicos con intención visual, y construye un mini generador para prototipar rápido.

Domina `background` con shorthand moderno, múltiples capas y patrones profesionales de UI sin depender de imágenes pesadas.

Aprende a usar `mask-image`, gradientes y SVG para crear recortes visuales, focos y transiciones limpias sin tocar el asset original.

Crea combinaciones de color útiles para UI y genera gradientes listos para usar en fondos, botones y tarjetas.

Diseña una tipografía sólida para UI reales: familias de sistema, escalas fluidas con clamp(), jerarquía visual y microajustes de legibilidad.

Optimiza el rendimiento y la precisión de tu diseño utilizando un solo archivo de fuente para infinitos estilos y pesos.

Evita las 'viudas' y 'huérfanas' en tus títulos y párrafos automáticamente para mejorar la legibilidad y el diseño visual.

Aprende a crear profundidad y legibilidad con box-shadow (sombras de caja) y text-shadow (sombras de texto).

Diseña una utilidad visual para crear sombras de interfaz con control fino de eje, blur, spread, opacidad y sombras múltiples.

Controla iconos e ilustraciones SVG con CSS moderno: fill, stroke, variables y animaciones ligeras.

Domina border-image: modelo de 9 cortes, control de slice/width/repeat, fallbacks y patrones reutilizables para componentes reales.

Aplica filtros CSS en interfaces reales: funciones completas de filter, backdrop-filter legible y patrones de rendimiento útiles en producto.

Usa ::before y ::after para crear decoraciones, overlays y UI sin HTML extra.

Crea ilustraciones simples con CSS usando bordes, pseudo-elementos, gradientes y transformaciones.

Domina todas las técnicas modernas de centrado y alineación: Flexbox, Grid, margin auto y place-* properties. Olvídate de los hacks del pasado.

Domina Flexbox: ejes, alineación, distribución, wrapping y propiedades de los ítems con ejemplos y un laboratorio interactivo.

Crea patrones fluidos con filas y columnas flexibles para bloques decorativos, listados visuales y sistemas de tarjetas.

Domina CSS Grid: líneas, áreas, auto-placement, subgrid y patrones reales para layouts modernos.

Construye una utilidad para generar patrones visuales repetibles con Grid, controlando columnas, filas, gap y densidad.

Aprende a heredar la estructura de filas y columnas de un contenedor padre para alinear elementos hijos independientes. Domina la herencia de grid para crear componentes internos que respeten la estructura del contenedor padre, eliminando desajustes visuales.

Domina la pareja más importante de `position`: usa `relative` para crear contexto y `absolute` para sacar elementos del flujo sin perder control.

Aprende cuándo un elemento debe anclarse al viewport con `fixed` y cuándo debe seguir el scroll de su contenedor con `sticky`.

El posicionamiento en CSS ha pasado de ser una herramienta para "parchear" diseños a ser un sistema robusto y predecible. Ya no dependemos de floats ni de cálculos manuales complejos; el CSS moderno utiliza el posicionamiento para crear capas lógicas y elementos interactivos que respetan el flujo del documento.

Aprende a usar `anchor-name`, `position-anchor` y `anchor()` para colocar tooltips, popovers y ayudas contextuales respecto a otro elemento con mucho menos pegamento manual.

Aplica estilos según el tamaño de pantalla, orientación o preferencias del usuario con @media. Aprende mobile-first y el meta viewport.

Construye interfaces adaptables con layout fluido, clamp(), media queries modernas, container queries y accesibilidad basada en preferencias.

Aprende a adaptar un componente por el tamaño de su contenedor con @container, container-type y unidades cqi/cqw.

Implementa dark mode robusto con tokens CSS, preferencia del sistema y override manual sin romper accesibilidad.

Domina la creación de navegaciones profesionales responsive con menú hamburguesa y panel off-canvas usando Tailwind, Bootstrap, Flexbox y Grid.

Aprende translate, rotate, scale, skew, perspectiva y preserve-3d para crear interacciones fluidas y composiciones visuales avanzadas.

Combina transiciones y animaciones con @keyframes para dar vida a la UI: hover suave, loaders, pulses y animaciones con control fino.

Aprende a registrar variables CSS con `@property` para que el navegador entienda su tipo real y pueda animarlas de forma fiable en gradientes, barras, ángulos y temas dinámicos.

Aprende a transicionar tamaños intrínsecos como `height: auto` con CSS nativo, entendiendo cuándo usar `interpolate-size`, qué problemas resuelve y cómo dejar fallback razonable.

Diseña experiencias de scroll fluidas con CSS: carruseles con snap, cabeceras sticky y una introducción práctica a scroll-driven animations.

Crea animaciones vinculadas al desplazamiento del usuario usando solo CSS. Domina animation-timeline para efectos de scroll y parallax.

Crea transiciones cinematográficas entre diferentes vistas o estados de tu aplicación con el mínimo esfuerzo de código.

Domina los selectores funcionales modernos para reducir duplicación, controlar especificidad y crear lógica visual sin JavaScript.

Aprende a reducir repetición, controlar especificidad y construir selectores mantenibles con :is(), :where() y :not(), combinándolos con estados y estructura real.

Domina :has() para estilizar padres y relaciones entre elementos, con casos reales de formularios, tarjetas y estados de interfaz.

Usa checkbox/radio + selectores para crear interacciones simples en CSS, entendiendo límites de accesibilidad y mantenibilidad.

Escribe hojas de estilo jerárquicas y fáciles de mantener usando el anidamiento nativo, reduciendo la redundancia de selectores.

Aprende a detectar el soporte de funciones nuevas en el navegador para aplicar estilos avanzados solo donde funcionen, garantizando una web resiliente.

Aprende a diseñar CSS robusto con @supports, fallbacks reales y herramientas de prefijos para mantener compatibilidad sin renunciar a features modernas.

Aprende a crear layouts y tipografías fluidas sin hacks usando funciones matemáticas nativas de CSS.

Introduce lógica condicional nativa en tus hojas de estilo. Aprende a cambiar propiedades basándote en valores de variables sin una línea de JS.

Estructura CSS con @layer para controlar prioridad de forma explícita, reducir conflictos y escalar estilos sin abusar de !important.

Aprende a estructurar CSS para proyectos reales: convenciones de nombres, cascade layers, límites por componente y un flujo de revisión que evita deuda técnica.

Maximiza los FPS y la fluidez de tu web. Aprende a usar will-change, content-visibility y contención para reducir el trabajo del navegador.

Configura PostCSS con plugins clave como Autoprefixer y postcss-preset-env para escribir CSS moderno con compatibilidad real.

Usa Sass para escalar estilos con variables, anidamiento controlado y mixins reutilizables, escribiendo sintaxis Sass (SCSS) real en lugar de HTML.

Aprende Tailwind para producto real: utilidades base, variantes responsive/estado y patrones reutilizables para evitar HTML difícil de mantener.

Aprende a maquetar interfaces rápidas con Bootstrap 5: sistema de 12 columnas, utilidades responsive y componentes listos para producción.

Diseña cabeceras robustas con branding, navegación adaptable, estados sticky y foco visible para teclado.

Compara diez maneras reales de resolver navegación responsive: desde checkbox hack y details hasta popover, dialog, aria-expanded y WAAPI.

Aprende a crear un componente card profesional usando Tailwind CSS, Bootstrap, Flexbox puro y CSS Grid. El mismo HTML, diferentes enfoques de estilado.

Aprende a decidir entre cards brutalistas, editoriales, glass, ticket, polaroid o minimalistas según marca, jerarquía visual y tipo de contenido.

Estudia cuatro maneras reales de construir sliders y galerías: desplazamiento con transform, cross-fade, scroll-snap nativo y revelado con clip-path.

Construye una galería moderna con CSS Grid, recortes consistentes y microinteracciones accesibles.

Construye sidebars claras y mantenibles con layout de dos columnas, estados activos y comportamiento sticky.

Diseña pies de página escalables con semántica correcta, grid responsive y comportamiento sticky footer sin hacks frágiles.

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

Cierra el curso con una ruta clara de práctica y enlaza tu progreso con JavaScript para construir interfaces completas.