JavaScript para Manipulación del DOM - Curso con Proyectos

En este curso aprenderás a usar JavaScript para manipular el DOM de una página web. Aprenderás los métodos y las técnicas más importantes para manipular los elementos HTML y cómo detectar y manejar eventos. Crearás 5 proyectos paso a paso con HTML, CSS y JavaScript.

⭐️ Contenido ⭐️

⌨️ (00:00:00) Introducción
⌨️ (00:02:21) Conocimiento previo
⌨️ (00:04:28) El DOM
⌨️ (00:15:46) Conceptos importantes para el DOM

El DOM en Google Chrome
⌨️ (00:26:24) Ejemplo - Archivo HTML
⌨️ (00:29:54) Herramientas de Desarrollo de Chrome
⌨️ (00:37:28) Cambiar el DOM
⌨️ (00:43:07) Nodos que no son elementos

Proyecto Toppings de Pizza
⌨️ (00:44:45) HTML
⌨️ (00:53:55) CSS
⌨️ (01:00:54) Vincular JavaScript a HTML

Seleccionar Elementos del DOM
⌨️ (01:02:53) Inicio
⌨️ (01:02:56) .getElementById()
⌨️ (01:14:54) .getElementsByClassName()
⌨️ (01:21:25) .getElementsByTagName()
⌨️ (01:24:53) .querySelector()
⌨️ (01:31:10) .querySelectorAll()

Estilos
⌨️ (01:34:40) Asignar estilo con JavaScript

Texto en el DOM
⌨️ (01:42:29) Inicio
⌨️ (01:42:31) Acceder al Texto
⌨️ (01:47:17) Modificar el Texto

Atributos
⌨️ (01:49:06) Atributos con JavaScript

Clases con JavaScript y el DOM
⌨️ (01:53:13) Clases
⌨️ (01:55:18) Agregar una clase
⌨️ (01:58:00) Verificar si una clase existe
⌨️ (01:59:26) Eliminar una clase

Operaciones Importantes en el DOM
⌨️ (02:00:59) Crear un Elemento
⌨️ (02:02:59) Agregar un Elemento
⌨️ (02:05:08) Remover un Elemento

Jerarquía del DOM
⌨️ (02:07:32) Recorrer el DOM (Traversal)

Eventos
⌨️ (02:17:26) Eventos del DOM
⌨️ (02:22:26) Conceptos Importantes para Eventos del DOM
⌨️ (02:29:09) Eventos con onEvent en HTML
⌨️ (02:34:38) El método .addEventListener()

⭐️ Proyectos ⭐️

Colores Hex Aleatorios
⌨️ (02:44:36) Proyecto: Colores Hex Aleatorios
⌨️ (02:46:55) HTML
⌨️ (02:51:27) CSS
⌨️ (02:58:34) JavaScript

Colores RGB con Sliders
⌨️ (03:10:31) Proyecto: Colores RGB con Sliders
⌨️ (03:11:36) HTML
⌨️ (03:15:45) CSS
⌨️ (03:19:06) JavaScript

Citas Aleatorias
⌨️ (03:31:36) Proyecto: Citas Aleatorias
⌨️ (03:33:33) HTML
⌨️ (03:38:21) CSS
⌨️ (03:45:48) JavaScript

Cronómetro
⌨️ (03:56:56) Proyecto: Cronómetro
⌨️ (03:57:39) HTML
⌨️ (04:03:50) CSS
⌨️ (04:16:24) JavaScript

Lista de Tareas Pendientes
⌨️ (04:43:27) Proyecto: Lista de Tareas Pendientes
⌨️ (04:44:27) HTML
⌨️ (04:48:42) CSS
⌨️ (05:01:08) JavaScript

Conclusión
⌨️ (05:29:54) Final

💻 Código

[codingwithestefania]

⭐ ¡Hola a todos! Espero que les guste el curso. Aprenderán JavaScript para manipulación del DOM paso a paso con ejemplos prácticos y proyectos. Los invito a compartir sus comentarios. Muchas gracias a todos por su apoyo. 🙂

[MegaSpartan]

Este canal y el de Sergie Code son oro puro para los que queremos aprender más y más sobre el desarrollo web, justo estoy por terminar el curso de JS de Sergie y YouTube me recomienda este canal, entro a ver qué onda y me topo que tiene una infinidad de cursos super prácticos y al ver este curso para manipulación del DOM me va a venir de maravilla para acrecentar mis habilidades en JS 💟

[AcademiaCS]

00:01 Introducción y presentación.
02:30 Sobre CSS, vista general del contenido.
04:29 El DOM
15:46 Conceptos importantes
26:25 Archivo HTML
29:54 Herramientas de desarrollo de Chrome
37:29 Cambiar el DOM
43:07 Nodos que no son elementos del DOM
44:45 Proyecto "Toppings de pizza" - HTML
53:55 Proyecto "Toppings de pizza" - CSS
1:00:54 Vincular JS a HTML
1:02:54 JS - Seleccionar elementos: getElementByID( )
1:14:54 JS - Seleccionar elementos: getElementByClassName( )
1:21:26 JS - Seleccionar elementos: getElementByTagName( )
1:24:54 JS - Seleccionar elementos: .querySelector( )
1:31:10 JS - Seleccionar elementos: .querySelectorAll( )
1:34:40 JS - Asignar estilo
1:42:31 JS - Texto en el DOM: Acceder al texto
1:47:19 JS - Texto en el DOM: Modificar el texto
1:49:07 JS - Atributos
1:53:13 JS - Clases
1:55:19 JS - Agregar una clase
1:58:01 JS - Verificar si una clase existe
1:59:26 JS - Eliminar una clase
2:00:01 JS - Crear un elemento
2:02:59 JS - Agregar un elemento
2:05:09 JS - Remover un elemento
2:07:33 JS - Recorrer el DOM
2:17:27 JS - Eventos del DOM
2:22:28 JS - Conceptos Importantes
2:29:10 JS - Eventos en HTML
2:34:40 JS - .addEventListener()
2:44:37 Proyecto Colores Aleatorios
2:46:56 Proyecto Colores Aleatorios: HTML
2:51:28 Proyecto Colores Aleatorios: CSS
2:58:35 Proyecto Colores Aleatorios: JavaScript
3:10:31 Proyecto Colores RGB
3:11:36 Proyecto Colores RGB: HTML
3:15:45 Proyecto Colores RGB: CSS
3:19:07 Proyecto Colores RGB: JavaScript
3:31:37 Proyecto Citas Aleatorias
3:33:34 Proyecto Citas Aleatorias: HTML
3:38:21 Proyecto Citas Aleatorias: CSS
3:45:49 Proyecto Citas Aleatorias: JavaScript
3:56:56 Proyecto Cronómetro
3:57:39 Proyecto Cronómetro: HTML
4:03:50 Proyecto Cronómetro: CSS
4:16:24 Proyecto Cronómetro: JavaScript
4:43:29 Proyecto Lista de tareas
4:44:26 Proyecto Lista de tareas: HTML
4:48:22 Proyecto Lista de tareas: CSS
5:01:08 Proyecto Lista de tareas: JavaScript
5:29:52 Despedida y agradecimiento. SUSCRÍBETE y entra a FreeCodeCamp en Español.

[ommus]

vine a aprender js y termine aprendiendo cosas que ni sabia hasta de CSS grande profe.

[cityzens]

Entendí el concepto a la perfección sin saber mucho de html, css y Javascript.... Muy buen video y gracias freecodecamp❤

[wladimojica]

Que locura! Esto es increible, he de admitir que este curso supera incluso los que son de pago, Recomendadisimo!

[supervisorcuenta]

Estefanía tiene algo especial. Su voz, dicción, paciencia, dominio del tema, etc. la convierten en una de las mejores. 🎉
Felicitaciones y mil gracias por el contenido que compartes.

[pascuals]

Excelente curso! Felicitaciones. Qué gran destreza tienes para enseñar, Estefanía. Gracias por tan extraordinario trabajo. Bendiciones!!!

[jonathangarciasilveira]

Este curso es oro puro. Me parece genial la paciencia con la que abordas todos los temas, hay mucha atención al detalle en tu explicación y se nota que le pones mucho esfuerzo. Un abrazo gigante.

[jarolgabriel]

vine a aprender sobre el DOM y aprendi Tambien mas HTML, CSS y hasta INGLES jajaj tremendo curso

[godofredomontesdeoca]

Yo he revisado varios cursos de Javascript, pero este me parece excepcional por la manera tan didáctica y angelical que lo explica Estefanía, hay mucha claridad y sentido de pedagogía que el sentido de la audición y el cerebro no pierden ningún segundo de enseñanza, con esa dulzura de voz manejada magistralmente que hasta los pequeños detalles se hacen indispensables.
Gracias por tu gran aporte y la forma tan especial de impartir y compartir tus conocimientos.

[jorgeayala]

Este fue el primer canal de programación q entre y luego de pasar por muchos otros los sigo eligiendo..

[rafaelinfante]

He mejorado mis skills de javascript gracias a este video. Agradecido de haber encontrado este curso que me encanta!! Eres una persona muy dedicada y profesional! Muchas gracias Estefanía, sigue asi!

[DylArt_]

POR DIOS POR MUCHO EL MEJOR CURSO, aunque de antemano sabía html, css y fundamentos de javascript, muchos cursos me hicieron mucha bola con el DOM pero este puedo decir que ES EL CURSO PERFECTO DESDE CERO, certificado por mi jeje, la manera y ejemplos hace que no se aburra mucho y no le da muchas vueltas al tema, es excelente, nuevo sub

[JesusPetit]

Muchas gracias por el curso, lo acabo de finalizar

[simonkdsz]

el curso q nadie esperaba pero que necesitabamos mucho❤❤

[estebanarango]

Infinitas gracias, video terminado, todos los proyectos terminados y mucho aprendido

[sekkes]

Eres una máquina, sigue así!! Ojála mis profesores explicasen como lo haces tu. Eternamente agradecido por la labor que desempeñas para la comunidad.

[edyramirez]

Tú contenido está mejor que el contenido del bootcamp que estoy cursando.

Este video me ayuda mucha a aclarar mis dudas.

Tú contenido es muy organizado.
Explicas claramente.
Los ejemplos son prácticos.
¡Tu eres genial!

¡Gracias!

[zpat]

Estoy metido en esto de la programación web desde que tenía 12 años y ahora con 15 empecé este curso con el primer video de JavaScript, justo hace unos días lo había finalizado y ahora me siento feliz de que continúe. ¡Gracias Estefania y freeCodeCamp! :D