Ruta Full Stack
0✦ 0

Recursos

Para consultar, no para coleccionar. Un recurso por concepto, y a construir.

Prompts para Claude

La biblioteca de encargos listos para copiar, por fase.

Checklist de revisión

Qué mirar antes de aceptar algo que escribió la IA.

Referencia de por vida (vuelves aquí siempre)

Recurso Qué es Enlace
MDN Web Docs (español) La documentación oficial de la web. La fuente contra la que verificas lo que dice la IA https://developer.mozilla.org/es/
MDN · Aprender desarrollo web Curso gratuito y ordenado de HTML/CSS/JS https://developer.mozilla.org/es/docs/Learn_web_development
web.dev (Google) Buenas prácticas, rendimiento, accesibilidad https://web.dev/
roadmap.sh Mapas visuales del oficio. Úsalo para ver el terreno, no como plan de estudio https://roadmap.sh/full-stack

Fase 0 · El mapa de la web

Recurso Para qué Enlace
How DNS works Cómic interactivo que explica el DNS mejor que cualquier texto https://howdns.works/
MDN · ¿Cómo funciona la web? El viaje de una página, versión oficial https://developer.mozilla.org/es/docs/Learn_web_development/Getting_started/Web_standards
Chrome DevTools Documentación de las herramientas de desarrollador https://developer.chrome.com/docs/devtools/
freeCodeCamp en español Alternativa gratuita en vídeo y texto para repasar conceptos https://www.freecodecamp.org/espanol/
Documentación de Claude Code La herramienta con la que vas a delegar https://docs.claude.com/
Ayuda de Obsidian Para sacarle partido a este vault https://help.obsidian.md/

Fase 1 · El taller

Recurso Para qué Enlace
Learn Git Branching (en español) juego interactivo para ver ramas y merges. El mejor recurso de Git para empezar https://learngitbranching.js.org/?locale=es_ES
Pro Git (libro oficial, en español) referencia completa. Capítulos 1-3 bastan; el resto, cuando haga falta https://git-scm.com/book/es/v2
Oh Shit, Git!? recetas para salir de los líos más comunes de Git https://ohshitgit.com/
GitHub Docs (en español) cómo funciona cada cosa de GitHub https://docs.github.com/es
Manual de gh todos los comandos de la herramienta de GitHub https://cli.github.com/manual/
Documentación de VS Code atajos, panel de Git, terminal integrada https://code.visualstudio.com/docs
Documentación de mise tu gestor de versiones https://mise.jdx.dev/
The Missing Semester (MIT, en inglés) las lecciones de shell y version control https://missing.csail.mit.edu/

Fase 2 · Delegar a la IA

Recurso Para qué Enlace
Documentación de Claude Code modos de permiso, modo plan, buenas prácticas https://docs.claude.com/ (sección Claude Code)
Guía de prompts de Anthropic (en inglés) cómo escribir instrucciones claras; busca prompt engineering https://docs.claude.com/
Documentación de Vercel desplegar desde GitHub, vistas previas, volver atrás https://vercel.com/docs
Planes de Vercel qué incluye el plan gratuito y sus límites (uso no comercial) https://vercel.com/pricing
Enlaces de Google Maps cómo armar un enlace que abre una búsqueda https://developers.google.com/maps/documentation/urls/get-started
Clic para chatear de WhatsApp el formato de los enlaces wa.me; busca clic para chatear https://faq.whatsapp.com/
DevTools: modo dispositivo ver tu web como en un móvil https://developer.chrome.com/docs/devtools/device-mode

Vídeos (YouTube)

Vídeo Canal e idioma Aparece en
How The Web Works - The Big Picture Academind · inglés Fase 0
¿Qué es BACKEND y FRONTEND? La mejor explicación en español EDteam · español Fase 0
Framework vs Librería - La mejor explicación en español EDteam · español Fase 0
Pierde el miedo a la línea de comandos: guía de la terminal Linux desde 0 XgamerCode · español Fase 1
Git Explained in 100 Seconds Fireship · inglés, muy rápido Fase 1
Así funciona ChatGPT (explicado visualmente) Benjamín Cordero · español Fase 2
Publica tu página web GRATIS con Vercel y GitHub Condor Coders · español Fase 2
Qué es una API en Programación y cómo funciona UskoKruM2010 · español API
¿Qué son las BASES DE DATOS? La mejor explicación en español EDteam · español base de datos
Claude Code: curso completo desde cero en 3 horas MoureDev · español, largo: úsalo por capítulos Claude Code
I built a QR code with my bare hands to see how it works Veritasium · inglés código QR
CSS in 100 Seconds Fireship · inglés, muy rápido CSS
IP Address - IPv4 vs IPv6 Tutorial PowerCert · inglés, animado dirección IP
DNS (Sistema de Nombres de Dominio) - Explicado Fácilmente Profe Sang · español, animado DNS
¿Qué es DOMINIO y HOSTING de una Página Web? Explicación Sencilla UskoKruM2010 · español dominio
Visual Studio Code desde CERO: configuración, tips, atajos, extensiones Yoelvis Mulen · español editor de código
Qué es un desarrollador web: front-end, back-end y full-stack campusMVP · español full stack
Curso completo de Git y GitHub desde cero para principiantes MoureDev · español, curso largo para ir por partes Git
Curso de Git y GitHub desde cero midulive · español GitHub
¿Qué es HTML, CSS y JavaScript? Explicado en 4 minutos Mark Tech · español HTML
HTTP y HTTPS desde CERO: explicación visual paso a paso CiberFox · español HTTP / HTTPS
¿Qué es Internet y la Web? Explicado sencillo para principiantes Kity Dev · español internet
JavaScript in 100 Seconds Fireship · inglés, muy rápido JavaScript
Markdown Crash Course Traversy Media · inglés Markdown
Large Language Models explained briefly 3Blue1Brown · inglés, corto y muy visual modelo de lenguaje
Node.js Ultimate Beginner's Guide in 7 Easy Steps Fireship · inglés Node.js
What is a Server? Servers vs Desktops Explained PowerCert · inglés, animado servidor
Linux Directories Explained in 100 Seconds Fireship · inglés, muy rápido sistema de archivos
Cómo funciona una URL y qué es el protocolo HTTP explicado fácil Julián López · español URL

Fase 3 · HTML y CSS

Se completa al generar la fase.