← Cursos relámpagoRELÁMPAGO 01

The Web ABC

Entiende. Construye. Publica.

En 4 horas construyes un proyecto web completo. No lo ves construir: lo construyes tú, lo conectas a una base de datos, le añades usuarios, le montas un panel y lo pones online. Y mientras lo haces, entiendes qué está pasando debajo.

Empezar hoy · 75 € Un pago. Acceso al campus para siempre, con las actualizaciones incluidas.
  • 4 hde vídeo
  • 24lecciones
  • 24misiones

Vídeo de muestraLas clases se están grabando: por ahora verás este mismo clip en todas las lecciones. La lectura técnica, el control y la misión de cada una sí son las definitivas y ya puedes hacerlas.

SI ESTÁS AQUÍ, ES POR ESTO
Sé hacer una web con HTML/CSS/IA, pero… ¿cómo coño la pongo online? ¿Dónde se guardan los datos? ¿Qué es un servidor? ¿Necesito una base de datos? ¿Qué diferencia hay entre GitHub, Vercel y Supabase?
LO QUE CONSTRUYES
  1. Landing
  2. Formulario
  3. Base de datos
  4. Usuarios
  5. Panel privado
  6. CRUD
  7. Deploy
  8. Dominio
LO QUE TOCAS
  • Claude Code
  • Warp
  • GitHub
  • Supabase
  • Vercel
  • Cloudflare

Y dos cosas más que no verás en el índice

Van dentro del curso y se abren al terminarlo.

EL REGALO

The Web Starter Template

El esqueleto del proyecto ya resuelto: los tres clientes de datos, la migración con las reglas de acceso puestas y la estructura de carpetas que aguanta cuando el proyecto crece.

Tu siguiente proyecto empieza en la hora dos, no en la cero.

EL TRUCO NINJA

The Research Hack

Cómo investigar un producto, su competencia y su documentación desde el navegador, y convertir lo que encuentras en contexto que la IA sí puede usar.

Es la diferencia entre que Claude te dé lo genérico y que te dé lo tuyo.

No entran con la compra: se desbloquean cuando acabas las lecciones y entregas las misiones.

Qué hay dentro

Seis bloques, veinticuatro lecciones, veinticuatro misiones corregidas.

  1. 01

    El mapa

    Qué ocurre de verdad entre que alguien escribe una URL y ve tu web. Las piezas, sus nombres y qué hace cada una.

    Puedes mirar una arquitectura web y nombrar cada pieza.

    3 lecciones · 28 min
  2. 02

    Construir con IA sin caja negra

    Terminal, proyecto y un flujo de trabajo con Claude Code que puedes explicar línea a línea.

    Construyes y modificas sin tratar la IA como una caja negra.

    3 lecciones · 30 min
  3. 03

    Dónde viven los datos

    Persistencia, PostgreSQL, Supabase, esquema, CRUD inicial y cómo viaja un dato entre el formulario y la tabla.

    Entiendes dónde viven los datos y cómo viajan.

    4 lecciones · 39 min
  4. 04

    Usuarios y seguridad

    Identidad, sesión, autorización y RLS. La diferencia entre saber quién eres y decidir qué puedes ver.

    Conviertes una web con formulario en una aplicación multiusuario.

    4 lecciones · 41 min
  5. 05

    Ponerlo online

    Depuración, checkpoints de Git, deploy en Vercel, variables de entorno, dominio, DNS y hosting estático.

    Llevas el proyecto a producción y sabes explicar cómo llega el tráfico.

    6 lecciones · 58 min
  6. 06

    Autonomía

    De landing a producto, workflow con IA de verdad, arquitectura final y entrega.

    Puedes repetir el proceso entero en tu siguiente proyecto.

    4 lecciones · 43 min
Ver el temario completo, lección a lección

MÓDULO 1 · EL MAPA

  1. 01La web que ya sabes hacer no está terminada9 min

    «Has hecho la parte que se ve. Ahora vamos a entender todo lo que no se ve.»

    Descubres que una web no es una cosa, sino una pila de capas con nombres propios.

    • request
    • response
    • browser
    • frontend
    • backend
    • database
    • hosting
    • DNS
    • deploy
    Misión
    Dibuja la arquitectura de un proyecto web —el tuyo o uno que uses a diario— nombrando las ocho piezas. A mano, en Figma o en un papel: da igual la herramienta. (10 min)
    Se aprueba si
    Aparecen las ocho piezas con su nombre y una flecha que indique quién habla con quién.
    Evidencia
    Una foto o captura del diagrama.
  2. 02¿Qué coño es un servidor?9 min

    ««Funciona en localhost» no significa que esté online.»

    Entiendes qué ejecuta y qué entrega un servidor, y por qué localhost sólo existe para ti.

    • server
    • process
    • runtime
    • request
    • response
    • static vs dynamic
    • localhost
    Misión
    Arranca tu proyecto en local y abre una web pública cualquiera. Explica en cinco líneas qué está pasando en cada caso y por qué tu URL no la puede abrir nadie más. (8 min)
    Se aprueba si
    La explicación distingue request/response y dice qué aporta el hosting.
    Evidencia
    Tu explicación + una captura de la terminal y del navegador.
  3. 03GitHub, ¿para qué sirve realmente?10 min

    «GitHub guarda tu código; no es automáticamente tu backend.»

    Separas control de versiones de hosting, dos cosas que casi todo el mundo confunde al empezar.

    • git init
    • clone
    • status
    • add
    • commit
    • push
    • remote
    • branch
    Misión
    Crea un repositorio en GitHub para tu proyecto, súbelo y deja al menos tres commits con mensajes que se entiendan sin abrir el código. (10 min)
    Se aprueba si
    El repo existe, es accesible y tiene tres commits con mensajes descriptivos.
    Evidencia
    La URL del repositorio.

MÓDULO 2 · AI BUILDING

  1. 04Claude Code + Warp11 min

    «No le pidas que haga magia. Dale contexto y verifica.»

    Trabajas con IA siguiendo un flujo controlado en el que puedes explicar cada cambio.

    • terminal
    • filesystem
    • package manager
    • scripts
    • context
    • diff
    Misión
    Pídele a Claude Code un cambio pequeño y concreto en tu proyecto. Lee el diff entero antes de aceptarlo y escribe en dos líneas qué ha cambiado y por qué funciona. (12 min)
    Se aprueba si
    Hay un commit con el cambio y una explicación propia del diff, no copiada de la respuesta.
    Evidencia
    El commit + tu explicación.
  2. 05Primera versión10 min

    «Antes de añadir nada, entiende qué archivo hace qué.»

    Creas un frontend funcional y sabes qué papel juega cada carpeta del proyecto.

    • project structure
    • components
    • routes
    • assets
    • dependencies
    • env
    Misión
    Crea el proyecto, arranca el servidor de desarrollo y deja la landing de LeadFlow con su titular y su formulario (todavía sin guardar nada). (15 min)
    Se aprueba si
    El servidor arranca sin errores y la interfaz se ve en el navegador.
    Evidencia
    Captura del navegador con la URL visible + el repo actualizado.
  3. 06Frontend9 min

    «Lo que ves en pantalla no es donde viven los datos.»

    Distingues interfaz, lógica y datos, y sabes qué desaparece al recargar.

    • DOM
    • component
    • CSS
    • state
    • event
    • fetch
    Misión
    Haz que tu formulario tenga estado real: que los campos se controlen, que el botón se deshabilite mientras envía y que aparezca un mensaje al terminar. (10 min)
    Se aprueba si
    Se ve un cambio de estado en pantalla al interactuar.
    Evidencia
    Captura del antes y el después + commit.

MÓDULO 3 · DATOS

  1. 07¿Qué es una base de datos?10 min

    «Si cierras el navegador y quieres que mañana siga ahí, necesitas persistencia.»

    Entiendes qué es persistir y sabes diseñar una tabla con sus campos y su identificador.

    • database
    • schema
    • table
    • row
    • column
    • primary key
    • persistence
    Misión
    Diseña sobre papel la tabla `leads`: qué columnas necesita, de qué tipo es cada una y cuál es su identificador. (10 min)
    Se aprueba si
    Aparecen la tabla, un ID y los campos con su tipo.
    Evidencia
    Captura o foto del esquema.
  2. 08Supabase10 min

    «Supabase no es sólo una base de datos: nos da servicios alrededor.»

    Creas una base PostgreSQL real y entiendes qué servicios vienen con ella.

    • project
    • PostgreSQL
    • table editor
    • SQL
    • API URL
    • keys
    Misión
    Crea el proyecto en Supabase y la tabla `leads` con los campos que diseñaste en la lección anterior. (10 min)
    Se aprueba si
    La tabla existe con sus campos y sus tipos.
    Evidencia
    Captura del esquema en Supabase (sin enseñar ninguna clave).
  3. 09La web recuerda10 min

    «Aquí es donde tu web deja de olvidarlo todo al recargar.»

    Conectas el formulario con la base de datos y ves el dato aparecer en la tabla.

    • insert
    • select
    • query
    • response
    • error handling
    Misión
    Conecta el formulario a Supabase: al enviarlo, la fila tiene que aparecer en la tabla. Muestra confirmación al usuario y gestiona el caso de error. (15 min)
    Se aprueba si
    Hay una fila persistida de verdad y la interfaz responde tanto al éxito como al fallo.
    Evidencia
    Captura de la fila en la tabla + la URL del proyecto.
  4. 10APIs sin humo9 min

    «Una API es el contrato por el que una parte le habla a otra.»

    Lees una petición real y sabes decir qué método usa, qué devuelve y si ha ido bien.

    • endpoint
    • HTTP
    • GET
    • POST
    • PATCH
    • DELETE
    • JSON
    • status codes
    Misión
    Localiza en la pestaña Network la petición que crea un lead. Explica qué método usa, qué manda, qué devuelve y qué status code recibe. (10 min)
    Se aprueba si
    La explicación identifica correctamente método, cuerpo, respuesta y código.
    Evidencia
    Captura de Network + tu explicación.

MÓDULO 4 · USUARIOS Y SEGURIDAD

  1. 11Usuarios11 min

    «¿Cómo sabe la web quién soy?»

    Implementas registro, login y logout, y entiendes qué es una sesión.

    • signup
    • login
    • logout
    • session
    • user id
    • protected UI
    Misión
    Implementa registro, inicio y cierre de sesión en LeadFlow, y haz que el panel sólo se vea con sesión iniciada. (15 min)
    Se aprueba si
    Los tres flujos funcionan y sin sesión no se llega al panel.
    Evidencia
    Capturas de los tres estados + la URL.
  2. 12Seguridad básica10 min

    «Login no significa que los datos estén protegidos.»

    Escribes tu primera policy de RLS y compruebas que un usuario no ve los datos de otro.

    • Row Level Security
    • policies
    • auth.uid()
    • least privilege
    • authorization
    Misión
    Activa RLS en `leads` y escribe la policy que hace que cada usuario sólo vea los suyos. Compruébalo con dos cuentas distintas. (15 min)
    Se aprueba si
    La policy existe y la prueba demuestra que un usuario no ve los leads del otro.
    Evidencia
    Captura de la policy + prueba con dos usuarios + tu explicación.
  3. 13Dashboard10 min

    «Cada estado tiene que existir y tiene que verse.»

    Consumes datos reales y representas los cuatro estados que toda lista tiene.

    • list rendering
    • loading
    • empty
    • error
    • detail
    Misión
    Construye el panel de leads del usuario con los cuatro estados y una vista de detalle. (15 min)
    Se aprueba si
    Se pueden provocar y ver los cuatro estados.
    Evidencia
    La URL + capturas de cada estado.
  4. 14CRUD10 min

    «Cuatro letras que vas a reconocer en todos los productos del resto de tu vida.»

    Completas las cuatro operaciones sobre tus datos y entiendes que ese patrón está en todas partes.

    • create
    • read
    • update
    • delete
    • filters
    Misión
    Completa el CRUD de leads: editar, borrar y al menos un filtro por estado. Comprueba que las policies cubren las cuatro operaciones. (20 min)
    Se aprueba si
    Las cuatro operaciones funcionan y el filtro devuelve lo que debe.
    Evidencia
    La URL + capturas de cada operación.

MÓDULO 5 · SHIP

  1. 15Debugging9 min

    «Cuando algo falla, no empieces reescribiéndolo todo.»

    Tienes un método para encontrar un fallo en vez de dar palos de ciego.

    • console
    • terminal
    • Network
    • logs
    • stack trace
    • reproduce
    • isolate
    Misión
    Rompe algo a propósito en tu proyecto —un nombre de campo, una variable— y arréglalo siguiendo el método. Documenta los cinco pasos. (15 min)
    Se aprueba si
    El bug está resuelto y la explicación reconstruye cómo se localizó.
    Evidencia
    Antes y después + tu explicación.
  2. 16Git checkpoints9 min

    «Un commit es un punto de recuperación. Haz muchos.»

    Usas Git como red de seguridad y sabes leer qué has cambiado antes de guardarlo.

    • git status
    • git diff
    • commit
    • log
    • push
    Misión
    Deja el historial del proyecto limpio: commits pequeños, con mensajes que se entiendan solos, y todo subido al remoto. (8 min)
    Se aprueba si
    El historial de GitHub se lee y se entiende sin abrir el código.
    Evidencia
    Captura del historial de commits.
  3. 17Vercel deploy11 min

    «Has construido todo esto en tu ordenador. Pero nadie más puede entrar.»

    Pones el proyecto online con una URL pública y entiendes qué ha pasado por el camino.

    • build
    • production
    • preview
    • deployment
    • environment variables
    Misión
    Importa tu repositorio en Vercel y despliega. El proyecto tiene que abrirse desde una URL pública. (15 min)
    Se aprueba si
    La URL pública funciona y carga el proyecto.
    Evidencia
    La URL pública.
  4. 18Environment variables9 min

    «Nunca enseñes una clave privada. Nunca la subas al repo.»

    Separas configuración de código y sabes qué puede viajar al navegador y qué no.

    • .env.local
    • Vercel env
    • public vs private
    • secret
    • rotation
    Misión
    Saca toda la configuración del código a variables de entorno, en local y en Vercel. Comprueba que `.env.local` está en `.gitignore`. (10 min)
    Se aprueba si
    El proyecto funciona en producción y no hay ni un secreto en el repositorio.
    Evidencia
    Captura de la configuración en Vercel con los valores ocultos.
  5. 19Dominio + DNS10 min

    «El dominio no es el hosting.»

    Conectas un dominio a tu proyecto y entiendes quién resuelve qué.

    • A
    • AAAA
    • CNAME
    • nameservers
    • DNS propagation
    • SSL/TLS
    Misión
    Conecta un dominio a tu proyecto. Si no tienes uno, documenta paso a paso qué registros harían falta y por qué. (15 min)
    Se aprueba si
    El dominio resuelve, o el documento explica correctamente los registros necesarios.
    Evidencia
    Captura de la configuración DNS o el diagrama.
  6. 20Landing gratis10 min

    «No todas las webs necesitan un servidor. Ni una base de datos.»

    Publicas una landing estática y sabes decidir cuándo no hace falta más.

    • static assets
    • static hosting
    • CDN
    • caché
    • DNS
    Misión
    Publica una landing estática, sin base de datos, en un hosting estático y con su URL pública. (20 min)
    Se aprueba si
    La URL funciona y el proyecto no depende de ningún backend.
    Evidencia
    La URL pública.

MÓDULO 6 · AUTONOMÍA

  1. 21Landing → SaaS10 min

    «Aquí es donde deja de ser una landing.»

    Reconoces la escalera por la que un proyecto crece y sabes en qué peldaño estás.

    • static
    • form
    • database
    • auth
    • dashboard
    • billing
    Misión
    Coge la landing estática de la lección 20 y súbela un peldaño: que su formulario persista en la base de datos. (15 min)
    Se aprueba si
    El dato llega a la tabla desde la landing publicada.
    Evidencia
    La URL + captura de la fila.
  2. 22IA con autonomía11 min

    «Tienes que poder explicar cada cambio. Si no, no es tuyo.»

    Añades una funcionalidad completa con IA manteniendo el control del resultado.

    • plan
    • context
    • incremental changes
    • diff
    • tests
    • documentation
    Misión
    Añade una funcionalidad nueva a LeadFlow trabajando con Claude Code: plan, incrementos, diffs revisados y commits. (20 min)
    Se aprueba si
    La funcionalidad va y explicas cada archivo tocado con tus palabras.
    Evidencia
    Los diffs o commits + tu explicación.
  3. 23Mapa mental10 min

    «Herramienta ↔ capa ↔ problema. Los tres, juntos.»

    Consolidas la arquitectura completa y sabes qué pieza resuelve qué problema.

    • frontend
    • backend
    • data
    • auth
    • authorization
    • deploy
    • DNS
    • Git
    Misión
    Dibuja la arquitectura real de tu proyecto terminado: cada capa, la herramienta que la ocupa y el problema que resuelve. (15 min)
    Se aprueba si
    Aparecen todas las capas con su herramienta y su función.
    Evidencia
    El diagrama.
  4. 24SHIP IT12 min

    «¿Puedes explicar tu producto sin decir «lo hizo la IA»?»

    Entregas el proyecto terminado y demuestras que entiendes lo que has construido.

    • QA
    • build
    • production
    • repo
    • database
    • auth
    • README
    Misión
    Entrega LeadFlow terminado: URL pública, repositorio y una explicación de dos o tres minutos de tu arquitectura y tus decisiones. (45 min)
    Se aprueba si
    URL, repo y explicación completos, y la explicación demuestra comprensión propia.
    Evidencia
    URL + repositorio + vídeo o texto de la explicación.

Así funciona cada lección

010203040506
  1. 01

    Ves

    El problema, el concepto y la demo.

  2. 02

    Lees

    La lectura técnica que da precisión.

  3. 03

    Contestas

    Un control de comprensión.

  4. 04

    Construyes

    La misión, con su criterio.

  5. 05

    Entregas

    Tu evidencia y tu explicación.

  6. 06

    Te corrigen

    Nota y feedback. Si falla, lo rehaces.

Los 5 desbloqueos

Se abren al terminar el curso, no al comprarlo.

01
Template

The Web Starter Template

El template oficial con la estructura base, los componentes, la configuración y la documentación. Tu punto de partida para el siguiente proyecto.

  • Los tres clientes de datos, con la clave privada donde tiene que estar
  • La migración inicial con RLS y las cuatro policies puestas
  • README y .env.example para no volver a empezar de cero
02
Método

The Research Hack

El flujo para investigar un producto, sus competidores y su documentación desde el navegador, y convertir lo que encuentras en contexto accionable para Claude Code.

  • Las cuatro pasadas: producto, documentación, problemas y comprobación
  • Qué anotar de cada competidor y qué ignorar
  • La plantilla que convierte tus notas en contexto que la IA sí usa
03
9 prompts

AI Builder Prompt Pack

Prompts para arquitectura, planificación de features, UI, Supabase, depuración, revisión de diffs, QA, SEO y deploy.

  • Arquitectura, plan de feature, esquema de datos y policies de RLS
  • Depuración, revisión de diffs, QA y despliegue
  • La estructura que hay detrás: contexto → objetivo → restricciones
04
Ahorro

Tool Perks

Descuentos, créditos y códigos preferenciales negociados con las herramientas del stack. Se actualiza con el tiempo.

  • Qué cubre el plan gratuito de cada herramienta del curso
  • Programas de estudiante y de startup a los que puedes optar
  • Las tres preguntas que hay que hacerse antes de pagar por nada
05
Checklist

Ship Checklist

La lista de lanzamiento: repo → env → base de datos → auth → build → deploy → dominio → DNS → SSL → QA → launch.

  • Ocho bloques: código, configuración, datos, auth, build, dominio y estados
  • El comando que busca claves coladas en el historial de Git
  • La comprobación con dos cuentas que casi nadie hace

No entran con la compra: se desbloquean cuando acabas las lecciones y entregas las misiones.

Precio cerrado

75 €

Un pago. Acceso al campus para siempre, con las actualizaciones incluidas.

  • 24 microlecciones en vídeo
  • 24 misiones con corrección y nota
  • Lectura técnica en cada lección
  • 5 desbloqueos al terminar
  • Acceso permanente

Lo que NO te prometemos No te vas a convertir en desarrollador senior en cuatro horas. Lo que te llevas es comprensión, autonomía inicial y un proyecto funcional desplegado con tu nombre.

Empieza hoy

Pagas y en un minuto tienes el campus abierto.

El pago no está disponible ahora mismo. Escríbenos y lo resolvemos.

Preguntas

¿Cuándo empieza?

Cuando pagues. No hay convocatoria: recibes el acceso al campus por correo y empiezas cuando quieras.

¿Cuánto tiempo tengo?

El que quieras. El acceso no caduca y las actualizaciones entran sin pagar de nuevo.

¿Cuánto se tarda de verdad?

Cuatro horas de vídeo más unas seis de misiones. La mayoría lo hace en dos o tres tardes.

¿Quién corrige los ejercicios?

La corrección sigue la rúbrica del curso —funcionalidad, comprensión, implementación, evidencia y autonomía— y devuelve nota y feedback concreto. Cuando falta evidencia para juzgar algo, pasa a revisión de un profesor en vez de inventarse una nota.

¿Necesito saber programar?

Este curso asume que ya haces webs con HTML, CSS e IA. Lo que te falta es la infraestructura de debajo. Si no has tocado código nunca, no es tu punto de partida.

¿Me da acceso al programa de 14 semanas?

No. Un curso relámpago abre su propio curso en el campus y nada más. Son productos distintos.

¿Puedo pedir factura?

Sí. En la pantalla de pago introduces tu NIF o VAT y se emite automáticamente.

¿Resuelto? Pues ya está.

Empezar el curso · 75 €

¿O buscabas algo más grande? Mira los dos programas de 14 semanas: