0Pricing
CSS Academy icon

CSS Academy

CSSWebFrontendBeginner

Mejora tus diseños web con CSS a través de lecciones exhaustivas en CSS Academy.

🤖 Impulsado por IA📚 40 cursos👥 100.000+ estudiantes⭐ Calificación 4,9
Descripción general del curso

CSS: El Lenguaje que Diseña la Web

CSS controla cada detalle visual de una página web — color, diseño, espaciado, animación y responsividad. Ha evolucionado de una capa presentacional simple a un lenguaje completo de sistema de diseño, con características modernas como container queries, @layer, propiedades lógicas y la API Houdini que dan a los desarrolladores control fino sobre el renderizado. Esta pista cubre toda la amplitud de CSS, desde escribir tu primer selector hasta arquitectar sistemas de diseño escalables utilizados en grandes codebases de producción.

Qué Aprenderás

Comenzarás con sintaxis, selectores, colores y tipografía, luego construirás una sólida comprensión del modelo de caja, propiedades display y posicionamiento. A partir de ahí trabajarás con Flexbox y CSS Grid para diseños estándar y avanzados, aplicarás responsive design y media queries, y usarás variables CSS, funciones personalizadas y design tokens para theming mantenible. También cubrirás transiciones, animaciones de keyframe, transforms, filtros, blend modes y dark mode — más herramientas modernas con Sass, PostCSS y patrones CSS-in-JS. La pista cierra con arquitectura CSS usando BEM, especificidad y la cascada, container queries, @layer capas en cascada, CSS Houdini y performance.

La Ruta de Aprendizaje

Cuarenta cursos abarcan desde A1 hasta C1. Los cursos tempranos A1 y A2 establecen fundamentos — selectores, el modelo de caja, pseudo-clases, pseudo-elementos y unidades. Los cursos B1 cubren Flexbox, Grid, responsive design, animaciones, debugging con DevTools y funciones CSS. Los cursos B2 suben de nivel a Flexbox y Grid avanzados, Sass, PostCSS, CSS-in-JS, design tokens, CSS Shapes, propiedades lógicas, container queries y CSS Layers. Los tres cursos C1 — CSS Houdini, CSS Performance y CSS Future — abordan la vanguardia de la plataforma.

Cómo Funciona

Cada curso se divide en lecciones cortas y enfocadas que completas directamente en el editor integrado con retroalimentación en tiempo real. Un tutor de IA está disponible siempre que te atasques, y la progresión es deliberadamente incremental para que cada concepto refuerce el anterior antes de que se introduzca el siguiente.

Comienza a aprender →

Cómo Aprenderás

🎯
Lecciones Interactivas
Ejercicios de codificación prácticos con retroalimentación en tiempo real
🤖
Tutor de IA
Obtén ayuda instantánea de nuestro IA cuando te atasques
💻
Editor Integrado
Escribe y ejecuta código directamente en tu navegador
🏆
Certificado
Obtén un certificado al completar el curso
Plan de Estudios

40 Cursos

Todos los cursos en la ruta de aprendizaje CSS Academy.

01

Sintaxis y selectores de CSS

A13 lecciones

Aprenda la sintaxis fundamental de CSS y cómo seleccionar elementos HTML mediante selectores de etiqueta, clase, ID, atributo y selectores…

02

Colores y fondos

A14 leccionesPRO

Domine los formatos de color y las propiedades de fondo de CSS para crear páginas web visualmente atractivas.

03

Tipografía y texto

A14 leccionesPRO

Dé estilo al contenido de texto con fuentes, tamaños, pesos, alineación y técnicas para cargar fuentes personalizadas.

04

El modelo de caja

A24 leccionesPRO

Comprenda que cada elemento HTML es una caja y controle su tamaño, espaciado, bordes y sombras.

05

Propiedades de display

A24 leccionesPRO

Controle cómo fluyen los elementos en el documento mediante los modos de display block, inline e inline-block.

06

Fundamentos del posicionamiento

A24 leccionesPRO

Saque elementos del flujo normal mediante los valores de position de CSS y controle las capas con z-index.

07

Unidades y valores de CSS

A24 leccionesPRO

Domine las unidades absolutas y relativas de CSS para crear diseños escalables y adaptables.

08

Pseudo-clases

A24 leccionesPRO

Seleccione elementos según su estado, posición y relación con otros elementos mediante pseudo-clases.

09

Pseudo-elementos

A24 leccionesPRO

Inserte contenido decorativo y dé estilo a partes específicas de los elementos mediante pseudo-elementos de CSS.

10

Fundamentos de Flexbox

B14 leccionesPRO

Cree diseños unidimensionales con CSS Flexbox y controle la dirección, la alineación y el ajuste de elementos.

11

Fundamentos de CSS Grid

B14 leccionesPRO

Cree potentes diseños bidimensionales con CSS Grid mediante tracks, espacios y áreas de plantilla.

12

Diseño adaptable

B14 leccionesPRO

Construya diseños que se adapten de forma elegante a cualquier tamaño de pantalla mediante anchos fluidos y técnicas adaptables.

13

Media queries

B14 leccionesPRO

Aplique estilos diferentes según el tamaño y la orientación de la pantalla y las preferencias del usuario mediante media queries.

14

Variables de CSS

B14 leccionesPRO

Cree hojas de estilo fáciles de mantener con propiedades personalizadas que pueda reutilizar y actualizar dinámicamente.

15

Transiciones de CSS

B14 leccionesPRO

Añada cambios de estado animados y fluidos a las propiedades de CSS mediante la abreviatura transition y las funciones de temporización.

16

Animaciones y fotogramas clave de CSS

B14 leccionesPRO

Cree animaciones complejas de varios pasos mediante @keyframes y la propiedad abreviada animation.

17

Transformaciones de CSS

B14 leccionesPRO

Mueva, gire, escale e incline elementos en espacios 2D y 3D mediante funciones de transformación de CSS.

18

Especificidad y cascada

B14 leccionesPRO

Comprenda en profundidad cómo CSS determina qué estilos prevalecen cuando varias reglas apuntan al mismo elemento.

19

Funciones de CSS

B14 leccionesPRO

Use potentes funciones de CSS para realizar cálculos dinámicos, ajustar tamaños fluidos, crear diseños de cuadrícula y manipular colores mo…

20

Filtros y modos de fusión

B14 leccionesPRO

Aplique efectos visuales a elementos e imágenes mediante filtros de CSS y composición con modos de fusión.

21

Desplazamiento y desbordamiento

B14 leccionesPRO

Controle el comportamiento del desplazamiento, los puntos de ajuste y el recorte del desbordamiento para ofrecer experiencias de usuario fl…

22

Modo oscuro y esquemas de color

B14 leccionesPRO

Implemente un modo oscuro automático y manual con variables de CSS, color-scheme y media queries.

23

Depuración de CSS y DevTools

B14 leccionesPRO

Domine las DevTools del navegador para inspeccionar, depurar y comprender el diseño, las animaciones y los estilos calculados de CSS.

24

Flexbox avanzado

B24 leccionesPRO

Vaya más allá de los fundamentos con alineación y orden avanzados de flexbox y patrones de diseño de uso real.

25

Grid avanzado

B24 leccionesPRO

Desbloquee todo el potencial de CSS Grid con líneas con nombre, colocación automática, subgrid y patrones complejos.

26

Arquitectura de CSS y BEM

B24 leccionesPRO

Organice grandes bases de código CSS con patrones arquitectónicos, convenciones de nombres y estructuras de archivos.

27

Formas de CSS y clip-path

B24 leccionesPRO

Cree elementos no rectangulares y formas que permitan adaptar el texto a su contorno mediante clip-path y CSS Shapes.

28

Propiedades lógicas de CSS

B24 leccionesPRO

Escriba CSS independiente de la dirección que funcione en idiomas de izquierda a derecha y de derecha a izquierda mediante propiedades lógi…

29

Container queries

B24 leccionesPRO

Aplique estilos según el tamaño del contenedor de un componente, en lugar del viewport, mediante container queries.

30

Capas de CSS (@layer)

B24 leccionesPRO

Gestione explícitamente la prioridad de la cascada de CSS mediante @layer para eliminar conflictos de especificidad en grandes bases de cód…

31

Preprocesador Sass

B24 leccionesPRO

Potencie la creación de CSS con variables, anidamiento, mixins y funciones mediante el preprocesador Sass.

32

PostCSS y herramientas de CSS

B24 leccionesPRO

Transforme y optimice CSS con plugins de PostCSS para añadir prefijos automáticamente, minificar y aplicar transformaciones personalizadas.

33

Patrones de CSS-in-JS

B24 leccionesPRO

Explore estilos delimitados por componente con styled-components, Emotion, CSS Modules y Vanilla Extract.

34

Tokens de diseño y tematización

B24 leccionesPRO

Construya sistemas de diseño escalables con tokens de diseño y tematización para varias marcas mediante propiedades personalizadas de CSS.

35

Pruebas de CSS

B24 leccionesPRO

Garantice la corrección de CSS y la coherencia visual mediante pruebas de regresión, pruebas unitarias y auditorías de accesibilidad.

36

Patrones de componentes CSS

B24 leccionesPRO

Construya componentes de interfaz listos para producción, como tarjetas, modales, menús desplegables y pestañas, usando técnicas de CSS pur…

37

Patrones de diseño modernos

B24 leccionesPRO

Implemente patrones de diseño avanzados y reales mediante técnicas modernas de CSS Grid y Flexbox.

38

CSS Houdini

C14 leccionesPRO

Amplíe CSS con JavaScript mediante las API de Houdini para crear propiedades personalizadas, pintura y diseños.

39

Rendimiento de CSS

C14 leccionesPRO

Optimice la entrega y el rendimiento de renderizado de CSS comprendiendo la canalización de renderizado del navegador.

40

El futuro de CSS

C14 leccionesPRO

Explore la vanguardia de CSS con anidamiento nativo, :has(), estilos con ámbito y View Transitions.

Preguntas frecuentes

Preguntas frecuentes

¿Es gratuito el curso CSS Academy?

Sí. Puedes empezar el curso CSS Academy gratis y completar sus lecciones interactivas sin costo alguno. Una suscripción opcional a PRO desbloquea herramientas avanzadas de IA y un certificado compartible.

¿Necesito experiencia previa para aprender CSS?

No. El curso comienza con los fundamentos y avanza gradualmente hacia temas más avanzados, así que puedes empezar incluso sin experiencia previa en CSS.

¿Cómo aprenderé CSS en CoddyKit?

Aprendes haciendo. Las lecciones interactivas cortas combinan una explicación clara con un ejercicio de codificación práctico que se ejecuta en tiempo real, y un tutor de IA disponible 24/7 te da ayuda personalizada siempre que te atasques.

¿Obtengo un certificado al completar CSS Academy?

Sí. Los aprendices PRO pueden hacer un examen y obtener un certificado compartible de finalización con un código verificable para el curso CSS Academy.

¿Puedo aprender CSS en mi teléfono?

Sí. CoddyKit está disponible en la web y como aplicaciones nativas para iOS y Android, así que puedes aprender CSS en cualquier dispositivo y tu progreso se sincroniza entre ellos.

Comienza CSS Academy Ahora

Únete a miles de estudiantes dominando programación con lecciones impulsadas por IA.

Empezar Gratis →Ver Todos los Cursos