Manipulación del DOM JS - Curso práctico
por Juan Ortiz
Construye un reproductor de música desde cero con HTML, CSS y JavaScript, practicando la selección de elementos del DOM, los eventos y los controles de audio.
Recomendado, valoración editorial 4 de 5
verificado 2026-10-01 — sigue siendo gratis en Udemy
Empezar en UdemyRespuesta rápida
Curso gratis de Programación de nivel principiante en Udemy impartido por Juan Ortiz (1 h 18 min). Nuestra valoración: 4/5, recomendado. Comprobamos que sigue siendo gratis el 1 de octubre de 2026.
- Veredicto
- 4/5 · Recomendado
- Para quién
- Principiantes en desarrollo web que ya conocen lo básico de HTML, CSS y JavaScript y quieren practicar con un proyecto completo.
- Nivel
- Principiante
- Duración
- 1 h 18 min · 20 lecciones
- Precio
- Gratis en Udemy
- Autor
- Juan Ortiz
- Plan sugerido
- 1 sem. · 2.5 h/sem.
- Verificado
- el 1 de octubre de 2026
Nuestro veredicto
Recomendado, valoración editorial 4 de 5Curso práctico y breve que guía paso a paso la creación de un reproductor de música para practicar DOM y eventos. Es ideal para principiantes con nociones básicas que quieren un proyecto concreto; no profundiza más allá de ese proyecto.
Puntos fuertes
- Enfoque totalmente práctico: se construye un proyecto completo de principio a fin.
- Estructura clara y progresiva: proyecto, HTML, CSS y después JavaScript.
- Duración contenida (78 minutos, 20 lecciones), fácil de completar.
A tener en cuenta
- Cubre un único proyecto, por lo que la variedad de casos del DOM es limitada.
- Los capítulos son pocos y generales; no detallan qué se ve en cada lección.
- No consta el año de publicación, así que no se puede valorar su actualidad.
De qué trata
Curso práctico de 78 minutos y 20 lecciones en el que se construye un reproductor de música desde cero para aprender a manipular el DOM con JavaScript.
Se organiza en cinco bloques: introducción, estructura del proyecto, HTML, creación de estilos con CSS y, por último, la manipulación del DOM con la implementación de la funcionalidad. Incluye el uso de eventos, iconos y estilos para mejorar la apariencia del proyecto.
- Selección y manipulación de elementos del DOM
- Eventos de clic y barra de progreso
- Controles de reproducción, pausa, avance y retroceso
- Interfaz del reproductor con HTML y CSS
Para quién es este curso
- Principiantes en desarrollo web que ya conocen lo básico de HTML, CSS y JavaScript y quieren practicar con un proyecto completo.
- Estudiantes que buscan un proyecto sencillo para su portafolio, como un reproductor de música.
- Personas que quieren entender cómo se seleccionan elementos del DOM y se gestionan eventos con un ejemplo concreto.
Mejor busca otro si…
- Quien ya maneja el DOM y los eventos con soltura y busca contenidos avanzados o frameworks.
- Quien parte de cero absoluto en JavaScript y necesita primero un curso completo del lenguaje.
Antes de empezar
- Conocimientos básicos de HTML, CSS y JavaScript (recomendados, no avanzados).
- Un editor de texto, como Visual Studio Code.
- Un navegador web actualizado para probar el proyecto.
Qué sabrás hacer al terminar
- Seleccionar y manipular elementos del DOM con JavaScript.
- Implementar eventos como clics y cambios en la barra de progreso.
- Crear controles de reproducción, pausa, avance y retroceso sobre un elemento de audio.
- Diseñar la interfaz de un reproductor de música con HTML y CSS.
Estructura del curso
- 01
Introducción y estructura del proyecto
Presentación del curso y organización de los archivos del proyecto antes de empezar a escribir código.
- 02
HTML y estilos con CSS
Construcción de la estructura HTML del reproductor y creación de sus estilos con CSS.
- 03
Manipulación del DOM y funcionalidad en JavaScript
Bloque final en el que se programa la funcionalidad del reproductor manipulando el DOM: controles de reproducción y gestión de eventos.
Capítulos del vídeo
- 01Introducción
- 02Estructura del proyecto
- 03HTML
- 04Creación de estilos con CSS
- 05Manipulación del DOM JS y creación de la funcionalidad
Plan de estudio sugerido
1 semana · unas 2,5 h por semana
- 1.Sesión 1: Introducción, estructura del proyecto y HTML; escribe el código a la vez que el vídeo.
- 2.Sesión 2: Estilos con CSS; prueba a cambiar colores e iconos.
- 3.Sesión 3: Manipulación del DOM y funcionalidad; pausa en cada control y pruébalo en el navegador.
- 4.Sesión 4: Añade por tu cuenta alguna mejora al reproductor.
El plan cuenta con tiempo para pausar y practicar, no solo con la duración del vídeo. Si quieres adaptarlo a tu semana, lee cómo montar tu plan de estudio semanal.
Consejos para seguirlo
- Escribe el código tú mismo en Visual Studio Code en lugar de solo mirar.
- En el último bloque, pausa tras cada control (reproducir, pausa, avance, retroceso) y comprueba que funciona antes de seguir.
- Repasa HTML, CSS y JavaScript básicos antes de empezar si tienes dudas.
- Personaliza el diseño del reproductor al terminar para afianzar lo aprendido.
Antes y después de este curso
- Antes de este cursoJavaScript - Curso COMPLETO desde 0 | Paso a paso y con Ejemplos 👨💻Refuerza los fundamentos de JavaScript si aún no los dominas antes de practicar con el DOM.
- Antes de este cursoCurso de HTML desde 0Útil para consolidar HTML, uno de los requisitos básicos del curso.
- Antes de este cursoCURSO DE CSS COMPLETO: De Principiante a Front-EndAyuda a reforzar CSS para la parte de estilos del proyecto.
- Después de este cursoCURSO REACT.JS - Aprende desde ceroPaso natural para construir interfaces con un framework tras practicar con el DOM.
Cómo lo presenta Juan Ortiz
En este curso práctico, aprenderás a manipular el DOM con JavaScript para crear un reproductor de música desde cero.
En este curso práctico, aprenderás a manipular el DOM con JavaScript para crear un reproductor de música desde cero. A través de ejemplos prácticos y proyectos reales, dominarás las habilidades esenciales para interactuar con elementos HTML dinámicamente. Este curso está diseñado…
Extracto de la descripción original en Udemy.
Preguntas frecuentes
+¿Qué nivel necesito?
No se piden conocimientos avanzados, pero conviene tener una base de HTML, CSS y JavaScript. Está pensado para principiantes y personas con experiencia básica.
+¿Cuánto dura?
Son 78 minutos repartidos en 20 lecciones. Con pausas y práctica, un plan razonable es dedicarle unas 2-3 horas en total.
+¿Qué se construye?
Un reproductor de música desde cero, con interfaz en HTML y CSS y controles de reproducción, pausa, avance y retroceso programados con JavaScript.
+¿Qué herramientas necesito?
Un editor de texto como Visual Studio Code y un navegador web actualizado para probar el proyecto.
Análisis editorial elaborado con ayuda de IA a partir de la descripción, los capítulos y la duración publicados en Udemy, y revisado según nuestro método. El contenido del curso es obra de Juan Ortiz; si ves algún error, avísanos.
Guías para sacarle partido
Más cursos de Programación
Agentic AI – Complete Course for Beginners
Curso de unas 24 horas para construir sistemas de agentes de IA con LangChain y LangGraph: Pydantic, flujos de trabajo, memoria, RAG y despliegue en AWS y Render.
Aprende Accesibilidad Web paso a paso
Introducción práctica a la accesibilidad web: pautas y leyes, contenido, navegación, diseño e interacción accesibles, relación con el SEO y evaluación de sitios.
Aprende Godot - Curso completo desde cero
Crea tu primer videojuego 3D en Godot 4 desde cero: escenas, nodos, GDScript, físicas, animaciones, sonido y exportación a .exe.
Aprende JavaScript Ahora! curso completo desde cero para principiantes
Curso de JavaScript desde cero: entorno, variables, tipos, operadores, control de flujo, diez ejercicios y objetos con funciones constructoras.