LET'S BUILD FACEBOOK | FACEBOOK CLONE | PART 1 | #1

yeah what's up guys welcome back again to logic camp so today we're going to build a facebook clone so this is facebook website this is actually the login page so yeah which we are going to call its blue book so i'm going to implement the login system you know when you put your email put your password then you can log into the system then when you log in you can actually see this page this is the login page you see post and all that see pause and you can see your chats and all that so but for today we are going to be implementing the login page so which is this place actually okay so without wasting time let me find out my text editor so for this i'm gonna be using just your code so if you obviously we can follow along and if you don't have you can use whatever text editor you have and at the same time you can give your studio code from code.visualstudio.com then you can download for any platform okay so i have my visual studio code open right here so what i'll do is to click on file open folder then write in my document folder probably let me use you can use any folder let's use this so let me call it facebook facebook select folder all right so we have our project folder right here now we need to get some files so let me create a readme file let me say with me not md okay so we need to get um bootstrap then we need to get fonts that we're going to be using we need to get jquery yeah i think for now we're good okay so what is bootstrap bootstrap is the front css framework that is due to styling the webpage so in order to minimize it helps a lot it has um some classes that perform some functional like they flex like that so we're going to be implementing most of that in this tutorial so fonts we are going to be using the open science so we're going to get this from um the google fonts then again the jquery so this is the javascripts library jquery so this is just to minimize the javascript stress let me put it that way so we are going to be using jquery 2. so if you don't know if you are not familiar with any of these or probably all of them don't worry we are going to be explaining as much as we can in the tutorial so first of all let's go to get bootstrap gets bootstrap dot com okay because i don't want to be using anything online so download that okay so why that is going on so let me go to jquery cdn so i'm going to open the one from cdn.js.com so open that 3.6 tag i will just copy the url then paste the url here okay so we have the jquery source code so i'll just do control a and copy that now it's time to project folder i have a folder called js so this is where all my javascript code will be so inside that folder i will have jquery.js then i'm going to paste stats jquery source code i'll paste it right here i mean this i'll paste it there so close that we are showing that now for the bootstrap that we downloaded so this is it i will double click to open that first follow those extracts here css so we only need this first one this is the complete version so what i've got is to drag it down to my project back to the javascript js folder we only need this one so i will do the same thing and drag it to my project folder okay javascript for the bootstrap.js i will drag it to my javascript folder put that so we have that now click on that folder first all css drag it down okay let's go to google fonts so i'll say fonts.google.com so now let's search for open sense open this first one okay let's just go with the old family let's download the whole family we'll open that so we only need this one and the boat so i'll just extract her now and the regular copy that folder i'll say fonts okay so let's just drag it down to the projects folder i love doing this anyway right so we have that now it's very successful that i'll create a file called fonts.css so because we want to be able to use this font inside our code so i'll just say add font face so you can see the suggestion right here if i click the suggestion it's going to give me this then for the font family i'll say the name that i want to be using for the phone i will say um blue book regular for this one then the source will be back in one step the fonts then this regular so you can just do the same thing for the board blue block bolt okay so we have the fonts right there now inside the main directory i want to create the home page which is index.html i will just have h1 tag that says home page okay that says home page i'll probably have the structure i mean html so what you need to do is just type the exclamation mark then press tab so after that or at the same time you can use html then scroll down to html5 and press enter oops html html5 you still have the same results say own bluebook now let me have each one let's say zone page now live server so if here on visual studio code and just click open left server so if this option is not there all you need to do is to go to your extension and search for live so this requires internet live space server okay so this first one you have to click that and install so once the solution is done right click and save live server [Music] where are you okay now we have the homepage right here so we are not on page right now so we're working on the login page login.html okay so for now if i get i want to have a css file called global.css so this will actually carry all um all um like some general styling let me put it that way so i'll say all elements should have margin of zero then box sizing should be bought a box for all elements i'll say primary color color should be color off let's go 187 7 f2 so this is actually the facebook blue then the secondary color so this is the green color that is facebook green so i'll go 4 2 b7 2a so that is the green color now say primary bg okay yeah that's actually the this first one then i just want to pull important secondary bg even though we won't name this say background components okay now i want to have the main bg it's a gray color so say background so i'll go f0 f2 f5 for that okay what else do we have here actually took down all the colors okay so let's say black color so we will be using f4 f4 f4 for the black all right so let's assume we are done with this now let's look in all the files and again i want to say all the p tags if you have phones family of blue book regular this one blue book regular okay so now let's get down with the login page login page so i want to have an okay let us first take a look at what we are doing here okay so this is facebook login page now we have two sections here the first section contains the logo and some text the second section contains the login form and create a page now let's start by saying a division with class name of goods then this is going to have the main bj as another class and remember the main bg is actually this is going to be the background upgrade okay now let's have another class another division with class name of world and before let's have container first so the container in the world they are both bootstrap classes so that means we need to hook in the bootstrap so it's this one bootstrap.css let's go to css bootstrap.css then before that i want to have the fonts dot css which is that our font file go to css from the css and again i want to hook in the global.css okay now we have the row now inside the row we have two column remember division with call long let's just go column or medium size should be six this is bootstrap classes so have another one so these two are bootstrap classes so this will be for the logo and the intro and this will be for the phone okay so if i click this and stay open with live server so so far so good we have this so we have to color and when i resize my screen size to iphone have them stacked vertically but if it's on the big screen it's going to be horizontally so that is the work of the column medium six so this will take half on big screen after big screen but if it's a small screen it's going to be full full so that's why we have them okay now for now let's go h3 h3 and say blue book and let's go p tag and say facebook helps you to communicate and share with family and friends and don't forget yeah actually the blue book okay so for this one i'll had a class a bootstrap classes i'll have i had some bootstrap classes newflex justify content center oh probably okay let's say flex you see what we're actually doing is to convert it to a flex display flex in bootstrap in css performance but workshop we can just use this d flex the defects class is going to make it effect then if i say flex column so like you know like this is going to be column and save so we have it okay now let me just add another class here that says logo contents logo contents so let's deal with class that says login dot css so this is going to take all the styling that's login page um styling so at first for this logo that contains i want to set the height to under view edge okay yeah but we need to actually link that css file log into css now we have it like this okay so for the h3 i'm gonna hide class of primary color for the h3 then i think for this one it's on a hard class of black so inside my css i'll say logo container then the h3 should be front size of 3.1 m then the phone's weights should be 900 okay so we have this um i think this is a before we go back to change that let's add some styling phone switch 400 then the font size should be 24 pixels now just remove this black color class here and probably put his text to enjoy this is the bootstrap class oh my god no danger duck you're gonna see all the bootstrap classes first go to get bootstrap.com and go to docs okay so you can see all this here so for customize then for form this is form stylings for layouts you can see grades container this is container so to use it you need to call container and explore some other functions so if i say something like display if i say play property now we have all types of displays and so you can just go ahead and explore that so let's get on with the form section now for the form i want to have a class name container from container then i want to have a form with class name of phone okay and inside that i want to have a div with class name of phone group then an input tag place all the email address or phone i guess that's what i think will be the number please order i think that should be an entire password here just password password then you want to add class to the two of them bootstrap class from control class control okay so we have that now what i'm just going to do is just passing my 2 to this this is saying that if you have margin of 2 on the y axis that is the top and the bottom so you can see that we have some spacing right there so what we have next is a button that says login so class passing btn passing which of under are bootstrap classes then our own costume class which is uh primarily bg just give it the the blue background as you can see then another boot shop class remove the brush here text white so this will make the text to be white yeah okay yeah i think for now good that they want to have an anchor tag then hr tag so the anchor tag is in the middle so i use the center just to center this let's say forgotten password so this is going over here for now class class of primary pg and primary colorada then a bootstrap class takes the croatian none okay now we have hr and another button so hr tag that is horizontal so another button so i'm just going to make this a tag instead of button so this is going to say accounts so this is not primary pg this is secondary pg okay yeah right there but this is not actually weight on it no no no no okay now i want to center this also say center i should go to the center and check facebook on you can see that we have some font weights i mean the text is bold let's pass in front weights of 400 bootstrap class is it working it's not working let's say phones with good let's see what we've got there yeah i think that is perfect so let's do the same thing here front weight board okay okay now i think we're almost done with this so let's just put this right after the form is right right after the form container so what i've done is just copy this so put that inside p tag then make this an anchor tag this is going over yet for the page and also make it strong and also add some classes to the anchor tag text okay we don't want to do it here because you know the facebook only over on needs is going to give you this i mean the underline so i think we are we're good so let us add class of text doc okay yeah we have that okay now let's tell this you can see that with the app of bootstrap you don't need much css so what we do now is to actually hide another class here that says form and create so from create so this is actually great so and this is fun so i think the name is cool so let's say height or wonder if you view it just like that one okay and again we can hide some more bootstrap classes yeah just like this one just copied it and just pasted it right before from create right that is bg white bootstrap class rounded blue sharp class shadow okay then push p class okay and probably mb3 margin button for the phone so what we'll do next now is to save the phone container from container to have weights of 80 percent then probably some margin by the left should be 20 pixels okay so the same thing to the p tag this is the p under the form create p so i just copy this paste it here okay so we just tell the p that our front aligns to the center so that will go to the center this on the line font size 14 videos then from create the p tag and the anchor tag say text the correlation should be none but when i over or needs on this a over like that say text decorations should be underlined if we go back we have our text declaration now let's target the form itself from container on the phone then all the inputs then at the same time with the buttons from container from button the height should be 50 pixels that is for your height okay then at the same time i think for the anchor tag whoops you don't want to say it the create account button let's plug in so let's just give it like p y should be two whoops not so much facebook create new account that is where the problem is create new accounts notice this is gives me dark darker and the same thing is this one so when i hover on the button which is this button to change the background color to the e actually okay this is facebook oh that is actually on over right there yeah we have it now let's do for this create new account tag on the form which is this anchor tag on the just make it to be let's make it to be um i think that is 1c eight three zero five yeah that is it whoops and i want to go on over some classes there just to differentiate this let's say create accounts btn what i'm saying and probably add some more padding to this i don't know probably just go far in top um padding button okay so it looks like thing is not enough so just make it 20 oh my god this is about let's grab that let's put that so it has to be for the create button so go from container the phone and you create account button paste it whoops this is too much okay same thing okay yeah so we have it like that yeah i think we'll go with this yeah we'll go with the login page so on facebook when you click on this create new account the sign up box or sign up form is going to pop up now let's deal with that so right here i'll just have right here i'll just have let me say division with sign of container then inside that i'll have a division it says a division with sign of wrapper then we are going to have the form container then inside that we'll have the header so let's just use it to tag let's have a div and h3 for sign up then [Music] the small tag i guess the small tag with class name of black color that says it's quick and easy now this we want to have an anchor tag which contains of times so this is going to give me times which is these times okay now let's start from the h3 first class of phones with front with boot from the red bulge okay save that so for the anchor tag class of text the correlation long and i think that is okay that is black color i guess so let's just say black color and let's say font size two that is good shape classic now let's set the header to deflex justify continues between so we will still have to come back to do something names by an email address let me just open notepad and it's coming back here every time okay so first name surname mobile number email address new password okay so for now let's go with this okay just to make things look more better let's pass adding x of two to this one okay okay then so uh before we move down to the main form the main signup form let's quickly do some styling to this so i'll copy that so what i'll do so what i did is i pressed control tools so i have to split the the visual studio code from me so from here from this other one right here i will open this css okay so i'll toggle this okay i do i just don't want to be coming back you know just to make things easy for us so i'll say sign up yeah so for the sign up container set the position to fixed set z index to probably 1000 say the width to 100 percent set the height to under viewate set background to rtba that is two five five two five five two five five zero point seven so this play will be none but that would be later so if i save that now we have this okay so for designer purple who have justified contains we can actually do this in in using bootstrap classes so i actually forgot line 19 center okay so for the sign up from container okay let's say the weeds will to i think 480 pixels and they just pass in bg white just give it back round of white and let's save this too is that enough yeah let's go with that that is you know okay so let's add some bootstrap classes to this let me close this for now let me increase this okay so bootstrap class is for the sign up for the for this one so let me say shadow shadow let me also say one dead okay so we have that and probably for this adder let's just go padding top should be two also okay now go back to facebook business so we have our form now um please don't forget to pass it to our phone so what we need to do here is um so what we need to do here is to have a form group then inside it to have an input that says class or form group then place order to the first name but there's a problem here the first name of the surname they are beside each other so i can just keep everything inside the division with class name of bro then move this inside then pass in class of xs 6 so i think even on small screen is still half of that and for this one let me move that here for the sign up we saved 480 pixels we can actually do it this way so as to make it responsive so that means it's going to be 95 percent but the weight cannot be more than 480 pixels so that when you open it on a small screen it's just going to like fool the weight of the small screen i mean ninety five percent of the small screen so i think let's see what we got so far this is not looking good what is going on oh i use classic this should be called column alone which is good so that actually works no we don't want to use it this way so let's say column probably let me say sn 6 there's a small screen right this works let's say xs so okay let's just leave it on small screen six okay now i think this should be front oops what have i done this should be from control not from group okay then probably m0 yeah and for the form probably py2 also yes yes about p c one and p b three that is for top should be one and three okay so let's try something yeah let's say bg mutes muted this is not working let's place it right after this let me go back on dark yeah i don't know i just wanted to make the background to be somewhere same main beijing okay just go with the defaults one like this so now for the oh yeah i remember so let's just make this column six and this column six and this new one should be column twelve so this is going to take the full of zero as long as you do actually have problem here so for this one call it moba number or email address okay and don't forget the my2 okay so we have the email address and the new password just call pds set the type to password and set the placeholder to your password okay so i think this also dissolve some my so okay everything is balanced now let's go back to facebook now date of bits date of bets so to actually do all this is going to take some of our time so we're just going to ignore them so database clothes off and from the group this doesn't do anything okay so let's add label a little small let's say the date of bites this is actually class of row to have a column that is a select tag so the name will be so let's go dob gob inside that we have options the first one will be empty so we are going to do this in a grammatical way later because i don't want to be using my hand to be writing one you know this is actually going to list out the days of the months like first second or fourth fifth six seven eight ninth times so we don't want that to happen using our hand we are going to use javascript to do that okay yeah so let's pass in class of phone control to this so bootstrap will help us to format that yeah now let's just copy this i'll call these this will be months months so let's assume this is january i don't know what you want to call that number two three four five six seven eight nine ten [Music] eleven so it will be easy for us to format later oops this is october this will be september will be august this will be there this will be may this will be a pearl march fiber okay so we're actually with them once and let me just copy this this will be the year yes let me get you off this do not save okay so i'll get to that so visited the one i will have on the other days so bring this out again inside my javascript folder have logging.cs file i'm just say a lot of hello okay now let's look in the javascript this is script with source okay yes login.js so we should have a lance that means our javascript is working okay so for the days of the week we just want to say document does get elements name um i'm sorry about that like id should be t dob dots in html equals to the option tag that says probably starts from one value one okay so we don't want to keep on doing this one by one so just just for loop let's say hi now we are going to take one i should have turned that in the right way okay i'm gonna make things first so for high is equals to zero so we are going to start from one then then i is less than or equal to 31 and i plus plus so instead of putting down this one we're just going to put out the value for one so i was able to use this um javascript method because of this thing it is actually doing the sign right beside one the key one on your keyboard so just pressing i passing i okay so once that loads up you should see it right from one two three one okay now we have that and this first for the for the select that is the year just saying ydob so now it's not going to be from one it's going to be from 1905 to the currency that we have so right at the top here i'll save comments today equals new date so this is going to give us today now from the new date i'll say from the new day i'll say today because gets full yeah so this is going to return 2021 i mean the currents here so that should start from 1905 down to 2071. so imagine how it would have been we are doing it manually okay yeah okay cool cool now let's go for the gender which is this one so we still have something else to do over there so let's go for the gender first okay so this stops here now let's have a deal with call 12 from group now let's have a look out and small tag inside the level that says gender i guess okay so for this small tag we're just passing class of let's go black color first i'm really sure about that okay yeah i think this does it i'm just looking at this color right here so let's just leave it like that so we have to do the same thing for the little bits onto class of black color so i will love column so for the gender we have the female male and question so let's just add labor the half class of weight of 100 so let's say this is for female okay inside the label you just want to have inputs the type will be radio name will be gender value will be female then id will be female just copy and paste that so this will be mail so i'll just press oh i like this and press on today so i have to look for the next one and the next one which is the id i'll change all that to mail then this last one i'll change it to order okay okay so for the label for all this label i don't know how class of from control let's see how that will go yeah we have it and again also proof email here yeah that does it so let's add phone control to this let's add email here let's add that here let's save from control oops oh this is control okay so we have that okay so good job so good okay now to this i'm just going to copy this so right here i'll have a d with class name of conserve and just have a p tag and paste that this is what i want to paste there so this is just going to the button that's our button right there it says sign up to pass in some classes that says vtn this is px4 okay and this is front way both so check that out and just make it to the center so center don't forget you don't want to be so right inside this place we need right there the same thing my two here okay so let's just pass in another class here that says sign or btn so as to make it easier for us so under sign of form container under the form the only p tag that we have there which is this policy p type this one right here font size should be smaller yeah let's go with that then margins open buttons should be time to just after action okay i think this okay yeah that is way too small i don't know just make it x small okay we're going to leave it like that okay so for the sign up for the button we'll name the button sign up button so we're going to pass in background off so i have the color right here 1c8205 okay okay so we just need to pass any importance okay just you know i just say something like color whites again i have to use importance okay now i want to say the over effect of this version over and the bygones just change to let's see h3 0 5 8 e [Music] this is ready for it so let me just do this in css let's say pride in the left telepresence okay that is not enough let's make yeah that is it okay i don't know we are just doing good i mean so good okay i actually want to do this like okay so then again to close up the spacing here i mean okay like that to close us to remove this and again to pass in zero okay cool okay so we have the sign off set up but by default we want to hide this then when this has come up when when we click this it should go off again now so inside the login however function let's say function close sign up so i'll just target that using jquery after i get the sign of container let's fade out so since we are closing it it's going to fade out that in one second so this is it this is going to fade out in one second that is the 1000 and to open it this is the show sign up show sign up this is just going to fade in oh this is fade out i don't know my god this is fading so i want to say when i click on this i want to execute the clause sign up function when i click on the create account button right here by clicking note that okay right here by clicking on the creates new accounts this i'll click won't just say show sign up so if i click this that should go off look it's not oh yeah and where the problem is you know we think actually this is not defined what happened close sign up for everything is small later just search for that close sign up everything is smaller okay so click that okay so now we are having these errors because we haven't linked the jquery library so i'll just say script then go to the javascript and grab the jquery then with that let us grab the bootstrap i thought we're gonna clean the bootstrap javascript yeah if i click this that should go off okay let's set the container to display of non default this one don't comment out this one so it's not this if i think this that should come up so i think i watch this switch function this should be fade out why this should be fading so if i click that what is going on what's going on yeah okay probably let us see if we are we if we are actually targeting the function we know how to function so we go out the function let me just copy this let's say show sign up oops imagine so i didn't actually pass it to this one if you have the last and that should come in so when i took it if you go off yeah that is it's right there so close the alarms so now for these two for the login contents and this from create i want to say on small screen size that is as media mass media then max width of 900 pixels oops that is 900 pixels then this height and also the height of form creates the height should be fixed contains instead of the normal under v8 just like this okay click on sign up how it is if i click it it's going to go off again yeah okay so but for the for the create for the login create once you have some margin top of like 10 view edge i did some imaging before let me just make this 20 viewers let's see if that's not too much and view it okay so for this form i don't know where we put the form so this is actually the form this one right here the phone container and the form which should just be hundred percent and imagine left she doesn't know okay so no actually to the function let's get to this one container okay and probably 95 percent and just say some margin zero auto okay so now we have that we have our login page so for the roots we actually need to pass in height of 100 percent that is the bootstrap class so the reason we are doing that is when we are on a small screen you can see that they they see some white spaces left so i think we only need to put in style eyes or under view it that should solve the problem yeah that's actually the solve the problem but i don't want to put it here so i'll just put it inside this one right at the top that says it i under the rage that is it okay so we actually have this login then i can create new i can i can click on this to create new all right guys so in the next section we are going to be looking at how we can implement the login system so we are going to be using php for the backend so we are going to be using php to implement the login system so whenever i put in my details click login i should be with direct to the own page thank you very much guys so see you in the next section

Channel: Dev Ten

Views: 128

Keywords: Facebook, Bluebook, PHP/MYSQL, FACEBOOK CLONE

Id: hDAljncZS6Q

Length: 76min 6sec (4566 seconds)

Published: Tue Aug 24 2021