Super Club Net: HTML, CSS y JavaScript de 0 a Hero: indice del curso

Este curso enseña a construir paginas web con las tres tecnologias que el navegador entiende de forma nativa: HTML para la estructura, CSS para la presentacion y JavaScript para el comportamiento. No hay frameworks, no hay bundlers, no hay pasos de compilacion. Se escribe un archivo de texto, se abre en el navegador y se ve el resultado. Esa restriccion es deliberada: el objetivo es que entiendas el mecanismo antes de usar herramientas que lo esconden.

El punto de llegada es concreto. Al terminar el capitulo 18 vas a poder tomar un requerimiento escrito en prosa —“necesito una tabla de resultados que se ordene al hacer clic en la cabecera y que valide un formulario de inscripcion antes de enviarlo”— y traducirlo a HTML valido, estilos CSS que respondan a distintos anchos de pantalla y codigo JavaScript que manipule el DOM sin recargar la pagina. El proyecto final del curso es exactamente ese tipo de ejercicio: un simulador de carreras de Mario Kart 64 que calcula puntajes, ordena tablas y valida entradas del usuario.

A quien va dirigido

Este material asume cero conocimiento previo de programacion. El capitulo 1 empieza explicando que es un servidor y que viaja por el cable cuando escribes una direccion en la barra del navegador. Si nunca abriste un editor de texto plano, el curso te acompana desde ahi.

Al mismo tiempo, no se queda en la superficie. Un desarrollador que ya escribe HTML y CSS pero que nunca entendio por que getElementsByClassName devuelve una coleccion viva y querySelectorAll una estatica, o por que insertar cien nodos en un bucle es lento, va a encontrar esos temas tratados con la profundidad que merecen. La tabla de abajo describe los tres perfiles tipicos y como conviene recorrer el curso en cada caso.

Perfil	Situacion de partida	Recorrido sugerido
Sin experiencia previa	Nunca escribio codigo; usa el navegador solo como usuario	Capitulos 1 a 18 en orden estricto, sin saltar ejercicios
Sabe HTML y CSS basico	Copia y pega estructuras que funcionan pero no sabe por que	Revisar rapido 1 a 7, detenerse en 5 y 6, y trabajar 8 a 18 a fondo
Programa en otro lenguaje	Domina logica y estructuras de datos, pero no el navegador	Leer 1, 2 y 6 como referencia, saltar a 8 y estudiar 12 a 16 en detalle
Toco JavaScript con frameworks	Escribio componentes sin entender el DOM que hay debajo	Ir directo a 12, 13 y 14; volver a 10 y 11 si los metodos funcionales no son familiares

Que vas a saber hacer al terminar

El curso se mide por capacidades, no por temas cubiertos. Estas son las que quedan instaladas al llegar al final:

• Escribir un documento HTML valido desde cero, sin plantillas, sabiendo que hace cada etiqueta del head y por que el doctype existe.
• Aplicar CSS con criterio: elegir entre px, em, rem, % y unidades de viewport segun el caso, y escribir selectores que apunten a lo que quieres sin recurrir a !important.
• Estructurar contenido real: texto con sus entidades y caracteres especiales, tablas con cabeceras y celdas combinadas, imagenes con texto alternativo y enlaces bien formados.
• Leer y escribir URLs completas, distinguir rutas absolutas de relativas y saber exactamente que archivo va a cargar el navegador ante cada forma de href.
• Programar en JavaScript: variables, tipos, funciones, condicionales, arreglos, objetos y JSON, con los metodos funcionales map, filter, reduce, sort y join usados en serio.
• Seleccionar nodos del DOM con las cinco APIs disponibles y saber cual conviene en cada situacion, incluida la diferencia entre colecciones vivas y estaticas.
• Crear, insertar, reemplazar y eliminar nodos midiendo el costo en reflow y repaint, en lugar de reconstruir el innerHTML completo cada vez.
• Registrar manejadores de eventos con addEventListener, entender el objeto event, aprovechar el burbujeo para delegar y saber cuando preventDefault y stopPropagation corresponden.
• Construir formularios completos con todos los controles del estandar, y validarlos con las reglas nativas de HTML, con la Constraint Validation API y con mensajes de error accesibles.
• Decidir con fundamento hacia donde seguir: Tailwind, un framework de aplicaciones, un generador de sitios estaticos o un CMS, sabiendo que problema resuelve cada uno.

Que necesitas para partir

La lista de requisitos es corta a proposito. Todo lo necesario es gratuito y multiplataforma.

Requisito	Detalle	Alternativa
Un navegador moderno	Firefox o cualquiera basado en Chromium, actualizado	Safari sirve, con diferencias menores en las herramientas de desarrollo
Un editor de texto plano	Visual Studio Code, con resaltado de sintaxis	Sublime Text, Zed, Neovim, o incluso el Bloc de notas para empezar
Una carpeta de trabajo	Un directorio donde guardar los archivos del curso	Cualquier ruta local; no hace falta servidor
Las herramientas de desarrollo	F12 en el navegador: inspector, consola, red	Vienen incluidas; el apendice del capitulo 18 las cubre
Paciencia con los errores	Un error tipografico rompe la pagina y es normal	La consola del navegador te dice donde

No se necesita instalar Node.js, ni npm, ni un servidor local para los primeros once capitulos. Desde el capitulo 12 conviene tener un servidor estatico simple para probar rutas relativas y fetch de archivos locales, y el propio capitulo explica como levantarlo sin dependencias externas.

La ruta de aprendizaje

El curso se organiza en cinco bloques tematicos. Cada bloque termina dejando algo funcionando, y el siguiente lo usa como base. El siguiente diagrama muestra el recorrido completo y las dependencias reales entre bloques.

flowchart TD
    subgraph B1["Bloque 1 · Estructura y estilo"]
        C1["Cap 1<br/>HTML: doctype, head, body"]
        C2["Cap 2<br/>CSS: colores, unidades, selectores"]
        C1 --> C2
    end

    subgraph B2["Bloque 2 · Contenido de una pagina"]
        C3["Cap 3<br/>Texto y entidades"]
        C4["Cap 4<br/>Tablas y su estilo"]
        C5["Cap 5<br/>Imagenes y fondos"]
        C6["Cap 6<br/>Enlaces, URI y rutas"]
        C7["Cap 7<br/>Mapas, iframes, divisores"]
        C3 --> C4 --> C5 --> C6 --> C7
    end

    subgraph B3["Bloque 3 · El lenguaje JavaScript"]
        C8["Cap 8<br/>script, tipos, variables, strings"]
        C9["Cap 9<br/>Funciones, condicionales, arreglos"]
        C10["Cap 10<br/>map, sort, filter, reduce, join"]
        C11["Cap 11<br/>Objetos, JSON y spread"]
        C8 --> C9 --> C10 --> C11
    end

    subgraph B4["Bloque 4 · El DOM en el navegador"]
        C12["Cap 12<br/>Rendering path y seleccion"]
        C13["Cap 13<br/>Crear, modificar, eliminar"]
        C14["Cap 14<br/>Eventos"]
        C15["Cap 15<br/>Formularios"]
        C16["Cap 16<br/>Validacion"]
        C12 --> C13 --> C14 --> C15 --> C16
    end

    subgraph B5["Bloque 5 · Integracion y salida"]
        C17["Cap 17<br/>Proyecto Mario Kart 64"]
        C18["Cap 18<br/>Siguientes pasos y apendices"]
        C17 --> C18
    end

    C2 --> C3
    C7 --> C8
    C11 --> C12
    C16 --> C17
    C2 -. "el estilo se aplica a todo lo que sigue" .-> C15
    C6 -. "las rutas reaparecen en action e img" .-> C15

Las flechas punteadas no son decorativas: marcan los dos conceptos que se usan una y otra vez fuera de su bloque de origen. Lo aprendido sobre selectores en el capitulo 2 vuelve cada vez que haya que dar estilo a algo, y la anatomia de una URL del capitulo 6 reaparece en el atributo action de un formulario, en el src de una imagen y en cada fetch.

Que hace el navegador con lo que escribes

Antes de empezar conviene tener el mapa mental del mecanismo completo. El curso entero consiste en intervenir en distintos puntos de este proceso: el bloque 1 y 2 producen el HTML y el CSS de entrada, el bloque 3 escribe el script y el bloque 4 modifica el arbol despues de construido.

sequenceDiagram
    participant U as Usuario
    participant N as Navegador
    participant S as Servidor
    participant P as Motor de render
    participant J as Motor JavaScript

    U->>N: escribe una direccion y presiona Enter
    N->>S: peticion HTTP GET del documento
    S-->>N: responde con el texto HTML
    N->>P: entrega el HTML byte a byte
    P->>P: tokeniza y construye el DOM
    N->>S: peticion de cada .css referenciado
    S-->>N: hojas de estilo
    P->>P: construye el CSSOM
    P->>P: combina DOM y CSSOM en el render tree
    P->>P: layout: calcula posicion y tamano
    P->>P: paint: dibuja pixeles en pantalla
    N->>J: ejecuta los scripts segun defer y async
    J->>P: modifica el DOM con las APIs del capitulo 13
    P->>P: reflow y repaint de lo afectado
    J->>U: responde a clics y teclas con los eventos del capitulo 14

El capitulo 12 desarma este diagrama paso a paso y explica por que un <script> sin defer en mitad del body detiene la construccion del DOM, y por que cambiar el ancho de un elemento cuesta mas que cambiar su color.

Tabla de capitulos

Capitulo	Que aprendes	Con que sales
1. Primeros pasos con HTML	Como viaja una pagina del servidor a la pantalla, que editor usar, y la estructura minima de un documento: doctype, html, head, body, title, etiquetas, atributos y comentarios	Una pagina propia valida, abierta en tu navegador, con titulo en la pestana
2. CSS desde cero	Las tres formas de aplicar CSS, el sistema de colores por nombre, hexadecimal, rgb y hsl, las unidades px, em, rem, porcentaje y viewport, y los selectores	Una hoja de estilos externa que controla tipografia, color y espaciado de la pagina
3. Texto y contenido	Encabezados jerarquicos, parrafos, listas ordenadas y no ordenadas, listas de definicion, citas, y las entidades HTML para caracteres especiales	Un documento largo bien estructurado, con acentos y simbolos que no se rompen
4. Tablas y su estilo	La anatomia de una tabla: table, caption, thead, tbody, tfoot, tr, th, td, colspan y rowspan, mas el estilo con border-collapse y nth-child	Una tabla de datos legible, con cabeceras fijas y filas alternadas
5. Imagenes, fondos y posicionamiento	La etiqueta img con src y alt, los formatos y cuando usar cada uno, las imagenes de fondo con CSS, y como se posiciona una imagen dentro del flujo	Una galeria con imagenes que cargan bien y no deforman el layout
6. Enlaces, URI y rutas	La etiqueta a y sus atributos, los estados CSS de un enlace, la anatomia completa de una URI, rutas absolutas frente a relativas, index.html, fragmentos con hashtag y protocolos mailto y tel	Un sitio de varias paginas navegable, con enlaces que nunca apuntan al vacio
7. Mapas, iframes y divisores	Zonas clicables sobre una imagen con map y area, documentos incrustados con iframe y sus atributos de seguridad, y los contenedores hr, div, span, header, nav, main, section, article, aside y footer	Una pagina con secciones semanticas y contenido externo incrustado de forma segura
8. JavaScript desde cero	Como se conecta un script a la pagina, defer y async, los tipos de datos primitivos, la consola del navegador, var, let y const, y los strings con sus metodos y su propiedad length	Tu primer script propio que calcula algo y lo imprime en la consola
9. Funciones, condicionales y arreglos	Declarar y llamar funciones, parametros y retorno, if, else if, switch, el operador ternario, y los arreglos con su creacion, acceso por indice y metodos basicos	Programas con logica de decision y colecciones de datos manipulables
10. Metodos funcionales de arreglos	map, filter, reduce, sort y join en profundidad, con sus firmas reales, sus trampas de mutacion y la composicion de funciones para encadenar transformaciones	Pipelines de datos legibles, sin bucles for anidados
11. Objetos, JSON y spread	Objetos literales, acceso por punto y por corchetes, anidamiento, JSON.parse y JSON.stringify, y el operador spread para copiar y combinar	Modelos de datos propios que viajan como texto y vuelven a ser objetos
12. El DOM y la seleccion de nodos	El critical rendering path completo, la diferencia entre DOM y CSSOM, los objetos document y window, y las cinco APIs de seleccion con sus colecciones vivas y estaticas	Scripts que encuentran cualquier elemento de la pagina y leen su contenido
13. Crear, modificar y eliminar nodos	createElement, appendChild, innerHTML frente a textContent, outerHTML, remove, removeChild, replaceChild, y el costo real de reflow y repaint	Interfaces que se construyen desde datos, sin recargar la pagina
14. Eventos en el DOM	Las tres formas de registrar un manejador, addEventListener con sus opciones, el objeto event, las fases de captura y burbujeo, y el catalogo de eventos comunes	Paginas que reaccionan a clics, teclas, foco y scroll con delegacion
15. Formularios	El elemento form con name, action y method, fieldset y legend, label y su vinculo con el control, todos los tipos de input, checkbox, radio, output, select, optgroup, textarea y button	Formularios completos, accesibles y listos para enviar datos
16. Validacion de formularios	La validacion nativa de HTML con required, pattern, min y max, el evento submit, la validacion con JavaScript, la Constraint Validation API y los mensajes de error accesibles	Formularios que rechazan datos invalidos y explican por que
17. Proyecto: simulador Mario Kart 64	La traduccion de requerimientos funcionales, no funcionales y opcionales a codigo, partiendo de un esqueleto base hasta una solucion comentada linea por linea	Una aplicacion completa escrita por ti, con HTML, CSS y JavaScript integrados
18. Siguientes pasos y apendices	El mapa del ecosistema: tecnologias legadas, Tailwind, CSS avanzado, WordPress y CMS, frameworks de aplicaciones, mas apendices de hosting, generadores estaticos, Firefox Developer Tools y Flexbox	Un criterio propio para elegir la siguiente tecnologia sin seguir modas

Bloque 1 · Estructura y estilo

Los dos primeros capitulos instalan el modelo mental basico: el HTML dice que es cada cosa y el CSS dice como se ve. Esa separacion parece obvia enunciada asi, pero se rompe apenas alguien pone un <font color="red"> o un style en linea, y el curso insiste en mantenerla desde el primer archivo.

Capitulo 1 · Primeros pasos con HTML: la web, el editor y la estructura minima de un documento

Este capitulo responde una pregunta que casi nunca se hace explicita: que ocurre entre el momento en que escribes una direccion y el momento en que ves la pagina. Se describe el viaje completo de una peticion HTTP, que es un servidor, que es un cliente y por que el navegador es el interprete de todo lo que sigue. Despues se baja al terreno concreto: elegir un editor, crear un archivo con extension .html y abrirlo.

La segunda mitad construye un documento valido desde la primera linea. Se explica que es una etiqueta, que es un atributo, como se escribe un comentario, para que sirve la declaracion doctype, que va en el head y que va en el body, y por que el title es la unica parte del head que el usuario ve directamente.

Contenidos clave: que es la web y como viaja una pagina · el editor de texto y el resaltado de sintaxis · etiquetas de apertura y cierre · etiquetas vacias · atributos y sus comillas · comentarios HTML · la declaracion doctype · head, body y title.

Con que sales: tu primer documento HTML propio, abierto en el navegador, con estructura valida y titulo visible en la pestana.

Capitulo 2 · CSS desde cero: estilos, colores, unidades y selectores

Aqui aparece la segunda tecnologia del curso. Se cubren las tres formas de aplicar CSS a un documento —el atributo style en linea, la etiqueta <style> en el head y el archivo externo enlazado con <link>— y se explica por que la tercera es la que se usa en cualquier proyecto que crezca mas alla de una pagina.

El corazon del capitulo son dos sistemas que hay que dominar antes de escribir cualquier estilo serio: el de colores y el de unidades. El color se puede expresar por nombre, en hexadecimal, con rgb y con hsl, y cada notacion tiene un caso donde es la mas comoda. Las unidades se dividen en absolutas y relativas, y elegir mal entre px, em, rem, %, vw y vh es la causa mas frecuente de layouts que se rompen al cambiar el tamano de la ventana. El capitulo cierra con los selectores: por etiqueta, por clase, por identificador, por atributo, combinados y agrupados.

Contenidos clave: CSS en linea, interno y externo · la regla, el selector, la propiedad y el valor · colores por nombre, hex, rgb y hsl · transparencia con el canal alfa · unidades absolutas y relativas · em frente a rem · vw y vh · selectores de etiqueta, clase, id, atributo y descendencia.

Con que sales: una hoja de estilos externa que controla la tipografia, los colores y el espaciado de tu pagina sin tocar el HTML.

Un ejemplo del tipo de codigo que se escribe en este bloque:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Mi primera pagina</title>
    <link rel="stylesheet" href="estilos.css" />
  </head>
  <body>
    <h1>Hola, mundo</h1>
    <p class="destacado">Este parrafo tiene una clase.</p>
  </body>
</html>

:root {
  --color-texto: hsl(220 15% 20%);
  --color-acento: hsl(210 90% 45%);
}

body {
  font-family: system-ui, sans-serif;
  color: var(--color-texto);
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.5rem;
}

.destacado {
  color: var(--color-acento);
  font-weight: 600;
}

Bloque 2 · Contenido de una pagina

Con la estructura y el estilo resueltos, este bloque llena la pagina. Cada capitulo toma una familia de contenido —texto, datos tabulares, imagenes, enlaces, contenido externo— y la agota: las etiquetas disponibles, sus atributos reales, el estilo que admite y los errores tipicos.

Capitulo 3 · Texto, contenido y caracteres especiales

El texto es el noventa por ciento de la web y tiene mas matices de los que parece. Este capitulo cubre la jerarquia de encabezados de h1 a h6 y por que saltarse niveles rompe la lectura para quien usa un lector de pantalla, el parrafo y su comportamiento con los espacios en blanco, y el catalogo completo de etiquetas de texto: enfasis, importancia, codigo, subindice, superindice, marcado, texto pequeno, abreviaturas y citas cortas y largas.

La parte que sorprende a quien llega desde otros lenguajes es la de entidades. Los caracteres <, >, & y las comillas tienen significado dentro del HTML y hay que escribirlos con entidades para que aparezcan como texto. El capitulo explica el mecanismo, la relacion con la codificacion del archivo y por que declarar <meta charset="utf-8"> evita la mayoria de los problemas con acentos y enes.

Contenidos clave: encabezados y jerarquia · parrafos y el colapso de espacios · listas ul, ol y dl · listas anidadas · citas con blockquote, q y cite · entidades HTML · la codificacion del documento · etiquetas de enfasis semantico frente a las de presentacion.

Con que sales: un documento largo bien estructurado, donde los acentos, los simbolos y las comillas tipograficas se muestran correctamente.

Capitulo 4 · Tablas y su estilo con CSS

Las tablas tienen mala fama por un motivo historico —durante anos se usaron para maquetar paginas enteras— pero siguen siendo la forma correcta de presentar datos tabulares. Este capitulo reconstruye su anatomia completa: table como contenedor, caption para el titulo accesible, thead, tbody y tfoot como secciones, tr para las filas, y la distincion entre th de cabecera y td de dato.

Despues viene lo que hace utiles a las tablas de verdad: colspan y rowspan para combinar celdas, y el conjunto de propiedades CSS que solo aplican aqui, empezando por border-collapse. Se cubre el estilo de filas alternadas con nth-child, la alineacion de contenido numerico y el comportamiento de una tabla ancha dentro de un contenedor estrecho.

Contenidos clave: table, caption, thead, tbody, tfoot · th frente a td y el atributo scope · colspan y rowspan · border-collapse y border-spacing · filas alternadas con nth-child · alineacion de columnas numericas · tablas y desbordamiento horizontal.

Con que sales: una tabla de datos legible, con cabeceras claras, celdas combinadas donde corresponde y estilo propio.

Capitulo 5 · Imagenes, fondos y posicionamiento

La etiqueta img parece simple hasta que hay que decidir formato, tamano y comportamiento en pantallas distintas. El capitulo empieza por lo esencial —src y alt, y por que el texto alternativo no es opcional— y sigue con los formatos disponibles: cuando conviene un JPEG, cuando un PNG, cuando un SVG y que aportan los formatos mas nuevos.

La segunda parte cambia de enfoque: las imagenes tambien se ponen desde CSS con background-image, y esa via tiene reglas propias de repeticion, posicion y tamano. Se compara cuando una imagen es contenido —y va en el HTML— y cuando es decoracion —y va en el CSS—. Cierra con el posicionamiento de la imagen dentro del flujo del documento y con las rutas relativas y absolutas aplicadas al atributo src.

Contenidos clave: img con src, alt, width y height · formatos y compresion · imagenes de fondo con background-image, background-repeat, background-position y background-size · contenido frente a decoracion · el flujo del documento y las imagenes · rutas relativas y absolutas.

Con que sales: una galeria donde las imagenes cargan correctamente, tienen texto alternativo y no deforman el layout mientras se descargan.

Capitulo 6 · Enlaces, URIs y rutas: la etiqueta a de punta a punta

El hipervinculo es la idea que define a la web y este capitulo lo agota. Se cubre la etiqueta a con todos sus atributos utiles, los cuatro estados CSS de un enlace y por que el orden en que se escriben esas reglas importa.

El nucleo es la anatomia de una direccion: que es una URI, que es una URL, y que significa cada parte —esquema, host, puerto, ruta, cadena de consulta y fragmento—. Sobre esa base se explica la diferencia entre rutas absolutas y relativas, el papel de index.html como documento por defecto de un directorio, los enlaces con fragmento que saltan dentro de la misma pagina y los enlaces con protocolos alternativos como mailto y tel. Incluye tambien la codificacion de caracteres en una URL, que es de donde salen los %20 que aparecen en la barra de direcciones.

Contenidos clave: la etiqueta a con href, target, rel, title y download · los estados link, visited, hover y active · anatomia de una URI y de una URL · rutas absolutas frente a relativas · . y .. en una ruta · index.html como documento por defecto · enlaces con fragmento · mailto y tel · codificacion porcentual.

Con que sales: un sitio de varias paginas completamente navegable, con enlaces internos, externos y de anclaje que apuntan siempre a donde deben.

Capitulo 7 · Mapas de imagen, iframes y divisores de contenido

Este capitulo cierra el bloque de contenido con tres temas independientes. El primero son los mapas de imagen: map y area permiten convertir zonas concretas de una imagen en enlaces distintos, definiendo coordenadas rectangulares, circulares o poligonales.

El segundo es iframe, la forma de incrustar un documento completo dentro de otro. Se explica su uso legitimo y, sobre todo, como controlar lo que el documento incrustado puede hacer mediante sandbox, allow y referrerpolicy. El tercero es la estructura: los contenedores genericos div y span, el separador hr, y las etiquetas semanticas header, nav, main, section, article, aside y footer, que le dan a la pagina un esqueleto que las herramientas de accesibilidad pueden recorrer.

Contenidos clave: map y area con shape y coords · usemap · iframe con src, sandbox, allow, loading y referrerpolicy · riesgos de incrustar contenido de terceros · hr y su significado semantico · div y span como contenedores neutros · header, nav, main, section, article, aside y footer.

Con que sales: una pagina con estructura semantica real, contenido externo incrustado bajo control y zonas clicables sobre una imagen.

Bloque 3 · El lenguaje JavaScript

Aqui el curso cambia de naturaleza. HTML y CSS son lenguajes declarativos: describen. JavaScript es un lenguaje de programacion completo: decide, repite, calcula y transforma. Los cuatro capitulos de este bloque ensenan el lenguaje antes de tocar la pagina, para que la manipulacion del DOM del bloque 4 no mezcle dos dificultades a la vez.

flowchart LR
    A["Datos primitivos<br/>Cap 8"] --> B["Estructuras de control<br/>Cap 9"]
    B --> C["Colecciones y arreglos<br/>Cap 9"]
    C --> D["Transformaciones funcionales<br/>Cap 10"]
    D --> E["Objetos y JSON<br/>Cap 11"]
    E --> F["Listo para el DOM<br/>Cap 12"]

    A -. "string, number, boolean" .-> C
    C -. "un arreglo de objetos es el modelo tipico" .-> E
    E -. "JSON es como viajan los datos por la red" .-> F

Capitulo 8 · JavaScript desde cero: la etiqueta script, tipos de datos, la consola, variables y strings

El primer capitulo de JavaScript empieza por la conexion fisica entre el lenguaje y la pagina: la etiqueta script, la diferencia entre codigo en linea y archivo externo, y que hacen exactamente los atributos defer y async sobre el momento de ejecucion.

Despues entra al lenguaje. Se cubren los tipos de datos primitivos y como averiguar el tipo de un valor, la consola del navegador como herramienta de trabajo diaria, y las tres formas de declarar una variable con var, let y const, con sus diferencias reales de alcance y reasignacion. El capitulo termina con los strings tratados en profundidad: comillas simples, dobles y plantillas, la propiedad length, la concatenacion y los metodos mas usados.

Contenidos clave: la etiqueta script en linea y externa · defer y async · comentarios de linea y de bloque · console.log y los metodos de la consola · tipos primitivos · el operador typeof · var, let y const · alcance de bloque frente a alcance de funcion · strings, plantillas literales, length y metodos de texto.

Con que sales: tu primer script propio, ejecutandose en una pagina real y escribiendo resultados en la consola.

Capitulo 9 · Funciones, condicionales y arreglos

Este capitulo instala las tres herramientas que convierten un script en un programa. Las funciones permiten nombrar un bloque de codigo, darle parametros y recibir un resultado; se cubren la declaracion, la expresion de funcion, la funcion flecha, los valores por defecto y el retorno.

Los condicionales dan la capacidad de decidir: if, else if, else, la sentencia switch con sus casos y su break, y el operador ternario para las decisiones de una sola linea. Se explican tambien los operadores de comparacion y la diferencia entre igualdad estricta y no estricta, que es una fuente clasica de errores. La ultima parte introduce los arreglos: como se crean, como se accede por indice, la propiedad length y los metodos basicos para agregar y quitar elementos.

Contenidos clave: declaracion de funcion, expresion y funcion flecha · parametros, argumentos y valor de retorno · if, else if y else · switch, case, break y default · el operador ternario · operadores de comparacion e igualdad estricta · creacion y acceso a arreglos · push, pop, shift, unshift, slice e indexOf.

Con que sales: programas con logica de decision propia y colecciones de datos que puedes recorrer y modificar.

Capitulo 10 · map, sort, filter, reduce, join y composicion de funciones

Este es el capitulo que separa a quien escribe bucles de quien escribe transformaciones. Los cinco metodos del titulo cubren la mayoria de las operaciones sobre colecciones que aparecen en el trabajo real: map transforma cada elemento, filter selecciona un subconjunto, reduce colapsa la coleccion en un solo valor, sort ordena y join convierte el arreglo en texto.

El capitulo trata cada uno con su firma completa —incluidos los parametros de indice y arreglo que casi nadie usa pero que resuelven casos concretos— y advierte sobre las trampas: sort ordena como texto si no le das un comparador, y muta el arreglo original. La ultima seccion muestra como encadenar estos metodos para construir pipelines legibles y como componer funciones pequenas en lugar de escribir una funcion grande.

Contenidos clave: map y la transformacion uno a uno · filter y los predicados · reduce con acumulador y valor inicial · sort, el comparador y la mutacion · join y su separador · encadenamiento de metodos · funciones puras · composicion de funciones · cuando un bucle sigue siendo la mejor opcion.

Con que sales: pipelines de datos legibles que reemplazan bucles anidados por una cadena de transformaciones con nombre.

Capitulo 11 · Objetos, JSON y el operador spread

Los arreglos guardan listas; los objetos guardan cosas con nombre. Este capitulo cubre el objeto literal, el acceso por punto y por corchetes —y cuando cada uno es obligatorio—, el anidamiento de objetos dentro de objetos y de arreglos dentro de objetos, que es la forma que tienen casi todos los datos reales.

La segunda parte es JSON: un formato de texto derivado de la sintaxis de objetos de JavaScript pero mas estricto, que es como viajan los datos entre un servidor y un navegador. JSON.stringify y JSON.parse son las dos funciones que cruzan esa frontera, y el capitulo explica que se pierde en el camino. Cierra con el operador spread para copiar objetos, combinarlos y expandir arreglos, y con la diferencia entre copia superficial y profunda.

Contenidos clave: objetos literales y propiedades · acceso por punto y por corchetes · objetos anidados y arreglos de objetos · recorrer un objeto · JSON como formato de texto · JSON.stringify y JSON.parse · diferencias entre JSON y un objeto JavaScript · el operador spread en objetos y arreglos · copia superficial frente a copia profunda.

Con que sales: modelos de datos propios que puedes serializar a texto, guardar, transmitir y reconstruir.

Bloque 4 · El DOM en el navegador

Este es el bloque donde las tres tecnologias se juntan. El DOM es la representacion en memoria del documento, y JavaScript puede leerlo y modificarlo mientras la pagina esta viva. Los cinco capitulos avanzan en orden estricto: primero entender el modelo, despues seleccionar, despues modificar, despues reaccionar y por ultimo capturar datos del usuario.

stateDiagram-v2
    [*] --> HTMLRecibido: el navegador descarga el documento
    HTMLRecibido --> DOMConstruido: tokenizacion y arbol de nodos
    DOMConstruido --> RenderTree: se combina con el CSSOM
    RenderTree --> Pintado: layout y paint
    Pintado --> Interactivo: se ejecutan los scripts

    Interactivo --> NodoSeleccionado: querySelector y familia · Cap 12
    NodoSeleccionado --> DOMModificado: crear, insertar, eliminar · Cap 13
    DOMModificado --> Reflow: cambio de geometria
    DOMModificado --> Repaint: cambio solo visual
    Reflow --> Pintado
    Repaint --> Pintado

    Interactivo --> EventoDisparado: clic, tecla, submit · Cap 14
    EventoDisparado --> NodoSeleccionado: el manejador busca elementos
    EventoDisparado --> DatosDelFormulario: envio de formulario · Cap 15
    DatosDelFormulario --> Validacion: reglas nativas y API · Cap 16
    Validacion --> DOMModificado: mostrar mensajes de error
    Validacion --> [*]: datos validos, se envian

Capitulo 12 · El DOM: critical rendering path y seleccion de nodos

Antes de tocar un solo nodo hay que entender que es el DOM y de donde sale. El capitulo recorre el critical rendering path completo: como el HTML se convierte en un arbol de nodos, como el CSS se convierte en el CSSOM, como ambos se combinan en el render tree y que ocurre en las etapas de layout y paint.

Con ese modelo en la cabeza aparecen los dos objetos globales del navegador, document y window, y las cinco APIs de seleccion: getElementById, getElementsByTagName, getElementsByClassName, querySelector y querySelectorAll. El capitulo compara sus valores de retorno, explica la diferencia entre una HTMLCollection viva y una NodeList estatica, y da criterios para elegir en cada caso.

Contenidos clave: que es el DOM y por que no es el HTML · critical rendering path paso a paso · DOM y CSSOM · render tree, layout y paint · document y window · getElementById · getElementsByTagName · getElementsByClassName · querySelector y querySelectorAll · colecciones vivas frente a estaticas · recorrer el arbol con parentNode, children y siblings.

Con que sales: scripts que encuentran cualquier elemento de la pagina y leen su contenido y sus atributos.

Capitulo 13 · Crear, modificar y eliminar nodos, y el costo de hacerlo

Seleccionar es la mitad; la otra mitad es cambiar. Este capitulo cubre la creacion de nodos con createElement y createTextNode, su insercion con appendChild, insertBefore y los metodos mas modernos, y la asignacion directa de contenido con innerHTML, outerHTML y textContent, con la advertencia de seguridad que corresponde a la primera.

La eliminacion y el reemplazo se tratan con remove, removeChild y replaceChild. La ultima seccion, la mas valiosa a largo plazo, explica que ocurre en el navegador cuando modificas el arbol: la diferencia entre reflow y repaint, por que leer una propiedad geometrica justo despues de escribirla fuerza un recalculo, y como agrupar cambios para pagar el costo una sola vez.

Contenidos clave: createElement y createTextNode · appendChild, insertBefore y append · innerHTML frente a textContent · outerHTML · remove, removeChild y replaceChild · atributos con setAttribute, getAttribute y dataset · classList · reflow y repaint · agrupar mutaciones · el fragmento de documento.

Con que sales: interfaces que se construyen a partir de datos y se actualizan sin recargar la pagina ni penalizar el rendimiento.

Capitulo 14 · Eventos en el DOM

Una pagina que no responde al usuario es un documento. Los eventos son lo que la convierte en interfaz. El capitulo presenta las tres formas historicas de registrar un manejador —el atributo HTML, la propiedad del elemento y addEventListener— y explica por que solo la tercera permite varios manejadores sobre el mismo evento.

Despues entra al objeto event y a sus propiedades mas usadas, y al mecanismo que casi nadie explica bien: la propagacion. Un evento viaja desde window hasta el elemento objetivo en la fase de captura y vuelve hacia arriba en la fase de burbujeo, y entender ese recorrido es lo que permite la delegacion de eventos, la tecnica que hace que un solo manejador atienda cientos de elementos. Cierra con el catalogo de eventos comunes de raton, teclado, foco, formulario y documento.

Contenidos clave: el atributo onclick, la propiedad onclick y addEventListener · removeEventListener · el objeto event · target frente a currentTarget · fases de captura y burbujeo · la opcion capture · preventDefault y stopPropagation · las opciones once y passive · delegacion de eventos · eventos de raton, teclado, foco, scroll y carga del documento.

Con que sales: paginas que reaccionan a la accion del usuario con manejadores bien ubicados y delegacion donde corresponde.

Capitulo 15 · Formularios: estructura y controles

El formulario es la via principal por la que un usuario entrega datos. Este capitulo lo recorre entero, empezando por el elemento form y sus atributos name, action y method, y por la diferencia real entre enviar por GET y por POST.

Sigue con la estructura interna: fieldset y legend para agrupar campos relacionados, y label con su vinculo explicito al control mediante for e id, que es lo que hace que al hacer clic en la etiqueta se enfoque el campo y lo que permite a un lector de pantalla anunciarlo. La parte central es el catalogo completo de controles: todos los tipos de input con sus atributos, checkbox y radio con su comportamiento de grupo, output, select con optgroup y option, textarea y los tres tipos de button.

Contenidos clave: el elemento form con name, action, method y enctype · GET frente a POST · fieldset y legend · label, for e id · los tipos de input · placeholder, value, name, readonly y disabled · checkbox y radio · output · select, optgroup, option y multiple · textarea · button de tipo submit, reset y button · el orden de tabulacion.

Con que sales: formularios completos, accesibles y listos para enviar datos a un servidor.

Capitulo 16 · Validacion de formularios

Recibir datos sin validarlos es recibir basura. Este capitulo cubre las tres capas de validacion disponibles en el navegador. La primera es la nativa de HTML, que se activa con atributos como required, minlength, maxlength, pattern, min, max y los tipos de input que ya validan por si solos.

La segunda es la validacion con JavaScript sobre el evento submit, donde se decide si dejar continuar el envio o cancelarlo. La tercera es la Constraint Validation API, que expone el estado de validez de cada control y permite escribir mensajes de error propios sin renunciar al mecanismo nativo. El capitulo termina con la parte que suele faltar: como mostrar esos errores de forma accesible, asociandolos al campo correspondiente para que cualquier usuario los perciba.

Contenidos clave: validacion nativa con required, pattern, min, max, minlength y maxlength · tipos de input que validan solos · el evento submit y su cancelacion · el atributo novalidate · la Constraint Validation API · checkValidity, reportValidity, setCustomValidity y validity · las pseudoclases :valid, :invalid y :user-invalid · mensajes de error accesibles · validacion en el cliente frente a validacion en el servidor.

Con que sales: formularios que rechazan datos invalidos, explican el motivo y no dejan pasar nada que el servidor no pueda procesar.

Bloque 5 · Integracion y salida

Los dos ultimos capitulos no introducen tecnologia nueva: consolidan lo aprendido y abren el mapa de lo que viene despues.

Capitulo 17 · Proyecto: simulador de Mario Kart 64

El proyecto final integra los dieciseis capitulos anteriores en una sola aplicacion. Se plantea como un encargo real: hay requerimientos funcionales que definen que debe hacer el programa, requerimientos no funcionales que definen como debe hacerlo y requerimientos opcionales para quien quiera ir mas lejos.

El capitulo entrega un esqueleto base con la estructura HTML de partida y despues desarrolla una solucion completa comentada, explicando cada decision: por que los datos de los personajes son un arreglo de objetos, por que la tabla se genera con map y join en vez de con un bucle, donde se delega el evento de clic y como se valida el formulario de inscripcion. La recomendacion es intentar el proyecto antes de leer la solucion.

Contenidos clave: lectura de requerimientos funcionales, no funcionales y opcionales · diseno del modelo de datos · el esqueleto HTML de partida · generacion de la tabla de resultados · ordenamiento por columna · validacion del formulario · delegacion de eventos en la tabla · solucion completa comentada · variantes propuestas.

Con que sales: una aplicacion web completa escrita por ti, con HTML semantico, CSS propio y JavaScript que manipula el DOM y valida entradas.

Capitulo 18 · Siguientes pasos y apendices

El ultimo capitulo responde la pregunta que aparece al terminar cualquier curso base: y ahora que. Se recorre el ecosistema con criterio de utilidad, no de moda: que fueron jQuery, Bootstrap y los preprocesadores CSS y por que aparecen todavia en proyectos existentes; que problema resuelve Tailwind CSS y en que se diferencia de escribir CSS a mano; que hay en el CSS avanzado que este curso no alcanzo a cubrir; cuando conviene un CMS como WordPress en lugar de escribir el sitio; y que aportan realmente los frameworks de aplicaciones web.

La segunda mitad son apendices practicos: como funciona el hosting y como se conecta un dominio, que son los generadores de sitios estaticos, como usar las Firefox Developer Tools mas alla del inspector, que es un userscript, y una introduccion a CSS Flexbox para el layout.

Contenidos clave: tecnologias legadas y por que siguen presentes · Tailwind CSS · CSS avanzado · WordPress y los CMS · frameworks de aplicaciones web · apendice de hosting y dominios · apendice de generadores de sitios estaticos · apendice de Firefox Developer Tools · apendice de userscripts · apendice de CSS Flexbox.

Con que sales: un criterio propio para elegir la siguiente tecnologia, sabiendo que problema resuelve cada una y cual de ellas necesitas de verdad.

Referencia rapida: que se cubre y donde

Cuando vuelvas al curso buscando algo puntual, esta tabla te lleva directo al capitulo.

Tema	Capitulo	Nota
doctype, head, body	1	La estructura minima valida
Atributos y comentarios	1	Sintaxis general de HTML
CSS externo con link	2	La forma recomendada
Colores hex, rgb, hsl	2	Con canal alfa
px, em, rem, %, vw, vh	2	Tabla comparativa de unidades
Selectores CSS	2	Etiqueta, clase, id, atributo, descendencia
Encabezados y jerarquia	3	Impacto en accesibilidad
Entidades HTML	3	Y la relacion con la codificacion
Listas ul, ol, dl	3	Incluye listas anidadas
Estructura de una tabla	4	thead, tbody, tfoot
colspan y rowspan	4	Celdas combinadas
border-collapse	4	Estilo especifico de tablas
img, src y alt	5	El texto alternativo no es opcional
background-image	5	Imagen decorativa desde CSS
Formatos de imagen	5	Cuando usar cada uno
La etiqueta a	6	Con todos sus atributos
Anatomia de una URL	6	Esquema, host, ruta, consulta, fragmento
Rutas relativas y absolutas	6	Con . y ..
mailto y tel	6	Protocolos alternativos
map y area	7	Zonas clicables sobre una imagen
iframe y sandbox	7	Control de contenido incrustado
Etiquetas semanticas	7	header, nav, main, section, article, aside, footer
La etiqueta script	8	Con defer y async
Tipos de datos y typeof	8	Primitivos
var, let y const	8	Alcance y reasignacion
Strings y length	8	Con plantillas literales
Funciones y funciones flecha	9	Parametros y retorno
if, switch y ternario	9	Estructuras de decision
Arreglos y sus metodos basicos	9	push, pop, slice, indexOf
map, filter, reduce	10	Firmas completas
sort y su comparador	10	Advertencia de mutacion
join y composicion	10	Pipelines legibles
Objetos literales	11	Acceso por punto y corchetes
JSON.parse y JSON.stringify	11	La frontera texto-objeto
Operador spread	11	Copia superficial
Critical rendering path	12	DOM, CSSOM, render tree, layout, paint
document y window	12	Los dos objetos globales
querySelector y familia	12	Colecciones vivas y estaticas
createElement y appendChild	13	Creacion e insercion
innerHTML frente a textContent	13	Con la advertencia de seguridad
Reflow y repaint	13	El costo real de modificar el DOM
addEventListener	14	Con todas sus opciones
Burbujeo y captura	14	Y la delegacion de eventos
preventDefault	14	Cancelar el comportamiento por defecto
El elemento form	15	name, action, method
Tipos de input	15	Catalogo completo
select, optgroup, textarea	15	Controles de seleccion y texto
Validacion nativa	16	required, pattern, min, max
Constraint Validation API	16	checkValidity y setCustomValidity
Proyecto integrador	17	Simulador de Mario Kart 64
Tailwind, CMS, frameworks	18	El mapa del ecosistema
Flexbox	18	Apendice de layout

Como recorrer el curso

El curso admite dos recorridos y conviene elegir uno conscientemente en vez de improvisar.

Recorrido lineal. Del capitulo 1 al 18 en orden. Es el recomendado si no tienes experiencia previa, porque cada capitulo asume lo anterior y no repite explicaciones. La ventaja es que nunca te falta contexto; el costo es que los primeros siete capitulos no producen nada interactivo y eso puede sentirse lento.

Recorrido por bloques con retorno. Cubrir el bloque 1 completo, hojear el bloque 2 quedandose solo con los capitulos 5 y 6, saltar al bloque 3 y al 4, y volver a los capitulos 3, 4 y 7 cuando un proyecto los pida. Sirve para quien ya escribio HTML antes y necesita llegar rapido a JavaScript. El riesgo es llegar al capitulo 13 sin dominar las tablas, que es justo el ejemplo que mas se usa para practicar generacion de nodos.

flowchart LR
    Inicio{"Escribiste HTML<br/>antes?"}
    Inicio -- "No" --> Lineal["Recorrido lineal<br/>Cap 1 a 18"]
    Inicio -- "Si" --> Prog{"Programaste en<br/>algun lenguaje?"}
    Prog -- "No" --> Mixto["Cap 1 y 2 rapido<br/>Cap 3 a 7 completo<br/>Cap 8 a 18 a fondo"]
    Prog -- "Si" --> Rapido["Cap 1, 2 y 6 como referencia<br/>Cap 8 a 11 en diagonal<br/>Cap 12 a 18 a fondo"]
    Lineal --> Proyecto["Capitulo 17<br/>proyecto integrador"]
    Mixto --> Proyecto
    Rapido --> Proyecto
    Proyecto --> Salida["Capitulo 18<br/>siguientes pasos"]

Como trabajar cada capitulo

La practica manda sobre la lectura. Estas cinco reglas valen para los dieciocho capitulos:

1. Escribe el codigo, no lo copies. Copiar y pegar produce la ilusion de haber entendido. Un ejemplo tipeado a mano deja errores que hay que corregir, y corregirlos es donde ocurre el aprendizaje.
2. Manten una pagina de pruebas. Un solo archivo pruebas.html con su pruebas.css y su pruebas.js donde vayas acumulando lo del capitulo actual. No hace falta un proyecto nuevo por cada tema.
3. Ten la consola abierta siempre. Desde el capitulo 8 en adelante, la consola del navegador es donde aparecen los errores y donde se verifica que una variable contiene lo que crees.
4. Rompe los ejemplos a proposito. Quita un cierre de etiqueta, cambia let por const y reasigna, borra el comparador de sort. Entender el mensaje de error vale mas que evitarlo.
5. Haz los ejercicios del final antes de pasar al siguiente capitulo. Estan disenados para forzar el uso de lo recien visto en un contexto distinto al del ejemplo.

Ritmo de practica sugerido

Sin dar totales, este es el reparto de esfuerzo que conviene por tipo de capitulo:

Tipo de capitulo	Capitulos	Reparto lectura / practica
Fundamentos de sintaxis	1, 3, 4, 5, 7	Mitad y mitad; la practica es escribir marcado
Sistemas de reglas	2, 6	Un tercio de lectura, dos tercios de experimentacion
Lenguaje JavaScript	8, 9, 10, 11	Un tercio de lectura, dos tercios de ejercicios en consola
APIs del navegador	12, 13, 14	Lectura atenta primero, despues practica sobre una pagina real
Formularios	15, 16	Practica dominante; construir un formulario completo y romperlo
Proyecto	17	Casi todo practica; leer la solucion solo despues de intentarlo
Panoramica	18	Lectura; la practica queda para el camino que elijas

Errores frecuentes al empezar el curso

Estos aparecen antes del capitulo 5 en casi todos los casos. Vale la pena tenerlos identificados desde el principio.

Error	Causa	Solucion
La pagina se ve como texto plano con las etiquetas visibles	El archivo se guardo como .txt o el editor agrego una extension oculta	Verificar que el nombre termine exactamente en .html
Los acentos aparecen como simbolos raros	Falta la declaracion de codificacion en el head	Agregar <meta charset="utf-8"> como primer elemento del head
El CSS no se aplica	La ruta del href en el link no apunta al archivo correcto	Revisar la ruta relativa; el capitulo 6 explica el mecanismo completo
Los cambios no se ven al recargar	El navegador sirve una version en cache	Recargar forzando la actualizacion con Ctrl mas F5
El script no hace nada	La etiqueta script esta antes del elemento que busca en el DOM	Usar defer o colocar el script al final del body
null al seleccionar un elemento	El selector no coincide con ningun nodo, o corre antes de que exista	Verificar el selector en la consola y revisar el momento de ejecucion
Una etiqueta sin cerrar rompe media pagina	El navegador intenta reparar el marcado y anida mal	Usar el inspector para ver el DOM real frente al HTML escrito

Fuente y creditos

El temario de este curso esta basado en la guia Super Club Net, escrita por Camilo Castro y publicada en Ninjas.cl:

• https://ninjas.cl/books/superclubnet/

Esa guia esta publicada bajo licencia Creative Commons Atribucion-NoComercial-CompartirIgual 4.0 Internacional (CC BY-NC-SA 4.0). De ella provienen la seleccion de temas, su orden y la idea del proyecto final de simulador de Mario Kart 64, que aqui se conservan porque constituyen una secuencia pedagogica bien construida para llegar desde cero al DOM.

Este material no reproduce el texto original. Es una reelaboracion propia: cada capitulo fue redactado de nuevo, ampliado en extension y profundidad, con ejemplos de codigo propios, diagramas Mermaid que no existen en la fuente, tablas de referencia, secciones de errores comunes y ejercicios adicionales. Los apartados sobre critical rendering path, reflow y repaint, Constraint Validation API, atributos de seguridad de iframe y accesibilidad de mensajes de error son extensiones que van mas alla del alcance de la guia original.

Al derivar de una obra CC BY-NC-SA 4.0, este curso se publica bajo la misma licencia y con atribucion explicita a su autor. El credito de la ruta de aprendizaje es de Camilo Castro y Ninjas.cl; la responsabilidad por cualquier error, imprecision o decision editorial de esta version es exclusivamente de quien la escribio aqui.

El primer paso concreto empieza en el capitulo 1, con un archivo vacio y un navegador abierto.