CSS Image Gallery Tutorial - Responsive Gallery with HTML and CSS Flexbox

How to Create CSS Image Gallery Tutorial - Responsive Gallery with HTML and CSS Flexbox | Youtube Tutorial
   • CSS Image Gallery Tutorial - Responsive Ga...…

Creating a Responsive Image gallery using CSS flexbox is easy and straightforward. Of course, there are plenty of ways to create an Image gallery using CSS, like using the CSS floats, CSS3 column module or by using jquery or javascript. However, we are going to use CSS3 display property set to flex to create our awesome photo gallery. We will not be using a single line of javascript or jquery to create this responsive Image gallery. No bootstrap or any other CSS framework will be used to create our photo gallery.

WHAT WILL YOU LEARN?
By following this video tutorial you will not only learn how to create a responsive image gallery but you will discover several great techniques to create the HTML5 structure for your photo gallery by using the BEM (Block Element Modifiers) to give consistent class names to your HTML elements so that our code is easily scalable, reusable and maintainable. You can learn about BEM on this website en.bem.info/

Here's how we will construct the structure for our HTML5 and CSS3 responsive Image gallery. HTML5 section element will work as the container for the Photo gallery and it will contain a figure element which will represent an individual image gallery Item which will further contain one image element for the gallery Image and one figcaption element for the image caption. You can write your image descriptions or caption inside the HTML5 figcaption.

After properly structuring your image gallery using HTML5. I will show you how to style your image gallery using CSS properties to make it beautiful and responsive. Making our HTML image gallery responsive is much easier when we are using the CSS3 flexbox module with the combination of media queries.
This will be a mobile-first image gallery where we will create this for the mobile and small screen devices first. After that, by utilizing the CSS media queries we will create few media queries rules to make our photo gallery responsive for the tablet, desktop and laptop devices. I will be using the three different media query breakpoints where I want my Image gallery to resize based on these different breakpoints.



===============NAVIGATE TO QUICK PARTS ===============

1:20 HTML Structure for Responsive Image Gallery

4:38 CSS Styling for your Image Gallery



=====================See working Demo==============

Final code: goo.gl/YuXxge

=============================­=====================

If you have any questions, just comment below in comment section. I will try to respond as soon as possible.

Like, share and comment!
Thanks

============Useful Tutorials=============


Responsive Image Gallery using HTML5 and CSS3 - Part - 1
   • How to create responsive image gallery usi...  

Responsive Image Gallery Using HTML5 and CSS3 - Part - 2
   • How to create responsive image gallery usi...  

Distributing images evenly in a fluid container
goo.gl/w2O1kR

Creating CSS3 Tooltip without using jquery or javascript
goo.gl/ah10aw

Styling placeholder text using css3
goo.gl/i4CZai

Creating three column responsive layout
goo.gl/uj46tI

How to create simple css3 preloading animation
goo.gl/GqjXCr


***********************CONTACT and RESOURCES************
Find all the source codes here:
codepen.io/smashtheshell

Follow on Twitter
twitter.com/amit4kp

Add on Facebook
www.facebook.com/kumaramit24chd

Like Page on Facebook
www.facebook.com/smashtheshell