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 https://youtu.be/ob6wWyEAl7g 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 https://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: https://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 https://youtu.be/Fg3N47GrQI8 Responsive Image Gallery Using HTML5 and CSS3 - Part - 2 https://youtu.be/CNjeMbuZYuU Distributing images evenly in a fluid container https://goo.gl/w2O1kR Creating CSS3 Tooltip without using jquery or javascript https://goo.gl/ah10aw Styling placeholder text using css3 https://goo.gl/i4CZai Creating three column responsive layout https://goo.gl/uj46tI How to create simple css3 preloading animation https://goo.gl/GqjXCr ************************CONTACT and RESOURCES************* Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell