Create Responsive Image Gallery Using HTML and CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 ก.ย. 2024

ความคิดเห็น • 100

  • @Tech2etc
    @Tech2etc  4 ปีที่แล้ว +20

    What do you think about this tutorial?
    Comment Now !....Let me know some of your opinion🥰

    • @studentwiut8467
      @studentwiut8467 3 ปีที่แล้ว

      perfect, where did you get images

    • @shubham53kumar
      @shubham53kumar 2 ปีที่แล้ว

      @@studentwiut8467 from pixels, unsplash and many more...

    • @kylekeledomson6772
      @kylekeledomson6772 2 ปีที่แล้ว

      Awesome designs, your ideas are different and I like it

    • @Tech2etc
      @Tech2etc  2 ปีที่แล้ว

      @@kylekeledomson6772 Thank you.

    • @sayyidnaeemulhaqm.k8966
      @sayyidnaeemulhaqm.k8966 ปีที่แล้ว

      Thanks .Tomarrow my task is make a Page design ...then i found image gallery in that task so i watch this video thanks ..i found some loats of ....Flex ideas ...and @media screen ideas Thanks sir and also i follow you....

  • @aryanyadav4757
    @aryanyadav4757 2 ปีที่แล้ว +6

    I guess this guy is a perfect example of why communication skills are important. There was so much he knew and wanted to share but the words were getting in the way. But still learned a lot so thanks for that.

    • @RAVIRAJLADHA
      @RAVIRAJLADHA 2 ปีที่แล้ว +1

      yeah, his skills are very poor. well said

  • @am1n_dlt682
    @am1n_dlt682 2 ปีที่แล้ว +36

    The images have a style of border-radius :15px; so this style should apply for all 4 corners of the image but, for anyone who's wondering why the images doesn't have border-radius on their bottom left and right, its because they have style which is padding-bottom : 15px; , you should replace this style by margin-bottom:15px and the problem should be fixed.

    • @kingille94
      @kingille94 ปีที่แล้ว +1

      i love u

    • @csigabigaboca1987
      @csigabigaboca1987 ปีที่แล้ว

      But why? I do not understand this :-(

    • @am1n_dlt682
      @am1n_dlt682 ปีที่แล้ว +1

      @@csigabigaboca1987 Master CSS Box Model, you should be good.

  • @thrasher1462
    @thrasher1462 ชั่วโมงที่ผ่านมา

    banger video, helped me make my portfolio site

  • @DigitalLiquid
    @DigitalLiquid 2 หลายเดือนก่อน

    Thank you so much! After many videos, this was the only one that worked!

  • @yunoletmehaveaname
    @yunoletmehaveaname ปีที่แล้ว +1

    You don't need to specify .container .box .anything in this way. Your classes are specific enough and you're just adding unneeded complexity and unreadability to your css.
    Great demonstration though! It was a nice walkthrough.

    • @aijiexi
      @aijiexi 3 หลายเดือนก่อน

      In his defense, he's being very specific so that a developer who comes behind him can find the class easily...

  • @h.t.7310
    @h.t.7310 2 ปีที่แล้ว +1

    Goot gawd dis man is a genius in presentation! Subscribed! Super duper flash learning!

    • @Tech2etc
      @Tech2etc  2 ปีที่แล้ว

      Thanks for the sub!

  • @Faby__
    @Faby__ 2 ปีที่แล้ว

    i modified it a little bit with redirects to other pages i've done and very good, thanks!

  • @skullncrossdrones7960
    @skullncrossdrones7960 ปีที่แล้ว

    Great video. Really helped me hand code my first responsive website.

  • @salemmajed916
    @salemmajed916 9 หลายเดือนก่อน

    Thank you for this information and explanation

  • @boomondobade706
    @boomondobade706 3 หลายเดือนก่อน

    Amazing

  • @bogdanv9591
    @bogdanv9591 2 ปีที่แล้ว +1

    Excatly what I needed, thanks

    • @Tech2etc
      @Tech2etc  2 ปีที่แล้ว

      Most welcome

  • @sydneyjack410
    @sydneyjack410 ปีที่แล้ว

    awesome!!!! this was really good, and thank u so much for providing code

  • @ritikbheda9183
    @ritikbheda9183 2 ปีที่แล้ว

    Thank you for this tutorial! It helped me.

    • @Tech2etc
      @Tech2etc  2 ปีที่แล้ว

      Your most welcome.

  • @yohohogaming6
    @yohohogaming6 ปีที่แล้ว

    thank you so much bro for the tutorial

  • @SurfingTheMentawais
    @SurfingTheMentawais 4 หลายเดือนก่อน

    Thank you for the wonderful explanation. You do great work.

  • @kmssi1538
    @kmssi1538 2 ปีที่แล้ว

    Very Informative.Thanks!

    • @Tech2etc
      @Tech2etc  2 ปีที่แล้ว

      Most welcome

  • @cecilec9234
    @cecilec9234 2 ปีที่แล้ว +1

    You explained everything in wonderful detail. Thank yoouuuu!!

    • @Tech2etc
      @Tech2etc  2 ปีที่แล้ว +1

      You're so welcome!

  • @gabikka1722
    @gabikka1722 ปีที่แล้ว

    Wow, this was a great tutorial. I needed something straight forward and simple but the best part is in your presentation. Thank you and I will definitely subscribe to your channel. Keep up the good work!

    • @Tech2etc
      @Tech2etc  ปีที่แล้ว +1

      You're very welcome!
      More projects are coming soon.
      Please share this project on your social media. It will help us. Thanks.

  • @harsh5128
    @harsh5128 ปีที่แล้ว

    great ❤❤

  • @ClubScene231
    @ClubScene231 2 ปีที่แล้ว

    This tutorial is very usefull for me

    • @Tech2etc
      @Tech2etc  2 ปีที่แล้ว +1

      Thank you

  • @UGH_ZEREF3431
    @UGH_ZEREF3431 5 หลายเดือนก่อน

    thank you sir

  • @manishsoni8760
    @manishsoni8760 ปีที่แล้ว

    perfect tutorial

  • @intc21
    @intc21 ปีที่แล้ว

    Great video, thank you!

  • @bananabutzz
    @bananabutzz 9 หลายเดือนก่อน

    thanks man that was helpful

  • @kiovo1983
    @kiovo1983 7 หลายเดือนก่อน

    thanks man, appreciated

  • @roshnapjohn1654
    @roshnapjohn1654 ปีที่แล้ว

    Thank You.

  • @ClubScene231
    @ClubScene231 2 ปีที่แล้ว

    Thank u
    Thank u
    Thank u so much

    • @Tech2etc
      @Tech2etc  2 ปีที่แล้ว

      Most welcome 😊

  • @niteshprajapat7918
    @niteshprajapat7918 2 ปีที่แล้ว

    This is amazing ❤️😀 Loved this

    • @Tech2etc
      @Tech2etc  2 ปีที่แล้ว +1

      Thank you so much

  • @Englishready-ez3ei
    @Englishready-ez3ei ปีที่แล้ว

    Thanks Buddy

  • @akinsulereolajobi9168
    @akinsulereolajobi9168 2 ปีที่แล้ว

    Thank you so much for this.

    • @Tech2etc
      @Tech2etc  2 ปีที่แล้ว

      Your welcome

  • @xcr6436
    @xcr6436 2 ปีที่แล้ว

    Thanks bro for this videp

    • @Tech2etc
      @Tech2etc  2 ปีที่แล้ว

      Thank you so much. Please share this project on your social media. Will appreciate that.

  • @Georgian151
    @Georgian151 ปีที่แล้ว

    nice vid

  • @user-pw1sy8wl6k
    @user-pw1sy8wl6k 2 ปีที่แล้ว +1

    Great tutorial!!! Thank you!
    One question - how do I make the "more" button work?

    • @Tech2etc
      @Tech2etc  2 ปีที่แล้ว +1

      Add a link to a new page on the button

    • @user-pw1sy8wl6k
      @user-pw1sy8wl6k 2 ปีที่แล้ว

      @@Tech2etc ohhhhh ok
      Thanks!

  • @marriageVideos933
    @marriageVideos933 ปีที่แล้ว

    How to create ,when we click on image ,show that in pop-up..like Amazon product zoom

  • @ahnatechnology5998
    @ahnatechnology5998 3 ปีที่แล้ว +1

    thanks a lot, that was helpful, and very well explained, i m wondering about "more" button, how can i use it, i mean if i want to add more pictures and i want it to show up after clicking the "more" button

    • @Tech2etc
      @Tech2etc  3 ปีที่แล้ว +4

      u can duplicate the current page & link this page with more button.

  • @dokterkepin9652
    @dokterkepin9652 2 ปีที่แล้ว

    good video

    • @Tech2etc
      @Tech2etc  2 ปีที่แล้ว

      Thank you

  • @ItsItachi279
    @ItsItachi279 2 ปีที่แล้ว

    TYSM bro ❤

    • @Tech2etc
      @Tech2etc  2 ปีที่แล้ว

      Welcome bro

  • @TechExplosions
    @TechExplosions 3 ปีที่แล้ว

    really helpful

    • @Tech2etc
      @Tech2etc  3 ปีที่แล้ว

      Glad u enjoed.

  • @sanjanabhat5032
    @sanjanabhat5032 ปีที่แล้ว +1

    great tutorial! can we make the images align at the bottom also ?

    • @christian108
      @christian108 หลายเดือนก่อน

      i was thinking of trying justify-content: space between;

  • @marcus0477
    @marcus0477 9 ชั่วโมงที่ผ่านมา

    Yo the source code doesn't work, could you please give us a new link?

  • @asphaltking5870
    @asphaltking5870 2 ปีที่แล้ว

    Please can you show me how can I do for having two columm for max-width =998 px divices ?

  • @shantanusevekari2809
    @shantanusevekari2809 ปีที่แล้ว

    I need help:I have created a new folder css and inside style. Css but whenever I go into that file for styling it doesn't work. Pl help.

  • @mysteriousone1606
    @mysteriousone1606 ปีที่แล้ว

    Hello, the source file is not accessible now. Please reply with the correct source file. Loved your work!

  • @adieahmadfakhrudinsyah1135
    @adieahmadfakhrudinsyah1135 ปีที่แล้ว

    thanks bang

  • @mcroman-superfeat
    @mcroman-superfeat 9 หลายเดือนก่อน

    Ciao, ::: Can I use the KEYBOARD ARROWS to slide the Gallery to Left or Right ... ? THX ... /// McRoman

  • @programmertik2046
    @programmertik2046 3 ปีที่แล้ว

    Bro it was great 👍👍

    • @Tech2etc
      @Tech2etc  3 ปีที่แล้ว

      Thanks brother

  • @bloomyredwood2279
    @bloomyredwood2279 2 ปีที่แล้ว

    Hi, i'm sorry if you explained this already, but could you explain why you do those indent spaces in code?
    like the indent on line 8 and then another one on line 9

  • @kinzag7613
    @kinzag7613 2 ปีที่แล้ว

    I tried this but it's not showing the left-side scroll option.

  • @sagaibrahim6178
    @sagaibrahim6178 ปีที่แล้ว

    what app are you using to test your site at difference scales?

  • @user-df4vp1gd9w
    @user-df4vp1gd9w ปีที่แล้ว

    Can we make draggable and change img array?

  • @sallu21m
    @sallu21m 9 หลายเดือนก่อน

    How can I add caption under each image ?

  • @faizanahemad6381
    @faizanahemad6381 3 ปีที่แล้ว +1

    Brother, also design its admin panel and show it

    • @Tech2etc
      @Tech2etc  3 ปีที่แล้ว

      sure bro

  • @sonamtamang4154
    @sonamtamang4154 2 ปีที่แล้ว

    you didnot say photo size!

  • @LightlyLilyAsmr
    @LightlyLilyAsmr ปีที่แล้ว

    Is there a way to get the columns like this without using three dream divs? I have php code and I don’t know if I can make that work because the images are uploaded from a database so it isn’t linked in the php html. :-/
    I’ve been struggling with this for over a week actually, haha
    I’m able to get columns with some tweaking, but it leaves this large spacing between the images that doesn’t look smooth like the gallery in this video

  • @meherunnesahossainibnath5958
    @meherunnesahossainibnath5958 ปีที่แล้ว

    source code drive link not working...

  • @asphaltking5870
    @asphaltking5870 2 ปีที่แล้ว

    thanksssssssssssssssssss

  • @ziafathima2508
    @ziafathima2508 3 ปีที่แล้ว

    can u send the link to download this app how do we do it

  • @bhaluu2017
    @bhaluu2017 ปีที่แล้ว

    Source code open ni hora mere pas error ara hai file open ni hori

  • @ziafathima2508
    @ziafathima2508 3 ปีที่แล้ว

    i have some doubts umm i am using notepad to do your html but the second part its coming like text so what should i do and which app do you use to do this

    • @Tech2etc
      @Tech2etc  3 ปีที่แล้ว

      Sry couldn't get your question.
      I used sublime text as a text editor.

    • @ziafathima2508
      @ziafathima2508 3 ปีที่แล้ว

      @@Tech2etc umm no i meant was that where did u basically make this like type all the info and commands and all did u simply do in a normal notepad or you installed CSS and html

  • @user-eo5qu9mb9c
    @user-eo5qu9mb9c 3 ปีที่แล้ว +1

    Bhai ji aapse hath jodkar guzarish hai🙏🏻 coding to clear dikhaya karo.....
    All ok

  • @kainatali5292
    @kainatali5292 ปีที่แล้ว

    meri pictures to bht bari a ri

  • @Argylleagen
    @Argylleagen ปีที่แล้ว

    None of the links are working. Big disappointment 👎

  • @user-yo5mg8yq4c
    @user-yo5mg8yq4c 11 หลายเดือนก่อน

    image des na kere

  • @thechoosen4240
    @thechoosen4240 2 ปีที่แล้ว

    Good job bro JESUS IS COMING SOON;PREPARE