Bootstrap 4 Sitio Web Desde Cero, con Scroll Reveal y Smooth scrolling

Поделиться
HTML-код
  • Опубликовано: 30 янв 2025

Комментарии • 137

  • @davidalejandroballen4223
    @davidalejandroballen4223 3 года назад

    Wow faz, usted me ha ayudado mucho, espero que en verdad Dios te bendiga, que tengas un maravilloso dia.

  • @robertodrumond3583
    @robertodrumond3583 2 года назад +1

    Es inreible que cad avideo que veo tuyo termino aprendiendo algo nuevo, eres un genio, estoy practicamente empezando con 35 años por cuenta propia como autodidacta y aunque el camino esta siendo algo dificil espero al menos llegar a saber al menos la mitad d elo que tu sabes y poder dominarlo con esa facilidad, muchas gracias por mostrar ese talento e por explicar con tanta claridad.

  • @anag2125
    @anag2125 5 лет назад +12

    Mortal! Estaba buscando esto!!! Muchas empresas ´piden Boostrap y me decidí a hacer al menos un proyectito con esa librería :D

  • @audelmartinez6665
    @audelmartinez6665 4 года назад +1

    Explicas a muy buena velocidad y eso agiliza mucho el aprendizaje. Felicitaciones.

  • @AlejandroGuerrero
    @AlejandroGuerrero 4 года назад +1

    Muchas gracias. Funcionando todo en Octubre 2020. Saludos desde Madrid.

  • @patriciaparra2606
    @patriciaparra2606 3 года назад

    Excelente explicación!. Muchas gracias por tus colaboraciones a nosotros los programadores.

  • @Gerardo3491
    @Gerardo3491 5 лет назад

    Gracias por el video. Hacen falta mas canales como el tuyo.

  • @fhertizren7145
    @fhertizren7145 4 года назад

    Excelente curso y también la manera de explicar tanto conocimiento. Gracias!

  • @juanbarrionuevo3320
    @juanbarrionuevo3320 4 года назад

    Muchas Gracias Profesor! Sus aportes son de gran valor para nosotros.

  • @serome111
    @serome111 6 лет назад +10

    Excelente video men Muchas Gracias por la dedicación al mundo.

  • @sivartechnology7998
    @sivartechnology7998 2 года назад

    Gracias por todo el contenido hermano, sos un Crack

  • @fahico98
    @fahico98 6 лет назад +1

    Muy buen video, felicitaciones y gracias por todos tus aportes... saludos desde Colombia...!

  • @hernandonj
    @hernandonj Год назад

    Muy buen video, muy util. Muchas gracias!

  • @astronauth
    @astronauth 6 лет назад +4

    Gracias por compartir tus conocimientos, eres muy bueno explicando!

  • @nanaschannel8972
    @nanaschannel8972 4 года назад

    muchas gracias amigo cuando gane dinero te daré una buena paga gracias por tu trabajo

  • @ricardorios74
    @ricardorios74 5 лет назад

    Brillante!!! muy didactico ... exitos y mas videos de este tipo ... saludos desde Paraguay

  • @Marcelo-gw7ik
    @Marcelo-gw7ik 6 лет назад +3

    excelente material una vez mas fazt!, saludos desde chile

  • @davidlionheart2875
    @davidlionheart2875 3 года назад

    Muchas gracias por tus video Fatz. Hice toda la pagina usando React y Boostrap ya que ando practicando con el Framework, pero no pude integrar el Scroll reveal, instale las dependencias y lo importe en el componente pero no me sirve. El smoth de jquery me funciona perfectamente.

  • @dr_lemoon
    @dr_lemoon 3 года назад

    muchas gracias por el tutorial, pude personalizarlo y quedó genial!

  • @luisdaniellozanofraire4929
    @luisdaniellozanofraire4929 4 года назад +1

    Hola, estoy viendo los tutoriales y me gustaria hacer una observacion, en los videos pasados tu mismo nos enseñaste "sticky top" que parece ser una solucion instantanea al problema con el nav para que se quede arriba sin estorbar al contenido

  • @maximojuniorapazachirhuana9641
    @maximojuniorapazachirhuana9641 5 лет назад +17

    para el efecto del scroll scrolling lo puede hace sin js, con lo siguiente.
    en css main escriban
    html{
    scroll-behavior: smooth;
    }
    les dara el mismo efecto

    • @juliancamilo5045
      @juliancamilo5045 5 лет назад

      Pro

    • @andy1858
      @andy1858 5 лет назад

      Pro X2

    • @leandrodean
      @leandrodean 4 года назад

      tenes idea porque en los script no me funcionan los atrributos distance y deley.

    • @Mordidaporlasviboras
      @Mordidaporlasviboras 4 года назад

      Me lo manda cortado.

    • @tezzla644
      @tezzla644 4 года назад

      @@Mordidaporlasviboras No tiene soporte en todos los navegadores o versiones de los mismos, lo digo porque me pasa lo mismo y lo busqué u-u

  • @metaltoon2008
    @metaltoon2008 6 лет назад +1

    Excelente explicación, un ejercicio muy práctico

  • @alexbxxi
    @alexbxxi 5 лет назад

    Excelente aporte, me ayudó mucho con mi proyecto, saludos Fatz!

  • @favenegas6396
    @favenegas6396 4 года назад

    Eres el mejor!! gracias !!!

  • @aaaaaagus09
    @aaaaaagus09 6 лет назад +1

    Me encantan este tipo de vídeos. Te dejo un like

  • @eduardonavarro9342
    @eduardonavarro9342 4 года назад

    Muchas gracias.... nos ayudas a muchos!!!

  •  6 лет назад +2

    Muy buen vídeo. Muchísimas gracias. Saludos.

  • @tryclopechile2056
    @tryclopechile2056 4 года назад

    Mil gracias por tan valioso contenido!!

  • @nadiefuego
    @nadiefuego 6 лет назад +1

    Saludos. A poner en practica el video.

  • @alexisortez2331
    @alexisortez2331 6 лет назад +3

    Muchas gracias amigo me ha sido de gran ayuda :)

  • @wicr95
    @wicr95 5 лет назад

    Gracias amigo, justo lo que buscaba.

  • @preachermatzi
    @preachermatzi Год назад

    Muy bien explicado todo

  • @facusergio8020
    @facusergio8020 6 лет назад +1

    Gracias por el contenido fazt sos un crack

  • @merwilvegas7064
    @merwilvegas7064 6 лет назад

    graciasss men !!!!! has salvado mi trabajo ! jeje!

  • @toplokendoshorts2743
    @toplokendoshorts2743 2 года назад

    Hola!! @Fazt puedes realizar un video con referencia en Shopify? mas exactamente en como mejorar la sesión en agregar el carrito de compras . Gracias

  • @aristorodriguez8431
    @aristorodriguez8431 6 лет назад

    Muy bueno, felicidades por el vídeo!

  • @javierr5845
    @javierr5845 6 лет назад +4

    Excelente video Fazt, de verdad tus tutoriales son de mucha ayuda, me preguntaba si hay alguna manera de ocupar el smooth scroll por ejemplo de esta pagina en esta misma pagina pero desarrollada en reactjs, saludos crack!

  • @TitoRiccardo
    @TitoRiccardo 4 года назад

    Exelente video buen hombre, ya tiene su LIKE

  • @yeshuaa_9477
    @yeshuaa_9477 4 года назад +11

    Si se dan cuenta, en la opcion de "HOME" las letras se quedan en negro, esto es porque en el HTML viene la opción de activada
    Home
    Sino quieren que pase eso, solo borren el "active"
    Saludos

  • @freelancerluigi
    @freelancerluigi 5 лет назад

    Gracias hermano, eres de gran ayuda

  • @enriqueruiz320
    @enriqueruiz320 4 года назад

    Muy bueno 👍

  • @Francis-ly5nx
    @Francis-ly5nx 6 лет назад +1

    Haces muy buenos videos

  • @tryclopechile2056
    @tryclopechile2056 4 года назад

    Muchas gracias amigo!!!!!!!!!!!

  • @entretenimientoglobal4926
    @entretenimientoglobal4926 4 года назад

    Excelente video

  • @elgatodiego
    @elgatodiego 6 лет назад +1

    Gracias. Muy bueno

  • @jorgemedina2272
    @jorgemedina2272 6 лет назад +1

    Excelente vídeo!

  • @ctaptc1pt
    @ctaptc1pt 5 лет назад

    Simple y conciso ;)

  • @davlinaresles
    @davlinaresles 4 года назад

    Severo Tutorial thanks

  • @MrCutter
    @MrCutter 6 лет назад +1

    Qué interesante! 🤗🙌 Likee

  • @ledragon9917
    @ledragon9917 3 года назад +1

    Una duda, En header pones div col-md-6 a izquierda y derecha, que son, como dices 6 columnas a la izquierda y 6 a la derecha, ¿por qué tantas columnas para una Imagen de un lado y texto del otro lado?

  • @vlas73
    @vlas73 5 лет назад +1

    Gracias por los tutoriales, muy buenos. Por casualidad tendras alguna referencia o algo que recomiendes para un form wizard?

  • @Diego4322237
    @Diego4322237 3 года назад

    Mil gracias

  • @milito-no.k3149
    @milito-no.k3149 5 лет назад

    Hola loco, gracias por el material

  • @arielzarate3643
    @arielzarate3643 5 лет назад

    muy buena tu pagina . yo quisiera tener la mia tambien!!

  • @edgardocometto2051
    @edgardocometto2051 4 года назад

    Hola Fazt. Gracias por tus aportes permanentes. Te hago una consulta: en el minuto 12:55 colocas la clase ml-auto para alinear a la derecha.. lo he intentado de 1000 formas, pero no me funciona. Tienes idea de que podria ser? A proposito, de donde eres? Argentina?

    • @edgardocometto2051
      @edgardocometto2051 4 года назад

      Finalmente lo pude solucionar con css. Margin-left: auto.. 🤷‍♂️🤷‍♂️

    • @josemanuelmonroyveizaga2905
      @josemanuelmonroyveizaga2905 3 года назад

      me podrias mostar como lo solucionaste?... estoy con bootstrap 5 y me pasa lo mismo y no puedo solucionarlo por favor!

    • @edgardocometto2051
      @edgardocometto2051 3 года назад +1

      @@josemanuelmonroyveizaga2905
      Finalmente lo pude solucionar con css.
      Le agregué un clase y en css configuré Margin-left: auto.
      Con bootstrap 4 no lo pude lograr.

    • @JJ-dk7vi
      @JJ-dk7vi 3 года назад

      Si usas Bootstrap 5, prueba con me-left (margin end) (según leí en la documentación, ahora se haría de esa manera)

    • @JJ-dk7vi
      @JJ-dk7vi 3 года назад

      Perdón, ms-auto (margin start) (esto es lo malo de escribir de memoria)

  • @angelvera8850
    @angelvera8850 4 года назад

    Hola, estoy aprendiendo bastante con los videos. Si ya desarrollé mi webpage con bootstrap, será necesario crear algún archivo más para subirlo a mi hosting? ¿Tienes algún video de referencia para realizar el proceso?

  • @maggot008
    @maggot008 6 лет назад +1

    Excelente amigo

  • @rogeracg
    @rogeracg 6 лет назад

    Hola amigo, podrías hacer un curso videotutorial o curso de como implementar una app websocket desde 0 o con librerias de tercceros como ratchet por ejemplo ? :/ Estoy seguro que no soy el único que te lo agradecería :D

  • @flaviolopez586
    @flaviolopez586 4 года назад

    Muy bueno ,algún libro que me recomienden para aprender JavaScript,para leer en el trabajo , gracias.

  • @jhannoceasermena1737
    @jhannoceasermena1737 3 года назад

    una pregunta, de ante mano gracias, donde o como consigo mas clases para decorar el sitio web.

  • @biblioteca.antarctica
    @biblioteca.antarctica 6 лет назад +7

    Te recomiendo hacer un vídeo de Angular , php y mysql

    • @danielyanez8896
      @danielyanez8896 6 лет назад +3

      que tal recomendacion jajaja , porque no dices pordrias hacer un video de ese tipo seria de mucha ayuda

  • @MrQwertyfm
    @MrQwertyfm 4 года назад

    consulta, que faltaría hacer para al clickear sobre unos de los menús vaya al comienzo de esa sección??

  • @davidfaudito5762
    @davidfaudito5762 6 лет назад +1

    buen video bro

  • @ignaciodamiang
    @ignaciodamiang 4 года назад

    Genioooooooo

  • @edosve
    @edosve 4 года назад

    Scroll Reveal depende de alguna libreria?

  • @moonlight.96778
    @moonlight.96778 6 лет назад

    ¡Graciaaas!

  • @lastblade4400
    @lastblade4400 6 лет назад

    Podrias hacer un video de como agregar formularios de contacto con varias casillas de llenado?

    • @lastblade4400
      @lastblade4400 6 лет назад

      Pero que sea funcional con algunas pruebas si es posible ese tutorial

  • @JuanseTech
    @JuanseTech 5 лет назад +3

    Ahora no se debe usar nada de jquery para hacer lo del smooth scroll, con agregar html{ scroll-behavior: smooth} Es casi igual el efecto y solo con una linea de codigo

  • @diana99hd
    @diana99hd 5 лет назад

    Gracias

  • @alexandergarcia6479
    @alexandergarcia6479 5 лет назад

    como podemos subirla a la web para que si la buscaramos por ejemplo con google nos apareciera? muchas gracias por el vídeo.

  • @JonathanOrtiz-nc8yl
    @JonathanOrtiz-nc8yl 4 года назад

    cuando agrego la clase conteiner a la barra de navegacion todo se me junta a la izquierda, que hago?

  • @ortiz416
    @ortiz416 6 лет назад +2

    Puedes Aser formulario de contacto PHP y MySQL

  • @rantesMDP
    @rantesMDP 5 лет назад

    ¿Se debe pagar por scrollreveal para su uso? O esperan que lo hagamos.

  •  6 лет назад +1

    Buenos vídeos!, saludos desde mi canal !!

  • @kantyDarius
    @kantyDarius 6 лет назад

    Ey viejo... En que te gusta programar mas: front o backend?

    • @FaztTech
      @FaztTech  6 лет назад +2

      me voy por el back yo creo, esta más relacionado a programar, y a la lógica de las apps. aunque el front también se esta complicando estos días :D

    • @kantyDarius
      @kantyDarius 6 лет назад +1

      Opino igual

  • @neonknight04
    @neonknight04 5 лет назад

    muy buen video, solo una pregunta segui todos tus pasos pero al final al hacer click en home, about, y contact me manda a esa parte pero me deja un poco abajo cortando la imagen y el texto un poco de arriba, cual podra ser el problema?

    • @anag2125
      @anag2125 5 лет назад +2

      Necesitas ponerle un margen igual como hizo con la primera sección!

    • @neonknight04
      @neonknight04 5 лет назад

      @@anag2125 muchas gracias

    • @andy1858
      @andy1858 5 лет назад

      @@anag2125 No entiendo bien como Ana :/

    • @Mordidaporlasviboras
      @Mordidaporlasviboras 4 года назад

      @@andy1858 Home
      y en el main.css puse:
      #info-one {
      padding-top: 50px;
      padding-bottom: 50px;
      }

  • @juanmanuelhernandez9457
    @juanmanuelhernandez9457 6 лет назад

    como hacer para que, al hacer clic al menú el scroll haga un movimiento más lento que el que hace en el vídeo

  • @Novit_10x
    @Novit_10x 4 года назад

    Disculpa pero no tendras alguna pagina donde hay animaciones para añadir a mi pagina , me refiero como scrollreveal

  • @roderickdiaz3834
    @roderickdiaz3834 5 лет назад

    se puede para moviles ?

  • @ivanrodriguez3405
    @ivanrodriguez3405 3 года назад

    Fazt, ya el ml de boostrap no funciona? a mi no me sirve :(

  • @nestorcabrera4105
    @nestorcabrera4105 4 года назад

    Al momento de darle al home me lo muestra recortado, ¿alguna recomendación??

  • @ivanleiva9651
    @ivanleiva9651 6 лет назад

    hola,una pregunta,como puedo cambiar el tamaño de una imagen sin usar las Columnas? me quedo esa duda disculpa...

    • @fhertizren7145
      @fhertizren7145 4 года назад

      @Hernandez Valdez Erick Ramon Gracias a ambos, no me aparecía la imagen

  • @chompigomezcassou2910
    @chompigomezcassou2910 2 года назад

    No me funcionaba el ml-auto del NavBar: en Bootstrap 5 cambiaron "Renamed .ml-* and .mr-* to .ms-* and .me-*." (wtf???)

  • @oscargm1979
    @oscargm1979 4 года назад +1

    Si usais sticky-top en vez de fixed-top te ahorras darle el margin-top al header,hay que ahorrar -_-

  • @jortigasperu
    @jortigasperu 6 лет назад

    no entendi el 100% del ancho de las columnas.. =?

  • @Michiadventures
    @Michiadventures 6 лет назад +1

    Hola muchas gracias por tu trabajo, felicidades por compartir tu conocimiento. Quería preguntarte sobre como se puede hacer que el efecto Smooth scrolling se aplique en Safari, en Chrome funciona sin problema pero en Safari no, y también quisiera saber si sabes cómo hacer que que cuando desplazas hacia arriba el scroll se anime de nuevo los elementos como sucede en esta página: kubrick.life/?fbclid=IwAR1SuxzvpGyXmsyzk3lQ48f-WsWcMluHpQ03vjirWjlcLl70U61NqGI385s Muchas muchas gracias.

  • @Mordidaporlasviboras
    @Mordidaporlasviboras 4 года назад

    El menú hamburguesa no se despliega, así que tuve que agregarle un script que tenía de casualidad en otro proyecto

  • @serome111
    @serome111 6 лет назад

    Men será que me puedes dar una ayuda, por alguna razón no me está funcionando el responsive

    • @luismunoz9126
      @luismunoz9126 6 лет назад +1

      copiaste bien el enlace desde bootstrap?

    • @serome111
      @serome111 6 лет назад +1

      ya lo solucione es que hacia falta poner una etiqueta muy importante para que funcione el responsive que es esta, estaba en la documentación. de otra manera no funciona el responsive en dispositivos móviles.
      ¡gracias! de igual forma.

    • @luismunoz9126
      @luismunoz9126 6 лет назад +1

      tienes toda la razón, no había apretado f12 para verificarlo jajajajaja

    • @luismunoz9126
      @luismunoz9126 6 лет назад

      disculpa mi ignoracia, pero creo que sin la etiqueta aún se ve mejor en responsive 440x435 que con la etiqueta

    • @serome111
      @serome111 6 лет назад

      men pues yo lo verifique para el responsive de 320x568 que es el de mi telefono y no funciono los otros tamaños pues, quiza se mire, pero no en el tamaño adecuado a la pantalla. :v yo si lo verifique jajaja soy re detallista con eso del diseño.

  • @jhannoceasermena1737
    @jhannoceasermena1737 3 года назад

    ml-auto no lo toma el código sigue igual ayuda

    • @josemanuelmonroyveizaga2905
      @josemanuelmonroyveizaga2905 3 года назад

      creo q el problema es que estamos usando bootstrap5 y y tampoco me funciona le cambio al 4 y recien funciona alguna solucion?

    • @jhannoceasermena1737
      @jhannoceasermena1737 3 года назад +2

      @@josemanuelmonroyveizaga2905 cambiaron ahora es ms, solo eso no mas es

    • @jessicamartinezcano1389
      @jessicamartinezcano1389 3 года назад

      @@jhannoceasermena1737 Muchas gracias por tu aporte.

    • @sevikyx-9008
      @sevikyx-9008 3 года назад

      @@jhannoceasermena1737 gracias

  • @hectorvillalobosmorales9813
    @hectorvillalobosmorales9813 4 года назад +1

    no me funciona los efectos del scroll reveal :(

    • @jorgepardo8867
      @jorgepardo8867 4 года назад

      a mi tampoco :(

    • @leandrodean
      @leandrodean 4 года назад +1

      a mi me pasa lo mismo con los efecto, los tube que poner asi por el momento
      window.sr = ScrollReveal();
      sr.reveal('.navbar',{
      duration: 2000,
      origin: 'bottom'
      });
      sr.reveal('.header-content-left',{
      duration: 2000,
      origin: 'top'
      });
      sr.reveal('.header-content-right',{
      duration: 2000,
      origin: 'right'
      });
      sr.reveal('.header-btn',{
      duration: 2000,
      origin: 'bottom'
      });
      sr.reveal('#testimonial',{
      duration: 2000,
      origin: 'left'
      });
      sin los distance y deley.

    • @hectorvillalobosmorales9813
      @hectorvillalobosmorales9813 4 года назад +1

      @@leandrodean gracias , me funciono de esa manera, en un principio escribí "scrollreveal" todo en minúscula y olvide separarlos con mayúsculas 👌

  • @tack26
    @tack26 4 года назад

    SI NO FUNCIONA↓↓↓
    Para los que escribieron en CSS:
    html{
    scroll-behavior: smooth;
    }
    Si no les funciono !!!!
    Escribir en el navegador:
    chrome://flags/
    Luego busquen Smooth Scrolling y cambienlo por: " Enabled ó Activado"
    Saludos,

  • @roderickdiaz3834
    @roderickdiaz3834 5 лет назад

    Noté que sin internet no hace el efecto de inicio

  • @kantyDarius
    @kantyDarius 6 лет назад +1

    Que pasó que pasó amigo fazt! Te cambiaste a atom? 😕 Vscode es el mejor

    • @FaztTech
      @FaztTech  6 лет назад +4

      no me he cambiado a nada ;) , honestamente me da igual el editor. también uso vscode, brackets, sublime text, aunque me gusta más vim en estos momentos, por la configuración que uso :)

    • @kantyDarius
      @kantyDarius 6 лет назад +2

      Jajaja sólo te estaba jodiendo, excelente video!

    • @FaztTech
      @FaztTech  6 лет назад +1

      xD

  • @musiconrafa223
    @musiconrafa223 5 лет назад

    Primero que nada gracias por el tutorial pero tengo un problema cuando le doy un click a home se come parte de la imagen primera el navbar no me respeta el margen del header igual cuando presiono about tambien se come la imagen segunda poco el navbar que sera?

    • @fhertizren7145
      @fhertizren7145 4 года назад +1

      A la sección del header , al contenedor se le agrego un mt-5

  • @kristofer666ify
    @kristofer666ify 4 года назад

    no funciona el smooth -scroll! a quien más le pasa?

    • @eduardocd343
      @eduardocd343 4 года назад +1

      acomoda el link del scrip abajo de el link de los estilos bootstrap.css

    • @luisdaniellozanofraire4929
      @luisdaniellozanofraire4929 4 года назад

      Yo eso ya lo hice y sigue sin funcionar :T

    • @eduardocd343
      @eduardocd343 4 года назад

      descarga el archivo del video y correlo, luego comparas el codigo de la libreria con el tuyo

    • @oscargm1979
      @oscargm1979 4 года назад

      yA SACARON la propiedad CSS :
      html{
      scroll-behaviour:smooth;
      }
      Busca por ahi mas info

  • @wilsonandrade8744
    @wilsonandrade8744 2 года назад

    Excelente, muchas gracias