Photo Gallery App Part-1 | Create Website Using HTML & CSS

so what's up guys welcome to another video today we are going to make this photo gallery app ui with our html and css so as you can see that it's a clean design and also it's looking smooth and fully it is responsive if i go to the responsive section so as you can see that when i will go to the small device it will go something like that as you can see we will have the great responsiveness here it will be responsive for any kind of device as you can see so actually this is the part one of our photo gallery app so in the next part of our photo gallery app we will make each live means we will fetch it with an external api and we will have also the external search for our images so that's what we are going to build today and hope you will like it so no more talk let's dive into it [Music] so today is the day 7 of our this 30 days 30 submits challenge so for the day 7 what we are going to do actually we are going to make a app ui so the app will be the photo gallery app so for the d7 we are going to just create the app it will be the part one and for the day edge we will get the part two where we are going to fetch pixels api so that's the api that we are going to fetch in our part 2 which will come tomorrow maybe so day 8 so for today we are going to actually create the ui with html and css so for the ui design we are going to create something like that so as you can see that it says sketch design and it's from the ui design delhi so i will also put this link in our github repo so you can also find this so we are going to create the ui which is will be like that but we don't want the menu so we just want the search box and also the not the uploads we just wanna have a something like logo so that's what we are going to do so search box logo and also the images will be something like that so it will be similar like that but not the exactly that we are looking so let's create this in our html and css so in our html let's get a boilerplate here so let's give it a title so the title will be photo gallery app ui so we have the title here so in our body let's create a section so in the section i will have a div of container so container after this div we will have two part first part will be the header so header where i will have my search box and the logo so for the search box so first of all i will have the logo instead of the search box so let's have a h1 and give it a class of logo and after that let's give it a logon name so i will use something like very simple photo gallery so let's make the g capital okay so after that let's have a form so this form will be for our search so as you can see that we don't need any kind of action so we just need the form and where i will have the input and the input can be text so it will be okay so after that let's have a placeholder let's say that search image search images and also we will have the iron icon so iron icon so in iron icon what we have is we have icon name so name search outline so let me show you the iron icon so that's the ion icon and it's a icon library and where you can find so many icon i am just having this search outline so let me show you so search outline if i give search so that's the search outline as you can see that we have here so what you can do actually you can copy this and paste it where you want to use the icon so after that you can go to the usage and for the usage we need to have this cdn script so just paste it in our before closing body tag so that's it for the icon so after that let's come to the html and here after the search box we do not need anything else in our header so after the header let's go to the gallery so leave with a class of gallery and in this gallery we will have our item so basically i will just create a class of item and in the item we will have our photo so we will wrap all the things in a anchor tag so let's create that link here so in the anchor tag i will have image so for now we will have the demo images so in the next part of this app we will patch it and we will have this item dynamically from our patch api from this pixels.com so for now let's use the demo one so the source will be in the image when we have these images and just for the alternative we can use img and also let's have a h3 or we can say that photographer name for autographer name photographer name something like that so that's one our item so let's create five mode so one two three four five and we have now five of them so if i save and come here and make a refresh as you can see that all the images and then you can see that the images is looking so massive big as you can see so we will fix it in our standard css so let's come to the style.css so before we go to the start.css let's link our stylesheet here so link css and we just linked our external sheet so in the style sheet what we need to do actually we need to import the monster font we are going to use it so monster art google fonts so let's come to the fonts.google.com and search for the mont sarat so this is the one and we need 300 and 900 so 300 for the light and 900 for the bold one so that's it so just come to the here and just embed it copy the import tag and paste it in our html sorry css so now we have the font family so after that let's have the universal selector and let's say that margin will be zero and padding will be zero and also box sizing will be the border box will be the border box so after that let's also resize the images so for that i can say that all the images that we have in our website i want to have the height 100 percent and also the width of 100 percent and also say that object fit will be the cover so as you can see that now everything is in hundred percent of its width so if you can see that the images is still the same we need to change the image number here so i already have the image one image too so just change them image three four five i think we also need the six number of our image so this will be the sixth one number six so now as you can see that we have these six images here so perfect so after that let's come to the html and here first of all in our html let's apply the font family here so in our html let's say that font family will be something like monster art alright and also let's have a sensory weather fallback so monster art and also let's say that font size will be something like 10 pixel okay so after that let's come to the body and give it a beckon color so in our body background color will be something like let me copy the color [Music] so it will be something like this color as you can see in our background so after that let's come to the section so section i'll say that mean height will be something like 100 percent so 100 vh and which will be 100 and also say that display will be flex and align items will be center and justify content will be also sent up so everything will be center and also say their margin we want to have in the top 100 pixel and also we will have 0 for the left and right as you can see that we have this 100 pixel margin here so after that let's come to the container so continue and here let's come to the background color and let's give it a background color of white and also let's say that width that i wanna have is ninety percent so now as you can see that it's ninety percent of our all width so after that let's say that max width i wanna have 900 pixel and let's say that we will have a margin which will be something like zero and auto so it will make sure that everything is in the center so after that let's have a box shadow so box shadow so i already have the box shadow so let me just copy the box here so we will have a box shadow as you can see in our this container which having this white background so after that let's have a padding of 50 pixel and 20 pixel so it's looking good now and also let's have a border radius of 20 pixel yeah perfect so after that let's come to the header so header and here let's say that display will be flex and align items will be center and justify content will be center and if i save it now as you can see that it's now in everything in center so i don't want them to stay in one line i just have the flex direction column so that they can stay one after another so let's say that flex direction column so as you can see that now they are having the s10 one after another so after that let's come to the h1 so let's set it header h1 so here let's say that font size will be something like 40 pixel and also let's say font weight will be the 900 which is the bold one and letter spacing let's say that minus two pixels so it will shrink down a little bit so after that let's come to the form which is this one so form and let's say that margin top will be something like 10 pixel and width will be 80 percent and also that max width will be 300 pixel so now it is having something like 80 percent of the width and after that let's come to the input and say that border will be none so i will not have any border but i want to have an bottom border so border bottom so border bottom will be something like 2 pixel solid color and we will have a rgb so now as you can see that we have this grayish color so also let's say that margin bottom will be 10 pixel here so that we can see it now as you can see that we have this border bottom here so after that let's say we will have a font size of something like 20 pixel and also let's say that outline will be something like none we don't want any kind of outline so color will be gray and also background color [Music] so background color will be so transparent so it's looking good now and also let's give it a width of something like 100 percent for now so as you can see that is having the 80 percent of our weed because our form which having the 80 percent of our full width so it's basically having the 100 of our phone so after that let's come to the placeholder so we have the placeholder here so just we can say input placeholder and something like i want opacity so let's drop down the opacity so 0.5 and also let's say that color i want is the gray so let's say that font family will be monster bounce alright and say that font weight 300 actually let's make it 400 instead of 3 or 500 yeah let's yeah that's looking much better as you can see so after that let's come to the this icon as you can see so let's say that from iron icon so iron i can so we can say that the position will be absolute and for that we need to make the parent position relative and also let's say that i wanna have this in the right side of our form so now if you can see that it's in the right side and let's say that i wanna have the opacity as we have in our placeholder so now it will have the 0.5 opacity and say that color will be in gray and also let's increase the size of it so font size will be 20 pixels so now as you can see that we have this icon here so it's looking good so after that let's come to the gallery so gallery and say that width will be 100 and display i want to display them as a grid so let's have the grid template so i wanna have a grid template for our column so it will say that repeat so i wanna have the autofit here so auto fit so it will fit automatically and i will have a min max here so min max so 250 for the minimum width and also maximum it can be one effort so means when it will go down 150 or less than 150 it will create or it will go to the next row instead of having or shrinking itself as you can see that we are now having three of our images but so as you can see that the image width is going down and down when i'm decreasing the window width as you can see so whenever the image width go down 100 sorry what 250 pixel so when it will go down 250 pixel instead of shrinking it will go to the next row as you can see so that's how we will have a very amazing kind of responsiveness as you can see so that's why i love crit as you can see that it's very smooth and also looking good so let's come here and after that let's come to the margin top so let's have some margin top here so 50 pixel and also grid gap i wanna have is the 20 pixel so perfect now we have 20 pixel gap so also let's come to the item and each item i want to have the width of 100 and also say that height of something like 300 pixel and position of something like relative because i wanna have the this photo name as an absolute position of our item so that's why i'm having the position relative here so overflow also let's say that hidden and also border radius will be eight pixel and transition so transition i will have something like point three second is for the box shadow so basically i will have a box shadow here and i will just have the box shadow and we will hover and when we will hover the box shadow will appear and it will have a smooth transition of 0.3 seconds so let's have the box shadow here so whenever i will cover the item so item hover and let's have the box shadow so just let me copy the box shadow here copy that and paste it here so if you can see that now we have the box shadow and it's having this smooth transition of 0.3 second perfect so after that let's actually style our the photographer name so it's in the item and we have the h3 for it so also let's say that width will be 100 and let's say that padding i want to have a padding of 20 pixel and also set that position will be absolute so that's the position absolute and that's why i gave the position relative in our item so after that let's say that background color will be the black background color with 40 percent of opacity so it will be something like that and also position it so before then i'll say that color will be allies blue so let's position it so let's say that bottom will be one or zero pixel so now as you can see that it's positioned itself in the bottom of our item so after that let's say that font weight will be 300 and also transform our transition will be 0.5 second each in out and also for the bottom so basically we will have a transition for our bottom we will change the bottom when we will have our item so i will show you what i mean that's looking good also let's have a font size of something like 30 pixel so big 30 20 uh 20 is looking good and actually what i can do now i can decrease the bottom and it will go down so let's me so let's do something like minus 20 so it will go down as you can see 20 pixel actually so as you can see that is going down so if i do something like minus 50 it's also going down so let's do minus 17 so it's now completely hidden so why number i will hover this item i want to show them or i want to show the h3 so what i can do i can say that if i hover the item i wanna show the h3 so the h3 bottom will be [Music] zero so as you can see that we now have this effect here when i hover the hd will come from the top so for the desktop it's also looking good as you can see so i just wanna have some small changes in our desktop so let's get a media query here so let's have the container so container so for the container i will have the max width of something like 160 pixels so i just want to increase the max width and also let's say that i will have a bigger padding something like 100 pixel so now as you can see that the padding is now big so after that let's come to the header and what i want to do actually i wanna show the logo in our left side and the image search in the right side so for that what i can do actually i can say flex direction will be the row so row if i give it to not header so actually dot header so it's a class so now as you can see that it's staying in a row so also let's say that justify content will be a space between so now we will have all the space between them so perfect so after that let's increase the font size of our this logo so i can say the logo font size will be something like 50 pixels it's not having the stand because we need to grab them like that so we can say that header h1 and now it will have the font size of 50 pixel and also let's say that i wanna increase the font size also in our this search box so i can say that input so input i wanna have the font size of 24 pixel it's now 24 pixel and also let's increase the icon so form ion icon font size will be something like 24 pixel so it's looking amazing and also let's increase the grid gap in our gallery so in the gallery i can say that grid gap will be something like 30 pixel so that's it as you can see now we have this photo gallery here so perfect it's looking good and if i go to the responsiveness so for the iphone it is looking also good as you can see so let's have a little bit more space between the our logo and this search item so here in our header we have this form let's make it 30 pixel or 20 will look good yeah 20 is looking good so as you can see that we have this photo item here and it's looking amazing so that's it for this video so for the part two we are going to fetch with the pixels api and we will have the live image from the pixels api and we can also search image from the directly our pixels api so we are going to do it in the next video which will be the part two of our this photo gallery app so if you are interested to check this video please subscribe the channel and it will come tomorrow so it will be in the day 8 of our these 30 days 30 summits and also if you are interested to check out these all submits you can check out this repo i will link it in the description so that's it for this video i hope you learned something and if you do please subscribe and my name is arfan and i will see you in the next video till then bye bye for the office [Music] foreign

Channel: WEB CIFAR

Views: 4,992

Keywords: html, html and css, website design, website development, image gallery, image gallery in html, make photo gallery in css, css html photo gallery, image gallery css, image galleryusing html and css, lightbox image gallery, image gallery tutorial html, photo gallery html css, grid template areas, responsive web design, responsive image gallery html css, image gallery tutorial css and html, photo gallery app, dynamic photo gallery, web cifar, shaif arfan

Id: URymtcPO11A

Length: 25min 41sec (1541 seconds)

Published: Mon Jul 27 2020