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:
codepen.io/smashtheshell/pen/avjZrx
Note: Replace the images with your own images.

You can get these from www.pixabay.com

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


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
   • How to create a horizontal drop down menu ...  

Responsive Login Form With Social Media Buttons
   • Responsive Login Form Design With Social M...  

CSS3 Tooltip Styling With Pure CSS3
   • How to Create Pure CSS Tooltip Without Usi...  
_________________________________________________________

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:
codepen.io/smashtheshell

You can follow me on my twitter account here:
twitter.com/amit4kp

You can add me on facebook too :)
www.facebook.com/kumaramit24chd

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

Waiting for feedback :) . Drop a comment