Responsive image gallery using CSS GRID | Adaptive design

Поділитися
Вставка
  • Опубліковано 19 вер 2024

КОМЕНТАРІ • 179

  • @YoelvisM
    @YoelvisM  4 роки тому +26

    Les dejo este codepen con el ejemplo del video para que puedan probarlo y experimentar fácilmente:
    codepen.io/ymulenll/pen/poyYyzE
    Un abrazo a todos, gracias por seguir mi canal 👋

  • @arianrodriguez8219
    @arianrodriguez8219 Рік тому

    Nada mas escuchar su acento supe de donde es... saludos de alguien proveniente del mismo país, que alegría descubrir su canal. Éxitos

    • @YoelvisM
      @YoelvisM  Рік тому +1

      gracias Arian 🇨🇺

    • @arianrodriguez8219
      @arianrodriguez8219 Рік тому

      @@YoelvisM con esfuerzo y constancia me adentré en este mundo, ha sido todo un reto pues soy graduado de rehabilitación, rubro muy lejano.

  • @srta.pantalones
    @srta.pantalones Рік тому +6

    Tengo TDAH pero deseos de aprender a desarrollar. Me ha costado muchísimo centrarme y entender lo que me explican; a veces me siento tonta, y es que no todas las explicaciones las entiendo. Pero tú y tu manera de explicar me han facilitado no solo entender lo que explicas acá sino cómo utilizarlo con libertad a futuro. De verdad muchas gracias por todo tu valioso contenido. Suscrita.

  • @horaciomanuliwd
    @horaciomanuliwd 2 місяці тому

    MUCHÍSIMAS GRACIAS GENIO!!! EL CÓDIGO ES DE SUMA UTILIDAD PARA MÍ. TE AGRADEZCO ENORMEMENTE QUE BRINDES TUS CONOCIMIENTOS A LA GENTE QUE ESTÁ APRENDIENDO DISEÑO Y PROGRAMACIÓN. SALUDOS DESDE BUENOS AIRES!!! YA ME SUSCRIBO AL CANAL, Y TE SIGO EN GITHUB.

  • @raulernestosanchezperez1022
    @raulernestosanchezperez1022 4 місяці тому

    100% RECOMENDADO. Agradecido por sus conocimientos estimado Yoelvis. Saludos.

  • @nataliaevelyncauda7226
    @nataliaevelyncauda7226 2 роки тому

    EXCELENTE!!! Muchísimas gracias por compartir tus conocimientos!!!!!

  • @ian0783
    @ian0783 3 роки тому +3

    Se ve que eres un tipo que sabe de lo que habla muy pero muy buen video me encanta tu canal.

  • @ipc1962
    @ipc1962 2 роки тому

    Estaba buscando una solución; pero esto es super elegante!!!!

  • @zcoding8355
    @zcoding8355 4 роки тому +3

    ¡Excelente video! La mejor explicación que he visto de CSS Grid y en escasos 15 minutos... Genial, te felicito!

  • @LauraOviedo-h7f
    @LauraOviedo-h7f 6 місяців тому

    Es justo lo que necesitaba! Vi muchos videos y este definitivamente es el mejor. Muy bien explicado y muy completo. Muchas gracias!!

  • @Catto33
    @Catto33 Рік тому

    Demasiado facil, codigo limpio y entendible.

  • @JLonuz
    @JLonuz 3 роки тому +2

    Me gustó mucho este ejemplo, es súper fácil poder conocer y entender el poder de css grid! Espero que saques más videos de css grid, ya que recién estoy metiéndome. Me gusta poder hacer con css nativo estas cosas porque ya no dependemos de bootstrap u otros frameworks!

  • @yulltimoteo2769
    @yulltimoteo2769 Рік тому

    Estoy aprendiendo a programar, pero en realidad eres demasiado Gozu!
    Felicidades!

  • @alanrojas1398
    @alanrojas1398 3 роки тому +3

    Estos videos son increíbles, buscando un tema en particular repase cosas que ni me acordaba. Gracias maestro!

  • @kikemaya7758
    @kikemaya7758 2 роки тому

    Muchas gracias maestro. Me encantò el enfoque pràctico sobre còmo se usa grid en el mundo real. Bendiciones.

  • @user-kn3sk4jk6w
    @user-kn3sk4jk6w Рік тому +1

    diablos!!!, que estaba haciendo yo, en lugar de haber ido al cole hubiese empezado a estudiar html, css y js en el 2015 fackkkkk, que buen video YOE

  • @monicapablo2796
    @monicapablo2796 3 роки тому +2

    Muy buena la calidad de tu trabajo. Espero mas videos. Gracias

  • @wledao
    @wledao 3 роки тому +1

    Impecable la explicación, muy claro y pedagógico todo, y mostrando alternativas para entender cómo funciona en general. Aparte, compartiendo el código. Realmente muy bueno todo y muy generoso vos. Ya me suscribí, y te sigo en twitter. Te felicito, y muchas gracias por el video y el material!

  • @JordaniMoreira
    @JordaniMoreira 2 роки тому

    Excelente explicación. Muchas gracias por el aporte.

  • @Max-tq1ig
    @Max-tq1ig 2 роки тому

    Usted es increíble!! Es una fortuna tenerlo de maestro, gracias.

  • @cdicho
    @cdicho Рік тому

    Veo muchos videos para aprender pero la verdad tu nivel es excelente

  • @obitomadara9026
    @obitomadara9026 Рік тому

    muchas gracias profe acabo de terminar un master y estoy respasando lo aprendido con tus clases y son increibles un gran trabajo, un saludo

  • @JorgeGens
    @JorgeGens 3 роки тому

    Buah, tremendo Yoelvis, gracias!

  • @huron6410
    @huron6410 2 роки тому

    Me Lo Recomendaron Y La Verdad Es Que He Aprendido Perfectamente. Muchas Gracias Por Hacer Esta Calidad De Contenido. Te Deseo Lo Mejor Para Este Año.

  • @alejandroobregon2834
    @alejandroobregon2834 4 роки тому

    Que bueno ver a un cubano haciendo vídeos de programación, se nota la forma analítica, precisa de los ingenieros cubanos, buen vídeo, saludos.

    • @YoelvisM
      @YoelvisM  4 роки тому

      Gracias Alejandro, saludos a ti también

  • @gaballester
    @gaballester 3 роки тому +1

    Excelente, siempre mosteando más de lo común. me encantó grid-auto-flow:dense no lo conocía!!! Te felicito, super claro y muy útil

  • @yahyarahmandoost9816
    @yahyarahmandoost9816 3 місяці тому

    Muy bien explicado genio . Muchas gracias
    😍😍😍

  • @danyamanzilla3654
    @danyamanzilla3654 2 роки тому

    muchísimas gracias por compartir estos videos!!

  • @josecontreraslara3259
    @josecontreraslara3259 Рік тому

    Me serviría mucho tu ayuda para mí pregunta, me encanta esto tienes un suscriptor

  • @fungirak10
    @fungirak10 4 роки тому +1

    Nuevo suscriptor, tu forma de enseñar es lo que reluce! gracias por el contenido de calidad.

    • @YoelvisM
      @YoelvisM  4 роки тому +1

      muchas gracias por suscribirte, un saludo!

  • @oscarforastieri619
    @oscarforastieri619 3 роки тому +1

    Exelente video Yoelvis, muy bien explicado y muy util; felicitaciones !!!

  • @JLBayTV
    @JLBayTV 4 роки тому +2

    Excelente vídeo, sigue así. Espero el próximo.

  • @sgmonda
    @sgmonda 3 роки тому +1

    Muy bien explicado. Directo al grano. Chapó.

  • @elliotgaramendi
    @elliotgaramendi 7 місяців тому

    Sin duda para hacer bentos está genial.

  • @evamariazapanapari3040
    @evamariazapanapari3040 3 роки тому

    Una explicación excelente felicidades😄

  • @diegopezzano6648
    @diegopezzano6648 Рік тому

    Muy bien explicado genio . Muchas gracias

  • @davidcarrerasalbacete510
    @davidcarrerasalbacete510 2 роки тому

    Fantástico ejemplo. Gracias por compartir.

  • @tidyodooy
    @tidyodooy Рік тому

    Vos si que haces magia crack!!

  • @jjav1978
    @jjav1978 3 роки тому

    Espectacular!!!!

  • @davidferrand01
    @davidferrand01 2 роки тому

    Excelente brot. Dios te bendiga, hacia adelante.

    • @YoelvisM
      @YoelvisM  2 роки тому

      Dios te bendiga hermano, un abrazo

  • @marianocamilli848
    @marianocamilli848 2 роки тому

    Increible! Muchas Graciaaassss

  • @davidrosenblum4079
    @davidrosenblum4079 2 роки тому

    Increíble, maravilloso!!! Muchas gracias por esos trucazos CSS.

  • @virtualpyshop_py2603
    @virtualpyshop_py2603 5 місяців тому

    Excelente tutorial. Muchas gracias

  • @hernanramirezweb
    @hernanramirezweb 2 роки тому

    Excelente explicación

  • @jesusre8495
    @jesusre8495 2 роки тому

    Increible, gracias!

  • @rocodev23
    @rocodev23 2 роки тому

    GENIO!!! Aprendí Grid en 15 minutos y de paso iba probando cositas mientras te seguia en el video. Ya me suscribí y un like, voy a verme mas seguido tus videos explicas muy bien. Edit: Espero que saques ese video del maquetado, activo la campana jaja. :D

  • @user-xu6ss5yu1i
    @user-xu6ss5yu1i 6 місяців тому

    Brutal! Muchas Gracias...

  • @danielosorio5102
    @danielosorio5102 2 роки тому

    Excelente me encantan sus videos, muy claros muy limpios.

  • @tape...
    @tape... 3 роки тому +1

    Muy fácil y práctico, mil gracias.

  • @edwincalderxn
    @edwincalderxn 4 роки тому

    Excelente calidad de video, deberías tener millones de vistas.

  • @egm5081
    @egm5081 3 роки тому +1

    Muy bueno el video, muy bien explicado, muchas gracias!

  • @glapuente
    @glapuente Рік тому

    excelente, gracias por su tiempo y su paciencia

  • @nemerieoutoftheshell9057
    @nemerieoutoftheshell9057 3 роки тому

    Gracias Yoelvis! Muy buen video. De veras que al fin entiendo el CSS grid. Seguidora desde ya de tu canal.

  • @sergioabelhuanacchiritupa4842
    @sergioabelhuanacchiritupa4842 3 роки тому +1

    Gracias hermano, estoy muy agradecido

  • @encode2390
    @encode2390 2 роки тому

    Hermano, que increíble video, muy completo

  • @vanityzzz
    @vanityzzz 3 роки тому +1

    estupendo, me esta sirviendo de mucha ayuda, gracias.

  • @erikamantilla2991
    @erikamantilla2991 3 роки тому

    Eres genial ! muchas gracias por compartir en UA-cam ! !

  • @danyamanzilla3654
    @danyamanzilla3654 2 роки тому

    maravilloso video!!

  • @alexistorrealba6962
    @alexistorrealba6962 Рік тому

    Excelente contenido felicitaciones.

  • @franklinxavierrodriguezsan3359
    @franklinxavierrodriguezsan3359 2 роки тому

    Excelente material

  • @ernepazzo1212
    @ernepazzo1212 3 роки тому

    Excelente video. Gracias!!!

  • @nexts-shop
    @nexts-shop Рік тому

    Excelente contenido. Mil gracias master. Simplifica el aprendizaje. Éxitos hermano

  • @Frank.E.J
    @Frank.E.J 4 роки тому

    Mereces mil veces la cantidad de suscriptores que tienes!

    • @YoelvisM
      @YoelvisM  4 роки тому

      Gracias 🙂, poco a poco voy creciendo, tengo muchas ideas de proyectos y cursos que según tenga tiempo los iré grabando, con el buen contenido de seguro crecen los suscriptores, un saludo y gracias por el apoyo

  • @MauroJH
    @MauroJH Рік тому

    Impecable! Explicas para que sirve cada cosa. No he encontrado otro tan claro como vos.Gracias!
    Ahora consulto y perdón mí ignorancia...que son los span?. En la práctica los uso pero sin entender que como cuando y porque

  • @eliassantos8982
    @eliassantos8982 3 роки тому

    Excelente video!!! muy bien explicado. Gracias por compartir su saber. Dios lo bendiga!!!

  • @luismaocampo7866
    @luismaocampo7866 3 роки тому +1

    Se gano un sub camarada

  • @martimarti5462
    @martimarti5462 2 роки тому

    Excelente! muchas gracias

  • @CarlosMorales-kb1hd
    @CarlosMorales-kb1hd 2 роки тому

    Excelente video amigo.

  • @solo_andres_v
    @solo_andres_v 3 роки тому

    Grande maestro, todo muy bien explicado, muchas gracias por compartir.

  • @Juancarloscr8
    @Juancarloscr8 2 роки тому

    Que bien explicas, gracias por compartir tus conocimientos. Nuevo seguidor, saludos 🖖

  • @felipecarballodraw5278
    @felipecarballodraw5278 2 роки тому

    Me quedo feisima mi version, pero al menos aprendi como hacerlo, muchas gracias

  • @edgardoisla1427
    @edgardoisla1427 2 роки тому

    Genio!

  • @cristiansantana4431
    @cristiansantana4431 3 роки тому

    muchas gracias amigo ¡¡ excelente explicación me sirve mucho ¡¡ sigue así...

  • @carlosgiraldez1352
    @carlosgiraldez1352 3 роки тому

    Gracias, muy bueno todavía hay mucho por aprender.

  • @juliokof
    @juliokof Рік тому

    Buen video. Gracias!

  • @oscarquinterotellez592
    @oscarquinterotellez592 2 роки тому

    Muy buen video hermano, nuevo sub! muy claro con la explicación y algo a destacar, que explicas las posibles vertientes

  • @henyfarfan3707
    @henyfarfan3707 4 роки тому +1

    Saludos yoelvis desde Venezuela te saludamos casa de misericordia

    • @YoelvisM
      @YoelvisM  4 роки тому +1

      Hola Heny, siempre los recuerdo con mucho cariño, un abrazo a la familia y hermanos por allá

    • @henyfarfan3707
      @henyfarfan3707 4 роки тому +1

      @@YoelvisM que buenoooo por ak el cariño es el mismo verte así de feliz y haciendo lo que te gusta es grato Dios te guarde a ti y a tu amada esposa

  • @manuelalejandrorodriguezhe5784
    @manuelalejandrorodriguezhe5784 3 роки тому

    muy buen vídeo corto y muy productivo, saludos desde Liencres 🙌

  • @senixcode5601
    @senixcode5601 3 роки тому +1

    genial

  • @luiscarlostrotta8119
    @luiscarlostrotta8119 3 роки тому

    Excelente Yoelvis!!!! Muy didáctico y claro!!!! muchas gracias !!!!!!Consulto si tienes cursos de Java?, saludos desde Argentina!!!

  • @damianchoherrera4312
    @damianchoherrera4312 2 роки тому

    GENIOOOOOO !!

  • @joelrcha3368
    @joelrcha3368 3 роки тому

    chulada de video

  • @romer0797
    @romer0797 3 роки тому

    excelente video, muchas gracias por la explicación!!

  • @emilianolus9215
    @emilianolus9215 3 роки тому

    Excelente

  • @matiasamarilla6358
    @matiasamarilla6358 2 роки тому

    Un capo.

  • @yoss9054
    @yoss9054 3 роки тому

    .... súper!!...😊 gracias

  • @marcodeev4168
    @marcodeev4168 4 роки тому

    Excelente video hermano programador !!!

  • @maikelrosabal8330
    @maikelrosabal8330 4 роки тому

    Exhilarating video Yoelvis, thanks.

    • @YoelvisM
      @YoelvisM  4 роки тому

      Hola mi amigo, muchas gracias por el apoyo, que bueno que te gustó el video

  • @violetamazziotta6120
    @violetamazziotta6120 3 роки тому +1

    super like

    • @YoelvisM
      @YoelvisM  3 роки тому

      Gracias por el super like jeje, saludos

  • @uncapo3106
    @uncapo3106 3 роки тому

    Buenardo hermano

  • @TheMarckoz
    @TheMarckoz 2 роки тому

    Buen contenido.

  • @rodolfoyanz1094
    @rodolfoyanz1094 4 місяці тому

    Gracias, por todo, para una página web puedo poner debajo del header o navbar y después y debajo de las img, el footer o una sección, gracias solo para aprender😊

  • @enriqueatala2567
    @enriqueatala2567 Рік тому

    Hola Elvis, muy buenos tutoriales... te pido vayas mas despacio para poder observar tus modificaciones y efectos en live server. Se puede enlazar que el contenido de cada celda del grid con el contenido de un registro de la tabla de datos de una base de datos recorriéndola?

  • @goticdreams9498
    @goticdreams9498 3 роки тому +4

    Muchísimas gracias por el vídeo. Está buenísimo, yo tengo un solo problema. Como hiciste para que las imágenes ni bien las coloques te queden dentro de los recuadros, osea, dentro de las celdas? A mi se me salen, otras me quedan muy chicas. Y no se como arreglarlo. Gracias!

    • @brandonotzin5788
      @brandonotzin5788 2 роки тому

      creo que es porque el las puso de fondo las imagenes (no uso la etiqueta )

  • @mitubo1970
    @mitubo1970 2 роки тому

    Vaya... todo iba muy bien hasta 15:19 que decides añadir queries.... ¿Realmente son tan necesarias? ¿Podrías utilizar auto-fill/fit y minmax() como enseñaste en la parte teórica? Muchas gracias.

    • @YoelvisM
      @YoelvisM  2 роки тому

      Hola, pues si que a veces son necesarias como en ese caso específico que quiero que se expandan de forma diferente las filas y columnas al tener más ancho, eso no lo puedes lograr con lo que comentas. Además creo que las media queries son bien prácticas y fáciles de utilizar en casos como estos. Saludos

  • @EbinLuan
    @EbinLuan 2 роки тому

    excelente :)

  • @martinleandroarcuri117
    @martinleandroarcuri117 2 роки тому

    sos el fuking dios!

  • @layomeza7881
    @layomeza7881 2 роки тому

    excelente aporte, hacer un maquetado completo de una pagina para usarlo como plantilla

  • @ccencisoj
    @ccencisoj 3 роки тому

    Excelente video

  •  3 роки тому

    Muchas gracias!