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.

✍️ Curso creado por: Estefania Cassingena Navone. Síguela en Twitter: https://twitter.com/EstefaniaCassN

⭐️ 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
https://github.com/estefaniacn/proyectos-javascript-dom

💻 Con freeCodeCamp puedes aprender a programar gratis y alcanzar tu meta de obtener un empleo como desarrollador: https://www.freecodecamp.org/espanol/

✍️ Lee cientos de artículos de programación de forma gratuita: https://www.freecodecamp.org/espanol/news/

🎥 Suscríbete a nuestro canal para encontrar más videos y cursos de programación: https://www.youtube.com/freecodecampespanol?sub_confirmation=1