Create Responsive Image Gallery Using HTML and CSS

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

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

  • @Tech2etc
    @Tech2etc  4 года назад +20

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

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

      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 3 года назад +8

    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

    • @theannonymous1430
      @theannonymous1430 Месяц назад +2

      ​@@RAVIRAJLADHA Focus on content bro, he is not getting anything in return we better respect him for teaching.

    • @RAVIRAJLADHA
      @RAVIRAJLADHA Месяц назад

      @@theannonymous1430 true

  • @ExilesGate
    @ExilesGate Месяц назад

    This is one of the most straight forward & clear demonstrations of how to structure CSS that I've ever seen. Thank you my friend!

  • @am1n_dlt682
    @am1n_dlt682 3 года назад +39

    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.

  • @ALessOffensiveName
    @ALessOffensiveName 3 дня назад

    Epic. Elegant and simple code. Personally I would've preferred without the heading included but some people will want that for sure.

  • @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!

  • @DigitalLiquid
    @DigitalLiquid 6 месяцев назад

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

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

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

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

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

  • @thrasher1462
    @thrasher1462 3 месяца назад

    banger video, helped me make my portfolio site

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

    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  2 года назад +1

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

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

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

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

    This is amazing ❤️😀 Loved this

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

      Thank you so much

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

    Thank you for this information and explanation

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

    Very Informative.Thanks!

  • @SurfingTheMentawais
    @SurfingTheMentawais 8 месяцев назад

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

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

    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.

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

    Thank you for this tutorial! It helped me.

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

      Your most welcome.

  • @mcroman-superfeat
    @mcroman-superfeat Год назад

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

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

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

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

    Excatly what I needed, thanks

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

    thank you so much bro for the tutorial

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

    great ❤❤

  • @rshan7375
    @rshan7375 8 дней назад

    I thought you would adjust boxes of different sizes to hold the images but it was actually the size of the images that makes the boxes differ.
    If possible can you make a video covering this topic (i.e different box sizes for holding images which relying on the size of the image)

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

    Great video, thank you!

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

    You explained everything in wonderful detail. Thank yoouuuu!!

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

      You're so welcome!

  • @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 7 месяцев назад

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

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

    thanks man that was helpful

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

    Bro it was great 👍👍

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

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

  • @kiovo1983
    @kiovo1983 11 месяцев назад

    thanks man, appreciated

  • @boomondobade706
    @boomondobade706 7 месяцев назад

    Amazing

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

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

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

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

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

    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

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

    perfect tutorial

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

    Thank you so much for this.

  • @marcus0477
    @marcus0477 4 месяца назад

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

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

    How can I add caption under each image ?

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

    This tutorial is very usefull for me

  • @백종훈-s8p
    @백종훈-s8p Год назад

    Can we make draggable and change img array?

  • @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.

  • @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

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

    TYSM bro ❤

  • @נגהלינהרט
    @נגהלינהרט 2 года назад +1

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

  • @Englishready-ez3ei
    @Englishready-ez3ei 2 года назад

    Thanks Buddy

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

    Thank You.

  • @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

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

    source code drive link not working...

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

    good video

  • @sanjanabhat5032
    @sanjanabhat5032 Год назад +1

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

    • @christian108
      @christian108 5 месяцев назад

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

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

    really helpful

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

    Thank u
    Thank u
    Thank u so much

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

      Most welcome 😊

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

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

  • @UGH_ZEREF3431
    @UGH_ZEREF3431 9 месяцев назад

    thank you sir

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

    nice vid

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

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

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

    None of the links are working. Big disappointment 👎

  • @DeitySilver-u2c
    @DeitySilver-u2c 3 месяца назад

    Source code not available anymore..

  • @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.

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

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

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

    thanks bang

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

    you didnot say photo size!

  • @user-eo5qu9mb9c
    @user-eo5qu9mb9c 3 года назад +1

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

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

    Brother, also design its admin panel and show it

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

    thanksssssssssssssssssss

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

    meri pictures to bht bari a ri

  • @mumtahinatamanna-u5w
    @mumtahinatamanna-u5w Год назад

    image des na kere

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

    Good job bro JESUS IS COMING SOON;PREPARE