Create Responsive Image Gallery Using HTML and CSS

hi everyone welcome back to our  new tutorial hope you guys are well   so in this tutorial we are going to show  you how to make this amazing photo gallery   using just html and css and of  course it is completely responsive   and it will looks good in every size of the  screen so here you can see that this photo gallery and this is look completely  stunning and here is a button also and if we see let's go to see the responsive yeah so here you can see that   this is now in laptop or tablet  devices and if we decrease our screen size and if we again decrease our screen size this will take the whole width and height and every images is now aligning one after one so yeah you guys can see that this  website is completely responsive   so now i am going to show you how to make this  responsive website using the html and css in a few   minutes and before yesterday if you guys are new  in my channel then i will suggest you to subscribe   my channel because in a few days i will upload a  new tutorial and on that tutorial i will show you   how to make a complete responsive study website  using just html and css and it is for beginners   so if you want to grab that video as soon as i  upload make sure that you subscribe my channel   and like this video and hit the bell icon for the  future videos so let's get back to our tutorial so if we go our project file here you can see  that these are the images which one i am using   and these are the html file and css  file i will put the link of this images   in the description you guys can find these images  there so now let's first open this index.html file   so here is our index.html file you just have  to give a title and link the css file and now   let's make our website so first we have to create  a div tag and i give a class name and the class   name will be container that's it and inside this  div tag i will put everything our heading and   images all the buttons and everything i will put  in the container so that's why that's now we have   to create our heading so create another div tag  and the class name will be heading now create a s3   tag and this will be photo gallery that's it so if  you go to our website here you can see that photo   is bold and the gallery is lighter than this so  that's why we have to put this gallery in a s pen   tag that's it and close this aspen tag  that's it and then now we have to create a   another div tag and inside this div tag i will put  our images so that's why create another div tag give a class name and the class name will be box  that's it and inside this box let me show you   i will create three column this one column and  this one two column and this is three column and   inside these columns and in first column i will  put these images from top to bottom and in second   column i will put these images from top to bottom  and and third column i will put these images   from top to bottom so that's why first column  create a div tag and the class name will be dream   and inside this dream i am going to put  our images so that's why create a image tag   and the first file name will be one  dot jpg file so that's why i copy this   and i paste it this is for two and this will be   three four and five i don't need this okay now  copy this now we have to create our column two   now you have to create column three now if we save  and go to our website and refresh so you guys can   see that this is the image and this is the heading  so now i have to go to our style sheet and now   i have to install these images and this  gallery so go to our style sheet and   inside this strategy first we have to create some  basic setting so margin will be always zero and   padding will be always zero that's it and the box  sizing will be always border box that's it now   i want this thing to in one column the headings  and the images so that's why we have to create   display and the column will reflect so  these all images and the headings are in   container class so that's why copy  the container class from here and   paste it here now i want to in one column  everything so that's that's why display will be   flex and slice direction will be column and  the justified content will be center align item   will be center and text alarm will be centered  that's it save and go to our website and if we now   refresh so here you can see that this heading is  now in center so now we have to align our images   and here you can see that there is actually no  space from the top and from left and right that's   why we have to get this first so i want margin  from top it will be 40 pixel and from right   it will be 20 pixel and i i don't want to margin  from bottom so that's why zero and i want margin   from right 20 pixels that's it if we now save and  if we go to our website and refresh so here is a   margin from maybe here so now let's style our  heading so that's why copy this class from here   paste it here and then now we have  to grab this heading class from here   and paste it here that's it so copy this thing  again and paste it here now we have to grab our s3   so there will be h3 that's it so i want the phone  size 3 am and front wide will be bolder that's it   and i want the border from bottom so that's why  border bottom will be let's see three pixel solid   gray so now save and if we go and  refresh so there is our heading   so now we have to style this gallery so that's  why copy this thing again and then paste it here   and here you can see that i have aspen tag for  this so that's why copy this aspen from here   and paste it here that's it so let's delete  this line and this line also i just i just want   font width 100 that's it if we go and now save  and refresh so yeah this is our style so here   you can see that our border is taking some  width so we have to fix this so that's why   let's give a width let's say 50 percent and  i want some padding from bottom let's see 50   pixel that's it if we go and now save and refresh  so here you can see that it is taking 50 percent   of width and i have padding from here also and  i want some padding from here also so that's why   go to s3 and here padding bottom will be let's see  10 pixel that's it save and if we go and refresh   so yeah i have some padding from here also so  now we have to align our images so and i want   something like this in three column and go and  now we have to copy this class again container   and paste it here now we have to take another  class which is box so copy this from here and   paste it here also now i want to show the images  in row because in if you go our website here you   can see that there is actually one row so let's  go and uh that's why display will be flagged and   likes direction will be always row and the  justify content will be a space between past it   and the align item will be center that's  it if we go now and refresh our website   so here you can see that  this is now showing in row   so but here you can see that i have a slider but  i don't want this slider from here so that's why   we have to fix these images so let's go to our  code editor so now we have to copy this again and paste it here now we have to target our dream  class so that's why i copy this class from here   and paste it here and in dream i want this image  show in one row okay i want to show this image in   one row so that's why i have to create column and  that's why you have to create display flags and   the flash direction will be column that's it and  i want to take this one column a specific width   so that's why i am giving the width of  this column is 32.5 percent so here now   every dream class will take 32.5 percent with  so if we now save and if we go and refresh so here you can see that this is now in one column  so now let's go over and change these images   because this images is repeating itself because  we didn't put other images here so this will be   one two three four five and this will be six seven  eight nine and ten this would be eleven this will   be twelve thirteen fourteen and fifteen if we  save and go our website and refresh so that's it   so here you can see that this images is now taking  random width and height so that's why we have to   clarify one thing that's it copy this is from here  and paste it here now we have to tag our image tag   that's it and this time the image will be take  hundred percent of width if we now save and   go and refresh so here you can see that there  is no slider now and this image is now taking   his perfect width now i want some space  between two images because there are no   space between two images so that's why go to our  collateral and inside this image we have to just   give padding bottom let's see if i picture that's  it if we go and now save and refresh so let's give   some more space so that's why i give it 15 pixel  and i want to some give border radius so border   radius will be five pixel if we go and now save  and refresh so here you can see this is now taking   more weight and there is the border radius so  that's it so you guys can see that this image   align is not good enough so we have to just go  to our code editor and in the box we have to just   delete this line and if we go and save and refresh  so here you can see this now in showing in a   specific point so that's it our image gallery  is now already completed but we need a button   so that's why go to our coder go to html file  so now let's create a div tag for button and the   class name will be also button that's it and then  create a anchor tag and this will be hash that's   it and there will be more so if we go now save and  our refresh so you can see that there is a button   here this is now we have to establish this  button so that's why go to our creator again   grab this class from here and paste it here  now we have to get the button class also   first one is that if we go to our website here you  can see that there is no space from top and bottom   but that's why i have to give some space  from top and bottom so that's why margin   from top i want to 40 pixel and from left i  don't want and from bottom i want 70 pixel   and from right i don't want so that's why  that's it if we go now and save and refresh   here you can see that now we have some more  space so now let's get a background color   so that's why background will be that's that the  color is too gray that's it and i1 padding 50   pixel from top and bottom and 40 pixel from left  and right and i want uh border radius and let's   give the five pixel now save and go our website  and refresh so here you can see that this is our   button now now we have to change the color of  this text so that's why i copy this here from   everything paste it here now we have to get  our anchor tag so that's why here will be and color will be white  and font size will be let's   give 1.2 em and i don't want underline  from the bottom so that's why text   the question will be none and the font will  be bolder if we go now and save and refresh here you can see that we can say our color  text color so that's why here this will be   actually white so that's why fff and refresh  now so yeah you can see that there is uh our   button but i want some space from this button  now i want some space between two alphabet so   that's why letter spacing will be 3 pixel  that's it if we go save and refresh again   so here you can see this there is no space between  2 alphabet so that's it our photo color is ready   now we have to make our photo color responsive  so for doing this just go to our text editor   and now we use media so that's why first we  have to initialize media and i want changes only   a screen so that's why only screen  and i want a parameter so that's why   max which will be 760. 9 so let's go  to our website and now inspect this   then you can change the differences  so here you can see that   i set the minimum width 769 pixel  so let's go and get this 768 pixel that's it and in template  mode i want this one column   to take full width so that's why we have  to go to our code editor and from here here you can see that i give  a width for 32.5 percent   we have to change this and before that i want  this column to show in one row so that's why   copy this from here and paste it here so this one  is now in row and i want this thing to be column   that's it and i this line i don't know i don't  want this line because i am not changing this   that property that's it if we go now and save and  refresh so here you can see that this is now in   one column so i want this column to  take full width so that's why go to   again and here you can see that i give a  width 32.5 percent let's change this width   copy this from here paste it here and i don't  want any of this just change this with 200 percent   now go and save and refresh so here you can see  that this width is now taking 100 percent and   this image gather is now looking good so that's  it so if we now decrease our screen size more so here you can see that this heading  is breaking so that's why i have to   fix this so let's see which is the  breakpoint this heading is breaking yeah that's it that's c642 okay so copy this again and paste it here then here will be 642   let's give it three and i don't want this  because i don't want to change this thing and   this also now here you can see that for  heading i give this with 50 percent and   padding bottom 50 pixel and in h3 i give  3m so i want to change this thing so i copy   these two classes and paste it here so  i don't want to change this property so   that's why i delete this line and i want  to take this heading 200 percent with   and for s3 i don't want to change this properties  so delete this and font size i will give one   so if we go and save and refresh so here  you can see that this is now looking good yeah that's it so you guys can see that this image  color is completely responsive and   this is looking good in every width  and height in every screen size and this images is also also responsive so i hope you guys enjoyed this tutorial and  if you guys really enjoyed this tutorial then   give a like to this video subscribe my channel  and hit the bell icon for the future videos   so that's it guys thank you so  much for watching this video me

Channel: Tech2 etc

Views: 10,180

Keywords: how to create an image gallery, Responsive Image Gallery, create a responsive image gallery, tech2 etc, How to Create a Responsive Image Gallery with Flexbox, Building a Responsive Image Gallery, responsive image gallery html css, responsive image gallery, responsive image gallery using flexbox, responsive image gallery flexbox, create responsive image gallery using html and css, create responsive image gallery in html css, css, html, html and css, web design, responsive website

Id: Trw_9lisYVY

Length: 20min 28sec (1228 seconds)

Published: Mon Sep 14 2020