Curso online de JavaScript Moderno ES6+: Desarrollo Web Profesional con Proyectos Reales bonificado

💻 Software

• VS Code (gratis) — el editor recomendado. Instala las extensiones ESLint, Prettier y JavaScript (ES6) code snippets.
• Node.js 22 LTS (gratis) — necesario para npm y el entorno de desarrollo local.
• Navegador moderno — Chrome o Firefox con DevTools (ya lo tienes).
• Git (gratis) — para versionar tus proyectos y subirlos a GitHub.
• Alternativas al editor: Sublime Text, Vim o WebStorm (JetBrains, gratis para estudiantes).

?️ Hardware

• Cualquier PC o portátil de los últimos 5 años.
• 4 GB de RAM mínimo — con 8 GB irás más cómodo si tienes varias pestañas abiertas.
• Sistema operativo: Windows 10/11, macOS o Linux. El curso funciona igual en los tres.

🔑 Cuentas necesarias

• GitHub (gratis) — para guardar y mostrar tus proyectos en el portfolio.
• Vercel o Netlify (free tier) — para desplegar las aplicaciones del proyecto final sin coste.
• Opcional: cuenta en APIs públicas que se usen en los ejercicios (OpenWeatherMap, etc.) — todas tienen plan gratuito suficiente.

📚 Conocimientos previos

• HTML y CSS básico — debes saber crear una página con formularios, listas y algo de estilo.
• Nociones mínimas de JavaScript: qué es una variable, un bucle y una función. Si nunca has escrito JS, haz antes un tutorial introductorio gratuito (freeCodeCamp o The Odin Project bastan).
• No hace falta experiencia profesional ni conocer ningún framework.

A lo largo del curso construyes más de 15 aplicaciones. Estos son los proyectos más representativos, ordenados de menor a mayor complejidad:

1. Gestor de tareas interactivo — lista de to-dos con filtros, localStorage y manipulación dinámica del DOM. Caso de uso: cualquier app de productividad interna de empresa.
2. Consumidor de API del tiempo — peticiones fetch a una API REST pública, manejo de estados de carga y errores, presentación de datos en tiempo real. Caso de uso: widget meteorológico para una web corporativa.
3. Carrito de compra con clases ES6 — POO aplicada: clases Producto, Carrito y Pedido con herencia y encapsulamiento. Caso de uso: prototipo de e-commerce ligero.
4. Buscador de repositorios GitHub — async/await, paginación de resultados y debounce en el input. Caso de uso: herramienta interna de búsqueda de recursos de un equipo de desarrollo.
5. SPA modular con webpack — aplicación de una sola página dividida en módulos ES6, bundling y optimización para producción. Caso de uso: base de cualquier proyecto front-end profesional antes de adoptar un framework.
6. Proyecto final integrador — aplicación web completa planificada, desarrollada con arquitectura modular y desplegada en Vercel o Netlify. Caso de uso: pieza central del portfolio para entrevistas de trabajo.

Estos son los tropiezos más frecuentes al aprender JavaScript moderno. Reconocerlos a tiempo te ahorra horas de depuración:

• Usar == en vez de === — la comparación débil hace coerciones de tipo silenciosas (0 == '0' es true). Usa siempre === y configura ESLint para que te avise.
• Mezclar async/await con .then() — no está prohibido, pero combinarlo en el mismo flujo genera código confuso y difícil de depurar. Elige un estilo y sé consistente.
• try/catch vacío en llamadas fetch — capturar el error y no hacer nada (catch(e){}) oculta fallos de red. Muestra siempre un mensaje al usuario o registra el error.
• Subir node_modules a Git — la carpeta puede pesar cientos de MB. Añade node_modules/ a tu .gitignore desde el primer commit.
• Claves API hardcodeadas en el código — si subes tu repo a GitHub con una clave en el fuente, está expuesta. Usa siempre variables de entorno (.env) y añade .env al .gitignore.
• Olvidar que fetch no lanza error en respuestas 4xx/5xx — un 404 o un 500 resuelve la promesa igual. Comprueba siempre response.ok antes de procesar los datos.
• Mutar un array mientras lo recorres — hacer splice dentro de un forEach sobre el mismo array produce saltos de elementos. Trabaja sobre una copia o usa filter.
• Confundir el ámbito de this en arrow functions — las arrow functions no tienen su propio this; usarlas como métodos de objeto cuando necesitas acceder a this rompe la referencia.
• No encadenar correctamente las promesas — olvidar el return dentro de un .then() hace que el siguiente eslabón reciba undefined en vez del valor procesado.
• Webpack mal configurado para producción — dejar el modo en development al desplegar incluye sourcemaps y código sin minificar. Usa mode: 'production' o el script de build de npm.

Recursos gratuitos seleccionados para que avances más rápido y no te pierdas buscando documentación:

⌨️ Atajos y referencias rápidas

• devhints.io/es6 — cheat sheet de ES6+ que cabe en una pantalla: destructuring, spread, clases, promesas.
• overapi.com/javascript — referencia rápida de métodos de Array, String, Object y Date.
• ohshitgit.com — comandos Git para salir de los líos más comunes sin perder trabajo.

📖 Documentación oficial

• developer.mozilla.org (MDN) — la referencia definitiva de JavaScript, DOM y fetch API. Busca cualquier método aquí antes que en cualquier otro sitio.
• nodejs.org/docs — documentación de Node.js 22 LTS para los módulos del entorno de desarrollo.
• webpack.js.org/guides — guías oficiales de webpack para el módulo de bundling.

?️ Herramientas gratuitas

• ESLint + Prettier (extensiones VS Code) — detectan errores y formatean el código automáticamente al guardar.
• gitignore.io — genera un .gitignore correcto para proyectos JavaScript/Node en segundos.
• Postman o Thunder Client (extensión VS Code gratuita) — prueba tus peticiones a APIs REST antes de integrarlas en el código.
• GitHub Copilot — plan gratuito disponible; útil para entender errores y completar fragmentos, no para que escriba el código por ti.

?️ Práctica adicional

• exercism.io — ejercicios de JavaScript con feedback de mentores reales, gratis.
• codewars.com — retos cortos para afianzar métodos de array y lógica asíncrona.
• javascript30.com — 30 proyectos en vanilla JS sin frameworks, complemento perfecto al curso.

👥 Comunidades donde preguntar

• Stack Overflow — busca antes de preguntar; el 90% de tus dudas ya están respondidas.
• r/learnjavascript y r/webdev — comunidades activas en Reddit para dudas conceptuales y revisión de código.
• dev.to — artículos prácticos de la comunidad sobre patrones ES6, async y buenas prácticas.