Build an Instagram Clone with HTML/CSS (for beginners)

hey a quick introduction before we go into the tutorial i'd really like you to follow along with me while you're watching this and type the code at your favorite editor and taking the html live to see what's working and what's not because it's way better to learn this way by typing the code and checking it while watching the video so this is a very simple tutorial for usually beginners and will help you to go from a very simple html to a great layout exactly as a developer on instagram will do and give you very good advices on how you will do it on your own so let's go in the tutorial and see that today we will go to code something that it's um for either immediate users maybe for beginners actually in html css and a bit of javascript and we will do a little part of instagram which is also just a three of the photos or maybe more and we'll just do the small tabs here like posts idtv and tagged and we're going to navigate through them in our little application we're going to keep it simple in the beginning and we'll see how we can go forward with it and how we may improve it now i have my editor here i use a vs code at the moment and let's just start with the first file we can actually do html5 this is not an html5 file i'd like to save it i will save it to youtube folder to instagram posts we can call it index product so index you can do html um even five it's gonna better nice and here we can say instagram posts and yeah we keep the rest the same and we move to our body actually we can at the same time open our plates and see it yep is nothing inside of course but you can see the title is already up here so we're going to continue with um the first things could be the tab navigation in the beginning and quickly add some um um we can do it in a list like ul but you can see this big line i think i still do it this list can have a class of navi engagement and it could be the navigation list i actually prefer to do it this way and inside we can have actually an ally if i write like this also v case item and also android you can do it so it lists in most editors so you probably find some girls and then we can also make this a link because if you see when i click the link is changing on top for now we're not gonna make the link because we're gonna use some very simple um css or javascript for this part but you can make another video in the future and actually do this as a link to go to new layout probably against the game at the moment using react so it's different tutorial we're going to keep it simple here and just do some really small tiny things of html css and probably a bit of javascript so we start with um so we actually want to create the first three items which is a posts igtv i will just copy paste this id tv and tagged you could actually also take the icons i will try to take the icons with inspecting it because i don't have them at the moment you can see that those are svg so i can edit the html copy the whole svg and actually paste it here um let's see this should work perfectly here yes you see the icon is actually here and we're gonna put this into a paragraph so we can use it later and we can actually make it navigation give it a class of navigation uh text so actually i will do navigation item and text uh let's save this and we can actually use the same um for this i will uh wrap the code so we can actually see what we're doing this this it is a bit big you know not actually would use it but i will go on full size i think it works but um yep and let's make the rest of the items the same we are going to have the paragraph in the beginning and we are going to close the point of again and again take this here save it and we go back to instagram inspect the rest of the icons it would be advised to use your own icon for now just make an example and we use the icons we have here we can actually let me see how we can style them too at the moment we have some other label the hands of you box they have some random classes because they probably use different systems than we do but for us we'll give them navigation item icon class to all of them and this one don't worry about the rest we don't really need to change anything but the best actually i need to do this class okay and if we go back and preview yeah this is looking good um what else we need to do here actually i will start with some css i will do it um on the same file but it's advised to do this on a different file uh for now we can just um install some style here into idle css i will start with some global css and nothing oops nothing special with some padding and merging and the books sizing body box this way we have no spaces around that we don't need and then we can um actually for this one because we don't do this but for this one we can check if there's a background color on instagram here i'm not really sure if they have something yes looks like they have some my new account color and okay we have also a viable here we don't know what is actually this available but what we can try to do instead to take the book and color if we actually have one yes it's this one so we're going to use um color this uh actually later we'll also see how to use the variables as they've done on instagram but for now we're gonna keep test color and we add some padding around around the body so it looks like this because later we're going to add this line here and we don't want this to touch the edges um okay next step will be to actually make it look like this that's why we're going to use some css for this part so the navigation list uh we only do for the specific one the list style none this way we avoid having this little bullet here and we also make it display flex not inline and i would actually want this to have full width let's see yeah it has full width and we can do we can actually add a photo top of one pixel solid and um color like this we can change this later yeah it's it's quite quite good quite close and same and this is getting close actually for the fonts for the photogrammet we don't know what's the font of uh instagram we can actually inspect and find it but for now we can go with something like very simple iron vertical some save and um for the items navi use now in case i can actually copy paste this navigation item um we are going to we can actually increase the font size but we can do this in the paragraph we have which is text let's go to text and the text here let me see yes the you see the color is different depending if it's active or not first i will try to do it bold yes it looks a bit better and maybe a bit smaller maybe 12 will be better yeah it's a bit too small uh 14 yeah you can keep 14 and um i would like to add some little spacing but it's not for now we can actually copy this color and use it here with the text oh this is not very bright i'd like to increase this i use a inspector to sometimes quickly pick colors and then change them with the design ones if we have so this is gonna be uh fine for now yep it looks good the phone's a bit to be exactly 13 and i would like to add some little space actually it doesn't look that close if we don't add it so we can do one pixel maybe 0.7 um yeah and 12 again okay i will keep those settings i copied from here lateral spacing 0.7 font size 12. and we want to actually have this in the same line that's why we're going to take navigation item you can see here my styling isn't correct let me see if we can format this probably okay default i will go with this one okay now it's better and occasionally no guess what i think this is wrong it was for here and actually we want to give some item to be display flex as we can see now we're in the same line and we want just some space between so we're going to use some mounting i will actually want to make sure that they are aligned in center we cannot see it now but there should be some small difference and now we want some space between the icon and text uh i will we don't need to have an icon class for now but we can actually add it and separate the one from the other with some molds and light of 5 pixel or 6 pixel yes this works um pretty well and we have to give them some space in between which is navigation item we can copy again the nodes and right and do it like 20. oops i have a mistake here okay even more even 50 yes this looking even better and then we can give it some padding of top and bottom actually we check here yes give it some padding of top and bottom which could be say a not 0 10 and 0 or 20 s 20 looks nice it looks nice um we can see that they're in the middle last texan icon right yes even if it doesn't really look in the middle and now we would like to have the active state and also it's good to have them in the middle so i will justify them probably with justified condoms center so there will come this side i think there is a bit of less spreading here maybe 18 so we can make closer to these and actually here you know we can inspect this part it's um this one up here and check the color they have it oh it's again a variable that we don't really know what is this color at the moment but up here you can actually see the color copied and paste it here this way we are very close with the colors i mean only the text is different and now i'm going to make this small darker line when it's selected and also make those dark so what we're going to do is we will add an active class to the active one so we can do it like this and say when an item is actually active dot active this means that a navigation has a class and has another cluster which is the active one so when there are two classes do the following um actually here we don't need to do anything for the item but for the text of the item so the text will have a color of um black let's check this yes this is black now and we can also change the the icon you can copy this part and then make copy this make it here and this one will be the path because there is a svg inside and the path should fill the path with a black color so this is darker if you can see i will actually make it red so we are able to see it and get it back to black again and now we just missed the line on top which is something we're going to do with um a before we're going to have a position relative to our item and then we're also going to give to the active item and before and this before we have content anti-content and position absolute we can give it a height of one pixel and the width of probably 40 pixels we can check that we give it a parking call of black again as we give the colors down here and we're going to check this out so if you see the small line here if we inspect this we can see the before up here and actually it's on this place because there is no um position for it so we're going to do top zero you can see where is it so if i do it of minus one it goes exactly where we want us to go and now i'm going to put it in the middle of the width we have so we're going to do left 0 and right 0 and we're going to set its margin to auto and this way it's going to go in the middle and actually you see that the width is 40 so i'm going to increase this a bit i don't know if you can see that clearly i'm going to make a little bit bigger and remove the console for now so this weight can be actually obviously that's going to expand after a while so i give it to 16 for now i'm not really sorry this is like correct though because if i did it bigger further bigger it just continues like this but it doesn't move from here so we're gonna keep it to 60 for now actually this could be 100 so this is going to take the full weight and be safe with us kind of forgot this part so let's do it like this copy it back here and then we can do whatever we have to uh top minus one pixel to go further than its own position left zero and try zero and actually even if we don't have the margin now it's gonna be fine let's save it because it gonna go from left to right from zero to zero so it covers the whole width and also we have with 100 so we don't need to center it anymore here in a second they do almost the same so we can see that our menu is really uh close to what instagram has um and the main thing is that those at the moment are lights this will be preferable to be either links or buttons for our case now we can make them buttons because now we don't we cannot really click click them so let's quickly change them to uh buttons i will go back to our list and create a button inside here and close it here take all of this in and then do class of case item button um actually you have to repeat this to all of our items if i do it here i can close the button and save it um let's fix the code and then here i'm doing the same again okay so this is looking worse than before but at least we have buttons and you can actually use tab to select the buttons and click them uh so in order to fix this and make it look like before we're going to get the class navigation button and edits are down here right here down here uh and then we can see that there is a border to the bottom so we say go to none and will go goes away we see there is a background color to this button so we say background transparent this way there will be no gun color and actually this should have changed the appearance we can actually say appearance none this can also be um webkit appearance oh it said that we don't use this i'm not really sure if we use this appearance webkit anymore or not but i'm gonna keep it here for now and [Music] probably there are some weird partings and mountains on this button that i would like to avoid but we have a padding already here for the navigation i'm going to take this off and put it the button okay this thing changed a lot but at least you see how big the button is now and as you can see the layout is a bit destroyed because there is no uh display we don't need a display flex here anymore we can actually move it down here to the bottom and have the same layout again and now it's clickable if you want you can also add a cues for pointer oops save it and then you see that it's executable and also you click it with the keyboard or with tab under tab and space um from type and return so let's continue by showing the instagram posts down here we are actually going to create um a little agreed for the photos but before that because i forgot we can actually check how this is gonna look on a smaller device and um you see they have a different so they have a different layout and you see they have a different layout for the mobile so you see so we can see that they have a different on instagram so we can see that on instagram they have a bit different layout for their mobile and their desktop navigation at the moment we will focus on the navigation we started and in the end we can see how we can make it um exactly like this actually to be honest you know let's just make it now because i'm focusing mostly on so as we can see the navigation is different on mobile than on desktop and we'd like to focus on this and fin finisher fix actually this navigation we have make it so very nicely like this on mobile and then go back on desktop and finalize the changes so i'll go back here we can keep the code we already have but it's actually my mistake that we started from the desktop version i have the i didn't have the mobile values in my mind so let's now take a look and see here we have icon and posts and i couldn't text actually but here we just have an icon which makes so life easy so we're just going to go back here and say that the text should be display none and this will hide the text okay we actually also need this border on the bottom as we have it only on top now and we're going to make um duplicate this and put it on the bottom let's check it out yes so we're going to make this part and now i want to make the icons bigger so that they look great we'll see this is a blue color when it's selected and this top line doesn't exist so first thing remove the top line we're going to use this code later for now we can actually just comment it i to comment the code we just use these little symbols in the beginning in the end in the beginning in the end and yeah we save it we test again it's not here and for the icon size it's actually good to have an exercise the whole time i didn't my mistake let's fix it now the icon size here is around see this link is 24 so we also go with width of 24 and um it doesn't get louder why because i tried to have a weight of 24 but the height is the same and also you see the svg has its own height and width here which is 12 and 12. so we're going to try to make it 24 and it works but this goes also against the html so i will go back to the html and um for now at least we can remove those files okay remove height here and move the width okay and we have one more which is up here move the width up remove the height okay we can also fix this code and now the width height will be the way we want it but we have to set the height back here i 24. great um what i would actually do i will make sure that it's aligned send out and justify its undued justify content uh just to be sure every now we cannot see difference but just to be sure and um let's check a bit oh yeah this is another problem because you see the melting right it's on the first second and third item but there's this weird space here that we don't really need so we're going to select the navigation item and we want actually the last one so the last child to have no mounting light so this is gonna give mountain knight first the second but not to the last one it doesn't matter if third fourth or anything else could be if i move this it's gonna do it for this one so that was the last one uh and now we only have changed the color we have to take the color from here oh i actually saw it down here for a second um it's this one i can only get the outsp which is a bit weird but maybe we can also get it from here no so i will just keep the rgb color maybe this feel is its feel yes i think it's this way and um just try to fill up svg2 so when it's selected you can say that the path we have this column yes this is exactly what we wanted now you can see that we also have this padding here that doesn't let the layout go and that our padding top is bigger so we can actually make it something like 12 which is smaller and the body could stop having this padding here make it packing zero we can just completely oops completely move it and we can actually add it with a main element so we have all of our application inside this main element i open it here and i close it in the end and everything should go inside it so to continue from here we want to make it look great also on desktop because it doesn't it looks great but it shouldn't be like this it should be like this uh one thing i will do is i will see which is what is the resolution that they change it uh so if i go to responsive mode and i go to a small resolution you see that we around at 705 pixel at the moment so around 735 30 36 07 3 6 is the number we need at the moment and we actually want to go back to our styles and start the media media screen let me do it again yes and when the mean width of um our page is 736 pixel then we're going to introduce new css that will override the css of mobile and make it look like we want it in desktop a quick example will be the text here that we made display now to go back now and do it a display block and check it so on mobile no text on desktop various text and section changes immediately it's exactly what we want and to be honest i think on the icons we have this you see they have this little mode in that we don't need a mobile and this is actually a mistake we can avoid this by removing this here and then we will add it only on this layout because we don't need it on the mobile one so remove them here we add it here and this should fix the layout on mobile make it even better and on desktop it's going to look like we want it to so uh also i'm going to add on the main element we used before instead of body i'm going to add this padding 20 we've had the phone our body so we'll just make it look the same again um the list item you see we had this one before we're going to use this one to use a little line on top so we need this code but we just need it on desktop we uncomment this we save it and you can see it's back again i'll have to change this color it shouldn't be in the blue so we take this path and we change the order correctly and we fill it with black what tells you i will have to go and change the navigation and list actually because there is a border bottom that we don't want now like this one yeah and now it's exactly what we wanted it's uh it's looking great on desktop and on mobile actually a mistake that i just noticed is that the icons are huge and they should be 12 pixel as before so with 12 pixel height say yes this is what we need so it's great on desktop and create on the while um probably they have a different layout actually you see them that the icons actually stretch and they have this equal width instead of the icons we have here let's make this real quick and say that it's ally doesn't need to have merging right anymore but it has to have a width of 33.3 percent okay i'm making this in the preview uh let's actually save it on the item here let's go with the item give it a width and remove the molding right which was uh 50 pixel and we actually need this on navigation item here and desktop we're gonna keep it uh here navigates an item okay and for this one we have the width and we can see that they actually have the position we want but they don't really have the center alignment so the navigation item can be now and display flex with justified content centered and it's going to send the icons and make it exactly like instagram so when we resize they're going to be like instagram let's see if it's exact like this yes it's exactly what we want at the moment and on desktop it's gonna look bigger but we're gonna fix this um display flex and justify content center this is what we did i'm going to refresh check it again yes this is called it and on desktop we just want the navigation item to have a width auto to override the weight we just put there and that's it if you actually want we're gonna do this with a javascript but if you want to change the active and see if it's working you can actually go here and either move or add the active class to another one for example this one and you can actually see if it works or not and you will see if it works or not for now it works and we can keep it here and continue with the next file which is how to add photos and make it look like instagram so let's make a small a small quiz we start from mobile and we add let's add six photos for now and uh and we add them right here and i'm going to go i'm going to actually copy our friend's photos here and see so for the next step we're going to add some photos from um from instagram to our instagram down here with exactly the same layout we're going to use um our mkbhd i always confuse his name um a very nice name i'm going to use the photos at the moment and link them to our website it's not the best thing to do but for learning material it's going to be fine so you see how small it looks here this weird i'm going to take the photo is here so you can do open new tab and actually get um the photo oh it looks like the photos and here's the ground okay this is what we're going to do so we open the photos in this tab and we can actually afterwards use the url in the application so one photo second photo and nice photo and the third photo with the winner so let's open it up create we saw the three photos and then we continue with more so as we have our main ul i will close this so have more space and now we can make [Music] a section with a class of photos grid for example and inside we can use um [Music] some divs that will actually be the placeholder of the background let's see what i mean so photos create photo and this one should actually be clickable so we can make it a link um yeah let's make it a link for now i want to disregard this but it's what i have in mind at the moment and for each one of them we should also give them style so i'm going to actually move them down here because it's a bit easier to read and the style is going to be background image url and this way we give here the url we've got from the photos from instagram first url i'm actually actually going to try to clear this url maybe if we remove this part it's gonna be more clean but i'm not sure about that i wanna cut it on the tablet out yes right here i wanna keep the rest but not um yes it actually worked but it's added it by itself so we can actually cut it here and see if this is going to work i can go back to our application check it and actually we see nothing because there is no width or height for the photos and um let's actually continue with the next photo i'm going to copy this one more time in one more time second photo is going here and try to reduce it and third photo it's going in actually you can also use some titles those links and give the title of the photo for now we can just say photo one two or three this can be the directly load the caption of the photo anything we want and again we are not able to see anything so we copy our class and uh actually this is the media query so we're going to go back in here before the media and we are going to give it a width of 33.3 percent and actually we'll try to do a min height and it has some height i will just play around with 200 and see how it's going to look like um i've probably done something wrong because we get no css here but it's fine we have to just figure this out so first um i can see there is some width and there is css here so that's a good thing but probably the problem is that there's no display in the box uh we're gonna take the photos grid class tool i'm going to start from this and make it display flex and flex uh yeah check if this is helping okay and then you can actually see that probably the photo links don't work yes because i edited them in a way that i thought it's going to be better but it's not so we add them back and see if it actually works now yes this way they work so we copy copy paste photos here okay great now we see that the height isn't actually square so i'm going to reduce the height to something like this the problem is that if we make it responsive and we move around uh it's not gonna look square at all times so we're not gonna fix it uh this way at the moment we could actually try something like um the the width of the browser something like this but it's still not going to be 100 square it's looking good for now i'm going to keep it let's just remove this one keep this one let's go back to the code and change it this actually means it's here and that take 30 percent or not actually percent but yeah it's 30 of the width of the browser at the specific moment and we save this and we're going to actually fix the background because as you can see let me close those you can not actually see the whole photo as it is here um and for now as we actually test it i can copy those links and duplicate them and add them down here and now we have six instead of just three um we're going to fix them i'm going to do it live in the browser so you can see the changes this is a background image so i would like to go with the background position of sender we just under the photo and the background size of cover nice so we also have a cover photo and this is very close to what we've seen in the game and see if you can see there is also a very little um padding around here that will uh try to um add but it looks like it's not on the edges and it's also it's only on the middle one so this will be a good it's on the middle one it's down okay so when something is in the edge it doesn't have this you can check yeah i will actually do it with some width uh change here and just to tie it out we can actually give it three percent so there is some space and then say to the photos grid just here and see how this can work space between okay this works with space between and i can um keep this change let's go back to our code okay i wasn't sure this contour exactly as we want it um back to a code 33 percent and justify content space between we reverse it and we forgot to save the background changes oops see activate it by itself i don't know why so background position center and account size nope account oops background size cover save it refresh the page and it is exactly what we need except some padding on the bottom now this setting becomes a bit more complicated because we don't actually have percentage we don't wanna some percentage so i'm gonna do it um randomly for now but this is not the best solution let's see yeah this could be okay for the uh for the demo we do another solution i will also show you what we could do so we can add this down here another solution will be so this is three pixel and we like to have three pixel and three pixel six to go here and make the width 33.3 percent as it was before but use a caulk instead so the calculator i can still do minus six and then six pixel i'm not really so if the pixel is working the way i want so i wanna do minus six um what if this means six percent oh no it's not six percent okay this way we know that we have six picks three and three pixel uh three because it's uh six and uh no it's not working so this should be pixel actually and uh it looks like it's too much yes it's too much because it's six from each one we actually want to do [Music] six for three of them so you can do two if we do three it's gonna be more so yeah two is fine uh because it's two from here two from here from here is six and this way we can make the layout look exactly as we want let's go back to our code and save this i'm going to keep calc at the moment when you use some stuff like carl for stuff like this it's also good to use can i use caulk this is a website that will show you if you can use this variable in different browsers and if it's supported you can see that at the moment example for example opera mini doesn't survive but they start quite okay with it you can also check um known issues about some browsers and why they may not support it uh you can see character transform and the other stuff um after a while you're getting used to this and you know exactly what's working what's not well if you don't know it you just cannot use search and you find it so the layout looks pretty cool and nice and it's really close to the instagram one so far i'm happy with that uh let's check the desktop part okay it's not very far what will change is just some spacing in between which is a bit bigger oh c activate it again i don't know why it's really want to talk at the moment so what we see here is that um after a while there is a bit more space in between so we can also do this because we have if you remember down here let's take the photo we have a media media so we're going to add in the end of the media oh actually i see that i also have a wrong class name because i started with capital and western do that on this example so we go with photos grid and then photo squid photo and i have to just copy it back to our photos here you see that here also the layout isn't correct i can do for my document it's going to fix it for us and then copy the correct name to all of the classes okay so here we can actually reduce and let me take this with use the width uh we can keep it the same but say we want to have for example 20 pixel and this is gonna give us a lot more maybe 10 pixels from each one less so 15 or 16 will be will be ideal and 16 now means 116 and 16 will go to 32 and 48 i'm going to have now jin button exactly to our photo okay 48 is it actually 48 oh no it's not so we're going to try a different value something like uh 20 26 looking good at the moment um i'm not really sure why we cannot already calculate that but 26 foot now works very well you can see different size it also looks well so we use 26 here and i will try to close the inspector and see that this goes to full extent and i don't really think this is what we need here though if i actually stop this and i go to a full extent at some point you see that the layout is stable and this is one of the last files we want to do for the layout and i also noticed that we missed the padding here so let's fix that go to navigation list not at least but uh the button right let's check navigation button padding so we take the button we go here this is inside the media clearly we have indoor padding not 12 18 pixel 0 it was 12 before and now i'm going to find out what is the resolution that we should start um locking absolute layout absolutely nine around 980 so we make another media query copy this one in the end please and we do 9 18 and this will make um this we want to keep this width and probably we're going to set a weight to our media to keep it uh the same place it's the same for the name yes it is so we want our medium let's see what is the weight we keep here inside 935 so we're going to say to the media that the max weight you can have is 9 t 35 pixel oh it looks a bit weird now and the margin could be auto so it's gonna make it go in the end the same should be with the width but we're going to make it a max width so it does it can go smaller but not bigger than this i'm going to copy this go here into the main i will be nice to give a class to maine and skip it main we do it for the tutorial here but please give a class and don't use genetics like name like main and um we save this we'll face the page and we see that we have the layout we wanted and it's really nice and the resolution we've worked before but when we go to this larger um resolution the photos get a bit weird like the heights kind of changing um so let's try to fix that probably we need to use um it's a flex issue so we need to use some flex i will try the value i'm going to try it here enter the value flex 0 0 auto which doesn't fix the issue and flex one of course will not fix the issue because it's flex wrap so we have to find why we have this little problem when we set max width domain matrix is not enabled here it's actually enabled here this means that um it's probably because the width doesn't change anymore the width is eye fixed but the widow width are changing and if you remember before we have mean height 30 widow so like it's viewport which that's why it's the w probably and the thing here is that um we have to fix this with a fixed uh height the fixed height for um instagram at the moment is 293 and for us to 282 yeah because it's a bit different layout but that's fine this can work um you can make this 293 pixel and actually take it from here i can refresh and do it's fine go back do the photos create photo and give this height let's see it it may not work because let's see what yeah because of the mean height on here that doesn't really help so um let's actually say that we don't want them in height anymore let's find it insert it we want to make it height this is going to make it look way better and it's um almost what i want it it's actually the layout yeah allowed to create on any of the viewports we want it you can actually see that it's going all the way into position and it looks really close to what we have here okay i'm really thankful that you will study tutorial and i really hope you code along and that you got some learnings from this there is another video that's coming soon that we will continue and finish this part but uh if you have any comment just write it below and just help me a bit with algorithm and like the video or subscribe to the channel to check even more that's coming in the future so that's it for now and see you in the next video

Channel: Stratos Iordanidis

Views: 7,227

Keywords: html5 tutorial, html5 tutorial for beginners, html5, html, css3, css tutorial for beginners, tutorial, crash course, web development, instagram, instagram clone, dribbble development

Id: xCzSOJl0DIw

Length: 58min 52sec (3532 seconds)

Published: Sun Dec 20 2020