📌 [Actualización] Agregando soporte para LocalStorage: th-cam.com/video/SS0haGSC6vI/w-d-xo.html Este video intente grabarlo de una forma un poco mas ágil y rápido (para no hacer un video muy largo) pero con la misma calidad de siempre. Me harían un gran favor si ven el video y me comentan que les pareció :)
Perfecto! en mi caso la verdad es que me gustaría que muchos videos de TH-cam no duraran tanto, a veces no tenemos el tiempo que quisiéramos, así que creo esta idea es excelente. Saludos
hace algunos meses empecé a aprender con algunos tutoriales de este canal que deben tener unos 5 o 6 años. se puede apreciar la profesionalidad con la que ha creciendo el canal. recomendado :)
Gracias a vos es que entre al mundo del desarrollo web y me encantó aprendí de vos HTML,CSS y BOOTSTRAP gracias por tus vídeos y me alegro de haberme suscrito a tu canal genio.
¡Gracias por subir este vídeo! Llegué aquí por casualidad y me has ayudado a solventar un problema que tenía para implementar el tema oscuro en mi página web 😄🧡 Saludos desde España y tienes nuevo suscriptor 😊
Excelente aprenderlo de una vez ahora que estoy a punto de egresar, además hoy en día ya casi todo tiene modo oscuro y gracias a ti podre saber utilizarlo para que mis proyectos también lo tengan.
Este vídeo está genial! Has mejorado mucho el audio, en tus primeros vídeos el sonido era como muy metálico y agudo. Felicidades y gracias por tus aportaciones. Saludos.
Que buen vídeo man. No sabes cuánto me has ayudado con esto. Viendo solo este vídeo, pienso que SASS me podría ayudar mucho en el futuro, así que me pondré a aprender esta tecnología tan hermosa.
Excelente, he seguido muchos de tus vídeos y realmente he aprendido mucho. Gracias por ese aporte,hay cosas que ya manejaba pero me ha ayudado a afianzar así que no solo sirve para los iniciantes. Me gustaría que sacaras secciones del backend con Js: con mongoDB. O manejo de algún frameworks con Angular. De igual forma admiro mucho el tiempo que tomas para explicar en cada video.
tengo un problema cuando le doy inspeccionar elemento para ver como quedo con el responsive los logos se devuelven a como estaban antes de darle estilo, ademas de que no me funciona para aplicar el modo oscuro en algunas pantallas de celular
Este video hay que verlos como 3 veces para poder digerir tanta información! Creo que para meterse con Sass hay que entender supr bien el tema de css para comprender que debe hacer sass! gracias por los cursos!
No se porqué no logro poder poner los icon de fa centrados como acá, quedan hacia arriba, intenté margin pero agranda el tamaño del slide ese, flex y tampoco, no hay caso y hasta copié el mismo codigo y nada
Hola Falcon, la verdad muy excelente tus videos, se aprende mucho, yo estoy estudiando programacion, solo que en este video tu mencionas que los explicaras solo con CSS y JS ya que yo aun no he visto "sas" espero leas mi comentario, me gustaria saber si tienes algun video o podrias hacer uno utilizando solo CSS y JS sin utilizar "sas". Muchas gracias saludos cordiales
hola falcon me sale un error en js, el error sale la promer linea de const btnSwitch = document.querySelector('#switch'); y esto el lo que sale expected an identifier and instead saw const , espero me puedas ayudar, buen video
gran tuto, gracias, lastima que usas scss pero con css se hace muy fácil y mejor, se los dejo en css. .switch { background: #343D5B; border-radius: 1000px; border: none; position: relative; cursor: pointer; display: flex; outline: none; }
Tengo una duda que no he podido dar con la respuesta, en la pagina que estoy implementando este ejercicio, el color principal es el dark y al presionar cualquier boton del menu al momento de estar en el modo ligth se cambia el switch a modo dark sin cambiar los colores predeterminados, es decir, el switch me dice que esta en el modo dark cuando en realidad esta en el modo Ligth, que podria estar pasando?
Buenas alguien que me ayude, hice mi pagina con el modo oscuro y modo claro pero cuando activo el modo oscuro y paso de index a por ejemplo home y se desactiva el modo oscuro , quisiera saber como hacer en JS para que se mantenga el modo oscuro en todos los apartados de mi pagina
hola la pagina de fontawesome no me carga y llevo días sin poder acceder a ella ¿le pasa algo a ese sitio???. Afortunadamente baje los iconos con anterioridad y los puedo usar en mis proyectos sin conexión pero no me sé los códigos para usar los demás, donde puedo consultar esa información? agradecería una respuesta. Saludos desde Colombia.
Excelente. Muchas gracias. Una pregunta: me queda un recuadro de un color anaranjado por fuera del botón a pesar de no tener borde ni outline. ¿Cómo podría quitarlo?. Gracias!
Soy nuevo en esto y... si me salio la practica solo que quisiera cambiar la forma de las Cards, poner un titulo y agregar un solo boton que quede debajo del titulo, el problema es que cuando lo hago en ese diseño el titulo queda debajo de la fotografia ¿Como lo cambio? AYUUUUDAAAA
Hola! consulta: me funciona perfecto el código (sass y js) en el index principal, pero si en este mismo index tengo otro index enlazado, el modo oscuro no lo toma... ¿alguna posible solución? gracias!!!
Tengo una pregunta Falcón Master cuándo recargue la página vuelve al modo claro ¿Cómo puedo hacer que aunque se recargue la página se mantenga el modo oscuro si lo activo?
En CSS ahora tambien se pueden usar variables ... Por ejemplo, determinas tu variable así :root { --color-rojo: #f81f01; } y la llamas asi: .clase { background-color: var(--color-rojo); } Hice mi función de DarkMode usando variables en CSS dentro de mi proyecto sin compiladores y sin tener que recordar valores o repetir estilos ... :P
Hola, se que no tienen nada que ver con el vídeo pero tengo una duda. ¿hay alguna manera de hacer que con javascript un input tome un valor de ahí? Es decir, si por ejemplo tengo en html...
Document
y tengo en javascript var random=Math.round(Math.random()*100); ¿como puedo hacer que el valor random lo tome el input? espero no haberte incomodado, te sigo desde algún tiempo y tus vídeos sin lugar a dudas me han ayudado bastante en mi vida estudiantil.
no me funciona el el js const btnSwitch = document.querySelector("#cambio"); btnSwitch.addEventListener('click', () => { document.body.classList.toggle("oscuro"); btnSwitch.classList.toggle('active'); }); ayuda me aparecePropiedades-noche.js:3 Uncaught TypeError: Cannot read property 'addEventListener' of null español:Propiedades-noche.js: 3 Error de tipo no detectado: No se puede leer la propiedad 'addEventListener' de null
¿Puede ser que cuando uno cambie de página (por ejemplo, en el ejemplo de tu nav, si uno hace click en "contacto" se va a otra página) vuelva al modo claro? La onda es que quede se quede definitivamente en el modo que elija el usuario hasta que el usuario vuelva a apretar el botón
Si se puede, pero todo depende de como estas siviendo la página nueva a la que estas accediendo, ya que dependiendo de eso puedes usar localstorage, como lo enseño en este video: th-cam.com/video/SS0haGSC6vI/w-d-xo.html O usar cookies para guardar la preferencia y que el servidor devuelva la página en dark mode directamente.
Muy bueno tu video, directo al hueso, lo implemente en en una pagina en la que estoy trabajando, y me funciona genial solo en la media menor a 700px, mas de eso no me coloca de forma dinámica la clase en el body, y por ende no me funciona, sabrías el por que de esto? nuevamente gracias.
📌 [Actualización] Agregando soporte para LocalStorage: th-cam.com/video/SS0haGSC6vI/w-d-xo.html
Este video intente grabarlo de una forma un poco mas ágil y rápido (para no hacer un video muy largo) pero con la misma calidad de siempre.
Me harían un gran favor si ven el video y me comentan que les pareció :)
Perfecto! en mi caso la verdad es que me gustaría que muchos videos de TH-cam no duraran tanto, a veces no tenemos el tiempo que quisiéramos, así que creo esta idea es excelente. Saludos
@@oscardiaz9170 Gracias por tu comentario :D
Ha quedado perfecto!.
Se ve muy bien, y la explicación se entiende. Muy buen trabajo
@@carlosalexandercr1487 Gracias
hace algunos meses empecé a aprender con algunos tutoriales de este canal que deben tener unos 5 o 6 años.
se puede apreciar la profesionalidad con la que ha creciendo el canal.
recomendado :)
Gracias a vos es que entre al mundo del desarrollo web y me encantó aprendí de vos HTML,CSS y BOOTSTRAP gracias por tus vídeos y me alegro de haberme suscrito a tu canal genio.
Gracias a ti mi aprendizaje en programación ha sido un poco más fácil. Agradecido contigo, tu forma de enseñar se entiende perfectamente.
Muchas gracias por el apoyo a mis videos, me da mucho gusto escuchar que te sean de mucha ayuda.
Saludos!
¡Gracias por subir este vídeo! Llegué aquí por casualidad y me has ayudado a solventar un problema que tenía para implementar el tema oscuro en mi página web 😄🧡 Saludos desde España y tienes nuevo suscriptor 😊
me encantaaaaa, nunca dejes de hacer estos tutoriales tan bellos
Excelente aprenderlo de una vez ahora que estoy a punto de egresar, además hoy en día ya casi todo tiene modo oscuro y gracias a ti podre saber utilizarlo para que mis proyectos también lo tengan.
Excelente explicación, me salvaste de perder mas tiempo buscando como hacer esto, gracias!!
Este vídeo está genial! Has mejorado mucho el audio, en tus primeros vídeos el sonido era como muy metálico y agudo. Felicidades y gracias por tus aportaciones. Saludos.
Es genial que expliques el porqué de cada propiedad que le aplicas, muchas gracias¡🙏👏💗
Gracias!! Messive y me vino re bien para meterle a las practicas!!
Muchas gracias!. El conocimiento que compartís no tiene precio, que gran valor al alcance de todos. Admirable.
Muchas gracias!
The simple the best! Mejor tutorial en la web no solo en youtube. Gracias por tu contenido lml chido
Me has quitado un dolor de cabeza, grande Falcon
Excelente video... eres un crack... que emocion... tu ejemplo motiva... saludos 🤓
Buen video, me gustó que explicaste el paso a paso de función cumplía cada código.. Y la lógica de como cuando cambian el nombre de la clase..
Gracias!
Con FalconMásters, llevo 5 segundos del video y doy manito arriba inmediatamente, excelente tu contenido, el mejor 👏👏👏👏👏👏👏👏👏👏👏🍻🍻🍻🍻🍻🍻🍻🇨🇱🇨🇱🇨🇱🇨🇱🇨🇱🇨🇱
Muchas gracias!
Tú de ninguna manera te mereces 338,000 suscriptores... para mí por lo menos mereces unos 338 millones, gracias por los videos!
Muchas gracias!
vaya, parece que me lees la mente
tome su like buen hombre
Gracias
Opera GX jaja, entendi esa referencia
Muy buen video. Explicas muy bien!
Soy estudiante de unos de tus curso de udemy, y me gusta cómo explicas las cosas!
Muchas gracias Luis!
gracias carlos arturo, muy educativo el vídeo, saludos desde puente alto, chile.
Que buen vídeo man. No sabes cuánto me has ayudado con esto.
Viendo solo este vídeo, pienso que SASS me podría ayudar mucho en el futuro, así que me pondré a aprender esta tecnología tan hermosa.
Muchas gracias, me alegra que el video te sirva. Y si SASS es genial!
Sí, eres muy bueno en la programación. Te admiro.
Hola Arturo, eres muy bueno agradezco que compartas tus conocimientos, eres buenisimo, MUCHAS GRACIAS
Gracias!
Excelente video Carlos muy bueno
Eres un crack justo lo que buscaba, muy buen video saludos.
Mi enhorabuena porque explicas las cosas muy bien y paso a paso.
Gracias, lo que necesitaba está en 17:14
Excelente vídeo, como todos los anteriores. Muchas Gracias por compartir tus conocimientos !!!!!!!
Excelente tutorial, muchas gracias!!!
Excelente, he seguido muchos de tus vídeos y realmente he aprendido mucho. Gracias por ese aporte,hay cosas que ya manejaba pero me ha ayudado a afianzar así que no solo sirve para los iniciantes. Me gustaría que sacaras secciones del backend con Js: con mongoDB. O manejo de algún frameworks con Angular. De igual forma admiro mucho el tiempo que tomas para explicar en cada video.
bro, compra un curso en udemy son los mejores
Como se podria hacer para que cuando se haga click, el span haga una transicion de un lado al otro?
Excelente trabajo!! 😀👍🏻
Gracias!
tengo un problema cuando le doy inspeccionar elemento para ver como quedo con el responsive los logos se devuelven a como estaban antes de darle estilo, ademas de que no me funciona para aplicar el modo oscuro en algunas pantallas de celular
Eres un master, muchas gracias!
Tengo una pregunta, como se haría para guardar la opción del modo oscuro, que sin importar que se recargue la página, siga estando en modo oscuro?
Gracias!!! Excelente vídeo, buen aporte, sigue creciendo, me has ayudado mucho, eres un pro
Sencillo y funcional gracias por el video!
Videaso, gran aporte a la comunidad bro ;)
Gracias!
excelente falcon masters
Este video hay que verlos como 3 veces para poder digerir tanta información! Creo que para meterse con Sass hay que entender supr bien el tema de css para comprender que debe hacer sass! gracias por los cursos!
Muy bueno! te felicito!
Me parece un vídeo muy interesante, y me ha gustado muchísimo. Felicitaciones por tu vídeo. Hay que empezar por un curso de Sass
Ya tiene uno en udemy. Yo lo aprendi pero me quede con css
es el mismo método en sublime text?
no me funciona el método con sass de "body.dark &"
para cambiar los valores al hacer el cambio dark
Buenazo, muchas gracias!
Me podrias explicar por favor la propiedad transition que aplicaste
Excelente Amigo me gustan mucho tus videos
Gracias!
Great video!!! Thanks a lot for the English subtitles 👍🏽
Muy buen video, buenísimo
Muy buen video me encantó 👌👍
Muy buenoo, por cierto tu voz es idéntica a la de Isa Marcial jaj
Excelente canal!
holaa, linkeo el script en mi html pero cuando actualizo mi pagina web no me aparecen los botones , sino la class switch
No se porqué no logro poder poner los icon de fa centrados como acá, quedan hacia arriba, intenté margin pero agranda el tamaño del slide ese, flex y tampoco, no hay caso y hasta copié el mismo codigo y nada
Excelente video y contenido!
Gracias!
como yo lo puedo poner que aplique para todas las hojas o paginas que tengo enlazada a la principal?
Hola Falcon, la verdad muy excelente tus videos, se aprende mucho, yo estoy estudiando programacion, solo que en este video tu mencionas que los explicaras solo con CSS y JS ya que yo aun no he visto "sas" espero leas mi comentario, me gustaria saber si tienes algun video o podrias hacer uno utilizando solo CSS y JS sin utilizar "sas". Muchas gracias saludos cordiales
hola pudiste resolverlo? .switch{
background: #111111;
border-radius: 1000px;
border: none;
position: relative;
cursor: pointer;
display: flex;
outline: none;
}
.switch::after{
content: "";
display: block;
width: 30px;
height: 30px;
position: absolute ;
background: #f1f1f1;
top: 0;
left: 0;
right: unset;
border-radius: 100px;
transition: .3s ease all;
box-shadow: 0px 0px 2px 2px rgba (0,0,0,.2) ;
}
.switch:active{
background: rgb(216, 190, 142);
color: #000;
}
.switch:active::after{
right: 0;
left: unset;
}
span{
width: 30px;
height: 30px;
line-height: 30px;
display: block;
background: none;
color: #fff;
}
se traslada pero no queda fijo y regresa nuevamente a su posicion inicial
te amo mi loco
Excelente vídeo gracias 👌👌
Un video de calidad gracias por este aporte y el curso en Udemy esta excelente.
Muchas gracias!
Como busco sus cursos de udemy?
@@pecorarodavid6950 podes entrar en el link que está en la descripción de el video ahí hay varios cursos que el tiene.
@@pecorarodavid6950 Los tienes en la descripción del video
muy buen video amigo!
Excelente como siempre.
Gracias!
Me gustó mucho el video! Tengo entendido que ahora sí se pueden usar variables en CSS puro verdad? Estoy comenzando con esto del desarrollo...
woah very good it helped me with my tesis! thank you Carlous!
Tramposo
Wooo cool no conocia el Sass, gran video nuevas cosas aprendiendo :D
Muy interesante. Gracias.
muy útil, muy claro el video
Gracias
hola falcon me sale un error en js, el error sale la promer linea de const btnSwitch = document.querySelector('#switch');
y esto el lo que sale expected an identifier and instead saw const , espero me puedas ayudar, buen video
Exelente, Gracias!
Muy buen vídeo Falcón
Gracias!
gran tuto, gracias, lastima que usas scss pero con css se hace muy fácil y mejor, se los dejo en css.
.switch {
background: #343D5B;
border-radius: 1000px;
border: none;
position: relative;
cursor: pointer;
display: flex;
outline: none;
}
.switch span {
width: 30px;
height: 30px;
line-height: 30px;
display: block;
background: none;
color: #fff;
text-align: center;
}
.switch::after {
content: "";
display: block;
width: 30px;
height: 30px;
position: absolute;
background: #f1f1f1;
top: 0;
left: 0;
right: unset;
border-radius: 100px;
transition: .3s ease all;
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .2);
}
.switch.active {
background: #fbbf13;
color: #000;
}
.switch.active::after {
right: 0;
left: unset;
}
Gracias man!!! No sabia como hacer esta parte, .switch.active::after, sin sass
Brother de antemano muchas gracias por el video pero el repositorio no esta el codigo del video...
Tengo una duda que no he podido dar con la respuesta, en la pagina que estoy implementando este ejercicio, el color principal es el dark y al presionar cualquier boton del menu al momento de estar en el modo ligth se cambia el switch a modo dark sin cambiar los colores predeterminados, es decir, el switch me dice que esta en el modo dark cuando en realidad esta en el modo Ligth, que podria estar pasando?
¡Buenas! Esta es la continuación de este video, creo que es tu solución:
th-cam.com/video/SS0haGSC6vI/w-d-xo.html
Buenas alguien que me ayude, hice mi pagina con el modo oscuro y modo claro pero cuando activo el modo oscuro y paso de index a por ejemplo home y se desactiva el modo oscuro , quisiera saber como hacer en JS para que se mantenga el modo oscuro en todos los apartados de mi pagina
Hola! :/ me gusto tu curso : ✔️ Curso Completo de Diseño Web Profesional, pero quería saber si en un futuro lo vas a actualizar .
Eduardo Alba Hola Eduardo el curso está actualizado sin embargo si que continuo agregando secciones nuevas
Puede hacer un pequeño video aparte o un short sobre como ponerla que cuando se actualize se guarde el modo y no es reinicie
Hola Felix, si lo hice, aquí lo tienes: th-cam.com/video/SS0haGSC6vI/w-d-xo.html
hola
la pagina de fontawesome no me carga y llevo días sin poder acceder a ella ¿le pasa algo a ese sitio???. Afortunadamente baje los iconos con anterioridad y los puedo usar en mis proyectos sin conexión pero no me sé los códigos para usar los demás, donde puedo consultar esa información? agradecería una respuesta.
Saludos desde Colombia.
como podria hacer que el movimiento de izquierda a derecha sea mas suave y lento?
El código script si o si debo agregarlo al principio? No puedo agregarlo al final?
Excelente. Muchas gracias. Una pregunta: me queda un recuadro de un color anaranjado por fuera del botón a pesar de no tener borde ni outline. ¿Cómo podría quitarlo?. Gracias!
genialisimo !!!!!!
Soy nuevo en esto y... si me salio la practica solo que quisiera cambiar la forma de las Cards, poner un titulo y agregar un solo boton que quede debajo del titulo, el problema es que cuando lo hago en ese diseño el titulo queda debajo de la fotografia ¿Como lo cambio? AYUUUUDAAAA
Hola de casualidad sabes como se puede pasar que aparezca en modo oscuro a claro
Saludos, muy bueno
Hola! consulta: me funciona perfecto el código (sass y js) en el index principal, pero si en este mismo index tengo otro index enlazado, el modo oscuro no lo toma... ¿alguna posible solución? gracias!!!
el codigo javascript del repositorio no se ve
¿Y si estoy trabajando con css normal camba en algo? Porque al momento de poner el & deja de funcionar
En el video también explico como hacerlo con CSS sin SASS
¿Que themes tienes instalados en VSC?
Los de Ayu
Tengo una pregunta Falcón Master cuándo recargue la página vuelve al modo claro ¿Cómo puedo hacer que aunque se recargue la página se mantenga el modo oscuro si lo activo?
En el segundo video explico como:
th-cam.com/video/SS0haGSC6vI/w-d-xo.html
En CSS ahora tambien se pueden usar variables ... Por ejemplo, determinas tu variable así :root { --color-rojo: #f81f01; } y la llamas asi: .clase { background-color: var(--color-rojo); } Hice mi función de DarkMode usando variables en CSS dentro de mi proyecto sin compiladores y sin tener que recordar valores o repetir estilos ... :P
lo aclara en el video!
nota: css tiene variables,, por el resto un video interesante.
Venia a comentar lo mismo ja ja ja
Excelente ✌🏽
Saludos Falconmasters, baje el archivo del repositorio, pero falta el contenido del archivo js. gracias
Hola, se que no tienen nada que ver con el vídeo pero tengo una duda. ¿hay alguna manera de hacer que con javascript un input tome un valor de ahí?
Es decir, si por ejemplo tengo en html...
Document
y tengo en javascript
var random=Math.round(Math.random()*100);
¿como puedo hacer que el valor random lo tome el input?
espero no haberte incomodado, te sigo desde algún tiempo y tus vídeos sin lugar a dudas me han ayudado bastante en mi vida estudiantil.
no me funciona el el js
const btnSwitch = document.querySelector("#cambio");
btnSwitch.addEventListener('click', () => {
document.body.classList.toggle("oscuro");
btnSwitch.classList.toggle('active');
});
ayuda
me aparecePropiedades-noche.js:3 Uncaught TypeError: Cannot read property 'addEventListener' of null
español:Propiedades-noche.js: 3 Error de tipo no detectado: No se puede leer la propiedad 'addEventListener' de null
ya no necesito ayuda ya lo arregle todo gracias por nada
¿Puede ser que cuando uno cambie de página (por ejemplo, en el ejemplo de tu nav, si uno hace click en "contacto" se va a otra página) vuelva al modo claro? La onda es que quede se quede definitivamente en el modo que elija el usuario hasta que el usuario vuelva a apretar el botón
Si se puede, pero todo depende de como estas siviendo la página nueva a la que estas accediendo, ya que dependiendo de eso puedes usar localstorage, como lo enseño en este video:
th-cam.com/video/SS0haGSC6vI/w-d-xo.html
O usar cookies para guardar la preferencia y que el servidor devuelva la página en dark mode directamente.
Yo quiero saber cómo se hace eso en sublime text 2
Muy bueno tu video, directo al hueso, lo implemente en en una pagina en la que estoy trabajando, y me funciona genial solo en la media menor a 700px, mas de eso no me coloca de forma dinámica la clase en el body, y por ende no me funciona, sabrías el por que de esto? nuevamente gracias.
Genial!!!!!!!!!!!!!!!!!!!!!!
en que parte explicasa como se hace solo con css sin sass