CREATE LOGIN AND SIGNUP PAGE IN HTML/CSS | STEP BY STEP

the internet this is logic again good morning good afternoon good evening so today we will be working on this sign up and this login page we're going to design this using plain html css so i'm just going to start right from the login page oh right this background i found this on google so if you type um crypto ecosystem yeah and go to images all right right here so i'm gonna download this i don't need to download it again so i'm just going to go to my folder before i do that i'm going to open up my code editor i'll be using visual studio code so i'm going to say i'm going to open it using the type code okay why the is loading okay so um for this icon right here i'll be using font awesome so if you navigate to bootstrap cdn.com for slash font awesome you should be saying this so we're just gonna copy the link but before we do that let's set up our project folder so i'm gonna come to open folder um now we have native so all right good documents so i'm gonna make i'm gonna call this um buy crypto as in be hi crypto yeah all right so i'm going to open the project folder in vs code now before we proceed i want you to go ahead and download this extension live server and i'm going to explain what the extension is doing so i already have it i need to download it again this is it live server from which weekday okay so what is live server the live service it simply means you can you can be seeing the results of your project of your coach in real time instantly that is once you enable the live server so once you install that so inside our project folder let's go ahead and create an index file okay that so now i'm gonna create a folder i'm gonna name it assets yeah so for my images yeah right okay so for the index yeah i'm gonna create html skeleton i'm gonna name this login page yeah cool so hope you guys have downloaded the the image so if you haven't done that you can can you do it now so i have my homage here i'm just going to copy it to my project folder inside the assets folder all right good okay all right so i'm gonna have a tag a div tag to precise i'm gonna name that i'm gonna say container we're gonna have another division i'm gonna name that um let's say wrapper right that is like a page wrapper like like this right here this black um container right here so inside the container i'm gonna have my image and i'm gonna have the title and the phone all right so let's go ahead and do that so i'm gonna hide the image so img let's pause the source this is my logo right so you can just go ahead and make yourself in logo but i have my logo right here so i'm going to copy that into my project folder yeah this will be available in the description though so you can just go ahead and download it in the description but you can as well proceed using any picture so um i'm gonna grab that assets then the logo right i'll say crypto all right so i can just skip the [Music] class name of logo yeah all right so what else do we have here we have the form and the the page title yeah let's say the page title like this so i'm gonna create a d for that i'm gonna call it from container okay so i'm gonna have my h3 that's a login page i'm using login here so after that i'm gonna create this beautiful login form i'm gonna save i'm gonna create a form i'm gonna give it a class or form okay oh better still let's give it a class of login form or maybe form so inside the form i have a text inputs two text inputs one for username and the other one for password two inputs class name i don't actually need that i actually need that yeah for now let's go with this i think let's go so i'm going to pass in placeholder i'm gonna say what do we have there email actress oh username okay so for here i'm gonna say password password yeah right okay so i'm gonna have this forgot password and the login button so forgot password for the password password okay here we can just like say got the p tag say [Music] i forgot password all right cool it's actually going to be an anchor tag because we have to navigate to the password reset page so i'm going to change that to anchor tag no link yet password okay yeah right then definitely yeah then this icon right here we're gonna be implementing this using the font awesome cdn so you can just come to font font awesome cdn bootstrap cdn.com awesome once you open the page you can click to copy yeah copy then this is this is css so we're just going to link that to the number we will link css i'm sorry about that so inside the href you want to paste the link that you just copied all right that's it so to implement that i'm going to inside this place i'm going to say span then i'm going to give this panel class of that is phones from awesome font awesome um yeah i think i use paper plane yeah people playing yeah okay so i saved that so so far so good let's see how far i've gone so i'm gonna right click and say open with live server so wait for that all right all right so we have our phone awesome right here so let's do some little styling so i'm going to create my css file right here let's just start the css all right so i'm going gonna set everything like box sizing let's say box yeah i'm gonna say my changer and pardon zero by default all right so now i'm gonna link the the css file that just created it's a link let's see it says start the css so nothing else to do yes i'm going to save then go to my css file save all right so you can just place your window like this then your browser to the left so you can be seeing what you're doing all right so i'm gonna grab the container the container here then the the image that we downloaded from the web i'm going to say that as a background image so i'm going to say yoga i said then the image so i've renamed mine to buy crypto bg that is short for background so now if i save that i should be seeing it well wow okay so i think i need to like this all right so i'm gonna say background size i'm gonna say cover i'm gonna say background repeats i'm gonna say no repeats all right okay now we have this so i'm gonna grab my logo my logo i'm gonna give it a high height of 70. all right so i'm gonna grab my wrapper i'm gonna say we i'm gonna say we of five and let's go with 500 pixels 500 pixels so let me let's see that all right so this is 500 pixels yeah it it's still okay so but for the container i want to say the height of android vph i mean it's gonna fall describing yeah we have that that is perfect okay so i'm gonna say background i'm going to say background for the web i'm going to set background yeah background color rgba like i want to use alpha in order to make it transparent like this so i'm going to use alpha so rgb is there then let's go with 0.7 for the transparency so if i take that i think we we got that i think we got that i think we got that oh my god i'm using different image um for my logo yeah no problem we'll solve that later okay so i'm gonna say my container actually with this player flex in order to make everything to come to the middle display flags then i'll say justify content to the center then align items to the center receive that i should have everything in the middle all right so for my wrapper i want to pass in some padding see padding from top and bottoms with 20 pixels and left and right should be 15 figure so let's see how that goes all right so we have that so i'm going to increase i'm just going to increase this to 40 okay so let's check our html code again all right so we have inside the wrapper we have the image so i'm just going to do the same thing like to make everything come to the center display of flex and justify contains align items yeah yeah good but i'm gonna change the flex direction to column you know by default it's low but now it's gonna be color so this is this is called liner all right so i think i'm good i'm going to have to do the same for the form because i'm actually using um inputs and inside the form we don't have any block elements everything is inline element so i'm gonna do the same thing all right so we have that but this but this my logo i'm gonna replace it with the edited one so i'm gonna navigate to my desktop everything is gonna be available on the on the description below so that means you don't have to worry about this so i'm going to drag that into my face coach um yeah right here yeah replace of course of course replace that okay so let's see what we've done so far let's see what we've okay now okay so if i check my design from here i have my login page very thick so i'm gonna say the h3 under the wrapper the h3 under the wrapper so this is this is the wrapper this is the wrapper then i just target this h3 or let me use foam container instead so from container h3 all right so i'm going to say from size i don't know let's go 26 first that's 26 let me say phone weights let's go with 900 so let's see that's an action oh yeah we're not gonna say it yeah there's one thing we're missing there's one thing we're missing fun way um let's say color so for the color i'm gonna go with yeah um i'm gonna go with two 2 2 2 1 b6 and something cf yeah let's save that i'm just like trying to keep this color right here so um what we we are going to do now is we need to get this font i'm going to get this font this is roboto so i'm going to go to google fonts microphones i think i have it right here or better still let's do it this way google fonts all right fonts so i'm going to click on google fonts so i'm going to say roboto but i do need to search for it though this is it right here but just in your case i need to search so i'm gonna pick the first one all right so this is the family i'm gonna go with the regular 400 select style all right so i'm not gonna link i'm just gonna say that imports on the import right here just gonna copy it from here sorry copy all right back to my visual studio code just at the top so that means i've import this font i can use it now in my code so if i say on family if i say a photo report like this go to some serif so if i go back to my page yeah you see the different now so this um roboto did this i said it was just like like a a back up fonts just in case this is not available probably some network issue so this is going to load instead all right so i'm going to make this 30 30 30 all right so let's let's go with that um for my logo for my logo i think it's kind of small and make it 85 hours supposed to easily fight before all right yeah does it look like a five okay all right so now let's start this this inputs um boxes distinct boxes so i'm just gonna grab a phone container from container then the form from an input i'm going to say the height to 40 pixels i'm going to say background to none to none i don't want them to have any background if you check this if you check this there's no background there okay so i'm gonna say the color to um it is is it is it white no you know what it's actually lights so i'm gonna say f a something f a f9 f a i guess yeah okay so what else do we have we have some butter with butter videos right here for the radios i'm gonna go with 15 faster i'm not really sure what i used so let's check that nothing is coming up okay 15 pixels which is the sharper so i'm going to say this impedes 200 first let's see oh well let's leave that for now yeah i think that is the the padding okay let's get into that so let me change the adding to things okay this is left and right okay let's let's go first so i'm gonna say the margin margin top and bottom yeah so we have that so i'm going to say the border the border color the border color because today's two one be sxf all right so we have that let's let's make this white press ffff okay yeah it's um placeholder okay okay all right so we need this to be big which is a small form so this this is 500 pixels we're supposed to make this 95.00.5 percent 90 95 just for responsive sake then i'm gonna say the max weight max weight to 500 so yeah i think that's that's that's kind of like good so when i when i'm on mobile let's go to moto developer too so if i'm a moba so it's going to be like normal so this is iphone x and go with let's see so so let's just deal with the responsiveness from here okay so i'm going to say this is my form right here okay vapor so i'm going to save this from container i'm going to set weight also to 100 pixels under percentage of the parents all right okay so what are we missing here yeah i'm missing something here okay what was that what was that what was that was that okay this is the form okay this is the wrapper all right so let's remove the padding from the rubber first so okay okay what i can do is i can easily copy this for the uh this is where the mistake is so the form container i think anyone actually like put any styling for the phone container so let me just copy it up here from container from container set a way to understand so it's gonna be hundred percent of the parents oh perfect yeah so i'm gonna set the what the the wiper i'm gonna bring the padding back so 40 pixels top and left so yeah 15 pixels that was small i think that place 2 should be 40 yeah all right i'm very good so this can just kind of reduce this to 90 percentage or better still 80 okay we'll get in there so the h3 is with text center text align center okay okay there so the h3 can have margin of top and bottom open buttons content cells and there okay so for the inputs i can say they are margin matching um i'm going to need the horizontal margin spacing right here horizontal imaging yeah yeah so i'm going to set the top and left to reserve yeah because it was default to so this is not going to have any effect so padding left and right i want to go for 10 pixels okay that should look perfect okay let's go back to what we're doing but i think our wrapper is kind of too big so we're gonna make the marks wait to be 400 instead of 500 yeah that's it yeah all right so let's deal with this um forgot password so i'm just going to target that i'm going to say from container then the anchor tag which is the a i'm going to say color of white color of white so that should change to white all right i'm gonna say text the correlations will not this um on the line right there this underline like that so bring that back all right so um for the button yeah i think from container to form then the button should have background of none that's it's going to be transparent so does it say padding then left and right sorry top and bottom should be a pigs it's pigs else then left and right hey let's try 16 pixels all right so we having something good let's say imagine top let's say 10 pixels yeah very good i think we can just say border powder powder radius yeah it's cool for border color okay i think we don't need to pick it up so i'm just going to say that to our primary color here so it does it then yeah let me target the color of the elements inside which should be white so let's go back to the form that we're designing okay now so we have this this is like boat then after that we have um some radios right here then don't don't have an account yet sign okay okay so i so buddha radios let's make that 15 pages okay where are you all right yeah we have that i cannot love this all right so i think our background we need to take care of that so i passed in 0.6 let me make it 0.7 let me let's take nine okay all right yeah i think that that looks good that looks good our logo is a bit small let's increase that past 100 i don't know why is it smaller okay yeah we're gonna leave that right there then for the h3 the margin top margin top should be five pixels margin left should be zero medium bottom should be ten and so this is like imagine top 5 pixels imagine left the pixels imagine button 10 pixels all right so we have that forgot password and our login so if i click that nothing happened nothing happened all right so let's go for don't have an account yet click here to create one so i'm gonna say p tag p tag don't i wanna count yet right here inside the p tag just to navigate you know just to navigate so i'm going to say [Music] on a navigate to sign up page html sign okay are we using sign up here or what gotta sign up here sign up here okay sign up here so this should go to the sign up html so we haven't created that so i'm just going to hold ctrl and click so visual studio will automatically create this for me say sign up and it will open so at the end of the day qualify but if you're not using visual studio code you can just come right here inside the main directory here then i'm gonna click new file sign of the html right now so if i double click it okay good yeah so what we can do here again is we can just give this like so important um class name class name is navigate button oh my god navigate button so yeah do you know why i have to pass the class name is that you see only the button is black is white rather oh that's a black yeah i think that's simply because i've passed in some props right here like like to the a tag i've done something today like before yeah right here take the collision column order so this is what i want to do i want to say the form contain now then the p tag so the form container the p tag so i'm gonna say the p tag now to color of white okay so now i want to say from container and my button that is the navigate button so i want to say the over attribute as whenever i hover on it so whenever i hover on me i want to change the color to this color so i'm gonna say color should be that so if i save that on my page yeah very good yeah i kind of like that so we need a little space above this margin top then play though yeah just to create some space there just to create some space all right so for the login button this button right here that is this button we need to create more padding 22 pixels yeah exactly like that and let me see thing yeah okay so let's just add some margin at the top all right okay yeah i think we have what we're looking for yeah this is a picture so yeah i didn't actually use black background for this uh i can actually use black background so this is what i did this is what i did so while i was designing i used one two one two one two then i set the alpha [Music] yeah you can see that yeah we are having something nice all right so that will be haul on the login page so i'm going to click next this link so i'm going to move to the sign up page right so this is a signup page so from here i'm just going to copy everything here like that come then first of all change this to sign up yeah sign up there also this login here like if i come down to this place go up into my sign now page go up to my sign up page okay so we're dealing so this login here i'm gonna make that great i can't create an account i think that's perfect yeah create an account so um although in order to differentiate the styling update because i have to actually make this to be smaller now to differentiate that inside this foam container i'm gonna add a new class sign up okay so when i'm inside my styling i can actually target all those elements again i don't i cannot do this to save time though so i can say sign up h3 sign up for the form sign up perform inputs like that like that anything i want to change so i can easily change that so for the sign up h3 um i want to save font size yeah i can't remember font size yeah i'm gonna send set this back to 28 okay still not enough because i just want it to be one line like that so create an account now so i think we're here so the color will change white yes i'm gonna say color of white okay so right there okay so we here we're gonna have last name first name email password and confirm password so if i go to my sign up i'm gonna duplicate this so the first one i'm gonna change that last name last name the second one i'm gonna change that to first name yeah the third one email address yeah i think for half telephone i don't need your phone number so i'm gonna make this confirm password okay so let's check that yeah this is good i think that should be that should be right okay so we have our sign up page then at the same time we have our login page so here i'm gonna say already have an account then go back so for this i think this is this is going to be some investing i'm going to use that instead of sign up start and this i'm going to change that to far far i think that is right arrow yeah right sorry about that i think yeah i should go all right so i have that so i'm going to pass some spacing empty space okay good all right so i'm gonna remove these and change it to already have an account already have an account okay then log in here so this is gonna go back to the index page all right so no need to forgot password okay yeah yeah yeah yeah it does it does it as it does it does it so if i click this take me to the login page if i click this take me back to the create account page the sign up page so thank you very much guys you

Channel: Dev Ten

Views: 6,340

Keywords: html, css, login page, signup page, registration page, html tutorial, php

Id: x7ss69vsmc0

Length: 42min 25sec (2545 seconds)

Published: Fri Apr 16 2021