How to create responsive image gallery using html5 and css3 | Part 2 of 2

How to create responsive image gallery using html5 and css3 | Part 2 of 2
Get your source code:
Note: Replace the images with your own images.

How to create responsive image gallery using html5 and css3 | Part 1 of 2

In this video series of two videos you are going to learn how to create an excellent responsive image gallery using html5 and css3. The most interesting part of this tutorial is that, we are not going to utilize the css3 flexbox module to create this image gallery, instead we are going to use the css3 calc() function which will help us to calculate the width of our images based on their parent element and the target resolution.
Since flexbox module is not supported in ie9, however there is the partial support for calc function in ie9. So this will help us to provide support for this image gallery in ie9 too. Besides this, we are going to explore the whole new way to create a responsive image gallery.
So, in the first part of this video series you are going to see how to use photoshop actions to generate the image thumbnails automatically for all the images simultaneously with just few clicks.
And then,in the second part of this video series you will see how to properly structure or layout the gallery using the html5 markup. We are going to use the html5 figure element, this element can be used to contain illustrations, diagrams, images, canvas element, audio or video elements. Figure element helps you to put code snippets also. So this is the semantic element. We will also use the figcaption element, which is used to provide the caption for our each image. There will be 12 figure elements and in each figure element there will be an anchor and figcaption element inside it to provide the link for image and its caption respectively.
By the end of this video series you will completely understand how to create the html5 and css3 responsive image gallery. This image gallery is created by utilizing the css3 media queries and calc function to calculate the width of the images for different target viewport sizes. You can take this knowledge further, and apply it into your own projects.
Creating an image gallery with pure css3 was never been so easier, however there are lots of other ways to create the image gallery, but this was the simplest one that I invented. So, guys you can also you flexbox module, or css3 text-align: justify property to create the image gallery but at the end of the day you are going to love this technique.
Last but not least, I want you to mention one thing that if you got any undesired results in ie10 or ie10- , just add this rule into your css file: main{display:block}

So hope you guys like this video. Please hit like to this video and share with your friends if you really like it.

If you have any suggestions, recommendations, requests or criticisms please drop a comment below. Your feedbacks will be highly appreciated and these feedbacks encourages me to create more videos for you guys. Thanks a lot

To watch more videos and stay updated please subscribe to my channel and receive notifications as i upload videos.
Other Videos:

Horizontal Navigation Bar with Full Width Submenu

Responsive Login Form With Social Media Buttons

CSS3 Tooltip Styling With Pure CSS3
_________________________________________________________

One thing to mention here friends,

Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development.

You can visit my codepen account for more stuff like this:

You can follow me on my twitter account here:

You can add me on facebook too :)

Share this video and Subscribe to this channel for latest updates and web design tips and tricks.

Waiting for feedback :) . Drop a comment

[ibda]

Awesome tutorial. So easy to understand and follow the instructions.

[mojjammil]

Thank you so much. Noob here was doing freeCodeCamp project and learned a lot from this video :)
All the best.

[vishaljain]

thank you so much so when i see on CSS measurement

[praxidike]

I used the code in the video but it is stretching all thumbs to 100% width and stacking them one after another on the page rather than in the gallery. I am not sure what I have done wrong? Where do i get it to link to the larger image?

my html code:
<figure>
<a href="#" alt="img001" title="image001"><img src="thumb/thumb1.jpg"</a>
<figcaption>Newcastle PSA workplace group - billboard unveiling.</figcaption>
</figure>
<figure>
<a href="#" alt="img002" title="image002"><img src="thumb/thumb2.jpg"</a>
<figcaption>Newcastle PSA workplace group at the IRC.</figcaption>
</figure>

[Indranilgslv]

need a responsive slider detail about rem em vw vh ...

[vishaljain]

can you upload an easy way which always help making responsive a content of website

[zonetekka]

First off thank you for this video, it was very easy to understand and follow along. Which text editor are you using in this video, it's layout and additional functions are incredible.

[whatsmyageagain]

I appreciate your efforts but you've messed up at 8:45 by missing a crucial parts of code, where did that bottom code came from?

My result is far from what you've gotten.

[erosempai]

subscribing to your tutorials! keep it up man awesome work, just one complain tough, i heard a buzz nonstop through out your video, don't know if it was my computer tbh, but it just happens on your video

[scriptbug]

Content is very good. But lacks idle explanation. Keep it up!

[michaelnewman]

I think the reason that I had to remove the "Height:100%;" from the CSS code is that I was using full size images and not thumbnails.  What I am finding difficult is replacing your header with one of my own for my website.  Instead of using text, I want to use an image but as soon as I do that, the whole page goes a bit strange and is no longer responsive.  Any suggestions?

[AlvomaniaDK]

very cool! thanks, man. I have just finished watching the second part. I have two questions: 1. How do I link these thumbs to the Original image? 2. How do I know where to create the BREAK as I resize the SCREEN? Does it appear anywhere as I resize the Screen? Cheers

[priyankaravichandran]

i dont know when u have written styles for figure, explanation not there for figure, its moved suddenly to figure a {}

[vishaljain]

i have problem in taking pixel and percentage for making responsive a website content

[nitinpereira]

I was following this tutorial step by step, but somewhere in between found some scripts different. I did not achieve the result you had, but can you post the complete script somewhere in a cloud server - so that I can take a look at the complete script.

Many thanks,
Nitin

[michaelnewman]

Just what I was looking to do on my website.  However, I do have a few issues with the tutorial and the code in the link.  In your video tutorial, you did not cover placing the images side by side although it did appear in the CSS code which I discovered after much searching.  Secondly, the code published in the link also did not perform correctly.  I had to remove "Height:100%;" from the CSS under "figure a" as it placed a huge gap under the images.  Apart from those minor problems, a great tutorial.  Thank you