Cómo usar este documento

Este plan está organizado en ~8 semanas + una etapa de preparación inicial, cada una con una estructura clara y repetible:

• Objetivos — lo que deberías dominar al terminar la semana.
• Temario con checkboxes — marcá cada tema a medida que lo completes. Tu progreso se guarda automáticamente en el navegador.
• Proyecto de cierre Obligatorio — no avances a la siguiente semana sin completarlo.
• Videos recomendados Opcional — material en español para acompañar tu aprendizaje.
• Documentación oficial Lectura Opcional — las fuentes primarias de cada tecnología.

Los temas no tienen todos la misma complejidad. HTML se absorbe rápido; JavaScript y React requieren más práctica y repetición.

Las etiquetas "Día X-Y" en cada sección representan un ritmo sugerido de estudio, no una fecha límite. Si un tema te lleva más tiempo del estimado, está perfecto — lo importante es no saltear temas y completar cada proyecto antes de avanzar.

¿Cómo trabaja un Fullstack Developer hoy?

Antes de arrancar, es importante que entiendas para qué estás aprendiendo cada herramienta. Este es el flujo real de trabajo:

Resumen General

Objetivo

Tener tu entorno de desarrollo completamente listo para que cuando empieces la Semana 1, solo tengas que enfocarte en aprender.

Editor de código: Visual Studio Code

• Descargar e instalar VS Code: https://code.visualstudio.com
• Familiarizarte con la interfaz: explorador de archivos, terminal integrada, paleta de comandos (Ctrl+Shift+P)
• Configurar tema oscuro (o el que prefieras)
• Activar Auto Save: File → Auto Save

Extensiones de VS Code recomendadas

• HTML CSS Support — autocompletado de clases CSS en HTML
• Live Server — servidor local con recarga automática
• Prettier - Code Formatter — formatea tu código automáticamente
• ESLint — detecta errores y malas prácticas en JS/React
• Tailwind CSS IntelliSense — autocompletado para Tailwind
• ES7+ React/Redux/React-Native snippets
• Python (Microsoft) — soporte completo para Python y Django
• Thunder Client — cliente REST dentro de VS Code
• Error Lens — muestra errores directamente en la línea de código
• GitLens — información de Git integrada en el editor

Node.js y npm

• Descargar e instalar Node.js (versión LTS) desde https://nodejs.org
• Asegurate de marcar "Add to PATH" durante la instalación
• npm se instala automáticamente junto con Node.js

Python

• Descargar e instalar Python 3.13+ desde https://www.python.org/downloads/
• Marcar "Add Python to PATH" durante la instalación

Git y GitHub

• Descargar e instalar Git desde https://git-scm.com/downloads
• Crear una cuenta en GitHub: https://github.com

Git Workflow Básico

• Configurar Git: git config --global user.name "Tu Nombre" y git config --global user.email "tu@email.com"
• Flujo básico: git init, git add, git commit, git push
• Branches: git branch, git checkout -b, git merge
• Conventional Commits: feat:, fix:, docs:, refactor: — mensajes descriptivos siempre
• .gitignore: qué archivos NO commitear (node_modules/, .env, __pycache__/)
• Pull Requests en GitHub: crear, describir, revisar, mergear

PostgreSQL (lo vas a necesitar en Semana 5)

• Descargar e instalar PostgreSQL 16+ desde https://www.postgresql.org/download/
• Recordar la contraseña del usuario "postgres" y dejar marcado pgAdmin 4 durante la instalación
• Verificar que funciona: abrir pgAdmin y conectarse al servidor local

Navegador

• Usar Google Chrome como navegador de desarrollo

Objetivos de la Semana

Construir una página web completa, semántica, accesible y responsive utilizando Tailwind CSS.

Día 1: HTML5 Completo

HTML se aprende rápido porque es declarativo. Un día de práctica enfocada es suficiente.

• Estructura del documento: DOCTYPE, head, body, meta
• Etiquetas de texto: h1-h6, p, span, strong, em, blockquote
• Listas: ul, ol, dl
• Enlaces e imágenes: a, img, figure, figcaption
• HTML semántico: header, nav, main, section, article, aside, footer
• Tablas: table, thead, tbody, caption, scope
• Formularios: form, input (todos los types), select, textarea, datalist
• Validación nativa: required, pattern, min/max
• Multimedia: video, audio, picture, srcset
• Meta tags: charset, viewport, description, og:tags
• Accesibilidad: roles ARIA, aria-label, tabindex
• Herramientas: Lighthouse, validador W3C

Día 2-3: CSS3 Fundamentos + Layouts

CSS requiere más práctica que HTML, especialmente Flexbox y Grid.

• Selectores: elemento, clase, ID, atributo, pseudo-clases, pseudo-elementos
• Box Model: margin, padding, border, box-sizing
• Especificidad y cascada
• Unidades: px, rem, em, vw, vh, %, clamp(), min(), max()
• Variables CSS: --color-primary, var()
• Tipografía: font-family, @font-face, Google Fonts
• Flexbox completo: justify, align, wrap, grow, shrink, order, gap
• CSS Grid completo: template-rows/columns, areas, auto-fit, minmax()
• Cuándo usar Flexbox vs Grid (y combinarlos)
• Media queries y Mobile First design
• Container queries (@container)
• Animaciones: transition, @keyframes, animation, transform

Día 4-5: Tailwind CSS v4

Con CSS fresco, Tailwind se entiende rápido: las mismas propiedades CSS como clases utility.

• Instalación y configuración de Tailwind CSS v4
• Filosofía utility-first
• Clases esenciales: spacing, typography, colors, flexbox, grid
• Responsive con prefijos: sm:, md:, lg:, xl:
• Dark mode con dark:
• Componentes reutilizables con @apply
• Tailwind + PostCSS: configuración profesional

Día 6-7: Proyecto de Cierre

Objetivos de la Semana

JavaScript es el lenguaje que conecta todo. La curva es más pronunciada que HTML/CSS, por eso dedicamos 2 semanas completas.

Día 1-2: Fundamentos del Lenguaje

Entender bien scope y closures ahora te ahorra dolores de cabeza con React después.

• Variables: let, const (nunca más var). Hoisting y temporal dead zone
• Tipos primitivos: string, number, boolean, null, undefined, symbol, bigint
• Operadores: aritméticos, comparación (=== vs ==), lógicos, nullish coalescing (??)
• Estructuras de control: if/else, switch, for, for...of, for...in, while
• Funciones: declaration, expression, arrow functions, parámetros default
• Scope y closures

Día 3-4: Estructuras de Datos y Métodos Modernos

Los métodos de array (map, filter, reduce) los vas a usar constantemente en React.

• Arrays: map, filter, reduce, find, some, every, flat, at()
• Objetos: propiedades, métodos, Object.keys/values/entries
• Desestructuración de arrays y objetos
• Spread (...) y rest operator
• Template literals
• Sets y Maps — cuándo usar cada uno
• Optional chaining (?.) y nullish coalescing (??)

Día 5-6: DOM, Eventos y Manipulación

• El DOM: querySelector, getElementById, createElement, appendChild
• Eventos: addEventListener, event delegation, bubbling vs capturing
• Modificar estilos y clases: classList.add/remove/toggle
• Crear elementos dinámicos y actualizar el DOM

Día 7: Práctica y Refuerzo

• Resolver mín. 10 ejercicios de arrays/objetos (exercism.org o codewars.com)
• Construir un mini componente interactivo con JS puro
• Repasar closures, scope y this

Objetivos de la Semana

Completar tu dominio de JavaScript con asincronía, modularización y una app funcional completa con JS puro.

Día 1-3: Asincronía + JS Avanzado

La asincronía es uno de los temas que más cuesta. Dedicale tres días sólidos.

• Callbacks y el callback hell
• Promises: new Promise, then, catch, finally, Promise.all, Promise.allSettled
• Async/await: sintaxis moderna para asincronía
• Fetch API: GET, POST, headers, manejo de errores
• Consumir APIs reales: JSONPlaceholder, PokéAPI
• ES Modules: import/export, named vs default exports
• Clases y prototipos (base conceptual para React)
• Error handling: try/catch, custom errors
• JSON: parse, stringify
• localStorage y sessionStorage
• Debugging: console methods, DevTools, breakpoints
• Introducción a Node.js y npm

Día 4-7: Proyecto de Cierre (Semanas 2-3)

Objetivos de la Semana

Aprender React desde los fundamentos hasta un nivel productivo con hooks de React 19, routing, estado global y herramientas profesionales.

Día 1-2: Fundamentos de React 19

• ¿Qué es React? Virtual DOM y reconciliación
• Crear proyecto con Vite: npm create vite@latest
• JSX: sintaxis, expresiones, renderizado condicional, listas con key
• Componentes funcionales: props, children, composición
• useState: estado local, actualizaciones
• useEffect: efectos secundarios, cleanup, dependency array
• Eventos: onClick, onChange, onSubmit

Día 3-4: Hooks Avanzados

• useRef: referencias al DOM y valores persistentes
• useMemo y useCallback: optimización
• useReducer: estado complejo con acciones
• Custom hooks: crear hooks reutilizables

Día 5-6: TypeScript Esencial

• Tipos básicos: string, number, boolean, array, object, any vs unknown
• Interfaces y types: cuándo usar cada uno
• Genéricos básicos: Array<T>, Promise<T>
• TypeScript con React: tipar props, estado, eventos
• Configurar Vite con TypeScript: npm create vite@latest -- --template react-ts

Día 7: Herramientas de Desarrollo

• React DevTools: instalar extensión de Chrome, inspeccionar componentes, props y estado
• Chrome DevTools: Network tab para debuggear API calls, Console para errores
• React DevTools Profiler: identificar re-renders innecesarios

Día 8-9: Routing, Estado Global y Data Fetching

• React Router v7: createBrowserRouter, RouterProvider
• Rutas: nested routes, layout routes
• Navegación: Link, NavLink, useNavigate, useParams
• Loaders y Actions de React Router
• Rutas protegidas y lazy loading con Suspense
• Context API: createContext, useContext
• Zustand: estado global minimalista
• TanStack Query: cache, invalidation, optimistic updates
• Variables de entorno: .env, VITE_API_URL

Día 10-11: UI Profesional

• Tailwind CSS en React + Vite
• Componentes UI: shadcn/ui
• Formularios: React Hook Form + Zod
• Notificaciones: react-hot-toast o sonner
• Accesibilidad en React: labels en formularios, alt en imágenes, focus management
• Navegación con teclado: tabIndex, manejo de focus en modales y dropdowns
• Testing con Vitest: configuración, test unitarios, describe/it/expect
• React Testing Library: render, screen, userEvent, queries accesibles (getByRole, getByLabelText)
• Qué testear: interacciones de usuario, no detalles de implementación
• Build y deploy en Vercel

Día 12-14: Proyecto de Cierre

Objetivos de la Semana

Aprender Python orientado al desarrollo web y construir una API REST profesional con Django 6 y DRF.

Día 1-2: Python para Web (Crash Course)

Si ya sabés JavaScript, Python se absorbe en un día.

• Sintaxis: variables, tipos, f-strings, operadores
• Estructuras: listas, diccionarios, tuplas, sets, comprehensions
• Funciones: *args, **kwargs, decoradores, lambda
• POO: clases, herencia, @property
• Módulos, pip, virtual environments (venv)
• Type hints
• Excepciones y context managers (with)

Día 3-5: Django 6 Fundamentos + DRF

• Instalación: python -m venv env, pip install django
• Proyecto vs App: startproject, startapp
• Patrón MTV: Models, Templates, Views
• URLs: path(), include()
• Modelos y ORM: Field types, relaciones (FK, M2M, OneToOne)
• Migraciones: makemigrations, migrate
• Admin panel: register, ModelAdmin
• Django 6 Template partials: {% partialdef %}
• Instalar y configurar DRF
• Serializers: ModelSerializer, validación
• Views: APIView, GenericAPIView, ViewSets
• Routers: DefaultRouter
• Paginación, filtros, búsqueda, ordering
• Documentación: drf-spectacular (Swagger)

Día 6-7: Autenticación, Seguridad y DB

• JWT: djangorestframework-simplejwt
• Login, registro, refresh tokens, blacklist
• Permisos por objeto: IsOwner, custom
• CORS: django-cors-headers
• Django 6 Content Security Policy (CSP) nativo
• Variables de entorno: django-environ
• PostgreSQL: configuración con Django
• Queries avanzadas: annotate, aggregate, Q, F
• Optimización: select_related, prefetch_related
• Django 6 Tasks framework: @task, enqueue()
• Upload de archivos: ImageField, FileField
• Testing: TestCase, APITestCase

Día 8: Seguridad Web Básica

Entender seguridad no es opcional — es parte del trabajo de un fullstack developer. Django te protege de mucho, pero necesitás ENTENDER de qué te está protegiendo.

• XSS (Cross-Site Scripting): qué es, cómo Django auto-escapa templates, cómo React previene inyección en JSX
• CSRF (Cross-Site Request Forgery): qué es, cómo funciona {% csrf_token %} en Django
• SQL Injection: qué es, por qué el ORM de Django te protege, por qué NUNCA usar queries raw con input del usuario
• HTTPS: por qué es obligatorio en producción, HSTS
• Variables de entorno: NUNCA hardcodear secrets, API keys o contraseñas en el código

Día 9-10: Proyecto de Cierre

Objetivos de la Semana

Integrar todo en una aplicación fullstack real. Este proyecto es tu carta de presentación profesional.

Día 1-2: Arquitectura y Setup

• Planificación: wireframes, modelo de datos, endpoints
• Repos separados (frontend / backend)
• Backend: Django 6 + DRF + PostgreSQL + JWT + CORS
• Frontend: React 19 + Vite + Tailwind v4 + React Router v7
• Git: repos, .gitignore, primer commit
• Variables de entorno: .env

Día 3-5: Backend Completo

• Modelos con relaciones y validaciones
• Serializers con nested data
• ViewSets con permisos granulares
• JWT: registro, login, refresh, logout
• Filtros, búsqueda, paginación
• Upload de archivos
• Tests para endpoints críticos

Día 6-8: Frontend Completo

• Axios con interceptores JWT
• AuthContext: login, logout, rutas protegidas
• Páginas: Home, Login, Register, Dashboard, Detail, Profile
• Formularios: React Hook Form + Zod + Actions React 19
• Estado global con Zustand
• TanStack Query: cache, invalidación
• Responsive con Tailwind v4
• Error handling: error boundaries, toasts

Día 9-10: Testing, Deploy y Pulido

• Testing frontend: Vitest + Testing Library
• Testing backend: pytest-django
• Deploy backend: Railway o Render
• Deploy frontend: Vercel o Netlify
• README profesional con screenshots
• Demo: video corto recorriendo la app

REFERENCIAS Y RECOMENDACIONES FINALES

Metodología Sugerida

• Regla 80/20: 20% teoría + 80% práctica.
• No avances sin entender: usá los checkboxes para identificar puntos débiles.
• Escribí código todos los días.
• Git desde el día 1: commiteá todo.
• La documentación oficial es tu mejor amiga — los videos son complemento.

Creadores de Contenido Recomendados

Tech Stack Completo

¿Qué sigue después?

Completar este plan te deja listo para un rol de Fullstack Developer Junior. Desde ahí, tenés varias direcciones para crecer: