Cómo usar este documento

Este plan está organizado en 6 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.

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

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: 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 4: 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 5-7: UI Profesional + Proyecto

• Tailwind CSS en React + Vite
• Componentes UI: shadcn/ui
• Formularios: React Hook Form + Zod
• Notificaciones: react-hot-toast o sonner
• Testing: Vitest + React Testing Library
• Build y deploy en Vercel

Objetivos de la Semana

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

Día 1: 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 2-3: 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 4: 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 5-7: 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: 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 2-3: 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 4-5: 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 6-7: 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