⭐ ¡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. 🙂
Mil gracias Estefanía, llevé el curso de react aquí en RUclips con ustedes y demás está decir que me pareció una maravilla, no dudo que este curso será de mucha ayuda para los que empezamos en este mundo de JavaScript. Nuevamente, mil gracias.
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 RUclips 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 💟
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.
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.
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.
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.
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
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!
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!
Pequeño resumen: El DOM es una Web API utilizada para crear páginas web (algo así como un puente que permite establecer una conexión entre HTML y JS con el fin de manipular el primero). Cuando creamos un documento HTML, este es convertido en un Objeto (de esos que conocemos en JS) que es almacenado dentro del Objeto window (un objeto de "entorno" dado por el navegador, entiéndase el área de visualización de nuestra pantalla) al cual podemos acceder y manipular, gracias al DOM (puente), con JS. Llanamente, un objeto dentro de otro objeto (Objeto documento dentro de Objeto window), pero trabajamos más con el Objeto documento. Mencioné que el documento es convertido en un Objeto. Bueno, eso también incluye a los nodos (son también objetos dentro del Objeto de documento). Esa es la razón por la cual podemos utilizar métodos que nos permiten modificarlos (recuerden, las funciones dentro de un objeto son llamadas métodos). Ahora bien, todos los elementos son nodos, pero no todos lo nodos son elementos. Existen nodos que son de tipo Atributos, de tipo Texto, etc., estos nodos también son objetos! En suma, TODO dentro de nuestro documento HTML es convertido en un Objeto con representación jerárquica. D = por documento HTML. O = por Objeto, es convertido en un objeto el documento. M = por Modelo, entiéndase que un modelo es una representación de algo; en este caso la representación del documento como un Objeto con jerarquías. Espero les sirva. Y recuerden, vean todo como un objeto que pueden manipular con JS!
01:03:04 "esta parte es exactamente la parte que estabas esperando cuando comenzaste el curso" Estefanía nos conoce muy bien a sus estudiantes. Muchas gracias por esta mano enorme que nos brindas. Saludos desde Argentina!
- Les dejo un rol de tareas: Manipular el DOM y sus eventos con algo simple. - Descargar cualquier html y css con buenas y malas practicas de internet y des tri parlo con js. Muy buen curso y es intutitivo.
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
@@Ouroborozz__madre, yo tengo 21 y apenas le di con HTML y css y ahora ando viendo jv y luego irme a SQL luego irme a aprender eso de los framework y luego eso de las API y luego hacer proyectos 😢 quiero hacer todo esto antes de tener 24 años y aplicar a mi primer trabajo como programador o desarollador web.
Muchas gracias por tan buen contenido, estoy en España y pretendo cambiar de profesión de peluquero a front- end developer, porque me gusta mucho lo del desarrollo web. Muchas gracias 😄
Muchas gracias por este curso tan increible! Finalmente pude entender conceptos que me tomo mucho tiempo captarlo. Espero que tengan mucho exito y todo este conocimiento que nos dan gratuitamente sea remunerado a ustedes de la mejor manera. Gracias!
Hola , sin desmerecer a todos los creadores de contenido de estas materias. Quería agradecerte por tu forma de enseñar, tan didáctica y fácil de comprender , les das el sentido a las aplicaciones de cada cosa que estas enseñando. Es agradable ver tus tutoriales , sobre todo para los que vemos esto como un hobby o una posible fuente de trabajo en este tema de la programación web, Gracias
Infinitas gracias, Estefanía. Gracias a tí logré mejorar mucho en HTML, CSS y JavaScript con el curso de programación. Estoy seguro que me servirán mucho los proyectos para poder hacer páginas más interactivas. 😺🌟🌟🌟
Es el primer video que veo en el canal de FCC en español y 10 puntos. Excelente la explicación de Estefania y la parte práctica. Gracias gracias, lo termino y hago el de React (no lo había visto)jajaja
Realmente tu video es bueno, la paciencia con la que explicas los temas, los proyectos que haces , realmente es fascinante, es 10/10 💯👌 Espero sigas subiendo mas contenido de Js ya que busco aprender fullsctak y estoy empezando por frontend.👨💻 Saludos!!☺
Curso sublime. Tu habilidad de explicar conceptos complejos es impresionante. Respecto al proyecto rgb donde usaste tres veces el mismo bloque de código para crear los event handler (que si en vez de r,g,b fueran 100 veces no sería factible tu método), aprovechando los conceptos que has dado en este curso he preferido usar un array de inputs para sólo usar el código una vez. Además no he necesitado usar una función que me vaya creando el string rgb ya que lo hago desde la propia función que se llama en el evento onchange. Dejo aquí el código por si le sirve a alguien. //tomar elementos del dom a JS //1. input ranges const barraRoja = document.getElementById('rojo'); const barraVerde = document.getElementById('verde'); const barraAzul = document.getElementById('azul'); //2. párrafos donde se verá el valor r,g,b const parrafoRojo = document.getElementById('texto-rojo'); const parrafoVerde = document.getElementById('texto-verde'); const parrafoAzul = document.getElementById('texto-azul'); //Poner valores actuales en los párrafos parrafoRojo.innerText = barraRoja.value; parrafoVerde.innerText = barraVerde.value; parrafoAzul.innerText = barraAzul.value; //función que actualiza los valores en el body y en el párrafo function actualizaColor(e){ let valorActual = `rgb(${barraRoja.value}, ${barraVerde.value}, ${barraAzul.value})`; document.body.style.backgroundColor = valorActual; //uso un ternario para practicar. si el id desencadenante era rojo que aplique el valor al párrafo, etc e.target.id == 'rojo' ? parrafoRojo.innerText = barraRoja.value : e.target.id == 'verde' ? parrafoVerde.innerText = barraVerde.value : parrafoAzul.innerText = barraAzul.value; } //detectar cambios usando un array para evitar 3 veces el mismo código. const barrasColores = document.getElementsByTagName('input'); for (const barra of barrasColores){ barra.addEventListener('change', actualizaColor); }
Vengo del curso de Javascript,y también he hecho el de React, ahora haré éste para reforzar,estoy aprendiendo muchas cosas que por mi cuenta no había aprendido,estoy cursando un FPII online. Gracias!!
Bendiciones. Tu dedicación al hacer estos vídeos ayudan y motivan a muchas personas que desean adquirir nuevos y buenos conocimientos. Muchísimas gracias por eso..!!!!
Hola gracias princesa recien estoy aprendiendo la programacion ,soy un señor de 45 años pero tus clases me han ilustrado infinitamente y eso que como soy de la vieja escuela se me dificulta mas pero tus enseñanzas claras y ejemplos practicos me han ayudado muchisimo me he hecho el css html javascript y python contigo Dios les de mas exitos en sus proyectos mil gracias por darnos acceso a informacion de calidad
Muchas gracias por el curso estuvo excelente, ya complete 5 cursos incluido los dos de python, espero y sigan apoyando a los nuevos programadores con cursos como estos. Gracias en especial a Estefanía por hacer los cursos en español.
estos contenidos nos ayudan bastante a los que ya entendemos un poco del tema pero con este curso bueno uno entiende mejor las cosas, gracias por poner esto al alcance de todos
Genial introducción a JS Estafanía. Explicas muy claro y es muy útil. Siempre atento a los videos que publican. Ahora sigo con el de REACT. Gracias por tanto!
Muchas gracias freeCodecamp por el curso en especial a Estefanía con su gran profesionalismo didáctico que siempre nos brinda. En este momento e finalizado la cursada después de un par de meses de escuchar, ver y transcribir el video en apuntes. Ahora continuare con los desafíos planteados
Estupendo 👌 como siempre 👍 de 💯 Gracias maestra....👏👏👏👏 Solo una cosita, quizás tu sgte. curso podría ser todo lo relacionado a APIS, servicios, Ajax, fetch, async await,.. así como websockets y mqtt. Saludos.
Excelente Estefania, muy bueno el curso, me sirvió para refrescar conocimiento y aprender de otro que no los conocía, ojala a futuro puedas hacer un curso de CSS profundizando en conceptos. Sigue así....!!!
En el proyecto "3° Citas Aleatorias" decidi hacerlo por mi cuenta para practicar :) Este es mi codigo: const boton = document.getElementById('boton-cambiar-cita'); const cita = document.getElementById('cita'); const autor = document.getElementById('autor'); const citaRandom = ()=>{ let numRandom = Math.floor(Math.random() * 10); let citaRandom; for (citaRandom of citas) { citaRandom = citas[numRandom] } return citaRandom } const actualizarDom = ()=> { let indice = citaRandom() cita.innerText = `${indice.texto}` autor.innerText = `${indice.autor}`
⭐ ¡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. 🙂
buenas estefania, podrías hacer también un tutorial sobre api fetch, es un tema que me está costando. Gracias
Mil gracias Estefanía, llevé el curso de react aquí en RUclips con ustedes y demás está decir que me pareció una maravilla, no dudo que este curso será de mucha ayuda para los que empezamos en este mundo de JavaScript. Nuevamente, mil gracias.
gracias , Estefanía allá vamos
😁!Si!
Por favor un curso de linux. Muchas gracias.
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 RUclips 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 💟
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.
vine a aprender js y termine aprendiendo cosas que ni sabia hasta de CSS grande profe.
Entendí el concepto a la perfección sin saber mucho de html, css y Javascript.... Muy buen video y gracias freecodecamp❤
vine a aprender sobre el DOM y aprendi Tambien mas HTML, CSS y hasta INGLES jajaj tremendo curso
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.
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.
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.
Me suscribo a tu opinión. Muy bien descrito. Excelente forma de explicar
Que locura! Esto es increible, he de admitir que este curso supera incluso los que son de pago, Recomendadisimo!
Excelente curso! Felicitaciones. Qué gran destreza tienes para enseñar, Estefanía. Gracias por tan extraordinario trabajo. Bendiciones!!!
Este fue el primer canal de programación q entre y luego de pasar por muchos otros los sigo eligiendo..
Y como te fue hablando sobre encontrar trabajo
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
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!
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!
debemos estar en el mismo bootcamp, porque me pasó exactamente lo mismo xD
Pequeño resumen: El DOM es una Web API utilizada para crear páginas web (algo así como un puente que permite establecer una conexión entre HTML y JS con el fin de manipular el primero). Cuando creamos un documento HTML, este es convertido en un Objeto (de esos que conocemos en JS) que es almacenado dentro del Objeto window (un objeto de "entorno" dado por el navegador, entiéndase el área de visualización de nuestra pantalla) al cual podemos acceder y manipular, gracias al DOM (puente), con JS. Llanamente, un objeto dentro de otro objeto (Objeto documento dentro de Objeto window), pero trabajamos más con el Objeto documento.
Mencioné que el documento es convertido en un Objeto. Bueno, eso también incluye a los nodos (son también objetos dentro del Objeto de documento). Esa es la razón por la cual podemos utilizar métodos que nos permiten modificarlos (recuerden, las funciones dentro de un objeto son llamadas métodos). Ahora bien, todos los elementos son nodos, pero no todos lo nodos son elementos. Existen nodos que son de tipo Atributos, de tipo Texto, etc., estos nodos también son objetos! En suma, TODO dentro de nuestro documento HTML es convertido en un Objeto con representación jerárquica.
D = por documento HTML.
O = por Objeto, es convertido en un objeto el documento.
M = por Modelo, entiéndase que un modelo es una representación de algo; en este caso la representación del documento como un Objeto con jerarquías.
Espero les sirva. Y recuerden, vean todo como un objeto que pueden manipular con JS!
el curso q nadie esperaba pero que necesitabamos mucho❤❤
No me lo esperaba 🎉🎉🎉🎉
01:03:04 "esta parte es exactamente la parte que estabas esperando cuando comenzaste el curso"
Estefanía nos conoce muy bien a sus estudiantes. Muchas gracias por esta mano enorme que nos brindas. Saludos desde Argentina!
- Les dejo un rol de tareas:
Manipular el DOM y sus eventos con algo simple.
- Descargar cualquier html y css con buenas y malas practicas de internet y des tri parlo con js.
Muy buen curso y es intutitivo.
La excelente didáctica del video me hacen percibir agradables, temas que a priori me resultaban tediosos.
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.
Gracias, este es el 3er curso que hago siguiendote. muy agradecido por este contenido
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
yo tambien, solo que ahora tengo 14 xd
@@Ouroborozz__madre, yo tengo 21 y apenas le di con HTML y css y ahora ando viendo jv y luego irme a SQL luego irme a aprender eso de los framework y luego eso de las API y luego hacer proyectos 😢 quiero hacer todo esto antes de tener 24 años y aplicar a mi primer trabajo como programador o desarollador web.
Yo también, solo que ahora tengo 39
❤ Este canal es oro puro, y Stepahia es hace posible que así sea, gracias por este curso y la dedicación que le pones q tus cursos
Muchas gracias por tan buen contenido, estoy en España y pretendo cambiar de profesión de peluquero a front- end developer, porque me gusta mucho lo del desarrollo web. Muchas gracias 😄
The best teacher ever you are awesome
Muchas gracias por este curso tan increible! Finalmente pude entender conceptos que me tomo mucho tiempo captarlo. Espero que tengan mucho exito y todo este conocimiento que nos dan gratuitamente sea remunerado a ustedes de la mejor manera. Gracias!
Waoooo estoy haciendo un proyeccto así con este tema, ayer lo vi por la noche y pensé que era un sueño gracias..!!!
Hola , sin desmerecer a todos los creadores de contenido de estas materias. Quería agradecerte por tu forma de enseñar, tan didáctica y fácil de comprender , les das el sentido a las aplicaciones de cada cosa que estas enseñando. Es agradable ver tus tutoriales , sobre todo para los que vemos esto como un hobby o una posible fuente de trabajo en este tema de la programación web, Gracias
Estefania definitivamente es excelente instructora:)❤
¡Que gran forma de empezar una semana! Gracias Estefania 🙌🏻🤍
Uff la mejor subió un video que esperaba. Cuanta entrega en una sola persona. Saludos desde República Dominicana- Richard Sanchez
Infinitas gracias, video terminado, todos los proyectos terminados y mucho aprendido
Muchas gracias por el curso, lo acabo de finalizar
La fecilito por lo claro y detallado que dictas el curso .
Como me gustan tus clases Estefanía, eres la mejor!!
Estefania eres un sol, nunca te apagues.
Estefanía es una crack lo mires por donde lo mires!!! Mil gracias por ayudarnos a todos!!!!!
Inmejorable! un 10 expectacular, mi enhorabuena!!!
Infinitas gracias, Estefanía. Gracias a tí logré mejorar mucho en HTML, CSS y JavaScript con el curso de programación. Estoy seguro que me servirán mucho los proyectos para poder hacer páginas más interactivas. 😺🌟🌟🌟
La verdad gracias por tus curso. Vos y Lucas dalto son los mejores profesores que hay en internet. Gracias ❤❤❤❤❤❤❤❤❤❤❤
Eres genial , tienes el don de explicar estos temas, la felicito
Es el primer video que veo en el canal de FCC en español y 10 puntos. Excelente la explicación de Estefania y la parte práctica. Gracias gracias, lo termino y hago el de React (no lo había visto)jajaja
Felicidades por este avance, Estefanía.
Gracias Estefanía por siempre estar presentando contenido de calidad. Saludos!
Excelente curso!! Sin desperdicios. Ahora por React !!
Excelente Curso definitivamente. 3:57:06
Realmente tu video es bueno, la paciencia con la que explicas los temas, los proyectos que haces , realmente es fascinante, es 10/10 💯👌
Espero sigas subiendo mas contenido de Js ya que busco aprender fullsctak y estoy empezando por frontend.👨💻
Saludos!!☺
Curso sublime. Tu habilidad de explicar conceptos complejos es impresionante.
Respecto al proyecto rgb donde usaste tres veces el mismo bloque de código para crear los event handler (que si en vez de r,g,b fueran 100 veces no sería factible tu método), aprovechando los conceptos que has dado en este curso he preferido usar un array de inputs para sólo usar el código una vez. Además no he necesitado usar una función que me vaya creando el string rgb ya que lo hago desde la propia función que se llama en el evento onchange. Dejo aquí el código por si le sirve a alguien.
//tomar elementos del dom a JS
//1. input ranges
const barraRoja = document.getElementById('rojo');
const barraVerde = document.getElementById('verde');
const barraAzul = document.getElementById('azul');
//2. párrafos donde se verá el valor r,g,b
const parrafoRojo = document.getElementById('texto-rojo');
const parrafoVerde = document.getElementById('texto-verde');
const parrafoAzul = document.getElementById('texto-azul');
//Poner valores actuales en los párrafos
parrafoRojo.innerText = barraRoja.value;
parrafoVerde.innerText = barraVerde.value;
parrafoAzul.innerText = barraAzul.value;
//función que actualiza los valores en el body y en el párrafo
function actualizaColor(e){
let valorActual = `rgb(${barraRoja.value}, ${barraVerde.value}, ${barraAzul.value})`;
document.body.style.backgroundColor = valorActual;
//uso un ternario para practicar. si el id desencadenante era rojo que aplique el valor al párrafo, etc
e.target.id == 'rojo' ? parrafoRojo.innerText = barraRoja.value :
e.target.id == 'verde' ? parrafoVerde.innerText = barraVerde.value : parrafoAzul.innerText = barraAzul.value;
}
//detectar cambios usando un array para evitar 3 veces el mismo código.
const barrasColores = document.getElementsByTagName('input');
for (const barra of barrasColores){
barra.addEventListener('change', actualizaColor);
}
Excelente curso, acabo de terminarlo y solo me queda decir bravo 👏
Vengo del curso de Javascript,y también he hecho el de React, ahora haré éste para reforzar,estoy aprendiendo muchas cosas que por mi cuenta no había aprendido,estoy cursando un FPII online. Gracias!!
El trabajo que hacen es excelente! Muchísimas gracias por eso!
Bueno, veré este curso en paralelo al que compre en Udemy, gracias por tu aporta.
este es el curso que estaba esperando, mil gracias
Que bueno que sacaron ese
curso 😊
Me gustaría también que sacaran uno de proyectos con express
Muchísimas gracias por este curso de gran calidad. Saludos y exitos.
Excelente Curso , aprendi mejor que en otros tutoriales y encima los proyectos son estupendos , mil gracias
POR FIN!!! 👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻 MUCHÍSIMAS GRACIAS ESTEFANÍA!!! LO ESTABA ESPERANDO HACE MESES!!! SOS UNA GENIA!!!
Bendiciones.
Tu dedicación al hacer estos vídeos ayudan y motivan a muchas personas que desean adquirir nuevos y buenos conocimientos. Muchísimas gracias por eso..!!!!
Simplemente magnífico. Muchísimas gracias a Stefanía y freeCodeCamp por este material tan valioso.
Muchas gracias por vuestra generosidad y por vuestras grandes enseñanzas, preciosa profesora, Estefanía, Mon amour♥
eres una shingona se agradece el tiempo que le dedicas a enseñarnos
Muy bueno el curso. Bien didáctico, con buenos ejemplos!!!
@codingwithestefania, te amoooooooooooo !! gracias por compartir tu conocimiento
millones de gracias profe stefania ,una excelencia en tu don de enseñar ,me gusto la frescura y la buena explicacion,se te aprecia.
Gran curso y excelente maestra
Gracias por los cursos. Hubiera preferido verlos de primeras, y no haber pasado por el bootcamp de 3 meses (html a react y sql)
Hola gracias princesa recien estoy aprendiendo la programacion ,soy un señor de 45 años pero tus clases me han ilustrado infinitamente y eso que como soy de la vieja escuela se me dificulta mas pero tus enseñanzas claras y ejemplos practicos me han ayudado muchisimo me he hecho el css html javascript y python contigo Dios les de mas exitos en sus proyectos mil gracias por darnos acceso a informacion de calidad
yo tengo 47 y que digo de la vieja escuela, Cobol, Pascal, Visual Basic, RPG, FoxPro jajaja
Muchas gracias Estefania, he terminado tu curso de react y estaba deseando ver este nuevo curso de manipulación del DOM 😁😁😁
Muchísimas gracias mamacita! :3 estoy determinado en aprender y trabajar en la industria 4.0 y esto era justo lo que necesitaba :D
Genial Excelente curso, aprendí machismo, me encanta como explicas, la paciencia..
puro Oro, segui adelante muchos Exitos!!! saludos desde Argentina.
Gracias Estefanía explicas muy bien. Me encanta el curso, es super bueno
Excelente el curso, muy claras las explicaciones!!
Muchas gracias por el curso estuvo excelente, ya complete 5 cursos incluido los dos de python, espero y sigan apoyando a los nuevos programadores con cursos como estos. Gracias en especial a Estefanía por hacer los cursos en español.
taban basico y tan grande a la vez,,, que gran manera de explicar,,, mil gracias
¡Termine el curso! Muchas gracias.
Muy bueno el curso super recomendado, muchas gracias Estafania
estos contenidos nos ayudan bastante a los que ya entendemos un poco del tema pero con este curso bueno uno entiende mejor las cosas, gracias por poner esto al alcance de todos
Genial introducción a JS Estafanía. Explicas muy claro y es muy útil. Siempre atento a los videos que publican. Ahora sigo con el de REACT. Gracias por tanto!
que buen curso! Lo he terminado y me ha encantado mucho, he reforzado la manipulación del DOM. Muchas gracias
acabo de tener muchas revelaciones con este video, muchas gracias cx
Que bien explicado todo, muchas gracias por este curso.
Muchas gracias, 0:40 la horita r100 termine.!!!
excelente yo le modifique para guardar las tareas en el local storage del brower asi la recupero en otro inicio de sesion
Eres genial tienes pedagogía para enseñar termine todos los
Proyectos Gracias
Muchas Gracias estefania, me son de mucha utilidad los cursos, de aquí al curso de React.
🤓🤓🧠💪
👏👏👏 Todo muy Clarito!!! Excelentes explicaciones!!!😍
gracias profesora por llevarnos de la mano...
Muchas gracias freeCodecamp por el curso en especial a Estefanía con su gran profesionalismo didáctico que siempre nos brinda. En este momento e finalizado la cursada después de un par de meses de escuchar, ver y transcribir el video en apuntes. Ahora continuare con los desafíos planteados
Excelente paseo por el curso y muy buenos ejercicios para practicar el Dom 👏👏
Estupendo 👌 como siempre 👍 de 💯
Gracias maestra....👏👏👏👏
Solo una cosita, quizás tu sgte. curso podría ser todo lo relacionado a APIS, servicios, Ajax, fetch, async await,.. así como websockets y mqtt.
Saludos.
Un gran aporte y de mucha ayuda, tiempo que no práctico dom, me enfoque más en React y deje de lado, éxitos al canal
Tefi, tenés el don de la enseñanza 😊. Gracias por traernos este grandioso curso! 🎉
Muy bueno el curso y bien ilustrado. Eres muy buena en esto. Te felicito.
Excelente Estefania, muy bueno el curso, me sirvió para refrescar conocimiento y aprender de
otro que no los conocía, ojala a futuro puedas hacer un curso de CSS profundizando en conceptos.
Sigue así....!!!
Excelente profe!!! De las mejores que hay
Muchas gracias Estefania.. lo entendí todo perfectamente, eres la mejor!
Gracias Estefanía x este curso estoy encantado aprendiendo! Bendiciones!!❤️🌈
Wow, justo lo que necesito, muchas gracias.
En el proyecto "3° Citas Aleatorias" decidi hacerlo por mi cuenta para practicar :)
Este es mi codigo:
const boton = document.getElementById('boton-cambiar-cita');
const cita = document.getElementById('cita');
const autor = document.getElementById('autor');
const citaRandom = ()=>{
let numRandom = Math.floor(Math.random() * 10);
let citaRandom;
for (citaRandom of citas) {
citaRandom = citas[numRandom]
}
return citaRandom
}
const actualizarDom = ()=> {
let indice = citaRandom()
cita.innerText = `${indice.texto}`
autor.innerText = `${indice.autor}`
}
boton.addEventListener('click', actualizarDom)