Punto de partida
Introducción
Antes de escribir una sola línea de código, el modelo mental de cómo funciona la web.
1 móduloRuta de aprendizaje
El recorrido
De cero a construir interfaces modernas, en orden. Empezás entendiendo cómo funciona la web y seguís con 28 módulos organizados en 10 grupos a lo largo de dos capas: HTML para estructurar y CSS para dar forma y estilo.
Capa 01 · Estructura
HTML
El esqueleto de toda página. Aprendés a darle significado al contenido: texto, listas, enlaces, imágenes, formularios y semántica.
H01
Fundamentos del HTML
La gramática del lenguaje: cómo se escribe un elemento y cómo se arma un documento válido desde cero.
2 módulos H02
Contenido y texto
Marcar el texto con el elemento de significado correcto y agrupar ítems en listas.
2 módulos H03
Enlaces y medios
Conectar páginas entre sí y traer imágenes, audio y video a tu contenido.
2 módulos H04
Semántica, formularios y datos
Estructura con sentido, captura de datos del usuario y tablas para datos reales.
4 módulos- 08 HTML semántico Estructura el documento con elementos que comunican significado a navegadores, lectores de pantalla y motores de búsqueda.
- 09 Formularios Construye formularios funcionales que permitan al usuario enviar datos: inputs, labels, botones y validación nativa.
- 10 Tablas Marca datos tabulares con la estructura semántica correcta: no usar tablas para layout.
- 11 Metadata Configura el documento para el navegador y los motores de búsqueda: charset, viewport, description y cómo vincular CSS.
Capa 02 · Presentación
CSS
La capa visual. Tomás ese esqueleto y le das forma, color, tipografía y layout — del modelo de caja a Grid y diseño responsive.
C01
Fundamentos de CSS
Cómo se escribe una regla, cómo apuntás a los elementos y por qué un estilo le gana a otro.
3 módulos- 12 Sintaxis CSS Entiende la gramática del lenguaje antes de usar propiedades concretas: reglas, declaraciones y formas de aplicar CSS.
- 13 Selectores Apunta exactamente a los elementos que querés estilizar: tipo, clase, ID, atributo, pseudo-clases y pseudo-elementos.
- 14 Cascada, especificidad y herencia Entiende por qué un estilo se aplica y otro no: la fuente del 80% de la confusión CSS de los principiantes.
C02
Caja y display
Todo elemento es una caja: su espacio, su tamaño y cómo fluye dentro de la página.
3 módulos- 15 Box Model Entiende cómo el navegador calcula el espacio que ocupa cada elemento: contenido, padding, border y margin.
- 16 Display: block e inline Entiende el flujo normal antes de modificarlo con Flexbox o Grid: elementos block, inline e inline-block.
- 22 Overflow Entiende y controla qué pasa cuando el contenido excede el tamaño de su contenedor.
C03
Valores y estética
Unidades, colores, fondos y bordes — las herramientas para que algo empiece a verse bien.
3 módulos- 17 Valores y unidades Elige la unidad correcta para cada contexto: px, %, em, rem, viewport units y la función calc().
- 18 Colores Especifica colores con las sintaxis actuales: keywords, hexadecimal, rgb(), hsl() y opacity.
- 19 Fondos y bordes Controla el aspecto visual de las cajas: background-color, background-image, border-radius y box-shadow.
C04
Tipografía
Controlar el texto en pantalla y cargar tus propias fuentes.
2 módulos C05
Layout moderno
Las herramientas reales para componer una página: flujo normal, posicionamiento, Flexbox y Grid.
4 módulos- 23 Flujo normal Entiende cómo el navegador dispone elementos por defecto antes de usar herramientas de layout.
- 24 Positioning Controla la posición exacta de elementos en casos específicos: static, relative, absolute, fixed y sticky.
- 25 Flexbox Distribuye y alinea elementos en una dimensión con el modelo de caja flexible.
- 26 CSS Grid Crea layouts bidimensionales con precisión: grid-template, fr, gap, areas nombradas y ubicación de ítems.
C06
Responsive y hábitos
Que se vea bien en cualquier pantalla y que el código se mantenga fácil de cambiar.
3 módulos- 27 Diseño responsive Haz que la página se vea y funcione correctamente en cualquier tamaño de pantalla con media queries y mobile-first.
- 28 Custom properties Centraliza valores repetidos con variables CSS para mantener el código fácil de actualizar.
- 29 Transitions Agrega animación suave a cambios de estado (hover, focus) sin complejidad: duration, timing-function y delay.