Firebase Web Tutorial 03 - Bootstrap Signup Ui using HTML5 & CSS - Node Js Firebase Tutorial

hello guys welcome to coding cafe my name is Mohammad Ali and in this video tutorial we are going to create a signup page I mean basically we will create user interface and then the sign in user interface so that we can first allow the user to register or mean sign up using the firebase authentication and then login so yeah I mean so in a previous tutorial we left here okay we just do some project setup and now in this tutorial let's create our signup page so instead of this index dot HTML let's name this we are going to give it a name as sign in dot html' okay and we need another page and let's give it a name as a sign up dot HTML now just for now I mean you are going to create a signup page so just for now in order to differentiate we just get ahead I mean heading let's go to the signup page and let's create it now one thing which I mentioned is that we will be needing some images I hope you have seen the introductory video for this firebase web project series in which we use some images I mean beautiful user interfaces and for that we will use some CSS files in all these steps so what I do is just for the time saving I mean I have uploaded on the Google Drive I will provide this link in the description down below and you can just click on this link and it will redirect you here okay here you will basically get these two files which is design files dot zip and file dot HTML file so this is basically the file which we need ok just click on it and let's download it and here you can see it is now learning I will show you now that basically what things you have inside this design files folder this is ready a folder but I converted to zip now once it is down low once it downloads successfully and I will show you okay it is downloaded successfully now let's go to the place we have this cut this from here let's come here to the desktop and paste that here so there is our zip file which we just downloaded extract here and this you will get ok this one is not needed this is just the extension because I use I mean I have created this project in my Mac OS so this file will come alongside with it but but this is not needed okay just leave this so yeah this is the folder which you get and also you can now delete this zip file also so this is our design underscore files folder let's just cut this from here and let's go to our project folder which is by the name blog underscore F okay and let's paste that folder here okay design finds now let's come here to you studio code and here you can see design underscore files now if you extend it here you can see we have the CSS fonts and images folder inside it now if you extend a CSS then here you can see basically these are some means some of the designing I mean these are the CSS you can say properties which we will be using in our making our sign up and sign-in pages more beautiful I mean the user interfaces okay so just for the time saving I provide the link to it so you can just download it and paste it okay because our goal is to learn and not to waste our time on just understanding the CSS basics okay I hope you guys know I hope you guys have a basic idea of the HTML and CSS and some bootstrap concepts I mean there no need to learn in details these are just the basic CSS okay so yeah and then we have the fonts basically which we will be using okay you can check it and then we have the images which we will be using in this project okay I mean in this complete series okay registration form one and please do not change the name of any image or anything okay do not change its just copy it just download it and paste it here just I show you guys okay step by step just do it like that and don't rename anything inside this design underscore files okay so I hope you understand everything okay so these are the images as I told you guys which we're using okay now what we want to do is let's start working on sign up dot HTML file and one thing which I forget I will tell you now guy I mean I will now tell you guys but first let me write this HTML first of all the head and then we have body now as you know I told you guys in the introductory video that we will be using I mean just to make the page design I mean the web pages which will be cleared that is the sign up sign in home page etcetera to make it attractive we will be using the boost step okay and I hope you have a very little knowledge about it okay so and if you have not then don't worry I will explain the things I mean which we will just write okay so don't worry about that all you need is just to follow me step by step exactly what I am doing here just follow these steps okay so now the next thing you used to add the bootstrap links and the jQuery or you can say it or Jess script which comes with the bootstrap okay so as I told you this link will be available in the description here you can see we have this file dot HTML file just double click on it and it will open this thing okay and here you can see we have this some links here first let copy it and let's come here and inside behead okay inside be hurt you can just rest it that's it so this is for using the bootstrap okay and some jQuery which we will be using for different and basically I mean it is necessity if you if anyone of you has a basic knowledge of bootstrap objectory then I hope you will understand this we basically use these links in order to make use of the bootstrap and the jQuery features from the online sites okay so yeah now then we have this relation and this reference okay and these are basically inside the design files okay I told you guys that we will be using some fourths okay and then in here we have this one here you can see it and then the CSS material so basically we are referencing we are basically accessing these things I mean which is related to the design okay and we are using it in our application now we will use it I mean the class is basically so yeah just or the front-end so I hope you understand everything in details now let's come and design about sign a page so first of all inside the body we can say div and let's say a class to it which is basically your boost applause wrapper I think it's belongs to html5 but anyways style and the style will be background dot dash image now here we have to provide the URL to that image and that image is basically first of all put these two single quotes okay and inside these single ports we have to provide the link to that image which you will be using on our signup page so it is stored inside the design files folder if I show you here okay so that's just what I'm saying I'm going to copy this name design underscore files / images / and we have an image inside there by the name registration - form - 1 dot jpg and if this automatic suggestion do not appear then you can type this manually okay from your keyboard this is the image which we just add and so ok here instead of this one we have I mean this will be our background image on that page so we move this one and we have an image by the name registration register back ok make sure to use the same names of a register back and let's confirm it register back ok and then after this what we gonna do is now let's create our signup form so for that we can just say form action will be known and let's add title basically there I mean using the h3 tab and it will be our register now after that let's create our email field so we can just say do and that's a class to it loss which is this class is basically for styling ok form - and now let's add an input tag here and create our first unit field so let's give ID to it and the ID will be email and the type for this input text will be email okay and let's add a hint which is we can give by writing less older we can say email address class control now also we want to add an icon to our alongside with this email input field so in order to do that we can add I let's close this and inside here we can just say class set M the I read M di di ish rock and basically this class is from over the style I we check it I mean from here I think on this was CSS and yeah I mean there is a CSS class which you are adding here styling so yeah I mean for the phone styling basically not for the icon sorry I mean this one is for the icon okay and this one is our input text so we have an input tag and alongside with that we have an icon so anyways when we run it you will see it on the screen so let's compare this and let's test that here and change this to password and then the type will be password and less holder will be password or you can add dotted whatever you like form control and instead of lock I mean for the password we have an icon by this lock okay basically a lock icon and for the email let's add email okay is there MDI - email so it will add an email icon and this will add a look I can alongside with this password field so yeah and now the next thing is let's compare this we click next we have a confirm password ok so ID will be let's confirm password and you type will be password less older will be confirm password and lock and then we need a button so after this tag let's be clear door button or using the div tag + foam - group container the login 100 - form - BTN now inside this tag we are going to add a button tag for adding a button and this button is basically our register button and let's add some styling to it so I mean first we'll have to give idea to it which is the important thing so it will be our BTN - signup and the type of this will be button and let's add an icon long side with this button which and arrow icon just to make user interface more beautiful okay so you can just press this here and there MDI okay remove this extra the MDI okay also from here also from here also from here okay so there in the ID - arrow - right so it will add an arrow now everything is okay we have to just create already have an account so if a user has not an account click on it and we will send the login page basically so let's say they've closed this and let's make the text at the center for this one so you can say Center text - Center for all the text that we will use inside this cave it will be at the center - talk margin from the top I mean it is just similar I mean when we basically cleared our Android applications and the applications similar kind of tags or you can say xml codes I mean in Android studio basically use the XML code just a little bit difference is here when we create our revocations I mean in the designing point of view I am talking about 49% add a semicolon and then let's add a font size which will be 15px add a semicolon yeah now we need a link I mean anchor cheese that's it we anchor anchor okay sorry anchor and we can say reference and we are going to when a user click on this let's first add this so that you'll understand more clearly already have an account so when I user click on this link we are going to send the user to the sign in dot HTML page and let's say class text - doc which is for the dot test text ok say of all and let's test it I should review their server and lats or as I told you in the previous tutorial you can also test it by just typing like localhost - I mean sorry not - localhost colon add 0 add 0 and since we have cleared our sign up so we can says no HTML now here you can see this is the bedroom he means basically and the signup page is below and it is not aligned but the rest of the thing are same I mean I can email address password we have this confirm and there is over register arrow icon and register button and here it is it is the world I already have an account so we have to align it click and let me check this now if you see then basically I mean we have I mean everything is ok but basically I mean we have this div and I hope if you have a little bit knowledge about the HTML CSS basic HTML then when you write div it basically means that we have this image and then below that image we have this complete form okay we have an image just like this you have any and then blow this image we have this this form complete form which in which we have all these fields so in order to make it I mean to move it above and make it one page I mean move this and just make a page here what we're gonna do is also because of the alignment this register I mean we have to add an image here alongside with this registration form and then we have to move it and make it inside I mean inside this behind you can say up upward let's see on the upper side and in here so that it looks only one page not like this I mean so that we have to scroll I hope you have watch the introductory you and you have seen that so in order to do that now first of all click here and it ends here okay cut this cord this whole form from here okay and make sure to move it let's make some space here okay so that we can understand the code more easily and inside this div which is basically our register back I mean on at the top of this image we want over this form okay so that's why we are moving our whole form inside this div at the upper side of that back image basically resistor back image okay so we just passed the form inside this div now if you serve it let's save all and let's refresh this then here you can see it okay these this is our form now here you can see it now what we wanna do is that you need to make it a little bit beautiful so what I'm going to is I'm going to add another div because we have to add an image alongside with this and you move you want to move this at the center I mean this whole form and then you'll add image alongside with that form so cut this whole form code okay control X and now what we gonna do is that in here we are another deal which will be our glass equals to inner okay sorry let's first compute over this deal then we can say glass inner and in here pass the whole form code which we copied earlier okay inside we have this form now what we gonna do is that let's add our div now for adding image so they'll close this and here we can say class right for what basically about adding this registration from image so anyway as image their shoulder image and we have to add the source for it so FC for the time saving I am going to copy this link basically copy it and just paste it in here okay so design file images and the images Biden am registration - form - 1 dot jpg so yeah everything is complete now let's save all and let's refresh it here you can see it we got a beautiful sign of user interface ok here you can see it if we click on this already have an account then it send us to the sign in dot HTML file and this we will I mean login page or you can say signing that you will design in the next video tutorial so in this video tutorial we have create and design a beautiful user interface for our registration page I mean signup page and in the next tutorial we will work on the sign-in page and then we will connect our app to the firebase real-time database and we will use the firebase authentication for the registration and sign-in purposes ok for user oh yeah that's it for this video and see you guys next video 5 now

Channel: Muhammad Ali's Coding Cafe

Views: 11,326

Keywords: node js firebase tutorial, node js firebase, node js first application, node js firebase realtime database, node js firebase database, node js firebase crud, firebase node js, firebase node, firebase node js tutorial, firebase web tutorial, firebase web app tutorial, firebase web crud, firebase web sign up, firebase web tutorial for beginners, firebase web hosting, firebase admin panel, firebase admin sdk nodejs, firebase admin sdk

Id: pI0GMnjbq2c

Length: 24min 10sec (1450 seconds)

Published: Mon Jul 22 2019