JavaScript Moderno

Desde cero: HTML, CSS y JavaScript aplicados sobre interfaces reales, con explicaciones paso a paso y laboratorios donde tú escribes solo la lógica.

Programa de 10 capítulos pensado para empezar sin conocimientos previos: cada concepto (etiquetas, padding, variables, eventos, promesas…) se explica antes de practicarlo. Los laboratorios DOM traen una interfaz HTML preparada (inputs, tarjetas, botones, mensajes): tu trabajo es escribir el JavaScript que la selecciona y la transforma. Proyecto transversal: Factura Fácil.

9 capítulos · 170 laboratorios · ~44 h · US$7.99, pago único. El primer capítulo es gratis.

Lo que vas a poder hacer

  • Conectar JavaScript con HTML y CSS mediante el DOM.
  • Responder a eventos y validar formularios sin recargar la página.
  • Consumir APIs con fetch y manejar la asincronía con async/await.
  • Construir componentes básicos con React.
  • Publicar y defender un proyecto completo.

Temario

  1. Capítulo 1 · HTML, CSS y Git (gratis)

    Estructura HTML, CSS responsive con Flexbox y Grid, y control de versiones con Git. Primer proyecto.

    1. Lección: ¿Qué es una página web? (10 min)
    2. Lección: HTML desde cero: etiquetas, atributos y estructura (25 min)
    3. Laboratorio: Completa: el enlace y la imagen (5 min)
    4. Laboratorio: Completa: los atributos que faltan (5 min)
    5. Laboratorio: Ordena: una lista de servicios (5 min)
    6. Laboratorio: Barra de navegación con tres enlaces (10 min)
    7. Quiz: Comprueba: HTML (5 min)
    8. Lección: CSS desde cero: reglas, selectores, colores y texto (25 min)
    9. Laboratorio: Completa: tu primera regla CSS (5 min)
    10. Laboratorio: Tarjeta con sombra (12 min)
    11. Laboratorio: Título con estilo (10 min)
    12. Lección: El modelo de caja: padding, borde y margen (20 min)
    13. Laboratorio: Completa: el modelo de caja (6 min)
    14. Laboratorio: Caja con padding, borde y margen (12 min)
    15. Lección: Flexbox y Grid paso a paso (25 min)
    16. Laboratorio: Completa: centrar con Flexbox (6 min)
    17. Laboratorio: Completa: tres columnas con Grid (6 min)
    18. Laboratorio: Tarjeta de presentación con Flexbox (20 min)
    19. Laboratorio: Galería responsive con Grid (15 min)
    20. Lección: Git y GitHub desde cero (20 min)
    21. Laboratorio: Tabla de precios (12 min)
    22. Laboratorio: Formulario de contacto (12 min)
    23. Quiz: Comprueba: CSS y Git (5 min)
    24. Enlace: Git y GitHub: guía de inicio (5 min)
    25. Lección: Glosario del curso (5 min)
    26. Quiz: Quiz · HTML, CSS y Git (10 min)

  2. Capítulos 2-3 · Fundamentos de JavaScript (en el curso completo)

    Variables, tipos, conversiones, operadores, template literals, condicionales y funciones. Las dos unidades se cubrieron juntas.

    1. Lección: ¿Qué es JavaScript y dónde se escribe? (15 min)
    2. Lección: Variables y tipos de datos (20 min)
    3. Laboratorio: Completa: const o let (6 min)
    4. Laboratorio: Saludo personalizado (8 min)
    5. Lección: Conversiones de tipos (15 min)
    6. Laboratorio: Arma la línea: de texto a número (5 min)
    7. Laboratorio: De texto a número (8 min)
    8. Lección: Operadores y expresiones (15 min)
    9. Laboratorio: Subtotal de compra (8 min)
    10. Lección: Condicionales: tomar decisiones (15 min)
    11. Laboratorio: Ordena: ¿aprobó? (6 min)
    12. Quiz: Comprueba: variables y tipos (5 min)
    13. Laboratorio: Mayor de edad (10 min)
    14. Lección: Funciones: reutilizar lógica (20 min)
    15. Laboratorio: Completa: una función flecha (5 min)
    16. Laboratorio: Función de descuento (12 min)
    17. Laboratorio: Clasificar temperatura (8 min)
    18. Laboratorio: Resumen de factura con template literal (8 min)
    19. Laboratorio: Etiqueta de stock (8 min)
    20. Lección: Arrays y objetos: guardar varios datos (20 min)
    21. Laboratorio: Completa: el mensaje con template literal (5 min)
    22. Laboratorio: Completa: precios con descuento (6 min)
    23. Quiz: Comprueba: funciones y arrays (5 min)
    24. Laboratorio: Sumar los precios de un array (8 min)
    25. Laboratorio: Lista desde un array (10 min)
    26. Laboratorio: Tarjeta desde un objeto (10 min)
    27. Quiz: Quiz · Fundamentos de JavaScript (10 min)

  3. Capítulo 4 · DOM (en el curso completo)

    querySelector(), textContent, atributos, classList y la cotización visible de Factura Fácil.

    1. Lección: ¿Qué es el DOM? (12 min)
    2. Lección: Seleccionar elementos (15 min)
    3. Laboratorio: Completa: encontrar el título (5 min)
    4. Laboratorio: Completa: pintar de azul todos los títulos (6 min)
    5. Lección: Leer y modificar: texto, valores, atributos, clases y elementos nuevos (25 min)
    6. Laboratorio: Completa: leer lo que hay en la caja (5 min)
    7. Quiz: Comprueba: el DOM (5 min)
    8. Laboratorio: Completa: agregar un elemento a la lista (6 min)
    9. Laboratorio: Completa: encender el modo oscuro (5 min)
    10. Laboratorio: Completa: cambiar la imagen (5 min)
    11. Laboratorio: Arma la línea: crear un elemento (5 min)
    12. Laboratorio: Ordena: pintar la lista desde un array (6 min)
    13. Quiz: Comprueba: crear y modificar elementos (5 min)
    14. Laboratorio: Cambiar el título (5 min)
    15. Laboratorio: Imagen dinámica (6 min)
    16. Laboratorio: Enlace externo seguro (6 min)
    17. Laboratorio: Modo oscuro (5 min)
    18. Laboratorio: Lista de servicios desde un array (12 min)
    19. Laboratorio: Tarjetas de productos (15 min)
    20. Laboratorio: Contador de caracteres (5 min)
    21. Laboratorio: Tareas completadas (10 min)
    22. Laboratorio: Sumar la columna de precios (12 min)
    23. Laboratorio: Resaltar los servicios caros (12 min)
    24. Laboratorio: Cotización visible · Factura Fácil (20 min)
    25. Quiz: Quiz · DOM (10 min)

  4. Capítulo 5 · Eventos y formularios (en el curso completo)

    addEventListener(), clics, eventos de formulario, preventDefault() y validación. Incluye el primer parcial.

    1. Lección: Eventos desde cero (20 min)
    2. Laboratorio: Completa: que el botón responda (6 min)
    3. Laboratorio: Arma la línea: escuchar el clic (6 min)
    4. Laboratorio: Completa: contar mientras se escribe (6 min)
    5. Laboratorio: Completa: el total al elegir cantidad (6 min)
    6. Laboratorio: Completa: un solo escuchador para todos los botones (7 min)
    7. Quiz: Comprueba: eventos (5 min)
    8. Lección: Formularios: enviar sin recargar y validar (20 min)
    9. Laboratorio: Completa: que el formulario no recargue (6 min)
    10. Laboratorio: Completa: leer lo que se escribió (6 min)
    11. Laboratorio: Ordena: enviar sin recargar (6 min)
    12. Quiz: Comprueba: formularios (5 min)
    13. Laboratorio: Botón que saluda (8 min)
    14. Laboratorio: Validar que no falte nada (15 min)
    15. Laboratorio: Contador de caracteres con aviso (15 min)
    16. Laboratorio: Contador con botones (8 min)
    17. Laboratorio: Mostrar u ocultar contraseña (8 min)
    18. Laboratorio: Enviar sin recargar (10 min)
    19. Laboratorio: Filtrar la lista mientras se escribe (15 min)
    20. Laboratorio: Botón que se bloquea al enviar (12 min)
    21. Laboratorio: Total según la cantidad (12 min)
    22. Laboratorio: Validar correo (10 min)
    23. Laboratorio: Total en tiempo real (8 min)
    24. Laboratorio: Factura Fácil: calcular al hacer clic (15 min)
    25. Laboratorio: Lista de compras (12 min)
    26. Examen: Primer parcial · Capítulos 1-5 (45 min)

  5. Capítulo 6 · JavaScript asíncrono (en el curso completo)

    Temporizadores, promesas, async/await y manejo de errores aplicados a eventos y formularios: botones que esperan, envíos con validación, búsquedas con debounce y varias peticiones a la vez. Repasa el Capítulo 5 mientras avanzas.

    1. Lección: Síncrono y asíncrono: por qué existe la asincronía (15 min)
    2. Laboratorio: ¿En qué orden se imprime? (6 min)
    3. Lección: Temporizadores: setTimeout, setInterval y cómo detenerlos (15 min)
    4. Laboratorio: Completa: hacer algo más tarde (5 min)
    5. Laboratorio: Completa: repetir y detener (6 min)
    6. Laboratorio: Aviso que desaparece (12 min)
    7. Laboratorio: Cuenta regresiva con inicio y detención (15 min)
    8. Lección: Promesas (18 min)
    9. Laboratorio: Completa: fabricar una promesa (7 min)
    10. Laboratorio: Ordena: encadenar con then (6 min)
    11. Quiz: Comprueba: promesas (5 min)
    12. Laboratorio: Promesa con retraso (8 min)
    13. Laboratorio: Encadenar con then (8 min)
    14. Lección: async/await y manejo de errores (20 min)
    15. Laboratorio: Completa: esperar el resultado (6 min)
    16. Quiz: Comprueba: asincronía (5 min)
    17. Laboratorio: Arma la línea: esperar los datos (5 min)
    18. Laboratorio: Completa: pase lo que pase (6 min)
    19. Laboratorio: async/await con try/catch (10 min)
    20. Laboratorio: Cargando… (10 min)
    21. Laboratorio: Error visible (10 min)
    22. Lección: Eventos que esperan: botones, estados y delegación (18 min)
    23. Laboratorio: Guardar sin doble clic (12 min)
    24. Laboratorio: Favoritos con delegación de eventos (15 min)
    25. Laboratorio: Municipios según la provincia (15 min)
    26. Lección: Formularios asíncronos: validar, enviar y responder (20 min)
    27. Laboratorio: Registro con validación y servidor (20 min)
    28. Lección: Buscar mientras escribes: input y debounce (15 min)
    29. Laboratorio: Buscador con espera (debounce) (15 min)
    30. Lección: Varias promesas a la vez: all, allSettled, race y reintentos (18 min)
    31. Laboratorio: Completa: pedir tres cosas a la vez (7 min)
    32. Laboratorio: Varias promesas con Promise.all (12 min)
    33. Laboratorio: Panel con Promise.allSettled (15 min)
    34. Laboratorio: Tiempo límite con Promise.race (10 min)
    35. Laboratorio: Reintentar hasta que funcione (10 min)
    36. Laboratorio: Factura Fácil: guardar la cotización (25 min)
    37. Quiz: Quiz · Asíncrono (20 min)

  6. Capítulo 7 · APIs REST (en el curso completo)

    fetch(), JSON, consumo de datos y renderizado de tarjetas o listas.

    1. Lección: ¿Qué es una API REST? (15 min)
    2. Lección: Errores y códigos de estado: 200, 404 y 500 (18 min)
    3. Laboratorio: Completa: pedir los productos (6 min)
    4. Laboratorio: Arma la línea: pedir y esperar (5 min)
    5. Laboratorio: Contar los productos del catálogo (12 min)
    6. Lección: fetch paso a paso (20 min)
    7. Laboratorio: Ordena: los pasos de una llamada (7 min)
    8. Laboratorio: Completa: avisar cuando no existe (6 min)
    9. Quiz: Comprueba: fetch (5 min)
    10. Laboratorio: El producto más caro (15 min)
    11. Laboratorio: Buscar con aviso de no encontrado (15 min)
    12. Laboratorio: Mostrar «Cargando…» y quitarlo (12 min)
    13. Laboratorio: Consumir una API (15 min)
    14. Lección: Enviar datos a una API: POST, PUT y DELETE (18 min)
    15. Laboratorio: Completa: solo los nombres del catálogo (6 min)
    16. Laboratorio: Solo los productos baratos (12 min)
    17. Laboratorio: Completa: registrar un pedido (7 min)
    18. Laboratorio: Completa: sobrevivir a un fallo de red (6 min)
    19. Laboratorio: Catálogo con total (15 min)
    20. Laboratorio: Ficha del usuario 1 (12 min)
    21. Quiz: Comprueba: REST (5 min)
    22. Laboratorio: Tarjetas de usuarios (15 min)
    23. Laboratorio: Buscar usuario por id (15 min)
    24. Laboratorio: Estado de carga (15 min)
    25. Quiz: Quiz · APIs REST (8 min)

  7. Capítulo 8 · React (en el curso completo)

    Componentes, JSX, props y estado básico.

    1. Lección: React: por qué existe y cómo se piensa (25 min)
    2. Lección: JSX: HTML dentro de JavaScript (18 min)
    3. Laboratorio: Completa: tu componente saluda (6 min)
    4. Laboratorio: Ordena: las partes de un componente (6 min)
    5. Laboratorio: Completa: pasar datos con props (6 min)
    6. Laboratorio: Tarjeta de producto con props (15 min)
    7. Quiz: Comprueba: componentes y props (5 min)
    8. Laboratorio: Tu primer componente (15 min)
    9. Laboratorio: Completa: una lista con map (7 min)
    10. Laboratorio: Lista de tareas con map (15 min)
    11. Laboratorio: Lista de productos desde un array de objetos (15 min)
    12. Laboratorio: Lista con props (12 min)
    13. Lección: Estado y eventos en React: useState paso a paso (20 min)
    14. Laboratorio: Arma la línea: declarar el estado (6 min)
    15. Laboratorio: Completa: el contador que sí cambia (7 min)
    16. Laboratorio: Contador con sumar y restar (15 min)
    17. Laboratorio: Mostrar y ocultar los detalles (15 min)
    18. Laboratorio: Contador con useState (15 min)
    19. Laboratorio: Completa: escribir y ver al instante (8 min)
    20. Laboratorio: Completa: mostrar solo si está disponible (7 min)
    21. Laboratorio: Campo controlado con contador (15 min)
    22. Laboratorio: Filtrar la lista con estado (18 min)
    23. Laboratorio: Agregar tareas con React (20 min)
    24. Quiz: Comprueba: estado (5 min)
    25. Quiz: Quiz · React (8 min)

  8. Capítulo 9 · APIs del navegador (en el curso completo)

    Local Storage, geolocalización, Canvas y multimedia. Incluye el segundo parcial.

    1. Lección: APIs del navegador: almacenamiento, ubicación, dibujo y multimedia (25 min)
    2. Lección: Guardar datos en el navegador: localStorage paso a paso (18 min)
    3. Laboratorio: Completa: guardar y recuperar el nombre (5 min)
    4. Laboratorio: Arma la línea: guardar el tema (5 min)
    5. Laboratorio: Completa: guardar una lista (6 min)
    6. Laboratorio: Completa: un valor por defecto (6 min)
    7. Laboratorio: Ordena: recordar el tema elegido (7 min)
    8. Quiz: Comprueba: almacenamiento (5 min)
    9. Laboratorio: Lista de tareas que no se pierde (18 min)
    10. Laboratorio: Contador de visitas (10 min)
    11. Laboratorio: Guardar el tema (8 min)
    12. Lección: Fechas, monedas y enlaces con datos (16 min)
    13. Laboratorio: Completa: precio en pesos dominicanos (6 min)
    14. Laboratorio: Completa: leer los datos del enlace (5 min)
    15. Laboratorio: Precios con formato dominicano (12 min)
    16. Laboratorio: Mostrar la categoría del enlace (12 min)
    17. Laboratorio: Recordar el nombre (8 min)
    18. Laboratorio: Geolocalización (10 min)
    19. Laboratorio: Dibujar en Canvas (10 min)
    20. Laboratorio: Completa: dibujar un rectángulo (6 min)
    21. Laboratorio: Gráfico de barras en canvas (18 min)
    22. Quiz: Comprueba: APIs del navegador (5 min)
    23. Laboratorio: Control de audio (10 min)
    24. Laboratorio: Reproductor con estado (12 min)
    25. Examen: Segundo parcial · Capítulos 6-9 (45 min)

  9. Capítulo 10 · Cierre y publicación (en el curso completo)

    Accesibilidad, buenas prácticas, GitHub, deploy y defensa del proyecto final.

    1. Lección: Accesibilidad y buenas prácticas (20 min)
    2. Lección: HTML semántico: elegir la etiqueta correcta (18 min)
    3. Laboratorio: Completa: las etiquetas que dicen algo (5 min)
    4. Laboratorio: Completa: los títulos en orden (5 min)
    5. Laboratorio: Ordena: la estructura de la página (6 min)
    6. Laboratorio: Completa: la etiqueta y su campo (5 min)
    7. Laboratorio: Completa: lo que oye un lector de pantalla (5 min)
    8. Laboratorio: Arma la línea: nombrar el botón del menú (5 min)
    9. Quiz: Comprueba: accesibilidad (5 min)
    10. Laboratorio: Accesibilidad básica (8 min)
    11. Laboratorio: Completa: un menú que avisa si está abierto (7 min)
    12. Laboratorio: Formulario accesible de principio a fin (16 min)
    13. Laboratorio: Una tabla que se lee bien (14 min)
    14. Laboratorio: Menú accesible con teclado (16 min)
    15. Lección: Publicar con GitHub Pages (15 min)
    16. Lección: Que cargue rápido y se encuentre (16 min)
    17. Laboratorio: Completa: el idioma y la descripción (5 min)
    18. Laboratorio: Completa: una imagen que no frena la página (5 min)
    19. Laboratorio: Metadatos para compartir el proyecto (12 min)
    20. Laboratorio: La página de inicio, bien estructurada (18 min)
    21. Laboratorio: Modo claro y oscuro que se recuerda (18 min)
    22. Quiz: Comprueba: rendimiento y publicación (5 min)
    23. Enlace: GitHub Pages: documentación oficial (5 min)
    24. Lección: Defensa del proyecto final (10 min)
    25. Quiz: Quiz · Cierre y publicación (8 min)

Antes de empezar

  • Ganas de teclear: cada clase tiene varios retos prácticos.
  • Navegador moderno (Chrome, Edge o Firefox).

Prueba la primera lección gratis, sin crear cuenta

También en: English