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