Punto de partida: cero. No hace falta saber nada de informática más allá de usar un ordenador. Punto de llegada: poder dirigir —tú pensando, la IA escribiendo— desde una landing page hasta un sistema de gestión a medida para un negocio, entendiendo cada pieza lo suficiente para decidir, revisar y arreglar. Ruta técnica: un solo lenguaje para todo → JavaScript / TypeScript. Hilo conductor: el menú web interactivo de un restaurante. Nace como página estática (Fase 2) y crece hasta un sistema de pedidos con panel y pagos (Fases 8-11). Ritmo previsto: 10-20 h/semana → ≈ 11-13 meses (las fases no son una carrera: se avanza cuando se cumple el criterio de salida).

Los 5 bloques

Bloque	Fases	Para qué sirve
A · Orientación	0-2	Entender el terreno, montar el taller y aprender el método de trabajo con IA
B · La cara visible	3-5	Todo lo que el usuario ve y toca (frontend)
C · El motor	6-9	Lo que nadie ve: servidor, datos, usuarios, integraciones
D · Producción	10-11	Que no se rompa, y que esté publicado y mantenible
E · Profesión	12-14	Diseñar sistemas a medida, orquestar la IA y vivir de esto

Tabla resumen

Fase	Título	Foco	Duración	Entregable
0	El mapa de la web	Vocabulario y modelo mental	1 sem	Mapa de la web escrito con tus palabras
1	El taller	Terminal, editor, Git, Claude Code	1-2 sem	Tu repositorio de aprendizaje funcionando
2	Delegar a la IA	El método de trabajo	2 sem	Carta web del restaurante, publicada y con QR
3	HTML y CSS	Estructura y aspecto	3-4 sem	La carta, responsive y dirigida por ti
4	JavaScript	Lógica y comportamiento	4-5 sem	Menú interactivo: filtros y pedido por WhatsApp
5	Frontend moderno	TypeScript, React, Next.js	4-6 sem	Web multipágina del restaurante
6	Backend y APIs	El servidor	3-4 sem	API de la carta, consumida por tu web
7	Bases de datos	Datos y modelado	3-4 sem	Base de datos del restaurante
8	Usuarios y seguridad	Login, roles, protección	3-4 sem	Panel del restaurante con roles
9	Integraciones	Pagos, emails, archivos, SEO	4-5 sem	Pedidos y reservas con pago
10	Calidad	Pruebas, revisión, depuración	2-3 sem	Suite de pruebas + 3 bugs cazados
11	Despliegue y operación	Entornos, CI/CD, dominios, costes	2-3 sem	Sistema en producción con backups
12	Sistemas a medida	Del cliente al sistema	4-6 sem	Especificación + sistema por módulos
13	IA como equipo	Orquestación avanzada	2 sem	Repositorio "AI-ready"
14	Negocio y profesión	Clientes, precios, portfolio	2-3 sem	3 servicios con precio + portfolio

🅰️ BLOQUE A · Orientación

Fase 0 · El mapa de la web

Objetivo: entender qué pasa cuando escribes una dirección en el navegador y qué es cada pieza del oficio. Sin escribir código.

Lenguajes: ninguno
Tecnologías/herramientas: navegador, DevTools (solo mirar), Obsidian
Conceptos: internet · red · IP · DNS · dominio · servidor · hosting · cliente-servidor · navegador · petición y respuesta · HTTP/HTTPS · URL · frontend · backend · base de datos · API · código fuente · lenguaje de programación · framework · librería · entorno local vs producción · despliegue · qué es full stack · tipos de producto (landing, web corporativa, blog/CMS, e-commerce, aplicación web, panel de administración, SaaS, sistema a medida) · roles del ecosistema (diseño, front, back, DevOps, QA, cliente)
Entregable: "autopsia" de 3 webs reales + tu propio mapa de la web en Obsidian
Criterio de salida: puedes explicarle a alguien sin conocimientos qué ocurre desde que pulsa Enter hasta que ve la página
Qué podrás delegar ya: nada todavía; aquí aprendes a nombrar las cosas, que es el requisito para pedirlas

Fase 1 · El taller

Objetivo: montar y entender las herramientas con las que se trabaja todos los días.

Lenguajes: Markdown, comandos de terminal (bash)
Tecnologías: terminal (foot + bash) · VS Code · Git · GitHub + gh · mise · Node.js · Claude Code · Obsidian
Conceptos: sistema operativo · sistema de archivos · ruta absoluta y relativa · extensión de archivo · terminal y shell · comando · permisos · instalar software · gestor de paquetes · editor de código · extensión del editor · control de versiones · repositorio · commit · rama · fusión (merge) · remoto · clonar · push y pull · GitHub · .gitignore · README · issue · pull request · diff · terminal dentro del editor · gestor de versiones · variable de entorno (PATH) · agente de IA · CLAUDE.md
Entregable: repositorio propio en GitHub con tu primer commit, y Claude Code funcionando en tu máquina
Criterio de salida: creas un proyecto, lo versionas y lo subes sin copiar comandos a ciegas
Qué podrás delegar ya: que la IA prepare estructuras de carpetas y archivos base; tú sabes ya guardar y deshacer

Fase 2 · Delegar a la IA

Objetivo: el método de trabajo de todo el roadmap: cómo pedir, cómo revisar y cómo no perder el control de algo que no has escrito tú.

Lenguajes: ninguno nuevo (se usa HTML/CSS generado, sin estudiarlo aún)
Tecnologías: Claude Code (modos, permisos, plan) · CLAUDE.md · Vercel · capturas como contexto
Conceptos: modelo de lenguaje · contexto y ventana de contexto · prompt · especificación · alcance · tarea pequeña y verificable · criterios de aceptación · iteración · plan antes de código · revisión de código · alucinación · dependencia · leer un error · Git como red de seguridad · la regla "no lo acepto si no lo entiendo" · el ciclo Entender → Especificar → Delegar → Revisar → Probar → Guardar → Aprender
Entregable: la carta web de un restaurante (página estática) publicada en internet con su QR, con el código leído y anotado por ti
Criterio de salida: sabes convertir "quiero una carta digital para mi restaurante" en una lista de tareas verificables, y detectas cuándo la IA se ha inventado algo
Qué podrás delegar ya: páginas estáticas completas, con revisión tuya

🅱️ BLOQUE B · La cara visible (frontend)

Fase 3 · HTML y CSS — estructura y aspecto

Objetivo: leer el código visual y dirigir cambios concretos ("sube 8px y pon dos columnas en móvil"), no "hazlo bonito".

Lenguajes: HTML, CSS
Tecnologías: Tailwind CSS · DevTools (inspector) · Figma (solo leer diseños) · formatos de imagen (webp) · Lighthouse
Conceptos HTML: etiqueta · elemento · atributo · anidación · semántica · encabezados · listas · enlaces · imágenes · formularios e inputs · botones · metadatos · favicon · accesibilidad básica (alt, labels, contraste)
Conceptos CSS: selector · propiedad y valor · cascada · especificidad · herencia · box model · display · flexbox · grid · posicionamiento · unidades (px, rem, %, vh) · color · tipografía · media query · responsive y mobile-first · variables CSS · transición
Conceptos de oficio: jerarquía visual · espaciado · maquetación · componente visual · sistema de diseño
Entregable: la carta de la Fase 2 rehecha bajo tus órdenes: pensada primero para móvil, accesible y con buena puntuación en Lighthouse
Criterio de salida: abres el código de cualquier web y sabes qué hace cada bloque; puedes pedir un cambio visual con precisión
Qué podrás delegar ya: landings y webs de una página a nivel vendible

Fase 4 · JavaScript — lógica y comportamiento

Objetivo: entender cómo se le dice a una web qué hacer, y poder leer la lógica que escribe la IA.

Lenguajes: JavaScript
Tecnologías: consola y DevTools (network, sources) · MDN como referencia
Conceptos: variable · tipo de dato · string, número, booleano, null, undefined · array · objeto · función, parámetro y retorno · condicional · bucle · operador · ámbito · error y excepción · consola · depuración · evento · DOM · seleccionar y modificar elementos · validar un formulario · almacenamiento local · JSON · fetch · asincronía · promesa · async/await · módulo (import/export) · API pública · CORS (primer contacto) · estado (primer contacto)
Entregable: el menú interactivo: filtros (categoría, vegetariano, sin TACC), buscador, pedido con total que se envía por WhatsApp, y la carta cargada con fetch desde un archivo de datos
Criterio de salida: lees una función ajena y explicas qué hace y qué pasa si entra un dato raro
Qué podrás delegar ya: interactividad, cálculos y consumo de datos externos, sabiendo qué revisar

Fase 5 · Frontend moderno — TypeScript, React y Next.js

Objetivo: salir del archivo suelto y entrar en el ecosistema real de proyectos profesionales.

Lenguajes: TypeScript (+ JSX)
Tecnologías: Node.js · npm/pnpm · TypeScript · React · Next.js (App Router) · Tailwind CSS · shadcn/ui · ESLint · Prettier · Vercel
Conceptos: runtime · package.json · dependencia vs devDependency · versionado semántico · lockfile · script de npm · node_modules · bundler · transpilar · build · servidor de desarrollo · recarga en caliente · componente · props · estado · hook · renderizado · SPA vs MPA · SSR / SSG / ISR · rutas por archivos · layout · componente de cliente vs de servidor · tipado, tipo e interfaz · error de tipos · linter y formateador · variables de entorno
Entregable: la web del restaurante en Next.js: varias páginas (inicio, carta, plato, nosotros), carta desde archivos de contenido, componentes reutilizables, desplegada con dominio propio
Criterio de salida: entiendes la estructura de un proyecto Next.js y sabes dónde tocar cada cosa
Qué podrás delegar ya: webs completas multipágina, profesionales, con contenido gestionable

🅲 BLOQUE C · El motor (backend, datos, usuarios, integraciones)

Fase 6 · Backend y APIs

Objetivo: entender qué ocurre en el servidor y construir la puerta por la que entran y salen los datos.

Lenguajes: TypeScript (en servidor)
Tecnologías: Next.js Route Handlers y Server Actions · Zod (validación) · curl / Thunder Client / Postman · funciones serverless en Vercel · nociones de Express
Conceptos: servidor · proceso · puerto · petición y respuesta en detalle · cabeceras · cuerpo · métodos HTTP (GET, POST, PUT, PATCH, DELETE) · códigos de estado · endpoint · API REST · JSON · validación de entrada · middleware · CORS · idempotencia · logs · variables de entorno y secretos · límite de peticiones · webhook (primer contacto) · timeout · capas (ruta → servicio → datos) · errores controlados
Entregable: la API de la carta (crear, leer, editar y borrar platos), consumida por tu web de la Fase 5
Criterio de salida: sabes leer la pestaña Network y explicar qué petición falló y por qué
Qué podrás delegar ya: funcionalidad con servidor (formularios que guardan, paneles simples)

Fase 7 · Bases de datos y modelado

Objetivo: guardar información de forma que sirva al negocio, y saber traducir "cómo trabaja el cliente" a tablas.

Lenguajes: SQL
Tecnologías: PostgreSQL · Supabase (o Neon) · Prisma (o Drizzle) · cliente de base de datos (DBeaver/Studio) · migraciones y seeds
Conceptos: base de datos · relacional vs no relacional · tabla, fila, columna · tipos de columna · clave primaria · clave foránea · relaciones 1:N y N:M · índice · consulta · SELECT / INSERT / UPDATE / DELETE / JOIN · transacción · integridad · normalización básica · migración · datos semilla · ORM · esquema · modelo de datos · CRUD · copia de seguridad · datos sensibles · entorno de datos local vs producción
Entregable: la base de datos del restaurante (platos, categorías, alérgenos, mesas, pedidos) implementada y con datos de prueba
Criterio de salida: dibujas el modelo de datos de un negocio antes de escribir una línea de código
Qué podrás delegar ya: aplicaciones con datos persistentes, habiendo diseñado tú el modelo

Fase 8 · Usuarios, permisos y seguridad

Objetivo: que cada persona vea solo lo suyo y que los datos del cliente estén protegidos.

Lenguajes: TypeScript
Tecnologías: Auth.js (NextAuth) o Supabase Auth · Clerk (alternativa) · middleware de Next · RLS (seguridad a nivel de fila) · bcrypt/argon2 (concepto)
Conceptos: autenticación vs autorización · credenciales · hash de contraseña · sesión · cookie · token · JWT · OAuth y login social · middleware de protección · rol y permiso · panel de administración · multi-tenant (primer contacto) · validación en servidor · inyección SQL · XSS · CSRF · HTTPS/TLS · gestión de secretos · mínimo privilegio · registro de auditoría · protección de datos personales: Ley 25.326 en Argentina, RGPD en Europa (dato personal, consentimiento, aviso legal, cookies) · copias de seguridad
Entregable: el panel del restaurante con login y tres roles (dueño, camarero, cocina): editar la carta, marcar platos agotados y ver pedidos
Criterio de salida: identificas qué datos jamás deben salir del servidor y sabes comprobar que un rol no accede a lo ajeno
Qué podrás delegar ya: aplicaciones con usuarios reales, revisando tú la parte de permisos

Fase 9 · Integraciones de negocio

Objetivo: lo que convierte una web en una herramienta que gana o ahorra dinero.

Lenguajes: TypeScript
Tecnologías: Mercado Pago o Stripe, según el país (pagos y suscripciones) · Resend (emails) · almacenamiento de archivos (Supabase Storage / S3 / UploadThing) · Google Maps · Google Calendar · CMS headless (Sanity/Payload) · generación de PDF · tareas programadas (cron) · Google Search Console · analítica (Plausible/GA4)
Conceptos: API de terceros · clave de API · webhook · evento · reintentos y colas · entorno de pruebas (sandbox) · pasarela de pago · suscripción · factura · email transaccional vs marketing · plantilla de email · subida de archivos · CDN · imagen optimizada · notificación · exportación (CSV/PDF) · SEO técnico (title, description, sitemap, robots, datos estructurados, Core Web Vitals) · analítica y consentimiento de cookies · panel de métricas
Entregable: pedidos online y reservas con pago en modo prueba, QR por mesa, email de confirmación y vista de pedidos para el dueño
Criterio de salida: sabes qué servicio externo resuelve cada necesidad y qué cuesta
Qué podrás delegar ya: proyectos de cliente completos y facturables (e-commerce, reservas, portales)

🅳 BLOQUE D · Producción

Fase 10 · Calidad: pruebas, revisión y depuración

Objetivo: la habilidad más importante cuando la IA escribe el código: saber si lo que hizo está bien.

Lenguajes: TypeScript
Tecnologías: Vitest · Playwright · ESLint/Prettier · TypeScript estricto · Lighthouse · Sentry · React DevTools
Conceptos: bug · reproducir · depurar · traza de error · log · prueba unitaria, de integración y end-to-end · aserción · cobertura · mock · regresión · TDD (nociones) · revisión de código · deuda técnica · refactor · legibilidad y convenciones · code smell · análisis estático · auditoría de accesibilidad · rendimiento (tamaño del bundle, consultas N+1, caché) · monitorización de errores
Entregable: pruebas sobre el sistema de la Fase 9, tres bugs introducidos a propósito y cazados, informe de auditoría
Criterio de salida: revisas un cambio de la IA y detectas lo que rompió sin ejecutarlo a ciegas
Qué podrás delegar ya: cambios en sistemas existentes sin miedo a romper lo que ya funcionaba

Fase 11 · Despliegue y operación

Objetivo: publicar, mantener y no arruinarte: entornos, automatización, dominios, copias y costes.

Lenguajes: YAML (configuración), bash
Tecnologías: Vercel · GitHub Actions · Supabase/Neon gestionado · Cloudflare (DNS) · Sentry/BetterStack · Docker (nociones) · VPS (cuándo hace falta)
Conceptos: entorno local, staging y producción · despliegue · build y artefacto · variables por entorno · dominio · DNS (A, CNAME) · certificado SSL · redirecciones · CDN y caché · integración continua · entrega continua · pipeline · pruebas en CI · rollback · versionado de releases · migraciones en producción · base de datos gestionada · copia de seguridad y restauración · monitorización y alertas · límites y cuotas · coste de infraestructura · cuenta propia vs cuenta del cliente · transferencia de propiedad · plan de recuperación
Entregable: el sistema con staging, CI que ejecuta pruebas, dominio con SSL, backups automáticos y un documento de operación
Criterio de salida: sabes cuánto cuesta al mes lo que has montado y cómo recuperarlo si se borra todo
Qué podrás delegar ya: puestas en producción completas para clientes, con mantenimiento

🅴 BLOQUE E · Profesión

Fase 12 · Arquitectura de sistemas a medida

Objetivo: el salto de "hago webs" a "resuelvo el problema de un negocio con un sistema".

Lenguajes: ninguno nuevo (Mermaid para diagramas)
Tecnologías/herramientas: Mermaid · Excalidraw/Figma · plantillas de especificación · GitHub Issues/Projects · documentación en Obsidian
Conceptos: requisito funcional y no funcional · historia de usuario · alcance · MVP · iteraciones y fases · entrevista de descubrimiento · proceso de negocio · flujo y actor · diagramas (flujo, entidad-relación, arquitectura) · decisión técnica y compromiso (trade-off) · documento de especificación · registro de decisiones (ADR) · modularidad · monolito vs microservicios (y por qué monolito) · multi-tenant · escalabilidad · integración con sistemas existentes (facturación, TPV, ERP) · importación de datos y migración desde Excel/papel · formación del usuario · manual y soporte
Entregable: especificación completa + sistema de gestión a medida construido por módulos (p. ej. clínica o taller: clientes, citas, servicios, facturas, avisos)
Criterio de salida: de una conversación de una hora con un dueño de negocio sacas un plan por fases con presupuesto defendible
Qué podrás delegar ya: sistemas completos, módulo a módulo, con tu arquitectura por delante

Fase 13 · IA como equipo de trabajo

Objetivo: pasar de "le pido cosas" a "tengo un proceso": contexto, reglas, automatización y revisión.

Tecnologías: Claude Code avanzado (plan mode, subagentes, skills, MCP, hooks, tareas programadas) · CLAUDE.md · plantillas de issues y prompts · revisión automática en CI
Conceptos: contexto del proyecto · reglas y convenciones escritas · descomposición en tareas paralelas · subagente · skill · MCP · hook · biblioteca de prompts · límites reales de la IA · cuándo parar y pensar tú · seguridad al delegar (secretos, datos de clientes) · propiedad y licencias del código · mantenimiento de código generado · documentación generada
Entregable: el repositorio de la Fase 12 convertido en "AI-ready": contexto, convenciones, plantillas, pipeline de revisión y prompts por tipo de tarea
Criterio de salida: un módulo nuevo entra en el sistema con IA en horas, sin degradar la calidad
Qué podrás delegar ya: casi todo el código; tú te quedas con la arquitectura, la revisión y el cliente

Fase 14 · Negocio y profesión

Objetivo: convertir la capacidad técnica en ingresos: servicios, clientes, precios, entrega y producto propio.

Herramientas: plantillas de propuesta y contrato · portfolio · GitHub presentable · facturación · CRM ligero
Conceptos: nicho y propuesta de valor · servicios empaquetados (landing / web / e-commerce / sistema a medida / mantenimiento) · captación · llamada de descubrimiento · propuesta y presupuesto · precio por hora vs por proyecto vs por valor · anticipo · contrato · alcance y cambios (scope creep) · hitos · entrega y formación · mantenimiento recurrente y SLA · facturación y forma jurídica (nociones) · portfolio y caso de estudio · CV y entrevista técnica para empleo junior · vía SaaS (suscripción, métricas, churn, MVP de producto)
Entregable: 3 servicios con precio, una propuesta real en PDF, portfolio con 3 casos y un plan de producto propio a 6 meses
Criterio de salida: puedes explicar y cobrar lo que haces sin improvisar el precio
Qué podrás delegar ya: también la parte aburrida: propuestas, documentación y materiales de cliente

🎯 Hitos: cuándo empiezas a poder cobrar / aplicar

Al terminar	Ya puedes
Fase 3	Vender landing pages sencillas
Fase 5	Vender webs completas multipágina con contenido gestionable
Fase 9	Vender e-commerce y sistemas de reservas (proyectos de 4 cifras)
Fase 11	Ofrecer mantenimiento mensual recurrente
Fase 11-12	Presentarte a empleo junior con portfolio y buenas prácticas
Fase 12-13	Vender sistemas a medida y arrancar tu SaaS

Reglas del juego

No avanzas por tiempo, avanzas por criterio de salida. Si no cumples el criterio, repites el proyecto, no la teoría.
Nada entra en tu código si no puedes explicar qué hace. Ni tuyo ni de la IA.
Cada fase termina con algo publicado en internet, no con apuntes.
Toda palabra nueva va al glosario el día que aparece.
El objetivo no es escribir código rápido, es saber pedirlo, revisarlo y responder por él.

La ruta: 15 fases, 5 bloques

Bloque A · Orientación

El mapa de la web

El taller

Delegar a la IA

Bloque B · La cara visible

HTML y CSS

JavaScript

Frontend moderno

Bloque C · El motor

Backend y APIs

Bases de datos

Usuarios y seguridad

Integraciones

Bloque D · Producción

Calidad

Despliegue y operación

Bloque E · Profesión

Sistemas a medida

IA como equipo

Negocio y profesión