Creating entire website using Bootstrap - Instagram Home Page Clone - HTML & CSS

hello guys and welcome to another episode here and coding video in today's video we are going to be building a clone of the homepage of the Instagram website and the main idea is to see how far we can go using bootstrap as much as possible so with that in mind let's see what we are going to be building so if we take a look at the Instagram homepage here we have top navigation we have two columns on the left side we are going to be building like the this images here where we show the stories of the people that we follow and also below of that we have all of the posts of the people that will follow as well and on the right side of them all day content here we have the image profile with the username and the hang of the web the profit that we are log in and we have some suggestions so basically that's all that we're going to be building this episode and see how it goes so here I have empty project but I have some assets that we are going to be using for this video I have some profile images from actually those who helped us image and we have the Instagram logo here as well so now the first thing we want to do is to create a main file or index file and from here we are going to use the HTML file structure so now that we have this structure here we need to now install the bootstrap a components in our project soul in the bootstrap website we can download the files and we can also NPN start the bull shop but for this video we are just going to use the CDN and here we can copy this CSS file to copy this file here and we are going to paste that in in our project I chose before the title so we copy that and now we have the CSS we are just going to format the document so looks better and now we are going to do the same for the JavaScript files and these files are going to be a right before before E and so we're just going to pass paste out there and we are going to format the document as well so now we save this and we should have a bootstrap install in our project ok perfect so now the first thing that we want to pay to his or a top a bar a hue so for that we are going to use the nav system that Gustav Hofer also the case I'm just going to go to the documentation and copy this top element that we have here and we are going to wrap this insert div so he'll be I just want to base that we have our nap there so now I want to use a container so I'm just going to use a container class and insert our container I'm going to use they call nine a last double stroke has so now that we have these elements I want to start adding the logo the search input and the menu here so these columns I want them to be a flex element so I'm going to say D let's I'm going to say Flex Brown and I'm just going to justify the content to be between and that will give us the same effect that ether has for these elements on the top bar so for the logo I want to use one of their class that I have so it is an up front I'm just going to copy and paste as well and I'm going to use all that we have in the asset so two images and the insulin logo and I'm going to delete the beat in high because we don't want that in our image now we have the logo here now next thing will be to add our search or search input here on the center so same I'm going to use the search that I have here in the examples on the documentation they have these forms I'm just going to copy this form place it here I'm at the document and we don't want to use the input so we are going to delete the button there and for our menu we are going to add a list here and we are going to say that our lives to be this in line and for our list items we are going to say this to be list item in line and we are going to add our icons so for the icons we're going to use the icon star booster pass I already have those selected so I'm just going to copy and paste those icons in here so we're going to say the elements to be a link reference willing to be empty for now and here we are just going to paste all of the icons so this one it is going to be for the home which is going to copy and paste all of the or for menu starting sara has anything I believe there are four yes 504 actually for four and the other one is de the profile a picture but then I'm going to choose two that really quick I'm just going to change the second one all right so going to change this let us once all right let's see how this looks on the website now if we open these this file on the browser so we can see here that we have our elements in place so now I think I typed the wrong class for the menus here because I think it is placed in line item this item for element so it is placed on the same line so how we're going to fix that and we say we go to a website and because you know the elements being display correctly on the same lines so now if we inspect this website we can see that our column it's not on the center so for that we're going to add justify count and center here on our container zone in our container here I'm just going to say justify count and center that should fix that problem yep now you will see our menu here we can see that we have a space in the in the in the menus we have like a margin on the bottom so we are just going to say that or least to have a margin of zero so now that way we can get four elements now to have the margin be perfect now now that will help us because we want to align these items to be on the center all of these and then so in our column here we are going to say a line or item is to the center so now we save this we have our all over elements in the center so then later we can see that we have a blue background so later I'm just going to create a custom class so we can have these elements to be black so we are going to for now we are just going to add our profile picture here so for that I want to add a new a new element in our lives and I wanted to say saying this and here I'm going to also add a link reference and we are going to wrap our image inside our deep so say deep in image to say souls to be our images assets assets images one tool to the profiles and we are going to use our profile 6 the image number six here in our assets and for now we will just continue like that and if we go to the browser refresh we see the image being displayed here so now we are just going to fix that so it looks more like this image right here so okay now in our wrapper component here we are going to set a class and this class is for is from boost up as well so it give us like the circle if you call shape on the on day on the deep element 20 we are going to say overflow hiding on this one you want to say that display flex and you're good just to fight the content on the center and we are going to align our items on the center as well and our image is going to have a custom style where we say transform and we are going to scale this to 1.5 and our width is 100 percent and our positions should be absolute position instead left zero okay now exchange that I wanted to is create a custom class for our for our profile image so I'm going to say here that a rapper of the image going to say to top bar profile photo and we are going to create a custom CSS for these elements on to say top bar going to copy this paste that in our index and I'm going to set a bit of 1.5 m and a height of 1.5 m and we are going to take position to do relative so now I didn't work because I haven't added a CSS file so I'm just going to say link rel stylesheet the reference to the index dot CSS so now we save this and we go to the website we can see now that we have our profile image here so now but I wanted to is maybe Center is on the middle with this other element so for that I'm just going to say in our a list item of the profile image aligned middle [Music] I should fix it okay so now I think this is a little bit too close to each other so I'm just going to add a margin on the left the this item so same margin length of two I'm just going to copy and paste all of the elements here are left you can see now that we have our elements here so now I don't like this blue color so we want to have like a black hole like the Instagram web site here so for that we are going to create a new class in our a a 11 C I'm going to say class of link and you and we are going to be tuned up for all of our elements here so I'm just going to copy and paste and we don't need to do that with the profile because we are now using like an icon there so here I'm going to add a new link menu and I'm going to say color don't shoot fix it so okay so now looks better okay perfect now it looks the top bar looks more like the insert on website so yeah well will be the next in the next thing that we are going to do is our columns here for the content so we are going to start with the story a card right here so for that we are just going to create a new in our index after our dip of the this tip is wrapping all the navigation so we're just going to save a new deep and inside our deep we are going to add container as well and we're going to say to your flex everyone justify this content to the center and we are going to use also column for our a width of the website as well so from here we want to also include our the row class so inside a row we are going to say here start off stories so that way we don't get confused when the code starts getting bigger so and off stories okay now now that we have a roll here [Music] right now I want to a other role of it's a column oh sorry a column of 908 Sri akaal about aid for our content so that will be inside our column 8 and for this side navigation we want to use a class of column of 4 so that way we can have here our content in here our side navigation do genre his own here and the stories we are going to create a card so we use the card class for that we are going to use a card body so now I'm just going to type some text here so we can see okay perfect so now I want to a add analyse here this it is going to contain Oliver Oliver stories so I'm going to say at least with the class of East in line adding and here inside of this in line adding we want to add buttons this button it is going to wrap our our stories a component so on here we can do is so our a new div and we want to say flex and we want to do the column flex column and we are going to align these items to the center all right this way we can have our image here so for that I'm going to use actually the same code that we use for the profile here it's going to copy and paste that there we just need to do some small modifications here on the glasses and for the profile I'm going to use profile one and the style is the same and then we want to add things small oh and this one is going to contain the user name so to say some colder this is one of the profiles it is going to be here so as you can see we have the user name here in the image right here so we need to now remove order basically just clean and it is a little bit more so okay so for the image we want to hit a line to the center and we know when to use this glass because we want to make the image bigger so in this case I'm going to say I'm going to create a new class I use Tory profile photo and this is Tory profile photo it is going to have is going to have a width I want to copy this alamos you don't want to copy and paste I'm going to use pixels human - he made this 56 pixels in the width and the height it is the same you want to use our position of relative and also for the bottom here I want to use the class of 80 and we don't want to have a margin or padding and margin as well we don't want to have those if we're fresh we can see now it looks a little bit better so now I want to add these border at this place when a user has a new story so for that I'm just going to say here in the on the wrapper of the profile forum just going to say border border Daniel so we make it at the border to be but so we just need to make the width of this water to be bigger so for that in the CSS I'm going to to say border width to be 2 pixels for me Safety's and it looks a similar to the website here okay perfect so now I'm just going to see where that X far it's going to say where the way we can find out I know where is it okay she perfect okay now we are just going to copy and paste T's profile here but as well now here when to use a profile to and I want to use different names I want to use here my cannon here right okay perfect now I want to do some changes here on the card so for example on the car I want to make a I want to actually know the car on the body I want to make these flags and used to buy the content on the start of the of the card all right totaling - anything on the list I want to also add least in line and I want to say to have a marking bottom of zero so as we can see now it looks so much better without small changes I want to make the content of these and child section here of the the website to have a margin so here on the on the rubber of the entire content just going to say margin top four so now I look so much better okay perfect so now we are going to start creating our postcards here so we want to have a card with a header and the body and then we are just going to add these icons and add this other information so all right so now that we have here we hand the stories we're just going to anyone say that star of post and of post so here we are going to start with a deep and we're going to say flex flex column and and that will be for now all right so each pose is going to be contained inside a cart so we have a card and the card Heather and in the header here we are going to add or a profile with the username so we are going to add this a information we we are not going to add the location for now it is going to add the profile in the username so when to reuse the same image that we have been using both our profiles so here and you the username is going to be respond and we are going to make the class to be to have wait old default the username and released in use same older the profile can be one doesn't really matter and if we go today to the website here you see that it is a very cold so we need to make this horizontal like this will run here so we are going in our a card header we are going to add deep perhaps I don't think we have a turnaround yeah into our deep the wraps are a or imaging username so clicks wrong items to the center and copy these information inside this see melamine okay so now if we see your website here we have this now in the horizontal position we are we want to add some margin you or the in the photo and the username so we are going to do that in our profile image wrapper so with a margin wild three and we don't want to use these guys we are going to create a new one with the name of post profile photo so in our index we are going to at basically almost the same sizes it is going to be different for six for this one yes so now you will be very sad now we see that that looks so much better now so now we want to add some space between these two cards so here the star of poles I'm going to just consider margin chopper4 margin bottom of four as well so this will give us his result here so okay okay so now we want to add this image for the post and for that we are going to use an aspect ratio class that and we push a person to search for aspect ratios here we can see all the different aspirations but for now we just want to use the one the square ratio so we add see where the card and so here we are going to add path of carbody and so here we paste the information of the speed ratio class from bestop and here we are just going to change this instead of I find we are going to use image and the source is going to be assets images I want this to go to confess all asset all right okay no wife till gravity assets okay now my images and posts and post Wanda first extension let me see jpg okay now II fresh website you see the image here now we we want to remove the party that we have in our car body so in the car but I'm just going to say re of zero and I should fix that issue okay perfect okay great now we are going to add these a botanist here they like the common sure a disease once I really have those bottom so I'm just going to copy and paste those but we are going to add that right before we had the image of the post so we are going to wrapped up in surround dip and we are going to set the display to be flex or flex and we want to justify the contest on to be between so just fine content content which means they build up food before now this part and here we want to have a lease with class of this in line and this one it is going to be for the buttons on the left side this one right here so we're going to create a list and the class here is based in line item and because these are buttons we're just going to properly set up button it let's just add the class button class and we are just going to add the icon here so I'm just going to copy and paste the angles that I have and I'm going to do this to it two more times so I'm just going to do to this real quick so [Music] okay perfect now let's see okay now we have these a buttons here you can see we just need to align them a bit and for now we are just going to add this Save button on the right side so you were these ends we're going to add a new heading and this one is going to be a line on the on the the right side so you say buttons we are turning in the same class and basically we are going to copy and paste icon but I already have heartful for this action button so okay looks looks alright so we really just need to make some changes that it looks better I'm going to first I'm going to remove the peridot to all of this button now so we're just going to the buttons I'm just going to say it parting of 0 or I just parting on 0 on all of the buttons I'm just going to copy the hold same for the save right and now it is too close to each other so let's just add a margin death of two on the list item so the first division we don't need to add any of that so but the second one to one margin death of two and margin wave of - alright let's see how it looks okay perfect so now we want to add a song space on the sides on the end on the top of this entire component here so for that a we have here our container the top of those menus so we're just going to say to have my Missy here okay partying a length of three provide the same on the top it is going to do say and on the bottom just going to be one for now right so now we save and I think looks so much better okay now we have about this year everything looks good okay so now what we want to do is add our the likes the username and the description actually all of this is to like a simple so we are doing that after we add after the main we just created so the menu starts here and ends here so let's wrap that inside of teeth and sadistic we'll just add strong foreknowledge not going to join any classes but it shows how many likes this okay I'll just use that same number all right perfect and for the username this is strong as well Sam colder for for the description we are going to use our paragraph so let's use the same description that this picture has alright save this and see how it looks all right so we need to display these elements to be displayed on block so each one has its own line so let's do it alright so for the lies we are going to say to have a class of block and let's do the same for the user now I don't is it really necessary for the for the description because it's a very block by default but yeah now e12 I save this go to a website and see the changes okay okay I forgot to add likes here okay perfect let's see okay we need to add a pattern to be the same all the bottles away out here so the container here I'm going to say class and add padding the F of T right of three it'll be for now I'm just going to add a number for the bottom as well yeah let's see how it looks the perfect son now then expect on and see I saw this list right here as this pie margin-bottom so we are going to remove this all these likes are closer to the total to that menu so this list just going to margin bottom zero that should fix it yes it was okay perfect perfect so far so good and now this ad this a rest of elements we're going to add a view all the comments the username in the comments and when the post was paid and is a comment section below so yeah okay let's let's do that alright so okay so for the comments to be all the comments I'm going to wrapped our insider button I'm just going to add the class of orbit the end and I'm going to add a span with a class of this unit and you see people use the same number five the five comments okay see how it looks okay okay now I'm just going to remove the padding of this bottom because button because I need to be the same of this one so just going to say zero save now here okay okay perfect okay so now let's see where else we are going to add our comments so for that will fall inside a div for the comments in each comment it is going to be relative so for the username this is strong this is the same username appears here I can copy this and pasted here okay and for the comment itself it shows copy and paste common okay Angliss to de because we need to comment stir so okay let's cover this USANA all right this one right here [Music] you see how it looks alright alright now we need to make this one to have their own line so let's just make the username to have class off block so let's copy and pasted here okay you see how it looks all right that's that's perfect and now let's see what element okay so now this paragraph has a margin on the bottom so a week once you remove that so it looks more like this more like this design here so let's go to the paragraph here and in the description of this I had to have a margin bottom off so let's see okay now look so much better man okay okay what's next next will be to add this a say a comment section and yeah let's see how we can do it so we have this section well let's add it inside a yeah sorry here doesn't really matter with Robin incentive just how to form here any input and this input is going to have a placeholder or other common I think has three dots at a comment and less use of my part this is a button here hit a class of PT ends and let's make it this ad the post name for that so I see her looks alright ref okay so now we need to make this input section to have the same width of this card zone for that here in the input here a class of 800 and see okay and now our polls we can see needs to be on the same a row of these input so for that we're going to make our main class to have our main form a class wrapper class to have position:relative are what needs to have position absolute absolute okay now let's see okay so now from here we can do is to remove the border of the input a little move it and this are a party of three so has more space and for this bottom we are going to use a custom car so we can if we'll see we can position this button and a button here alright so I want to add a primary button here and we're going to fix all the colors later also we need to add a more border here on the top of the add comment section alright so here I'm just going to say bTW post I don't know just a simple name and the bottom it has already a position of absolute from just going to say right to the 0 0 and top - and that should position the would endure so also I don't one day a blue color for them for the background so I'm just gonna try the next time in properties you so for the background color I'm color transparent I don't want borders on the bottom this see how it looks like that alright right so now for the color I want to use this color here so I already have the color just let me see okay just going to copy the color tie one just going to take polo okay and they post the weight of the of this Texas a sports I'm just going to make it the phone way to be 600 alright and refresh okay and now for the hover when I over on this button item one the blue color as well so I'm just going to say at the end pulse over also for the b-team first focus focus alright I want to also remove all of that all this elements see okay and I click on this it seems like it is not picking up the you so maybe we need to made the transplant to be important and the same for the color let's see okay perfect okay awesome now the only thing that we need to add here is the time that the post was made so we are going to do that here with the click so here in our code toes right before the I think we can do it here right before [Music] comments yeah I'm just going to add small and the class is going to be muted because one this will be great so takes minute let's just add a one hour ago right okay perfect thing it looks good yeah good perfect perfect so yeah that's basically for the postcard and now the next thing that we want to start working on is in our side a column here we are going to start with the profile information we user name it a name and the profile picture so yeah let's see how we can do that okay so one thing before you start working on the site and column I forgot to add a margin here on the top of the in on the comments of the comment section so just going to choose are really quick so let me see if we have okay so I think I need to add a custom class or just going to say comment box serve this and we are going to add our behavior so over top of one pixel so letting this use light gray for for that song okay now it looks similar alright alright so Nadia so now I think we can start working on this column here okay so now that's something that we need to do inside our column for tidally it is or side column the right column so we want to start with with this information here de the profile picture and all of that so we're going to add a tip for that and inside this tip [Music] let's just use one of the blocks for the images he used as well alright so okay so here we can use although another image is used a four five six all right and let's add our information about they use the username and name of the professor just artisan to sponsor this is like the usernames and this are another one for day and this one it is the names oh okay let's see how it looks this right now okay so it looks weird so let's just fix that all right so for for the profile is use another custom class let's make this side profiles a picture we don't want to use some margin right at the moment and let's not use and danger a color for the the profile and maybe here in the wrapper of all of that all of those information this make it to be flex flex role and this aligned items to the center and you see how it looks starts right okay so it looks weird because we haven't a create our class for the province so let's do that really quick so we're using side profile picture here I just had it don't you alright so for for that alright so for that we are going to use basically the same properties for all of our pictures well this one it is going to have the width and the height is going to be the same let's just remove this border see how it looks okay perfect and now for for our information of the here the user name and name this square just custom class for that is called this profile info and this is the same for or the user name the name goes in for because we want to customize this and booster doesn't allow us to do it I can easier way so in this situation we will need to do it by ourselves so let's make it is not a name right so I just copy the profile info here the proper username and the problem is in form name for our profile info da is the rapper of this two elements this just make this one - font size may be of 14 pixels for everything for the username we want that to have its own line so this display:block so for this weekly useful shop of foreign others just leave it there all right so the friend wait this enemy has a cap older version and a insole make its hundred right and for the name all right for the name this use choose a font size of 12 pixels I think this one rose right here so yeah okay perfect so now going back to this information right here maybe on the profile info we can add a margin length of three looks better there yeah basically I think that's pretty much it for this art here so I don't know I think the image would be a little bit bigger so I just make it bigger it's kind of I don't think we need this information right here in ways so I'm just going to delete this profile info [Music] also going to - yeah I was going to increase the size of the profile so a skate 50:56 alright so yeah that seems about right all right let's see we have some margin here I don't think we - okay that's perfect now let's build this so just choose a component here so let's see how we can start doing that so all right list at so yeah let's this add another peep and he said this element this are another one for the header so we are going to a have the suggestions title and the CEO title so this are a small here it is suggestions questions for you the other one is see all I think all right thing you need to use all right so now we want these to be I have to have a space between these two tiles here so so let's just make the container of those two to be flex break store and justify content to be chain all right so okay that looks that looks perfect okay nice it's now hard emerging for this container here so plus margin top of four all right so now let's start adding all these profile suggestions here so for that we are going to create another deep and let's add a new deep for for our profile suggestion container I guess right so now here we want to add let's see let's see let's see we want to add the profile image with the user names and the follow button so for that let's add first a container for all of these elements and in case we can use this one and now for the profile in the username let's add another div or we can attach this image block here with the username as well so this is a strong it [Music] let's just put Instagram for the suggestions for the follow button this use one they just add the class of BTN Vicky and primary here we came to say follow right let's see how it looks alright alright okay perfect so now we need use we just need to fix all the position of this all for my just walking so for for the entire container let's just make it flex place fall and justify content and it should put the follow here on the right side and DC in the profile and is running here on the left side so let's see for the username and this one the profile let's use also flex flex four to five the content I don't think it just varies on line line because we want to align the items to the center all right nice nice okay and let's add some margin on the leaf so it doesn't look that we're here under the username or actually named 70 degrees in the user names here I know we are using actually the name so I'm just going to change this to learn this at our margin there four three let's see how it looks all right I know I want to change this size of this a profile images so it looks smaller so they'll just make it here side or this make is suggest [Music] here for now we are not going to use the yeah it doesn't matter this is the circled up this place when there is an historical doesn't matter alright so suggest profile photo and let's just make it smaller so scope it this one right here let's test with 46 yeah I think it doesn't look that bad [Music] maybe this instrument could be closer to to the picture to think border thank you so we gave it like these a new story and info here so okay perfect so now the bottom here we need to fix all of this oh we don't want the bottom to have any padding so we'll remove all the padding and we want to create a custom class for the song which maybe suggests follow or actually suggest for something later alright so let's use here let's copy and paste out there and I think is pretty much the same as the one that you're using here on the post so maybe let's change this to be T n LG so we can reuse the button all right and we are using BT and also the play start will be the n IG so now we can use it here in our custom button except this and see how it looks all right perfect so now I think we need to make this follow button a little bit smaller so for that we can use the class up just of have for the button small can say PT and Sam yeah okay I'll just add some merging on top and on the bottom all right so we do it here so okay so now we die here margin top off and picking up T margin bottom of three all right okay perfect perfect so now we are just going to change this profile image so we change this one to be three use that let's just copy and paste all of these two elements so we have like a suggestion of a council follow so let's call this one [Music] DC Comics you and let's call this one CW think and for the profile images we are going to use 2 4 here and 5 yeah okay so the Tiffin is not working because I think the profile is PNG Araya it is PNG okay perfect right guys that's pretty much it if you guys have any questions or any suggestions you can use the comments below like this video subscribe for more videos like this one and see you guys in the next one

Channel: Coding Venue

Views: 7,487

Keywords: Bootstrap, css, js, html, html5, instagram clone, query css, clone website, build website from scratch, responsive layout, modern web, how to make a website, responsive grid, boostrap 5, css3, bootstrap patterns, bootstrap forms, bootstrap tab panel, bootstrap nav, bootstrap justify content, bootstrap template

Id: ZCvKlyAkjik

Length: 71min 1sec (4261 seconds)

Published: Sun Jun 28 2020