Curso de CSS

CSS (Cascading Style Sheets, hojas de estilo en cascada) es el lenguaje que da forma visual a la web: colores, tipografía, espaciado, layouts, adaptación a móviles, animaciones. Si HTML es el esqueleto de una página, CSS es su piel, su ropa y su forma de moverse.

En proyectos reales, CSS es lo que separa un sitio "hecho por un principiante" de uno que un cliente presume con orgullo. Un buen dominio de CSS te permite convertir cualquier diseño de Figma en una página idéntica, que se vea perfecta en un celular de 360 px y en un monitor de 2560 px, que cargue rápido y que sea fácil de mantener cuando el cliente pida cambios.

Este curso va de cero a nivel profesional: empiezas con la sintaxis y los selectores, dominas Flexbox y Grid a fondo, aprendes diseño responsive mobile-first, animaciones, arquitectura (BEM), preprocesadores (Sass), frameworks (Tailwind CSS y Bootstrap) y las características más modernas del lenguaje. Muchas lecciones incluyen demos en vivo que puedes manipular, copiar y abrir en el Playground.

Qué vas a poder hacer al terminar

• Maquetar cualquier diseño con Flexbox y Grid, sin "hacks".
• Crear sitios 100 % responsive con enfoque mobile-first.
• Entender la cascada y la especificidad para que tus estilos nunca "dejen de funcionar" sin razón.
• Crear temas claro/oscuro con variables CSS, transiciones y animaciones fluidas.
• Organizar el CSS de proyectos grandes con BEM, Sass y una estructura de archivos profesional.
• Trabajar con Tailwind CSS y Bootstrap cuando el proyecto lo requiera.
• Entregar a un cliente un sitio multi-sección completo y pulido.

Requisitos previos

• Fundamentos: tener VS Code, Live Server y las DevTools listos.
• HTML: conocer la estructura de un documento y las etiquetas semánticas.

Temario

Nivel básico

1. ¿Qué es CSS? — sintaxis, formas de incluirlo, reset y DevTools.
2. Selectores, cascada y especificidad — cómo decide el navegador qué estilo gana.
3. Colores y unidades — hex, rgb, hsl, oklch; px, rem, %, vw y cuándo usar cada una.
4. Tipografía y Google Fonts — fuentes, tamaños, interlineado y legibilidad.
5. El modelo de caja — content, padding, border, margin y box-sizing.
6. Display y posicionamiento — block, inline, position, z-index y centrado.

Nivel intermedio

7. Flexbox a fondo — layouts en una dimensión: navbars, tarjetas, centrado.
8. CSS Grid a fondo — layouts en dos dimensiones: galerías, áreas, páginas completas.
9. Responsive design — mobile-first, media queries e imágenes y textos fluidos.
10. Variables CSS — custom properties, design tokens y modo oscuro.
11. Pseudo-clases y pseudo-elementos — :hover, :nth-child, ::before, ::after y más.
12. Transiciones y transformaciones — movimiento suave, translate, rotate, scale y 3D.
13. Animaciones con @keyframes — loaders, entradas y movimiento accesible.
14. Sombras, degradados y filtros — profundidad, gradientes, glassmorphism y clip-path.

Nivel profesional

15. Arquitectura CSS (BEM) — nombres, organización de archivos y @layer.
16. Sass — variables, nesting, mixins, parciales y estructura 7-1.
17. Tailwind CSS — utility-first, responsive, dark mode y personalización.
18. Bootstrap — grid de 12 columnas, componentes y cuándo usarlo.
19. CSS moderno — container queries, :has(), clamp(), nesting nativo y más.
20. Proyecto final: sitio responsive — un sitio multi-sección completo listo para cliente.

Cómo estudiar este curso

Escribe cada ejemplo tú mismo en lugar de copiarlo y juega con las demos en vivo cambiando valores. CSS se aprende con los ojos: cambia una propiedad, observa qué pasa y entiende por qué.