← Flash coursesRELÁ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.

Start today · €75 One payment. Campus access forever, updates included.
  • 4 hof video
  • 24lessons
  • 24missions

Sample videoLas 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.

Taught in Spanish. Video, readings and grading are all in Spanish; the tools and the technical vocabulary are the standard English ones.

IF YOU'RE HERE, THIS IS WHY
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?
WHAT YOU BUILD
  1. Landing
  2. Formulario
  3. Base de datos
  4. Usuarios
  5. Panel privado
  6. CRUD
  7. Deploy
  8. Dominio
WHAT YOU TOUCH
  • Claude Code
  • Warp
  • GitHub
  • Supabase
  • Vercel
  • Cloudflare

And two things you won't see in the index

They live inside the course and open when you finish it.

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.

They don't come with the purchase: they unlock when you finish the lessons and submit the missions.

What's inside

Six blocks, twenty-four lessons, twenty-four graded missions.

  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 lessons · 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 lessons · 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 lessons · 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 lessons · 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 lessons · 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 lessons · 43 min
See the full syllabus, lesson by lesson

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
    Mission
    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)
    You pass if
    Aparecen las ocho piezas con su nombre y una flecha que indique quién habla con quién.
    Evidence
    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
    Mission
    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)
    You pass if
    La explicación distingue request/response y dice qué aporta el hosting.
    Evidence
    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
    Mission
    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)
    You pass if
    El repo existe, es accesible y tiene tres commits con mensajes descriptivos.
    Evidence
    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
    Mission
    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)
    You pass if
    Hay un commit con el cambio y una explicación propia del diff, no copiada de la respuesta.
    Evidence
    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
    Mission
    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)
    You pass if
    El servidor arranca sin errores y la interfaz se ve en el navegador.
    Evidence
    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
    Mission
    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)
    You pass if
    Se ve un cambio de estado en pantalla al interactuar.
    Evidence
    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
    Mission
    Diseña sobre papel la tabla `leads`: qué columnas necesita, de qué tipo es cada una y cuál es su identificador. (10 min)
    You pass if
    Aparecen la tabla, un ID y los campos con su tipo.
    Evidence
    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
    Mission
    Crea el proyecto en Supabase y la tabla `leads` con los campos que diseñaste en la lección anterior. (10 min)
    You pass if
    La tabla existe con sus campos y sus tipos.
    Evidence
    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
    Mission
    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)
    You pass if
    Hay una fila persistida de verdad y la interfaz responde tanto al éxito como al fallo.
    Evidence
    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
    Mission
    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)
    You pass if
    La explicación identifica correctamente método, cuerpo, respuesta y código.
    Evidence
    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
    Mission
    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)
    You pass if
    Los tres flujos funcionan y sin sesión no se llega al panel.
    Evidence
    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
    Mission
    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)
    You pass if
    La policy existe y la prueba demuestra que un usuario no ve los leads del otro.
    Evidence
    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
    Mission
    Construye el panel de leads del usuario con los cuatro estados y una vista de detalle. (15 min)
    You pass if
    Se pueden provocar y ver los cuatro estados.
    Evidence
    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
    Mission
    Completa el CRUD de leads: editar, borrar y al menos un filtro por estado. Comprueba que las policies cubren las cuatro operaciones. (20 min)
    You pass if
    Las cuatro operaciones funcionan y el filtro devuelve lo que debe.
    Evidence
    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
    Mission
    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)
    You pass if
    El bug está resuelto y la explicación reconstruye cómo se localizó.
    Evidence
    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
    Mission
    Deja el historial del proyecto limpio: commits pequeños, con mensajes que se entiendan solos, y todo subido al remoto. (8 min)
    You pass if
    El historial de GitHub se lee y se entiende sin abrir el código.
    Evidence
    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
    Mission
    Importa tu repositorio en Vercel y despliega. El proyecto tiene que abrirse desde una URL pública. (15 min)
    You pass if
    La URL pública funciona y carga el proyecto.
    Evidence
    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
    Mission
    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)
    You pass if
    El proyecto funciona en producción y no hay ni un secreto en el repositorio.
    Evidence
    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
    Mission
    Conecta un dominio a tu proyecto. Si no tienes uno, documenta paso a paso qué registros harían falta y por qué. (15 min)
    You pass if
    El dominio resuelve, o el documento explica correctamente los registros necesarios.
    Evidence
    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
    Mission
    Publica una landing estática, sin base de datos, en un hosting estático y con su URL pública. (20 min)
    You pass if
    La URL funciona y el proyecto no depende de ningún backend.
    Evidence
    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
    Mission
    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)
    You pass if
    El dato llega a la tabla desde la landing publicada.
    Evidence
    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
    Mission
    Añade una funcionalidad nueva a LeadFlow trabajando con Claude Code: plan, incrementos, diffs revisados y commits. (20 min)
    You pass if
    La funcionalidad va y explicas cada archivo tocado con tus palabras.
    Evidence
    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
    Mission
    Dibuja la arquitectura real de tu proyecto terminado: cada capa, la herramienta que la ocupa y el problema que resuelve. (15 min)
    You pass if
    Aparecen todas las capas con su herramienta y su función.
    Evidence
    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
    Mission
    Entrega LeadFlow terminado: URL pública, repositorio y una explicación de dos o tres minutos de tu arquitectura y tus decisiones. (45 min)
    You pass if
    URL, repo y explicación completos, y la explicación demuestra comprensión propia.
    Evidence
    URL + repositorio + vídeo o texto de la explicación.

How every lesson works

010203040506
  1. 01

    Watch

    The problem, the concept, the demo.

  2. 02

    Read

    The technical reading that adds precision.

  3. 03

    Answer

    A comprehension check.

  4. 04

    Build

    The mission, with its criterion.

  5. 05

    Submit

    Your evidence and your explanation.

  6. 06

    Get graded

    Score and feedback. If it's off, you redo it.

The 5 unlocks

They open when you finish the course, not when you buy it.

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

They don't come with the purchase: they unlock when you finish the lessons and submit the missions.

One closed price

€75

One payment. Campus access forever, updates included.

  • 24 video micro-lessons
  • 24 missions with grading and a score
  • A technical reading in every lesson
  • 5 unlocks on completion
  • Permanent access

What we do NOT promise 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.

Start today

You pay and a minute later the campus is open.

Payment is not available right now. Write to us and we'll sort it out.

Questions

When does it start?

When you pay. There is no intake: you get campus access by email and you begin whenever you want.

How long do I have?

As long as you want. Access doesn't expire and updates are included.

How long does it really take?

Four hours of video plus about six of missions. Most people do it across two or three evenings.

Who grades the exercises?

Grading follows the course rubric — functionality, understanding, implementation, evidence and autonomy — and returns a score plus specific feedback. When there isn't enough evidence to judge something, it goes to a human teacher instead of inventing a mark.

Do I need to know how to code?

This course assumes you already build web pages with HTML, CSS and AI. What you're missing is the infrastructure underneath. If you have never touched code, this is not your starting point.

Does it give me access to the 14-week programme?

No. A flash course opens its own course in the campus and nothing else. They are separate products.

Can I get an invoice?

Yes. You enter your VAT number on the payment screen and it is issued automatically.

All clear? Then that's it.

Start the course · €75

Or were you after something bigger? Here are the two 14-week programmes: