Log In / Sign Up | html & css

hey what's going on devs welcome back to app dev channel in today's episode we're gonna create free scratch a responsive login and registration form using html css and vanilla javascript we're gonna use magic queries to make it responsible in where every screen you wanna display it it's a quite simple project to do but at the same time it will teach you a lot of cool things in css like animation grid and how to make it responsive so it's a great project with a lot of new things for you to learn and by the end of this tutorial you will know how to make it by yourself hey if you're new here and you want to create your web dev skills subscribe and click that little bell now below so get notified every time i post a new video all right there's let's create our file structure we'll start with this picture there's a link down below so you can download this one okay and here let's create our first one this one for our markup our index.html the second one for styling we need a style.css and the last one here is gonna be our app.js our external javascript file okay so let's come here let's close this for now we don't need it and let's create our my leg plate let me hit exclamation tab and here we have it let's give our project a title okay down here let's say responsive login and the registration form let's have a link connect our markup to our css we're gonna apply some style and this time we're gonna use for the icons instead of font also let's use this one box icons i really like the icons okay so let me copy it and paste it here in the head and comment it out so you know what you're doing icons okay and down here close the closing body tag we need the link connected to our external javascript file okay so we have two connections here draw markup waiting for the css and another one for the app chairs and now we move into our markup it's quite simple we have our main div here the looking and the log you have the login content the first content here is gonna be a login image okay we're gonna have a picture again there is a link down below so you can download this one and under this one guess what we need to have the forms okay it's still inside the login content we need two logins forms okay so login forms this one the first one here logging in the class is gonna be logging register and for the idea login okay we're gonna use that later on on javascript and css and for the title h1 login title okay and here we're gonna say signing in so this is the first part of the first form all right continue on our login form we have our login box and in here let's have a icon from the box icons okay this one a user let me just copy this one come back here to our markup and paste and let's also give it another class so you can grab that using css okay so login icon we have two classes here and under this one let's have our real input and put the login input is the class the type here you can keep the way it is text and just have a placeholder so the user know what to do here all right as you may know in looking we have two boxes one for the login and another one for the password so let's change the class here for lock lock out so i have that little lock icon and for the type here let's say password and also the placeholder is going to be password so the us is going to type his password here okay so now actually now very easy okay very easy to do so let's see what we have so far okay let me click here go live use the live server and let's see what we have as you can see we have a picture and our signing our first form okay all right we got a code on the right and you see the results in real time on the left okay and we know that sometimes the user uh forget his password so let's have this link here class login uh forgot and text forgot your password and another one under this one is going to be another link login button pointed to nowhere we don't have a backend now and sign in for the text okay let me give it a save and you can see let's say that our user he doesn't have an account with us so let's give him the opportunity to create one let's have this div in here let's have a spare login the class is going to be logging account and for the text let's say something like uh don't have an account all right and let's have another one under this one class login sign in and for the id sign up okay and here let's tell him sign up okay let me give a save and as you can see we have it here okay let me show you here what you have so far we have this login form we need two of them as you can see so far we have this ugly markup with no style at all let's apply style first of all let's change the font okay let's use the poppings from google fonts probably make almost everything more beautiful i guess and down here let's have some css variables this is going to save you a lot of time because if you want to change something like the color for example you change the color here the first color the second one and you don't have to go to the huge website change one by one okay so let's have our first color here as you can see the the first one here is going to be this purple the same as this girl shirt here first color dark let's pick another one that fits windows one as you can see it's very easy to change you can come here and change the colors to the whole website and first color light as you can see it looks like i made a mistake here let me check okay done and first called lighten let's pick a light color like white we have the colors and now let's pick our fonts or typography okay and we just import uh from google phones the popping so let's make use of that one so for the body body font let's pick the poppings let's really use it and so self in case of something goes wrong okay for the h1 let's have this font size 1.5 ring okay we need also for the normal font size in the whole body it is going to be dot 938 ram a different size of course and we also need a small one okay a small font size here let's make it ev smaller h 813 ring okay okay as you saw in the title of our project this is responsive okay login fire so let's have some media query all right media query screen and here the myth when we have a screen that is seven six eight pixels we wanna change the things here okay so let's come here root and you're gonna decrease the size of the normal font size right now is 1.5 ram with one degree so one ram and the second thing here that we want to change is the small font size okay let's decrease it to 875 ring okay let's also have here our css reset okay people using google chrome file files and different browsers so you want that to be the same in different browsers so let's have the css reset here okay box size we want that to be bother box coming down here let's go to the body okay the base of our project itself and let's grab body margin zero pairing is gonna be zero okay in different browsers and the font family here let's use our variables okay so if you want to change in our case the body font if you want to change you go up there and just make one change to all the website okay the font size is gonna be the normal font size whatever you want and for the color here let's use the first dark color as you can see in real time we have the changes done already all right let's make a few change here okay let's start out with our h1 the signing margin 0 okay and under this one we have our link here so text decoration [Music] none all right one more thing we should be doing here is our image is too big so max with 100 [Music] and the height auto all right and as you can see it's start become beautiful display black now we're gonna go back here to the html we have this sign in and let's just duplicate this form we need another one another one for the side up okay so let's change here instead of signing this one is gonna be create okay just a couple of change here the id here is gonna be looking up instead of signing in it's gonna be create account let me see uh we need one more box here okay one for the for the omega i mean change here instead of user let's say at this is the email instead of the in the placeholder let's say email okay and as you can see they are in the wrong order so let let me change this okay username email and then password and let me see here yeah let's get rid of this part here we don't need this okay and signing instead of signing let's say sign up all right these don't have an account we can change use to already have an account and let me see one more change here okay all right and underneath this one we need to show him our chances or more opportunities to sign into our page so let's have the social icons okay let me go back here to box icons and from here we're gonna grab the first one this one the facebook okay telling the user that he can login he goes on his facebook account let me duplicate this one here and give him more opportunities okay this one twitter and he can also use his google account all right and back to csl select to really make them magically happens okay let's grab the login and for the layout here let's use grid all right grid template columns we want that to be 100 all right the height is going to be also 100 vh make it fully screen and let's apply some magic magic left of 1.5 ram let me save so you see and let's do the same on the other side so matching right 1.5 ram and now we want to apply scio also to the login content and looking image so login content display is going to be grid okay and for our picture here looking image we also want that to be in the center so justify self center and whatever and we have that in the middle now we want to grab the image itself and let's change its size and position with it's going to be 350 pixels okay and let's bring it a little bit down with matching matching top let's say 1.5 ram let me give a save and you see we just bring it a little bit down [Music] we also want to grab the login the looking forms and let's give a position of relative and the height is going to be 368 pixels and now we are going to grab the both the login register and also the login create and in here let's have a width of 100 okay of its parent the background color let's pick a different color here the first called lighten okay difference of the background and just apply a pad of two wrench top at the bottom one rim left and the right okay and for the bottom radius let's make the corners a little round when one ramp okay you can choose your own numbers and for the text align center put all this element right in the middle okay we also need here to apply some box shadow so let's say 0 80 20 pixels and rgba 35 published color 35 0 77 and for transparency dot 2 okay and it's much better right now all right therefore now we're gonna grab this title the side name side knob and for the font size here let's grab the available h1 font size as you can see they are too close the input and our title so let's give a margin bottom of true rain give some space in between them looks nice now and let's grab the login box itself okay and apply a full layout display grid so here create template column max content okay one fr let's also change create a column gap of dot five ram all right it was also padding let's see 1.25 ram topping bottom and one ring left and right and change here there's some okay we also want to change the background column let's pick this white column okay and for the marching top let's say one ram alright by the radius let's see dot five ram make it to rounder or edge colors and next we're gonna change the icon size okay let's grab the login icon and let's change the size for font size let's say 1.5 ram and it will also want to change its color so let's say let's pick our purple color okay is this one the first column it fits with this girl shirt and now let's grab the login input okay then put itself let's get rid of this butter so bother none and we also want to get rid of this outline when you click on it so outline none the font size let's pick the normal font size available font weight here is going to be 700 okay and for the call let's pick our first column doc all right we can now grab the placeholders here the username and password so let's grab those one and bring it in login input placeholder the font size we want that to be the normal font size nothing special about that one but the font family here let's pick the body font and for the color let's pick a first column light all right okay and now we want to grab you just forgot your password and you won't make a couple changes like put it right on the right side okay so let's grab that login forgot okay for the layout here let's pick the black the width let's say the max content margin left here let's pick auto and it goes right to the right position okay [Music] let's apply some matching top of that five rail is too stuck to our inputs and the font size let's pick a small font size the 128 here is going to be 600 and for the color let's pick the same color of username and password here the first color light and next step here is we're gonna create the those buttons okay looking button for that layout is gonna be black okay we also want to apply some padding one ram all the way around margin trim uh topping bar in zero left and right and for the background color let's again use our purple column and as you can see we came across with the problem we can't read well so let's change the color to white color white and oh yeah okay really let's make it even better with point weight 600 and align that in the center texas line center but the radius let's say 0.5 ram make it a round on the colors and let's also apply some transition that we seconds we have the transition time here of the three seconds apply to this hover okay when you hover off this one we're gonna change the background color to the first color dark let me show you yeah every time you hover over just change the background color to the first color dark alright you see in typography let's grab the login account also the login sign in and login signed up all those stacks here and let's change their phone to a to 600 okay as you can see now it fits the project and a second thing we are going to do here is also change the fonts as size we want that one to be there is small font size okay those are some info that are important but but not that important all right and now we want to change the looking account color okay so let's grab this one and down here let's change this color okay let's use available and for the color let's use the first color dark as you can see it's done and now we want to change the color of text just in front of it okay the sign up so let's grab the color and use the variable first column okay it's right here it's done let's also uh change the cluster for pointer so the user knows that he can clicks on it and the right and then if this one we have the social icons so let's apply some style to it okay let's start with the matching top let's bring it down to rain they were they were too close to the side name and now let's grab thing okay the icons itself and let's change the font size let's increase that to 1.5 ram let me show you it's much bigger and now we will also change the color okay so let's use our first call dark let me give a save let's put the apart with margin 0 and 1.5 rank and as you can see they are much better and right now we can see the signing and also create the account at the same time we don't want that so position absolute and you also want to add a same space on the bottom so bottom one dot rank and we have this nice effect okay as you can see so you can have both sometimes great and sometimes the low game and now let's see how we're gonna toggle between show and hide the login and create account okay show login dot block display block we're gonna use that in in javascript okay and to hide the login dot none and display none so you don't see anything let me just show to you okay illustrate what i'm talking about i'm gonna come up here and login create is when you see right now on the screen if i type none or base you no longer see it welcome to jiggas where the magic will happen okay let's start by getting reference to the dawn to the our dawn elements and let's grab those elements by id okay those one the side up and let's save them into variables why this way we can manipulate them okay our sign in let's get document get element by d and let's grab the sign name okay the id side name for our markup let's also grab the logging in and saving to the available login amp logging up dot document dot get element by id and the id here is logging up so now we can manipulate things okay so let's add the event listen to the sign up okay it's quite simple here let's grab the side let's add event listener okay this event list is going to be waiting for a click and when this clip happens we're going to run this function and what this function is gonna do it's gonna remove the classes if they exist okay so let's grab the login class list remove and let's remove the class block okay let me just duplicate this line of code here and login up class list remove none okay [Music] and in our logic here another thing we're gonna do is add the classes in this case we're gonna toggle so login in class list circle toggle between the class none okay and for the login app class list toggle block so let's give it a try see if this is working let me click here sign it up okay as you can see we had a great account let me click here there is no way to go back because we don't have code for it let's do it right now to make it too quickly let's just duplicate those lines of code okay and make a couple of changes instead of block here is none and the set of run is black here the same down below and let's give it a try and see if it is working looks like snot but i know the problem here looks like i i forgot to change the name here it's not signing it's not signed up it's signed in so let's change this signing in all right let me give a save and now if you click here it's working okay we are toggle between sunny and great account next step we need to apply some animation to it and now we want to create that animation okay so let's have animation durations we're gonna be dodged for seconds and we also have to give it a name okay it's gonna be looking yeah i know i know we have the login here but we don't have this animation so the next step is let's create that so let's create that okay as keyframes login and at zero percent we want that to transform escape to be one one and one okay let me just copy this one and let's see at fifty percent we we wanna increase that a little bit to one dot one and at one hundred percent it's gonna go back to when okay let me show you yeah we have a nice animation okay we are using the same time in javascript and css to make this beautiful animation alright and as you can see it was a easy one all right and now we're gonna make that responsible okay let's use our media queries and we want at the small screens okay so let's grab here major screen and mean of 566 pixels okay and what we want here let me finish here we want to change the looking okay the login forms and you want them to be wider so let's give a width of 3 480 pixels and justify self center allow me to show you what's going to happen when you have that in smoky screens yeah as you can see they become wider okay so you can see better so that's the idea let's move on and let's continue here the big difference here is going to be on the desktop screen okay of course we have more so you can show more so let's start with the login height we want that to be 100 vh and overflow hidden okay and one more thing here actually we're gonna make a couple of changes to make it beautiful big screens let's grab the content grid template column repeat through the max content okay let me have more space here so you can see better just like content you will still want that to be the center align items also center along the closed axis let's also apply a huge machine left of the ram let me show you as you can see it's very beautiful okay it's very beautiful red let me show you with the effects here yeah so that's what you see in the big screens but we still have some things to change as you'll see and as i believe you'll notice the issue here now is the picture so let's deal with that okay so login image for the layout here let's use flex okay it's good for small things the width is going to be 600 height 580 and let's also pick a color okay feel free to choose whether to like okay let me continue here about the radius let's make it around the other corners of one ram padding left is gonna be also one ram okay now let's grab the image itself logging img image with 390 pixels let's apply margin top of zero so you're gonna it's gonna be right on the top as you can see yeah we have this color we have all this stuff here but as you can see the picture is not there big we cannot see that well so that's what we're gonna deal with next okay we're gonna fix this this issue this is the web developer live you fix something something breaks then you go there and you fix it it helps all the time okay so let's do it okay uh down here let's have login register [Music] also looking great both of them left minus 11 ram okay what's the difference okay as you can see you see the left very close to the picture okay let me copy this and commit out see the difference [Music] it does look natural i mean it's not a good result i mean put it back here and yeah give a save and now we have a great results okay guys that's all for today i really hope you'll like it see you in the next one [Music] you

Channel: Web Dev

Views: 1,520

Keywords: login form, responsive login and registration form, login form html css, responsive login form html css, responsive login & registration form using html css javascript, login & registration form, login & registration form html css javascript, login signup html css, login sign up & sign in html css, responsive login form sign & sign up, responsive login form sign & sign up html css, login and registration form in html and css, login, html, css, javascript

Id: JbWdz88oi90

Length: 33min 25sec (2005 seconds)

Published: Fri Sep 10 2021