How to Build Responsive Facebook Clone using HTML & CSS - Beginners Tutorial

hey everyone this is sumnet powder from future coders in this video we are going to be building this facebook loan using just html and css so let's have a look at what and how we will be building this facebook clone as you can see that we will be using a lots of these icons which are coming straight from the google phone icons as you can see we are also going to add these four functionality smooth for functionality and we are also going to add these story function as you can see over here when i hover on it the story expands [Music] and we are going to try to make it look exactly like the newer version of this facebook as you can see we are also ha we also have some posts here with the image this is the post with the image and this is how the post without image looks like as you can see over here we are also going to add these like comment and share button and the we are also going to use the facebook widgets which you can see over here actually this is coming from the facebook widgets and guess what guys this build this build is going to be completely responsive let me show you as you can see this is how it actually looks in the laptop screens right so if i switch to tablet screens as you can see it's completely responsive this is how it's gonna look in the tablet screens and let me switch to mobile large screens as you can see it's also responsive there sorry for this it's also responsive over here in the mobile large screens let me switch to mobile small screen as you can see it's also responsive you can add of course you can add more posts since this is only going to be html and css we will be hard coding these if you want to implement this design in react.js or anything else you can do it dynamically as you can see okay this is what we will be building in this video so before we start building this please make sure you subscribe to our channel and also don't forget to leave a like on this video it helps me a lot and also we have previously built youtube clone linkedin clone gmail clone and google clone if you haven't watched this video please make sure you watch those videos also i'll be providing link to those videos in the description of this video so let's get started now let's open up our visual studio code and i have already created a folder for this project so i will be just importing that folder from over here open folder [Music] it's going to be over here facebook clone project folder [Music] and i will be using some extensions you can also use those uh these are all important extensions you need make sure you install those also first one is going to be live server you can search in the extension marketplace for live server make sure you make sure you install this extension and also one more is going to be this prettier [Music] which is used for code formatting so make sure you install this also these are very helpful extensions which i love to use so inside of our project folder let's create the files which we are going to need of course we are gonna need an index.html and a style dot css that's it we are gonna need these two files here instead of the index.html let's define the basic structure of our html by pressing exclamation and hitting enter let's change the title to facebook clone let's add yt here so for the for reference okay now here i'm gonna right click and open with live server remember the extension that we just installed that's going to allow us to do this right in open with live server so let's click on that this is going to open our project inside of the live server as you can see over here i'm gonna keep this final version for reference so here we are on the start from this scratch or this white document so here i have i said that we will be using the google font icons right as you can see we have lots of these icons right so first let's head over to google font icons google fonts actually provides huge list of these icons as you can see over here this has a huge icons right so in order to use these icons let's head over to developer guide over here all we have to do is search for the import code which we can find over here as you can see we need to include this one in our project folder let's copy that and inside of our project folder let's head over to inside of the head section we are gonna add this file now we have access to those all icons as you can see so here inside of our project let's add we also forgot to link the local css file let's say link the file name is style.css now we have linked the local css file inside of our body um before we start building let's understand how are we gonna be building this first we are gonna start with building the header section so here let me switch to the final version as you can see this header we are gonna start building this header first we are gonna divide this entire header into three sections first one is going to be this header left which is going to contain this logo and this search input fields so and we are going to divide this header middle into one section which is going to have these all icons and here this is going to be inside of the header right inside of the header right we are going to we are going to divide again we are going to divide this into header info so rest of these icons will be inside of another container so let's get started let me just erase these okay inside of our let's go to visual studio as i said let's divide those sections first one is going to be let's make a header by saying header okay this is going to be the header container instead of here we are going to divide it into three parts as i said first one is going to be header left okay and the second section is going to be header middle and the last section that's going to be header right okay now we have divided the header into three sections let's add let's start by adding inside of the header left as you can see in the final version we have this facebook logo and these search input fields so here inside of our project here i'm going to add the image stack and the source is going to be the logo which i found this logo okay let's copy this you can of course you can find all the links all the or all the resources which i am i will be using in this project in the description which i will be uploading to github so you can grab this link from the github from my github repo okay here i'm going to copy this this logo link and inside of my project inside of this source i'm gonna paste it there we have our big facebook logo don't worry we are gonna add some styles to make it look small so after the logo we have the input fields right input the search container so here i'm gonna define um header input i'm gonna make separate container for that header input inside of here we're gonna add a a icon right it's having a search icon as you can see in the final version we have the search icon right so let's import that i'm gonna show you to import some of these icons since we are using lots of these icons it's gonna take a lot of time to import each of these icons so i'll show you how to import some of these icons so later i'll be just copy pasting these icons if you if you are wondering how i got these all icons just remember that we are gonna get these icons from over here so let's switch to filled versions and i'm gonna search for the search icon that's going to be this one let's click on it and this is going to be the import code all you have to do is copy this and paste it inside of this container that's it now we have the search icon that's how simple it is to import those icons you see okay here i will is after this we are going to have a input container this is going to be input type is going to be text and the placeholder is going to be search facebook oops i need to add this inside of the double quotes sorry for this okay search facebook okay now we are done with the header left and let's head over to header middle as you can see in the final version we have these icons right so let's work on that here inside of the header middle we are going to have a separate container for each of those icons so here i am going to define header option inside of the header option we are going to have these icons the first one is going to be this home icon so lets search for that let's search for home that's going to be this one let's click on it and this is this is going to be the import code let's copy that inside of our project let's copy let's paste this so that's how we can import from the google phone icons now since we have those lots of those icons so i'm just gonna copy paste i have already created snippets of the code so i'm just gonna copy paste as you can see we have the flag icon the subscriptions icon the storefronts and the supervised circle icon if you are wondering how i got those you already know i got this from this google font icon searching for the font searching for the icon name i am clicking on here clicking on that icon and how that's how i got the import code similarly you can also work on that so here i got all of those icons which i need inside of the header middle as you can see over here we got all the icons now inside of our project folder now we need to head over to header right so inside of the header right we are gonna as i said we are gonna divide this header right into two sections right here it's going to be the header info which is going to contain the information of the user so here i will say header info here we are gonna have a image tag and that's going to be this avatar right here as you can see i'm gonna just open image don't worry you are gonna get these all links in the description inside of the github repository so here i will just copy this link and paste it inside the source okay now we have the image right after the image we have our name right username that's going to be my name if you remember from the start that's my name so not covered okay right after this header info it should be header info sorry for that so here right after the header info we are going to have bunch of ones of these icons right as you can see in the final version we have these four icons right so i'm just gonna import those i'm not gonna import i'm just gonna i have already snipped the codes so which i'm gonna copy paste of course you can import those from the google font icons to save some time i'm doing this okay now we have those icons let's check as you can see we have this icons now we have a nice looking header right that's it this is why this is how our header looks like now okay we of course we need to add some styles sorry for that uh boring joke okay inside of the styles uh what is showing uh okay inside of our style i'm gonna select everything and remove any margin which is going which is being applied by the browser by setting all the margin to zero okay here let's select the image as you can see it's a little bit big very big right so here i am going to target that which is inside of this header left and here it is inside of that are left so let's target that so here i'm going to say header left and target for img i'm going to set the height to 40 pixels let's save and check as you can see the it gets smaller so let's let's go uh we need to actually let's just say we have these icon right so uh we user icon right so here where we have okay we need to actually give a class name for that so that we can style it i'm gonna give a class name of user avatar so let's target that now let's target user avatar and i'm going to set the border radius to 50 so we it actually gets uh a perfect perfect circle and the width is going to be 45 pixels let's check okay there we have the circle right now here uh right after the user of that we are gonna select target the actual header container right so here i'm gonna set the padding to 15 pixels to the top and bottom and 20 pixels to the left and right and i'm gonna say display flex so that each of those uh each of the container we have actually appears in a row when i say display text let's save and check as you can see now they are in the row right this is header left this is header middle and this is header right now i'm gonna say justify content space between should be space between as you can see there is space between those containers i'm gonna say position to sticky so that it sticks to the top whenever we scroll right so i'm gonna say top zero so that it sticks to the top okay now here i also need to set the background color to white and i need to set the judd index to some higher value let's say 100 sorry 100 and let's add the box shadow to zero peak zero zero five pixels eight pixels minus nine pixels and an a value of 0 0 0 and 0.75 now let's save and check as you can see there we have our header we of course we need to style it a little bit further let's target the header left which is containing the logo and that input right so let's target that header left i'm going to say display of flex and align items to center and justify content is going to be space evenly let's even check okay there we have our header left now here right of the header left we are going to target the header input which is containing where we have the header input which is containing this icon and this input right so here i'm gonna target that header input header input is going to say display of flags align items to the center and the background color is going to be a little bit grayish i guess yeah this is going to be eff to f5 okay now i'm going to set the padding to 10 pixels margin margin to the left 10 pixels and border radius is going to be pixels let's save and check now okay there we have the header left we of course we need to target the input field as you can see it is it is having some ugly outline which we don't want let's make it look nicer let's target the input field which is inside of this header input i'm going to say border to none let's also set the background color to transparent and outline width to 0 so that it doesn't get any outline when we click on it as you can see i am clicking on it it is not having any outline right and the color is transparent that looks nice now it's time to target this header middle for the header metal i am going to say display of flex flex of one so that it takes the as much as space as possible and it's going to be justified content to the center let's save and check okay okay we need to further style it so inside of the header middle let's target those each of those header option which is containing all those icons right so here inside of the header option uh there is no point targeting this header option now let's target those icons actually which are having these class names let's target that first so now we are targeting those icons i'm going to set the font size to extra extra large and they are going to have a color of gray there we have some extra extra large icons grey icons now when we hold on it so let's add the whole functionality to the header option let's say header option over so when i run header option the whole container which is going to have those icons i want to turn material icons these icons and i'm going to set the color to 2e 8 1 f4 now let's see it in action as you can see when i hover it's actually turning blue right when i hover on the header option and it's going to turn this icon color into blue okay now let's target the header option each of those header option i'm going to set the display of flex align items to the center and padding is going to be 0 to the top and bottom and 30 pixels to the left and right let's add the cursor to pointer as you can see there we have nice looking header metal now let's target the active state so we actually need to add the active class to one of these icons let's say to the home icon let's say double to or index.html here i'm gonna add let's say where we have to add it let's see okay here inside of this header option i'm gonna add an active class to this header option and i'm gonna target that header option active when we have the okay when we have the header option and it is having a class of active the icon color should remain the blue okay here i'm gonna say those icon and the color is going to be the same blueish so that it's active right so when i save it let's let's save it as you can see it's now the active the home icon is active now right after that now let's target the header option active the main header option active so that it has a border bottom a bluish border bottom of 4 pixels solid this color this blueish color okay now if i check that as you can see there we have the nice border bottom now let's actually target the header option hover over hover state right we are not targeting the whole state of header over header over state of sorry hover state of this header option directly right so we are when it is having the state of over we are actually targeting those material icons right so here i'm gonna say header option when it is in hover state when the whole container is over i'm gonna set the background color to little bit grayish i guess eff this color and the border radius border radius is going to be 10 pixels align items to the center and let's add the padding to 0 to top and bottom and 30 pixels to the left and right and we are not going to have a bird at the bottom none let's save and check as you can see there we have our nice horror functionality when we hover on the header option now let's target the header info which is inside of the header right let's target that header info i'm going to say display of flex and align items to the center now let's target the h4 which is present inside of this header info and i'm going to add a margin to the left 10 pixels and let's actually target the header right the whole header right and for that i'm gonna say display of flex align items to the center let's target the header right icons the icons inside of the header right those are having the class name of material icons i'm going to set the color to gray and margin is going to be 0 and 10 pixels now let's also add the whole functionality to this let's actually add a cursor to the pointer norton horror functionality let's add the cursor to pointer now let's see let's see as you can see now our header is completed now actually we need to style or we need to continue with the main body let's see how are we gonna be building this main body let's understand okay first we are going to divide this whole rest of the body into a main body instead of the main body we are going to have three containers first one is going to be for the header sorry this is for the sidebar this sidebar and it's going to have this feed and it's going to be this another container inside of the feed we are going to have a separate container for this story reels and separate containers for these posts and this one okay it's getting messy over here let's understand and finally we are gonna have a separate container for this widgets that's how we are gonna build rest of this project so let's head over to our project okay inside of our project we also forget some important thing that is adding comments right those are very important we need to actually add comments okay here i'm gonna add header starts a comment here to know for me this is a comment for me to say this is where the header starts let's also add one more comment to make sure we know where this header ends okay that's a good practice which we which you and everyone should follow okay now we have the comments okay right after this header as i said we are gonna define our main body right so let's define that main body main body starts let's turn this into comment and i'm gonna add one more comment here main body and inside of the main body let's create the main body first main body it should be underscore over here double two underscores okay inside of this main body we are gonna have the first thing is going to be the sidebar right let's add comment this is where the sidebar starts and this is where the sidebar ends okay let's define the container for sidebar sidebar okay here inside of the sidebar we are going to have a container a separate container for each of those rows we are going to call these rows right which is going to have these icons and some h4 or yes h4 h4 tag con icon and ns4 type we are going to call these sidebar row so let's define those here i'm gonna add a container for sidebar row inside of this sidebar first as you can see we have this user author and this name right so we are going to have actually i'm going to copy this from over here instead of the header min info let's copy that and paste it over here as you can see inside of our project we have our sidebar okay now right after this sidebar we are gonna right after this first sidebar we are gonna have one more sidebar row which is going to contain all of those icons right okay here i'm going to define sidebar row one more sidebar row here it's gonna have an icon which is going to be this icon okay here it's gonna have a icon local hospital icon and it's gonna say it's gonna have an h4 saying go with 19 information center okay now i'm gonna have one more sidebar row inside of this sidebar we are gonna have one more icon which is going to be this one and it's also going to have an h4 which is going to say pages we are gonna have uh one more sidebar okay then i have this icon you i already know how are we importing these icons and it's gonna have a h4 of people okay let's define one more sidebar row for this sidebar we are gonna have a chat i call chat icon and it's gonna have an h4 of messenger we are going to have three more sidebar rows so i am just going to copy paste these to save some time over here okay i just copy pasted these three three icons and this sidebar okay the three sidebar rows okay let's save it and check okay there we have our sidebar and and that's what we actually need now let's go ahead over to our styles to style it and also we are also not going to forget adding some comments inside of the css file also so this is where the sidebar styles actually start here i'm gonna say target the sidebar row i'm gonna say display of flex align items to the center padding is going to be 10 pixels and cursor is going to be pointer let's save and check okay there we have the styles now let's target the whole functionality of the sidebar row let's target that to add some more functionality i'm going to target the hover state when it is hovered i'm going to set the background color to light gray light grey and the border radius is going to be 10 pixels there we have our functionality okay now let's target the h4 which is present inside of this sidebar row let's target that h4 i'm going to set the margin to the left 20 pixels and for weight is going to be 600 okay that looks nice now let's target those icons um these icons right these material icons which are present inside of the sidebar row i'm going to say sidebar those material icons i'm going to set the font size to extra extra large and the color to [Music] maybe be bluish right 2e 81 f4 okay now let's save and check as you can see there we have our completed sidebar okay now it's time to build the body section sorry the feed section right the first thing we are going to be building is this story section it's going to be very tricky how we are going to be building this right so here let's in inside of our project let's head over to our index.html right after this sidebar ends uh actually right after this okay let's see what this container okay this is main body okay right after the sidebar ends i'm gonna say feed starts and let's also add one more comment saying feed ends okay here let's define the whole container for the feed inside of the feed as i said we're gonna have a story right so instead of this i'm gonna create a container for that i'm gonna say story real for the story reel uh let's add some more comments to make it super clear here i'm gonna say story starts we are gonna have individual stories right so story starts individual stories right story and okay here let's define a container for each of the story here story with a class name with a deal with the story and it's going to have an image and the source is going to be uh actually the source is going to be actually this one um not that okay okay let's add that as a source first over here okay let's add that we have okay here image source is going to be this one let's save and check okay there we have our image which uh i know you are not actually understanding why is this image doing over here what is this image doing so let's uh okay we're gonna you are gonna understand don't worry about that we're also going to have uh before that let's let me show you as you can see the story each of the story is having a image and also avatar icon which actually which actually is going to be this one and a name right here in this case this is omnicoder right so here let's add my name right after this image h4 my name okay now how i am am i gonna add these images as right as you can see there's some images right actually we are gonna add them as a background images for the story here i'm gonna define some inline style okay style is going to be inline style i'm gonna set the background image i have already some images which i want to link which is going to be this one okay let's copy the import code this url don't worry you are gonna get this link from the github repo which is in the description so i just copied that and i'm gonna paste it over here where we have background image and the url is going to be this one okay now we have the url set and the class is story and let's see what we have okay there we have the story right it's actually repeating don't worry about that we're gonna fix that okay now we have a story right i'm just gonna copy i'm just gonna copy this story and paste it four more times okay now we have four stories okay there we have actually are you in the final version i used different uh background images but in this case to save some time i'm going to use the same image okay you can of course you can use different images if you want and after this story we have completed the okay now it's time to style right so here inside of our styles.css let's target the story each of the story right i'm gonna set the position to relative and background background repeat as you can see it is actually repeating right i am going to set the background repeat to no repeat background size is going to be cover width is going to be 120 pixels let's set the height to 200 pixels box shadow it's gonna have some box shadow zero pixels five pixels 17 pixels um let's say 7px7 minus 7 pixels and an rgb a value of 0 0 0 and alpha value is going to be 0.75 okay now we are gonna have some border radius of 10 pixels margin to the right 10 pixels let's also add a cursor to pointer let's also add a whole functionality as you can see in the final version we have an or we had an over functionality right so let's add that story over okay story however i want transform to scale i want when i hold on it i want the image to scale by 1.07 as 1.07 so if i save that and check as you can see we have a story right um is it is it looking exactly what i wanted okay actually i forgot to add a class name for this one where we have the image actually we need to add a class of story avatar right sorry it should be user avatar okay actually we need to copy paste these to each of those images let's do that okay now if i save that okay now we have a story right as you can see it is looking nice right uh actually let's add a let's just say animation uh to 100 milliseconds as you can see it's actually happening very quick right so here instead of the styles inside of the story we are going to add a transition transition of transform 100 milliseconds and it's going to be 18 now if i save that and as you can see the whole functionality is actually smooth now okay now it's time to target the we actually have need to add one more class to that over here we actually need to style it further right we can't target this user author and style it it's going to actually affect all of the all of these right so i actually need to specify a separate class for that where we have the user author let's also say story avatar okay now we need to copy this one more time and paste it all around okay here okay that's it now let's target that story avatar it's going to have a margin all around 10 pixels and it's going to have a color i guess of blue why blue i don't know okay let's remove that i don't know why i added the color of blue let's remove that okay it's gonna have a margin of 10 pixels okay now let's target the h4 which is present inside of the each of the story that's going to be this one right h4 my name story h4 it's going to have a position of absolute it's going to be bottom 20 pixels and left 20 pixels and it's going to have a color of white now let's target the whole story reel where we have that story reel where each of the stories are present right let's add some padding 10 pixels to the top and bottom and 0 pixels to the left and right and let's also set the display of flex okay now if i say that okay there we have our stories nice looking stories right so we don't want them to display over here right we want them to display like this as you can see here right so we actually need to target the main body which is having the sidebar this is going to have this post section and it's also going to have this video section so we need to actually target that and set display flex let's do that i'm going to set main body it should be main body and let's set display of flex now if i do that and save as you can see it actually worked right it should be why it should work right and that's what the work of display flex rate actually align items in a row align items with each of those containers in a row that's what it did so let's target the body let's target the body where we have um let's uh set some background color okay for that let's start with the body whole body i'm gonna add a background color background color of a little bit grayish f1 it's going to be f2 and f5 okay that's look great now let's target the feed as you can see in the as you can see it actually touching is touching the sidebar right so let's target the feed what do i mean by feed okay this whole contain this whole container right fit so it starts with ends okay by targeting that inside of our styles i'm gonna set the flux to 1 so that it takes as much as space as possible and i'm going to set the padding to 30 pixels to the top and bottom and 100 pixels to the left and right and display of flex as usual flex direction is going to be column justify content center and align items to the center that's it now let's actually target the sidebar and the padding is going to be 25 pixels to the top and bottom and 10 pixels to the left and right and let's also set the flags to 0.33 so that it takes point or 33 percent of the main body right sidebar now if i say that as you can see there we have our feed section and the story section don't worry it's gonna automatically be aligning in the middle this feed section when we actually add the widget section don't worry about that now we have completed this story section right so here now we are going to add the this input that's going to be this one right let's add that let's head over to our index.html where the story real story actually actually this story the right i think this way is going to be this one yeah where we and the story reel right after that we are going to have a one more container which is going to say message sender that's how i want to want it to name it right a message sender what do i mean by it's going to be this container message sender okay message center starts here and message center ends here okay right after this let's define the message sender inside of the message center we are gonna have a message sender top which is going to have the user avatar let's copy that from the let's say from here from here let's copy that from the over here and let's remove the story of that we don't want that okay let's say one check okay there we have the user author right after that we are going to have a input field right this is going to be this one let's define that instead of the let's define it inside of the form it's not going to have any action let's define the input let's give it is going to be of type text let's add a class name it's going to say message sender input placeholder is going to be watts let's cancel this out okay what's on your mind what's on your mind comment it below in the comments okay okay now where we have text okay now we have the input field let's say one check okay there we have the message on the top actually we divided this into message center top and message center bottom we okay let's uh let's build the message under the bottom right after the message center top i'm gonna have a due with a message sorry message sender bottom okay there we are going there we are going to have those icons right so i'm going to define a separate container for that which is going to say message sender option instead of the message render option we're gonna have these bunch of these icons okay let's i'm gonna just copy paste those i'm gonna explain them to you okay instead of this process window option we are having each of those icons right and we are going to have a s3 tag and as you can see i have already uh sorry i have defined some inline styles i'm gonna i'm specifying the color for this icon first one is going to be red green and orange now let's save and check as you can see there we have our icons okay that's it for this message sender let's it's time to target the target those each of those class names and style it okay okay right after this i'm gonna add a message send a comment let's target the main message sender and for that i am going to say display of flex margin to the top is going to be 30 pixels flax direction is going to be column that's at the background color to actually set the white and border radius is going to be 15 pixels let's add some box shadow 0 pixels 5 pixels 7 pixels i guess okay minus 7 pixels and an rgb a value of 0 sorry 0 0 and the alpha value is going to be 0.75 okay here we have the blue is going to be 0 0 okay and we also need to set the width to 100 now if i save that and check okay there we have our message center we still gonna need to style it further let's target the message center top over here for that i'm gonna say display of flex align items to the center border bottom let's add a slight border bottom of one pixel solid this grayish color okay let's also set the padding inside to 15 pixels now if i save that and check okay that's looking nice now let's target the message sender form i'm going to say flux of sorry flex of 1 and let's i'm gonna set to display of flex okay right after that i'm gonna target the input field which is present inside of the form for that i'm going to say flux of 1 and it's not going to have any outline of outline width of 0 and a border of none it's not going to have any border and padding 15 pixels 20 pixels let's also set the margin outside 0 10 pixels border radius is going to be 999 pixels background color is going to be this one two yeah okay this one greyish color okay now let's target let's see one check okay that's looking nice actually okay now let's target the message sender bottom where we have those options right each of those header message center option for the material those are icons let's target that for this i am simply gonna say display of flex justify content space evenly okay now let's target those individual message render option for that i'm gonna say padding of 8 pixels i am going to say display of flex align items to the center color of gray and margin of 5 pixels now let's save and check ok that's looking nice like the final version we still need to add some more functionality and some margin okay now let's target the s3 tag that's going to be this one right h3 tag which is present inside of the header option for that i'm going to set the font size to medium and margin to the left 10 pixels okay there we have okay let's add some more functionality to this message center option each of those options let's target the whole state when i hover on it i want the cursor to pointer and background color background color to this grayish color and let's also set the border radius to 20 pixels okay that's done that's done with i'm done with message sender now we actually style the or build the post section of our project okay now inside of our index.html right after this message center ends we need to actually define a post post container right which is going to have those all of those post here i'm going to say post starts and post ends let's define the container for that here i'm gonna say post inside of the post we're gonna have uh post top for the post op we are gonna have um this avatar actually user avatar let's copy that okay we have this author and we actually need to add a custom what do we say first custom class for this post author so that we can style it differently in the post section okay i just added the class host avatar right after this image we are gonna have a post uh actually say username info right so here i will say post top info inside the top info we are going to have an s3 which is going to say it is going to contain the username that's my name and a time for example let's just say 28 april and 20 30. basically in to see it inside of the final version we are actually building this top section for the top we actually have for the stop we actually define the user author and instead of this post top info we are actually defined this username and this time field okay now right after the post top where we have this post top ends that's going to be over here we are going to have a post bottom inside of the post button it's going to contain some message okay that's it for the post bottom right after the post bottom you are going to have a separate container for post image and for that we are gonna use a image as you can see in the final version we are gonna use this image i'm just gonna copy the url that's going to be this one and here i'm going to define the img tag and paste it inside of the source section so it's filled okay right after this post image we're going to have those bunch of those icons right we have the post image okay these bunch these like comment and share button right so for them let's import okay let's uh over here i'm gonna define a separate container for the each of those here i'll say post options it's a plural not singular post option instead of this here i'm going to have a post individual option singular okay instead of that i'm gonna have a like icon that's going to be this thumbs up icon and for let's define a p tag it's going to say like similarly we're gonna have two more icons i'm just gonna copy paste this it's going to be chat bubble outline for the comment and near me icon for the share let's save and check okay there we have our icons that's it for the post right now i'm just gonna copy the post actually we built this each actually we built a single post with the image so here let's copy this post and paste it one more time for here i'm gonna i'm gonna just remove this so that it becomes a post without image so let's remove that okay now i'm just gonna paste it one more one more last time okay that's it let's see okay this is post with image this is post without image this is again posed with image however you can use different images now let's style this okay it's looking very ugly so it's time to style this for that let's head over to styles.css let's add a comment post let's target the entire post container i'm going to set the width to 100 percent margin to the top is going to be 15 pixels border radius is going to be 15 pixels let's also set the background color to white and i'm also going to add the box shadow the same one which we used uh let's just say where we did we use it um okay that's going to be this one let's copy this and paste it over here okay that's going to be the same let's target the post image which is going to be this image let's target that which is inside of this post image container let's target the image and let's also set the width to 100 okay now let's target the post top where we have the post top right okay that's going to be this one post top for that i'm gonna say display of flex i'm gonna set the position of relative align items to the center and padding is going to be 15 pixels okay that looks nice now let's target the post avatar which we gave a separate uh custom class name right so here goes avatar for that i'm gonna simply set the margin to the right 10 pixels okay now let's target the h3 that's going to be this one which is inside of this top info i'm going to set the phone size to medium let's also target the p which is present inside of the post stop info p paragraph tag let's also set the font size to small color to green now for the post bottom we have these post bottom which is going to contain the message for that let's also set the margin to the top 10 pixels margin to the bottom [Music] 10 pixels and padding is going to be 15 pixels to the top and left sorry top and bottom and 25 pixels to the left and right okay there we have now let's target the these post options container okay sorry for this should be curly flower brackets for that i am going to set the padding to the top 10 pixels water top is going to be 1 pixel solid light gray let's set the display of flex justify content to space evenly and font size to medium color of gray and cursor of pointer and finally padding overall to 15 pixels okay that's looking nice nice post as you can see over here okay now let's target those individual post options singular remember for that i'm gonna set the display of flex align items to the center justify content to center padding of five five pixels and flux of sorry flux of one now let's target the p tag which is present inside of this post option simply i'm going to say margin to the left 10 pixels and finally we actually need to add some more functionality for that here i'm gonna say post option over background color to eff this color greyish color and let's also set the border radius to 10 pixels that's it guys now let's save and check okay there we have our feed section completed now all we have to do is work on the widget section actually that's very simple all you have to do is all i have to do is let's go to let's search for facebook widgets for the inside of the widgets in the let's head over to developers.facebook.com this plugin here um okay here all i have to do is i need to here i'm gonna need the width to 500 and i'm gonna need the height 2000 let's set that okay let's click on get code okay first we are gonna copy this and paste it right right after this where this body ends over here and one more thing we need to do is we need to copy this and paste it where we want it so here right after the feed ends where the speed ends i'm gonna define a separate widgets division videos widgets container for over here i'm gonna just paste it and save it okay width to 500 000 okay that's great and let's add some main line um okay let's add some inline tag inline style and let's add the flex to 0.33 okay it's going to use 33 of the screen which is left inside the main body now if i save that and head over to our final version sorry the build version over here as you can see there we have the completed facebook clone but one problem is that it's not responsive as you can see in the final version if i check the irresponsiveness of the build as you can see it's completely responsive right if i switch to tablet as you can see it's responsive if i switch to laptop last screen and it's also responsive over there but the this build if i inspect if i check it for the as you can see it's not responsive not even in the mobile screen small screen tablet screen as you can see it's looking very ugly and okay not even here also it's not responsive so what i have to do is i need to actually add some media queries to make it look responsive okay for that right click on and hit on inspect i'm just gonna target the first i'm gonna target the tablet i'm gonna try to make it look responsive in this tablet tablet screen size that's going to be 768 pixels so here inside of our style.css let's add some media queries i'm going to add a media when the max width is 760 that's okay 768 pixels that's going to be the tablet screen right okay for that i'm gonna target the sidebar i don't want to display the sidebar in the tablet section so for that i'm going to say sidebar display none as you can see it's gone now and similarly i don't want to display this search facebook input right so let's also target that which is present inside of the header input and targeting the actual input and let's also check the display of none we know that's also gone no i don't want to display the header middle in the tablet section also so let's target that where we have the header middle and let's also set display of none now it's also gone that's looking actually nice right so i don't want to display the header info also that's going to be this one header info i don't want to display that so here i'll say header info let's say display of none and i don't want to display the widgets also in the tablet so here i will say widgets and set to display of none okay now everything is gone okay that's looking actually nice i think i have some bugs so let me just close it and hit on inspect again okay there we have the tablets section okay which is actually not looking um okay let's we need to fix the feed section a bit so here for the feed i'm gonna define some new styles for the feed when we are in the tablet screen i'm gonna say margin to the top 20 pixels our width is going to be 100 and i'm gonna zero the padding i don't want to i don't want any padding okay here as you can see it just fix the issue it's just completely responsive right um okay now let's target the let's just say actually these are not visible right my name is not visible okay we need to head over to story where we have the story where is that okay story h4 let's add the color to black okay now i can see it that's great okay let's back head over to my media queries i'm gonna target the h4 which is present inside the story h4 i'm gonna reduce the font size i'm gonna set the font size to 10 pixels okay that's looking nice and i want to reduce the size of these avatar also so let's target that which is present inside the story and i need to set the img and let's add the width to 40 pixels okay that's also reduced okay now that's it for this tablet screen now if i check for the mobile last screen as you can see it's not responsive just not looking nice so we need to add some more media queries so when the max width is let's just say um okay sorry let's just say for the minimum width okay for here let's start from here when the minimum width is 420 pixels let's target that let's add one more media query when the min width is 320 pixels for the story reel let's target the story reel i'm going to set the width to 100 percent and overflow is going to be overflow x and is going to be scroll okay now if i check okay that's actually response you know as you can see it's responsive in the mobile small screen let's check for mobile medium screen it's responsive mobile last screen again it's a responsive way for the tablet it's responsive okay that's actually looking nice right so where we have the laptop let's just say okay laptop that's going to be let's see what else can we improve okay i need to actually add one more media query as you can see it's not actually looking nice over here as you can see it's actually not even responsive here it's just doing something over here so for that let's add a media query for that also i need to target the let's add one more media query min and the min width is 769 pixels and max width is 1440 pixels for that i'm gonna say feed to width i'm going to set the width to 50 and i'm gonna set the padding to 10 pixels to the top and bottom and 50 pixels to the left and right now if i save that and check our facebook clone as you can see it's responsive in the mobile mobile small screen and mobile medium screens mobile large screens in the tablets as you can see and also in the laptop last screen as you can see it's uh it's completely responsive right okay that's it guys hope you guys enjoyed building this facebook clone if you want more of this video please make sure you subscribe to our channel and also don't forget to leave a like on this video so previously we have also built many more clones using just html and css please make sure that you also watch those videos if you want to improve your html and css skills then these are the projects that you need to build it's going to help you a lot improving in improving your html and series skills so that's it guys thank you for watching i will see you in the next one

Channel: Future Coders

Views: 14,280

Keywords: html, css, html and css, tutorial, learn html and css, learn html, How To Design A YouTube Clone With HTML/CSS, Let's Build a Facebook Clone with REACT JS for Beginners, website html css, html5, html editor, w3schools html, codepen, w3schools, html tags, web development, html tutorial, facebook design clone, facebook api, clone, facebook clone with html and css, build a facebook clone, facebook clone

Id: -pUVDYFVFpw

Length: 78min 47sec (4727 seconds)

Published: Thu May 20 2021