Módulo 01 — Fundamentos Digitales · Programación para Creativos

⏱ 20 min

M01 Teoría Lección 1.1

¿Qué es la web
y por qué importa?

Antes de escribir una sola etiqueta, necesitas entender el medio en el que vas a crear. La web no es una pantalla — es un protocolo, una cultura y un lienzo infinito.

La web no es internet

Este es el primer malentendido que vale la pena aclarar. Internet es la infraestructura física y lógica que conecta computadoras alrededor del mundo: cables submarinos, satélites, servidores. La Web (World Wide Web) es una capa que corre sobre internet: un sistema de documentos vinculados que puedes navegar con un navegador.

Cuando abres Chrome y vas a una dirección, estás usando la web. Cuando una app descarga datos en segundo plano sin que lo veas, probablemente también usa internet, pero no la web directamente.

💡 Para recordar

Internet = autopista. Web = los autos, señales y ciudades que existen en esa autopista. Como creativo, tú construyes las ciudades.

Los tres lenguajes del navegador

Cada navegador (Chrome, Firefox, Safari) es en esencia un intérprete de tres lenguajes. Estos tres son todo lo que necesitas para crear cualquier cosa en la web:

Lenguaje	Rol	Analogía	Aprenderás en
HTML	Estructura y contenido	El esqueleto + texto de un edificio	Módulo 1
CSS	Presentación visual	La arquitectura, materiales, colores	Módulos 1–2
JavaScript	Comportamiento e interactividad	Los sistemas eléctricos, ascensores	Módulo 3

🆕 Tecnología actual 2024–2025

Hoy existe WebAssembly (WASM): un cuarto lenguaje que permite ejecutar código de C++, Rust o Go a velocidad casi nativa en el navegador. Lo usan Figma, Google Earth y apps de video. No necesitas aprenderlo ahora, pero es parte del ecosistema moderno.

URL: la dirección de todo

Una URL (Uniform Resource Locator) es la dirección de cualquier recurso en la web. Saber leerla es fundamental:

anatomía de una URL

  https://www.miportfolio.com/proyectos/index.html?tema=dark#contacto

  ↑         ↑                 ↑             ↑          ↑       ↑
protocolo   dominio          ruta          archivo  parámetro  ancla

  https  → protocolo seguro (HTTP encriptado con TLS)
  www    → subdominio (opcional hoy en día)
  .com   → dominio de nivel superior (TLD)
  /proyectos/ → carpeta en el servidor
  ?tema=dark  → query string (datos enviados al servidor)
  #contacto   → ancla a un elemento con id="contacto"

El ciclo de una página web

Cada vez que ingresas a una URL, ocurre este proceso en menos de un segundo:

Ciclo REQUEST → RESPONSE

🧑‍💻 Tú

Escribes una URL en el navegador

↓

🔍 DNS Lookup

Convierte "google.com" en una IP (142.250.x.x)

↓

📡 HTTP Request

El navegador pide el archivo al servidor

↓

🖥️ Servidor

Recibe la petición y responde con HTML

↓

🎨 Navegador renderiza

Parsea HTML → CSS → JS → pinta la pantalla

⚠️ Concepto clave

Renderizar = convertir código en píxeles. El navegador lee tu HTML, construye el DOM, aplica CSS y "pinta" cada elemento. Como creativo, tu código es la partitura; el navegador es la orquesta.

✦ Pregunta rápida: ¿Cuál es la diferencia entre internet y la web?

Ejercicio 1.1 · Inspecciona el ciclo web

⏱ 15 min

Sin escribir código todavía, vas a ver cómo funciona la web por dentro.

1
Abre Chrome o Firefox. Ve a cualquier sitio que admires (puede ser awwwards.com, una marca, lo que quieras).
2
Presiona F12 o Cmd+Opt+I (Mac) para abrir DevTools. Ve a la pestaña Network.
3
Recarga la página con Ctrl+R (o Cmd+R). Observa cómo aparecen decenas de peticiones: el HTML primero, luego CSS, fuentes, imágenes, JS.
4
Haz click en la primera fila (el documento HTML). Mira las pestañas Headers y Preview. Estás viendo la respuesta del servidor en tiempo real.
5
En la pestaña Elements (o Inspector), mueve el mouse sobre los nodos del árbol y observa cómo se resaltan partes de la página. Eso es el DOM.

📌 Objetivo: Entender visceralmente que cada página web es un conjunto de archivos que viajan por la red. Tus proyectos serán así.

✓ Checkpoint · Lección 1.1

Antes de continuar, deberías poder responder esto sin mirar:

¿Cuál es la diferencia entre internet y la web?
¿Cuáles son los tres lenguajes que todo navegador interpreta?
¿Qué sucede entre que escribes una URL y ves la página?
¿Qué significa "renderizar"?

⏱ 25 min

M01 Teoría Lección 1.2

Cultura visual
del diseño web

El diseño web tiene una historia corta pero densa. Conocerla te permite romper las reglas con intención, no por ignorancia.

Línea del tiempo del diseño web

Era	Característica visual	Tecnología	Referentes
1991–1999	Solo texto, tablas HTML para layout	HTML puro, GIFs	CERN, Space Jam site
2000–2007	Flash: animaciones, skeuomorfismo	Flash, ActionScript	Flashkit, Newgrounds
2007–2012	iPhone cambia todo. Diseño web limpio	CSS3, HTML5, jQuery	Apple.com, 37signals
2013–2017	Flat design, Material Design, cartas	Bootstrap, Sass, AngularJS	Google, Airbnb
2017–2021	Dark mode, glassmorphism, microanimaciones	React, GSAP, CSS Grid	Stripe, Linear
2022–hoy	3D interactivo, scroll storytelling, IA	Three.js, WebGL, WASM	Resn, Active Theory

El creativo como narrador

Los mejores sitios web no son folletos digitales — son experiencias narrativas. Bruno Simon's portfolio (brunosimon.fr) es un videojuego. Awwwards muestra sitios donde el scroll es una coreografía. Active Theory construye experiencias que parecen instalaciones de arte.

🎯 Tu misión como creative developer

No eres un programador que diseña, ni un diseñador que programa. Eres alguien que piensa con código como si fuera pincel, tipografía, luz. La técnica está al servicio de la idea — nunca al revés.

Referentes que debes estudiar

Awwwards

Galería / Awards

El estándar del diseño web de excelencia. SOTD diario. awwwards.com

Bruno Simon

Portfolio 3D

El portfolio como videojuego. brunosimon.fr — referente mundial de 3D en web.

Active Theory

Estudio creativo

Experiencias interactivas para marcas globales. activetheory.net

Locomotive Scroll

Librería / demos

Scroll cinematográfico. Sus demos muestran el potencial del scroll narrativo.

Resn

Estudio creativo

Agencia de Wellington. Sitios que ganan Awwwards con frecuencia. resn.co.nz

Are.na

Research visual

Plataforma de curación para creativos. Tu tablero de referencias e inspiración.

Ejercicio 1.2 · Moodboard digital

⏱ 30 min

Antes de aprender a construir, necesitas saber qué quieres construir. Este ejercicio moldea tu gusto.

1
Ve a awwwards.com y navega los SOTD (Sites Of The Day) de la última semana. Anota 5 que te impacten visualmente.
2
Para cada uno, escribe en un papel o nota: ¿qué efecto visual te llamó la atención? ¿Era el scroll, los colores, la tipografía, el 3D, la interactividad?
3
Crea una cuenta en Are.na y crea un canal llamado "Inspiración Web". Añade capturas de los 5 sitios. Este canal será tu bitácora de referencias durante todo el curso.
4
En DevTools (F12) de uno de esos sitios, ve a la pestaña Sources y abre el archivo CSS principal. Intenta leer algo — aunque no entiendas todo.

📌 Objetivo: Desarrollar criterio visual antes de desarrollar habilidad técnica. El ojo se educa antes que la mano.

⏱ 20 min

M01 Teoría Lección 1.3

Cómo funciona
internet por dentro

Cliente, servidor, HTTP, DNS. Conceptos técnicos que todo creativo debe poder explicar para comunicarse con su equipo y entender el medio.

Cliente vs Servidor

Toda comunicación en la web sigue el modelo cliente–servidor. El cliente es quien pide (tu navegador). El servidor es quien responde (una computadora en algún datacenter del mundo).

modelo cliente–servidor (pseudocódigo)

// CLIENTE (tu navegador)
GET /index.html HTTP/2
Host: www.miportfolio.com
Accept: text/html

// SERVIDOR responde:
HTTP/2 200 OK
Content-Type: text/html; charset=utf-8

<!DOCTYPE html>
<html>...tu página...</html>

// Si el recurso no existe:
HTTP/2 404 Not Found
// Si hay un error del servidor:
HTTP/2 500 Internal Server Error

Códigos de estado HTTP más comunes

Código	Significado	Cuándo lo verás
200	OK — Todo bien	Siempre que algo carga correctamente
301/302	Redirect	Cuando una URL cambia y te redirige
404	Not Found	La ruta no existe en el servidor
403	Forbidden	No tienes permisos para ese recurso
500	Server Error	El servidor falló al procesar la petición

Hosting vs Dominio: la diferencia

Muchos los confunden. Son dos cosas distintas que se complementan:

💡 Analogía

Hosting = el terreno y el edificio donde vive tu sitio. Dominio = la dirección postal de ese edificio. Puedes tener un edificio (hosting) sin dirección conocida, o una dirección (dominio) que apunte a un edificio vacío.

Para creativos: qué necesitas saber de HTTP/2 y HTTPS

HTTPS = HTTP + encriptación TLS. Hoy es obligatorio. Sin HTTPS tu sitio muestra "No seguro" en Chrome. Servicios como Vercel y Netlify dan HTTPS gratis automáticamente.

🆕 HTTP/3 y QUIC (2024)

El protocolo más moderno. Usa UDP en vez de TCP, es más rápido en conexiones inestables (móviles). Chrome y Firefox ya lo soportan. No necesitas configurarlo — los CDNs modernos como Cloudflare lo habilitan automáticamente.

Ejercicio 1.3 · Leer una respuesta HTTP

⏱ 10 min

1
Abre DevTools (F12) en cualquier sitio. Ve a la pestaña Network.
2
Recarga la página. Haz click en el primer elemento (el documento HTML, generalmente el nombre del sitio).
3
Ve a la sub-pestaña Headers. Encuentra el campo Status Code. Debería decir 200 si el sitio cargó bien.
4
Mira los Response Headers. Busca content-type, server y cache-control. Intenta deducir qué significan.

📌 Objetivo: Ver que toda página web es una conversación entre tu navegador y un servidor. Tu código es lo que el servidor envía.

⏱ 30 min

M01 Teoría + Técnica Lección 2.1

El DOM:
el árbol de nodos

El Document Object Model es el concepto más importante de la web. Es el puente entre tu código HTML y todo lo que JavaScript puede manipular. Entenderlo cambia cómo piensas el diseño.

¿Qué es el DOM?

Cuando el navegador lee tu HTML, no lo muestra directamente. Primero lo convierte en una estructura de árbol de objetos en memoria: el DOM. Cada etiqueta HTML se convierte en un nodo. Cada nodo tiene propiedades, puede tener hijos, y puede ser seleccionado y modificado con JavaScript o inspeccionado con DevTools.

Árbol DOM de una página simple

document

<html>

<head>

<title>

<link>

<body>

<h1>

<main>

✦ Concepto clave

El DOM no es tu archivo HTML. Es la representación en memoria que el navegador crea a partir de ese HTML. Puedes tener un HTML estático y el DOM puede cambiar dinámicamente con JavaScript — sin recargar la página.

Nodos del DOM: tipos

Tipo de nodo	Qué es	Ejemplo
Element Node	Una etiqueta HTML	`<div>`, `<p>`, `<img>`
Text Node	El texto dentro de un elemento	"Hola, mundo"
Attribute Node	Un atributo de un elemento	`class="hero"`
Comment Node	Comentarios HTML	`<!-- comentario -->`
Document Node	La raíz de todo el árbol	`document` en JS

Relaciones en el árbol

relaciones DOM en HTML

<body>                      ← PADRE de header y main

  <header>                   ← HIJO de body, HERMANO de main
    <h1>Mi sitio</h1>         ← HIJO de header
    <nav>...</nav>            ← HERMANO de h1
  </header>

  <main>                     ← HERMANO de header
    <section>...</section>   ← HIJO de main
  </main>

</body>

Ejercicio 2.1 · Dibuja el árbol DOM

⏱ 20 min

Ejercicio de comprensión. Copia este HTML en un papel o herramienta de diagramas y dibuja el árbol DOM completo.

estructura para diagramar

<html>
  <head>
    <title>Portfolio</title>
  </head>
  <body>
    <header>
      <h1>Mi nombre</h1>
      <nav>
        <a href="#">Trabajo</a>
        <a href="#">Contacto</a>
      </nav>
    </header>
    <main>
      <section class="hero">
        <h2>Diseñador + Dev</h2>
        <p>Creo experiencias digitales.</p>
      </section>
    </main>
  </body>
</html>

1
Dibuja el árbol en papel. Empieza por document arriba, luego html, luego sus hijos.
2
Identifica las relaciones: ¿quién es hijo de quién? ¿Qué elementos son hermanos?
3
Ahora crea un archivo index.html con ese código, ábrelo en el navegador y verifica tu árbol con DevTools → Elements.

📌 Objetivo: Antes de código, visualización. El DOM como árbol es la imagen mental que usarás el resto del curso.

⏱ 45 min

M01 Técnica Lección 2.2

HTML:
etiquetas y semántica

HTML no es solo "poner etiquetas". Cada etiqueta tiene un significado. El HTML semántico mejora accesibilidad, SEO y la legibilidad de tu código. Es el cimiento de todo.

La estructura base: siempre igual

index.html — estructura base

<!-- Declara que esto es HTML5 -->
<!DOCTYPE html>

<!-- El idioma afecta lectores de pantalla y SEO -->
<html lang="es">

<head>
  <!-- Codificación de caracteres: siempre UTF-8 -->
  <meta charset="UTF-8">

  <!-- Responsive en móviles -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Lo que aparece en la pestaña y en Google -->
  <title>Mi Portfolio · Diseñadora Creativa</title>

  <!-- Descripción para redes sociales y SEO -->
  <meta name="description" content="Portfolio de diseño e interactividad">

  <!-- Tu hoja de estilos -->
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <!-- Todo el contenido visible va aquí -->

  <!-- Script al final: el HTML carga primero -->
  <script src="script.js"></script>
</body>
</html>

Etiquetas semánticas de estructura

Antes de HTML5 (2008), todo era <div>. Hoy usamos etiquetas con significado real:

Etiqueta	Significa	Cuándo usarla
`<header>`	Encabezado	Logo, navegación principal, hero de una sección
`<nav>`	Navegación	Menús de navegación del sitio
`<main>`	Contenido principal	El contenido central. Solo uno por página.
`<section>`	Sección temática	Grupos de contenido relacionado con un tema
`<article>`	Contenido independiente	Posts de blog, proyectos del portfolio
`<aside>`	Contenido lateral	Sidebars, información complementaria
`<footer>`	Pie de página	Links de cierre, copyright, contacto
`<figure>`	Figura con pie	Imágenes con `<figcaption>`
`<time>`	Fecha/hora	Fechas que los robots puedan leer correctamente

Jerarquía de encabezados

jerarquía correcta de headings

<!-- Solo un h1 por página (el título principal) -->
<h1>Diseñadora de Experiencias Digitales</h1>

<!-- Subtítulos de sección -->
<h2>Proyectos Seleccionados</h2>

<!-- Subtítulos dentro de cada proyecto -->
<h3>Marca Editorial · 2024</h3>

<!-- Regla: nunca saltar niveles (h1 → h3 sin h2) -->
<!-- Los headings son para estructura, no para tamaño (eso es CSS) -->

⚠️ Error común

No uses <h2> porque el texto queda grande. El tamaño lo define CSS. Los headings definen la jerarquía de información. Un lector de pantalla navega por headings igual que tú navegas visualmente.

HTML para imágenes y media

imágenes accesibles y modernas

<!-- Imagen básica: alt SIEMPRE -->
<img
  src="proyecto-1.jpg"
  alt="Identidad visual para marca de café artesanal"
  loading="lazy"
  width="800"
  height="600"
>

<!-- Imágenes responsive con múltiples fuentes (moderno) -->
<picture>
  <!-- Formato WebP para navegadores modernos -->
  <source srcset="proyecto.webp" type="image/webp">
  <!-- Fallback JPEG -->
  <img src="proyecto.jpg" alt="Descripción">
</picture>

<!-- Video HTML5 (sin YouTube) -->
<video autoplay muted loop playsinline>
  <source src="reel.mp4" type="video/mp4">
</video>

Ejercicio 2.2 · Estructura HTML de un portfolio

⏱ 45 min

Tu primer archivo HTML real. Sin CSS todavía — solo estructura semántica correcta.

1
Crea una carpeta mi-portfolio/. Dentro, crea index.html con la estructura base completa (DOCTYPE, html, head, body).
2
Dentro del <body>, crea: un <header> con tu nombre en un <h1> y un <nav> con 3 enlaces. Un <main> con una <section class="hero"> con un <h2> y un <p> que te describa.
3
Añade una <section class="proyectos"> con 3 <article> dentro, cada uno con <h3>, <p> y un <img> (puede ser placeholder: usa src="https://picsum.photos/400/300").
4
Cierra con un <footer> con tu email y redes. Abre el archivo en el navegador. Se verá feo — está bien. La estructura es lo que importa ahora.
5
Valida tu HTML en validator.w3.org. Corrige los errores que encuentre.

📌 Objetivo: Tener el esqueleto de tu portfolio real. Este archivo vivirá contigo todo el curso y se irá transformando con cada módulo.

⏱ 20 min

M01 Técnica Lección 2.3

Atributos,
clases e IDs

Los atributos añaden información extra a los nodos HTML. class e id son los más importantes: son los ganchos con los que CSS y JavaScript interactúan con el HTML.

class vs id: la diferencia crucial

class e id en HTML

<!-- ID: único en toda la página, como un nombre propio -->
<section id="contacto">...</section>

<!-- CLASS: se puede repetir, para grupos de elementos similares -->
<article class="proyecto">...</article>
<article class="proyecto">...</article>
<article class="proyecto">...</article>

<!-- Un elemento puede tener múltiples clases -->
<button class="btn btn-primary btn-grande">Contactar</button>

<!-- data-* attributes: para guardar datos personalizados -->
<article 
  class="proyecto"
  data-categoria="branding"
  data-year="2024"
>...</article>

<!-- Esto en JS se lee así: -->
<!-- element.dataset.categoria → "branding" -->

El enlace: el nodo más poderoso de la web

tipos de enlaces

<!-- Enlace externo: target="_blank" abre en nueva pestaña -->
<!-- rel="noopener noreferrer": seguridad -->
<a href="https://behance.net/tuweb"
   target="_blank"
   rel="noopener noreferrer">
  Ver en Behance
</a>

<!-- Enlace interno (misma página, con ancla) -->
<a href="#proyectos">Ver proyectos</a>

<!-- El destino del ancla -->
<section id="proyectos">...</section>

<!-- Link de email -->
<a href="mailto:hola@miweb.com">hola@miweb.com</a>

<!-- Link de descarga -->
<a href="cv.pdf" download>Descargar CV</a>

Ejercicio 2.3 · Añade clases e IDs a tu portfolio

⏱ 20 min

1
Abre el index.html que creaste en el ejercicio anterior. Añade IDs a las secciones principales: id="inicio", id="proyectos", id="contacto".
2
Modifica el <nav> para que sus enlaces usen anclas: href="#inicio", href="#proyectos", etc.
3
Añade class="proyecto" a cada <article>. Añade data-categoria con un valor diferente a cada proyecto.
4
Abre el archivo en el navegador y verifica que los enlaces de navegación te llevan a las secciones correctas.

⏱ 25 min

M01 Técnica Lección 2.4

SVG inline:
vectores vivos

SVG es gráfico vectorial que vive dentro del HTML. Puedes animarlo con CSS, manipularlo con JavaScript, y escala perfecto a cualquier tamaño. Es el puente entre el diseño gráfico y el código.

¿Por qué SVG y no PNG?

SVG	PNG / JPG
Escalable infinitamente sin perder calidad	Pixela al agrandar
Archivo de texto (XML) → muy liviano	Puede ser pesado
Animable con CSS y JS	Estático
Indexable por motores de búsqueda	No indexable
Para íconos, logos, ilustraciones, gráficos	Para fotografías

SVG inline básico en HTML

<!-- SVG inline: el código SVG vive dentro del HTML -->
<svg
  width="80"
  height="80"
  viewBox="0 0 80 80"
  xmlns="http://www.w3.org/2000/svg"
  aria-label="Logo"
>
  <!-- Un círculo -->
  <circle
    cx="40" cy="40" r="36"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
  />
  <!-- Texto dentro del SVG -->
  <text
    x="40" y="46"
    text-anchor="middle"
    font-size="14"
    fill="currentColor"
  >MC</text>
</svg>

<!-- Ahora puedes animarlo con CSS: -->
<style>
  svg circle {
    transition: r 0.3s ease;
  }
  svg:hover circle {
    r: 38; /* el círculo crece al hover */
    stroke: var(--accent);
  }
</style>

Ejercicio 2.4 · Crea tu logo en SVG

⏱ 30 min

1
Diseña un logo minimalista en papel: puede ser tus iniciales en un círculo o rectángulo, o una forma simple geométrica.
2
Créalo en SVG inline dentro de tu index.html. Usa <circle>, <rect>, <line> o <text>. Ponlo en el <header>.
3
Exporta el SVG desde Figma si lo prefieres diseñar ahí: File → Export → SVG. Copia el código resultante.
4
Añade un <style> en el <head> con una transición de hover en algún elemento del SVG.

⏱ 40 min

M01 Técnica Lección 3.1

CSS: la gramática
del diseño

CSS es diseño como lenguaje. Cada regla le dice al navegador cómo pintar un nodo del DOM. La potencia está en la especificidad, la cascada y la herencia.

Anatomía de una regla CSS

styles.css — anatomía

/*    Selector     Propiedad  Valor   */
        h1        { color:    #1a1a14; }

/* Múltiples declaraciones */
.hero-titulo {
  font-size: 72px;         /* propiedad: valor */
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);       /* usando variable CSS */
  margin-bottom: 24px;
}

/* Selectores agrupados */
h1, h2, h3, h4 {
  font-family: 'Cabinet Grotesk', sans-serif;
}

Tipos de selectores: del básico al avanzado

selectores CSS

/* ── BÁSICOS ─────────────────── */
p { }              /* elemento */
.clase { }         /* clase */
#id { }            /* id (evitar en CSS moderno) */
* { }              /* universal: todos los elementos */

/* ── COMBINADORES ────────────── */
.nav a { }         /* descendiente: todos los a dentro de .nav */
.nav > a { }       /* hijo directo */
h2 + p { }         /* hermano adyacente: el p inmediatamente después de h2 */
h2 ~ p { }         /* hermanos siguientes: todos los p después de h2 */

/* ── PSEUDO-CLASES ───────────── */
a:hover { }        /* cuando el mouse está encima */
a:focus { }        /* cuando recibe foco (teclado) */
li:first-child { } /* el primer hijo */
li:last-child { }  /* el último hijo */
li:nth-child(2n) { } /* cada elemento par */
.item:not(.activo) { } /* todos menos los .activo */

/* ── PSEUDO-ELEMENTOS ────────── */
p::first-line { }  /* primera línea del párrafo */
.titulo::before {  /* contenido generado antes */
  content: "→ ";
  color: var(--accent);
}
.titulo::after { } /* contenido generado después */

/* ── ATRIBUTOS ───────────────── */
a[target="_blank"] { } /* a con target="_blank" */
img[alt] { }           /* imágenes que tienen alt */

La Cascada: quién gana

Cuando dos reglas intentan definir lo mismo, la cascada decide cuál aplica. El orden es:

especificidad CSS (de menor a mayor)

/* Menor especificidad → pierde */
p { color: blue; }         /* especificidad: 0,0,1 */
.texto { color: red; }     /* especificidad: 0,1,0  ← GANA */
#titulo { color: green; }  /* especificidad: 1,0,0  ← GANA a .clase */
/* Mayor especificidad → gana */

/* Regla de oro: evitar !important */
/* Si necesitas !important, tu arquitectura CSS tiene un problema */
p { color: blue !important; } /* gana a todo, pero es mala práctica */

/* CSS moderno: @layer para controlar la cascada explícitamente */
@layer base, componentes, utilidades;
@layer base { p { color: blue; } }
@layer componentes { p { color: red; } } /* gana porque es capa superior */

🆕 CSS Nesting (2024) — ya en todos los navegadores

CSS nativo ahora permite anidar selectores como SCSS, sin preprocesador:

.nav {
  display: flex;
  gap: 16px;

  /* Anidar selector hijo directamente */
  & a {
    color: var(--muted);
    text-decoration: none;

    &:hover {
      color: var(--accent);
    }
  }
}

Ejercicio 3.1 · Primer CSS para tu portfolio

⏱ 45 min

1
Crea styles.css en tu carpeta. Añade el link en el <head> de tu HTML.
2
Empieza con un reset básico: * { box-sizing: border-box; margin: 0; padding: 0; }
3
Define tu paleta como variables en :root { --color-ink: #1a1a14; --color-bg: #f5f2eb; --color-accent: #c84b2f; }
4
Estiliza el body con tu fuente, colores de fondo y texto. Luego estiliza el header, nav y links con lo que aprendiste de selectores.
5
Añade estados :hover a los links del nav. Verifica que funcionen en el navegador.

⏱ 30 min

M01 Técnica Lección 3.2

El Box Model:
espacio y forma

Todo en CSS es una caja. Entender cómo funciona el box model es entender cómo se distribuye el espacio — el fundamento del spacing y el layout.

Las cuatro capas de toda caja

Box Model — de adentro hacia afuera

margin (espacio externo)

border (borde)

padding (espacio interno)

contenido (content)

box model en CSS

/* box-sizing: border-box → la forma moderna (siempre úsala) */
/* width incluye padding y border — mucho más predecible */
* { box-sizing: border-box; }

.tarjeta {
  width: 300px;         /* ancho total (con border-box) */
  height: auto;         /* altura se adapta al contenido */
  
  padding: 24px;        /* todos los lados */
  padding: 16px 24px;   /* arriba/abajo izq/der */
  padding: 8px 16px 24px 16px; /* top right bottom left */
  
  margin: 0 auto;       /* centrar horizontalmente */
  margin-bottom: 32px;  /* solo abajo */
  
  border: 1.5px solid var(--rule); /* grosor tipo color */
  border-radius: 8px;   /* esquinas redondeadas */
  border-radius: 50%;   /* círculo perfecto */
}

/* display: cómo se comporta en el flujo */
span  { display: inline; }       /* en línea, no acepta width/height */
div   { display: block; }        /* ocupa toda la línea */
.tag  { display: inline-block; } /* lo mejor de los dos mundos */
.gone { display: none; }        /* invisible y sin espacio */

Ejercicio 3.2 · Tarjeta de proyecto con Box Model

⏱ 30 min

1
En tu portfolio, dale estilos a las tarjetas de proyecto (.proyecto). Define width, padding, border y border-radius.
2
Abre DevTools (F12) → Elements → selecciona una tarjeta. En el panel de la derecha verás el Box Model visualizado. Modifica valores en vivo.
3
Experimenta cambiando box-sizing: content-box (el default) y observa cómo cambia el tamaño. Luego vuelve a border-box.

⏱ 25 min

M01 Técnica Lección 3.3

CSS Custom
Properties

Las variables CSS (Custom Properties) son la base de cualquier sistema de diseño moderno. Te permiten crear un lenguaje de tokens que conecta diseño con código.

Variables CSS: el sistema de design tokens

styles.css — sistema de variables completo

/* :root = el elemento raíz (html). Variables globales aquí */
:root {
  /* ── Colores ── */
  --color-bg:       #f5f2eb;
  --color-ink:      #1a1a14;
  --color-muted:    #7a7a6a;
  --color-accent:   #c84b2f;
  --color-surface:  #faf8f3;
  --color-border:   #d8d4c8;

  /* ── Tipografía ── */
  --font-display:   'Cabinet Grotesk', sans-serif;
  --font-body:      'Geist Mono', monospace;
  --font-serif:     'Instrument Serif', serif;
  
  --size-xs:   12px;
  --size-sm:   14px;
  --size-base: 16px;
  --size-lg:   20px;
  --size-xl:   28px;
  --size-2xl:  40px;
  --size-3xl:  64px;

  /* ── Espaciado (escala × 4) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Bordes ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ── Sombras ── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.2);

  /* ── Transiciones ── */
  --transition: 0.25s ease;
  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Uso: con var() */
.btn {
  background: var(--color-accent);
  font-family: var(--font-display);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

/* Dark mode con una variable: solo cambias :root */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:    #0a0a0f;
    --color-ink:   #e8e8f0;
    --color-muted: #7070a0;
  }
}

/* Variables locales (solo en un componente) */
.tarjeta {
  --tarjeta-color: var(--color-accent); /* local a .tarjeta */
  border-color: var(--tarjeta-color);
}

Ejercicio 3.3 · Sistema de variables para tu portfolio

⏱ 25 min

1
Al inicio de tu styles.css, crea un bloque :root con tus colores personales, 2 fuentes, espaciado y radios.
2
Reemplaza todos los valores hardcodeados (colores, tamaños) que hayas puesto antes por var(--nombre).
3
Añade @media (prefers-color-scheme: dark) con versiones dark de tus colores. Actívalo en tu sistema operativo para ver el cambio automático.

⏱ 30 min

M01 Herramienta Lección 4.1

VS Code &
tu entorno

Tu ambiente de trabajo determina tu velocidad. Un entorno bien configurado te hace sentir en control, no frustrado. Esto es tu estudio de trabajo.

Instalar y configurar VS Code

Descarga VS Code desde code.visualstudio.com (gratis, multiplataforma). Es el editor más usado en el mundo frontend — comunidad enorme, extensiones para todo.

Extensiones esenciales para instalar

Live Server

Desarrollo local

Refresca el navegador automáticamente cuando guardas. Indispensable para flujo rápido.

Prettier

Formateo automático

Formatea tu código al guardar. Consistencia automática. Configura "Format on Save".

HTML CSS Support

Autocompletado

Autocompletado de clases CSS en HTML. Sugerencias de propiedades CSS.

GitLens

Git integrado

Ver quién cambió cada línea, historial de cambios, blame inline en el editor.

Colorize

Visual

Muestra un preview de color al lado de cada valor hexadecimal o RGB en tu CSS.

Auto Rename Tag

HTML

Cuando renombras una etiqueta de apertura, renombra automáticamente la de cierre.

Atajos de teclado que van a cambiar tu vida

Atajo (Mac / Win)	Acción
`Cmd+P / Ctrl+P`	Buscar archivo por nombre (el más usado)
`Cmd+Shift+P / Ctrl+Shift+P`	Command Palette: ejecutar cualquier comando
`Alt+Click`	Múltiples cursores (editar varios lugares a la vez)
`Cmd+D / Ctrl+D`	Seleccionar siguiente ocurrencia de la selección
`Option+↑↓ / Alt+↑↓`	Mover línea arriba o abajo
`Cmd+/ / Ctrl+/`	Comentar/descomentar línea
Cmd+` / Ctrl+`	Abrir/cerrar terminal integrado
`Tab / Shift+Tab`	Aumentar/reducir indentación

Emmet: HTML ultrarrápido

Emmet está integrado en VS Code. Escribe un shortcut y presiona Tab:

emmet shortcuts → HTML expandido

Escribes → presionas Tab → obtienes:

!
→ estructura HTML5 completa

section.hero>h1+p
→ <section class="hero"><h1></h1><p></p></section>

ul>li*5>a
→ lista con 5 items, cada uno con un enlace

.proyecto*3>.img+h3+p
→ 3 divs .proyecto, cada uno con .img, h3 y p

header>nav>ul>li.nav-item*4>a[href="#"]{Item $}
→ header con nav con 4 links numerados (Item 1, 2, 3, 4)

🆕 Cursor IDE (2024) — el siguiente nivel

Cursor es un fork de VS Code con IA integrada de forma profunda. Puedes hablar con tu código: "convierte este div en un componente reutilizable", "explica qué hace esta función", "añade animación de hover aquí". cursor.sh — úsalo cuando ya domines VS Code.

Ejercicio 4.1 · Configura tu entorno

⏱ 30 min

1
Instala VS Code + las 6 extensiones listadas. Configura "Format on Save" en Settings.
2
Abre tu carpeta mi-portfolio/ con VS Code (File → Open Folder). Activa Live Server (click derecho en index.html → "Open with Live Server").
3
Crea un archivo CSS nuevo usando Emmet: escribe ! en un nuevo archivo .html y presiona Tab. Observa la magia.
4
Practica los 5 atajos más importantes del día. Memoriza Cmd/Ctrl+P y Alt+Click primero.

⏱ 25 min

M01 Herramienta Lección 4.2

DevTools:
tu microscopio

Las herramientas de desarrollo del navegador son el laboratorio donde depuras, experimentes y aprendes. Dominar DevTools te ahorra horas de frustración.

Las pestañas que usarás todos los días

Pestaña	Para qué sirve	Usa cuando
Elements	Inspeccionar y editar DOM + CSS en vivo	Debuggear layout, probar estilos
Console	Ejecutar JS, ver errores, usar como calculadora	Debuggear JavaScript
Network	Ver todas las peticiones HTTP, tiempos de carga	Analizar performance, ver APIs
Performance	Profiling de renderizado, FPS, CPU	Optimizar animaciones
Lighthouse	Auditoría de performance, accesibilidad, SEO	Antes de publicar
Application	LocalStorage, cookies, service workers	Apps avanzadas

Tricks de DevTools que pocos saben

console — más que console.log

// En la consola de DevTools puedes escribir JS en vivo:

// Seleccionar elementos del DOM
document.querySelector('.hero')
$('.hero')  // shorthand de DevTools

// Cambiar estilos en vivo
document.body.style.background = 'hotpink'

// console.table: para arrays de objetos
console.table([
  { nombre: 'Proyecto 1', año: 2024 },
  { nombre: 'Proyecto 2', año: 2025 }
])

// console.time: medir cuánto tarda algo
console.time('animacion')
// ... código ...
console.timeEnd('animacion')

Ejercicio 4.2 · Hackea un sitio con DevTools

⏱ 20 min

1
Ve a cualquier sitio que admires. Abre DevTools → Elements. Haz doble click en cualquier texto del DOM y cámbialo.
2
En el panel de Styles (derecha), añade una propiedad CSS nueva al elemento seleccionado. Observa el cambio en tiempo real.
3
Ve a Lighthouse. Corre una auditoría en tu portfolio local. Lee el reporte de Performance y Accessibility. Anota qué debes mejorar.
4
En la consola, escribe document.body.style.fontFamily = 'Georgia'. Observa el cambio global. Esto es el DOM manipulation que aprenderás en Módulo 3.

⏱ 3–4 horas

M01 Proyecto Final Entrega · M01

Portfolio HTML+CSS
publicado en vivo

Integra todo lo aprendido en el módulo. Una página web real, semánticamente correcta, con CSS custom properties, publicada en internet con tu nombre.

🎯 Objetivo del proyecto

Un portfolio personal de una sola página (one-pager) que muestre: quién eres, 3 proyectos (pueden ser conceptuales), y cómo contactarte. HTML semántico correcto. CSS con sistema de variables. Publicado en GitHub Pages o Vercel. URL que puedas compartir.

Requisitos técnicos

HTML5 válido sin errores en validator.w3.org
Estructura semántica: header, nav, main, sections, footer
Sistema de variables CSS en :root (colores, fuentes, espaciado)
Logo SVG inline en el header
3 tarjetas de proyecto con imagen (placeholder ok), título y descripción
Responsive básico: debe verse bien en móvil (media query mínimo)
Dark mode con prefers-color-scheme
Hover states en todos los links y botones
Publicado en GitHub Pages con URL real

Estructura de archivos

estructura recomendada

mi-portfolio/
├── index.html          ← punto de entrada
├── styles.css          ← todos los estilos
├── README.md           ← describe tu proyecto (para GitHub)
└── assets/
    └── images/         ← tus imágenes

Cómo publicar en GitHub Pages (paso a paso)

terminal — publicar en GitHub Pages

# 1. Inicializa git en tu carpeta
git init
git add .
git commit -m "feat: portfolio M01 completo"

# 2. Crea un repo en github.com (botón +, New repository)
# Nombre recomendado: tu-usuario.github.io
# (Así tu URL será: https://tu-usuario.github.io)

# 3. Conecta y sube
git remote add origin https://github.com/TU-USUARIO/TU-REPO.git
git branch -M main
git push -u origin main

# 4. En GitHub: Settings → Pages → Source: Deploy from branch → main
# En 2 minutos tu sitio estará en vivo en:
# https://TU-USUARIO.github.io

Criterios de evaluación

Criterio	Peso	Indicadores
HTML semántico correcto	25%	Sin errores en validator, etiquetas con sentido
CSS con sistema de variables	25%	:root definido, var() usado, dark mode
Diseño visual coherente	25%	Tipografía legible, colores, espaciado
Publicado + URL funcional	25%	GitHub Pages o Vercel, URL compartible

💡 Consejo antes de entregar

Pásale el URL a alguien más (compañero, familiar) y míralo en su dispositivo. Lo que se ve perfecto en tu laptop puede verse diferente en otro. Pruébalo también en móvil usando DevTools → Device Toolbar.

✓ Módulo 01 — Completado

Al terminar este proyecto deberías poder hacer esto desde cero:

Explicar cómo funciona internet y el ciclo HTTP
Construir la estructura HTML de cualquier página
Usar etiquetas semánticas correctamente
Crear y manipular SVG inline
Escribir CSS con selectores, box model y variables
Usar VS Code con agilidad y DevTools para debuggear
Publicar en GitHub y ver tu trabajo en internet

→ Módulo 02: Desarrollo Web

Flexbox · CSS Grid · Responsive · Tipografía · Animación CSS · Tu primera página responsive real

¿Qué es la weby por qué importa?

La web no es internet

Los tres lenguajes del navegador

URL: la dirección de todo

El ciclo de una página web

✓ Checkpoint · Lección 1.1

Cultura visualdel diseño web

Línea del tiempo del diseño web

El creativo como narrador

Referentes que debes estudiar

Cómo funcionainternet por dentro

Cliente vs Servidor

Códigos de estado HTTP más comunes

Hosting vs Dominio: la diferencia

Para creativos: qué necesitas saber de HTTP/2 y HTTPS

El DOM:el árbol de nodos

¿Qué es el DOM?

Nodos del DOM: tipos

Relaciones en el árbol

HTML:etiquetas y semántica

La estructura base: siempre igual

Etiquetas semánticas de estructura

Jerarquía de encabezados

HTML para imágenes y media

Atributos,clases e IDs

class vs id: la diferencia crucial

El enlace: el nodo más poderoso de la web

SVG inline:vectores vivos

¿Por qué SVG y no PNG?

CSS: la gramáticadel diseño

Anatomía de una regla CSS

Tipos de selectores: del básico al avanzado

La Cascada: quién gana

El Box Model:espacio y forma

Las cuatro capas de toda caja

CSS CustomProperties

Variables CSS: el sistema de design tokens

VS Code &tu entorno

Instalar y configurar VS Code

Extensiones esenciales para instalar

Atajos de teclado que van a cambiar tu vida

Emmet: HTML ultrarrápido

DevTools:tu microscopio

Las pestañas que usarás todos los días

Tricks de DevTools que pocos saben

Portfolio HTML+CSSpublicado en vivo

Requisitos técnicos

Estructura de archivos

Cómo publicar en GitHub Pages (paso a paso)

Criterios de evaluación

✓ Módulo 01 — Completado

¿Qué es la web
y por qué importa?

Cultura visual
del diseño web

Cómo funciona
internet por dentro

El DOM:
el árbol de nodos

HTML:
etiquetas y semántica

Atributos,
clases e IDs

SVG inline:
vectores vivos

CSS: la gramática
del diseño

El Box Model:
espacio y forma

CSS Custom
Properties

VS Code &
tu entorno

DevTools:
tu microscopio

Portfolio HTML+CSS
publicado en vivo