We got this video for you so that you don’t need to spend your time in the search.

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

Get your source code:

Note: Replace the images with your own images.
You can get them on www.pixabay.com

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

Get the source code:

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

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

If you have any suggestions, recommendations, requests or criticisms, please leave a comment below. Your feedback will be greatly appreciated and these returns encourage me to create more videos for you. thank you very much

To watch more videos and stay up-to-date please subscribe to my channel and receive notifications as I download videos.
Other videos:

Horizontal navigation bar with full width submenu

Responsive login form with social media buttons

CSS3 Tooltip with Pure CSS3


One thing to mention here friends,

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

You can visit my codepen account for more things 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 the latest updates and tips and tricks for web design.

Waiting for comments :).

This content was first published here.

We inserted this video based on certain parameters as on date of insertion. Few of them are below.

Video Views: 11825

Video Rating: 4.73


Please enter your comment!
Please enter your name here