USER PROFILE using React JS | FORMS and FILE UPLOAD in React | React Projects | GeeksforGeeks

Key Takeaways

hello okay guys we are live so hey everyone I'm Hershel J your Mentor at gigs for geks and guys today we are going to make a very awesome project that is a user profile using reactj actually we're going to use nextjs but it's same in reactj nextjs is the modified version of react right so yes we're going to make a profile page just like that so that you know how we can select things just like images um we can add Fields like username email password dob like uh we're going to use mui for that so that we can make component easily right so let's begin sit hey hi cin okay so first of all guys uh the prerequisite of this video is you must be aware of at least react JS although we are going to use nextjs which is modified version of react JS but all things are same there's nothing different just the way we install things are a little bit different okay that rest everything is same okay so yes I'm going to just install things why am I using nexts uh because like you can use normal react J also but the problem is nowadays react J website is also recommending to use nextjs okay if you visit their website in the installation page you would see that they are asking for nextjs they are simply mentioning the command npmi uh npm npx create next app something like that okay hi Vikram okay so for that first of all I'm going to do one thing I'm going to create a fresh folder okay so you can see that I created a folder inside this I'm going to create a project okay so let me just delete my old project so I'll just delete this and we're going to make a very simple UI the UI won't be very complicated but my main goal of this video is to tell you how you can actually add things to the form okay how to add things to the form we're going to do that okay so I'm just going to open this uh with vs code so vs code must be installed okay then I'm simply going to just open vs code uh okay yes guys so I'll just open that specific folder so we have this drive named as hersel inside this we have to create a project right so I'm just opened this right you can see this is the folder which we have inside this I'm going to create a fresh project okay so I'll just create new terminal here and here guys we need a command named as npx create next app app yeah so we're just going to type npx create next app you can use normal reactjs also npx create react app right but I'm going to use nextg because it's recommended nowadays okay so at the latest so this is the command and by the way your noj must also be installed noj and vs code must also be installed now here we're going to name this project as user profile by the way guys I'm going to upload this project on GitHub also so you can check out the source code later on right so yes we going to use uh that's totally up to you if you want to use typescript or not if you're using normal react just you would't using typescript but uh if you are using typescript that's also fine and I'm just making it yes but we are not going to use typescript a lot so you won't get confused even if you don't know typescript that's also fine okay but here I'm just making it a yes so later on if someone who knows typescript wants to change it to code of typescript can easily do this okay so right I'm just making it yes and I want to use es lint and I don't want to use Tailwind I want to have SRC directory I want to have a rowder I don't want to customize anything okay so yes you can see that the project has been set up now it would take a few seconds to finish this till then what we can do guys is we can just uh install a few things okay so I'm just going to open a browser here I'm just going to search for mui okay mui react okay you can just search for this reactjs just search for this and you would find this page okay so yeah you just need to install things from here it would give you a lot of components which you can easily use in your project although yeah you can just skip this part also or you can install this that's totally up to you but in some cases we might need mui component so so we can install this okay for now I'm leaving it just like that because uh we'll make things from scratch okay so that everyone can make this but yeah this is a suggestion you can check check out Mii to make things more easier okay but yeah for now I'm going to make things uh like from scratch okay so first of all you can see that this is the SRC which we have created and for normal reactors you might see things a little bit differently but we would know how to do things because I'm not teaching react I'm telling you how to make a user form okay so inside the app folder I'm just going to create a register folder this is the way which we create routes in nextjs so I'm going to create a register folder and guys inside this I'm going to create a file named the space. TSX okay that's it and here I'm just going to write ra a fce this is the shortcut for getting this shortcut what you need to do is you just need to install an extension just go to extension and just search for es7 if you search for this um you can see that we have es7 and you can also search for es7 plus okay so you can actually use es7 Plus because for next stes or react this is the latest version so you can install this extension if you want right so now we have this okay we have this again I would just create it like this RFC and I'm just going to write here this this is register okay this is register page okay so now let's come here and uh I'm going to go here you can see that inside the register folder we created the register page and where is the homepage hom page is basically this page. TSX this is the homepage okay so I'm going to make make it short okay I'm just going to make it short I'm just going to create a division here let's create a division okay and here guys we can simply say we have a homepage right so we have a homepage so I'm just going to say that let's let's create H1 tag here and I'm just going to say that this is home page okay so yes so we created this homepage and you can see this a register page so now guys I'm simply going to run this okay for running this again I would just right click here just right click here in the specific project in the specific project you can see we have the project here and here we just need to type npm run Dev okay npm run Dev so you can see that now it started right so now in Local Host 3,000 it started let's check this one so I'm just going to go here and I'm just going to type your Local Host 3,000 okay so it's going to take a few seconds you can see this is the homepage which we have edited just now and then now if I put a slash and now I write register so you can see that I would get the register page perfect till everything is fine so here guys we're going to create the register part okay so first of all guys one more thing like if you want to get the source code of this video what you going do is you can just search for my GitHub at the end of this video I'm going to upload this code okay so you just can you can just search for github.com V AJ 014 okay that's my GitHub account here I'll be uploading the source code yeah you can check out my profile if you want to contact you can contact tag on Instagram or LinkedIn right so you can just go to the repositories and guys in the repository you would find typescript next years uh okay I'm going to create a fresh folder here okay I'm just going to create a fresh repository here in future I'm going to upload the source code so let me just create it I'm just going to name it as uh okay okay I have to login with my profile anyways I'll just create a folder named as user profile you'll find it here and you can get the source code from there I'll share the link in the description also on in the comment section also from later on you can find that project okay okay repository link okay right now it's not there but you will see it something like user profile react J okay perfect so now guys you can see that this is the register page so here what we need to do is we need to just add some UI elements okay you can use mu UI or you can use things from scratch okay so we're going to just use things from scratch right so let me just do one thing just a second guys let me just check one thing okay so uh guys what we're going to do is we're just going to search for some local image user contact mean something like that so I would get some images so I just go to images and you can pick some free images although yeah like yeah that's totally up to you you can pick images from there you can create your own image so I'm just going to pick any random image so that I can just use it I think okay just for educational purpose I'm just downloading any any random one but yeah you must choose some specific one okay so okay let's check do we get some image good image or not okay I think we have to go with this normal one so I'm going to go with this Vector easy and I'm just going to save image okay so since we are making a very local project so I'm just going to just download any random image but yeah you must pick always copyright free images I'm not sure that there is some copyright or not but yeah I'll remove it later on anyways so yeah just check out that the image is free or not okay so you can see that we have this user profile folder uh what I'm going to do is here I'll just go to Sr C inside SRC we have app inside the app we have this okay so what we're going to do guys is inside the SRC I'm going to create a new folder here inside the SRC new folder and here I'm just going to name it as assets ass ETS okay assets right okay inside the assets folder I'll just save this downloaded image that's it okay so once you download that image I have to show that image in the registration page so I'll just go to user profile here we have the SRC inside that we created assets inside this we create we downloaded this right so we're going to show this okay so I'm just going to rename this so uh F2 and just rename it to something like no user something like that okay so that you know that this for no user perfect so now guys since first of all we are going to create a register page okay we're going to create a register page so I'm going to create it something like yes so we're going to create something like a register page okay so you can just manipulate it later but right now assume that we are creating it just like that okay so here I'm just going to say that first of all we're going to have a division okay and let's say we have this Division and I'm just going to name this division uh okay we have to add some CSS also so for adding the CSS guys what we can do is we can just um we can we can just create a CSS file here so actually a directory here so here we're just going to create a directory named the Styles okay Styles inside that we'll simply add the CSS name that's sp. module. CSS okay so this is for next J you can see we created the CSS file and now here guys we are in the register page so here what we can do is we can just add the CSS so import styles from and you just need to write at theate slash and you just need to write Styles slash and here you just need to write the CSS so I'm going to write Au do module. CSS okay so you can see that yeah now it's about to do things so what's the problem here okay from it's actually from F okay so yeah you can see that now it's located the file and everything will be done right so I'm just going to name this as class class name would be what I'm just going to say that the Styles Dot and let's say the style would be what I just name it something like uh input container right input container right so that's it guys now we can just say that we have some label here okay so I'm just going to say that we have some label here for the username okay so I'm just going to say that uh name okay name right this is the label and similarly we're going to create an input field I'm just going to say that here we would get some text like placeholder placeholder I'm going to say enter your or something like full name something like that full name something like that okay so now let's check is it working or not so you can see that name and full length perfect now similarly we're going to have a few more Fields like you're going to have email also right so you'll store the email also right email of the user and again same CSS but this time you're going to see that it's email okay email right perfect now similarly we going to need one more thing that is the password okay we going to need one more thing that is the password so uh we're going to say that the type of this would be uh you can just make the type of this would be password or you can make some custom field okay you can make some custom field you can just make the password visible or not so suppose if I make this as password so now I just it as password okay and for now I just create a situation here I'm just going to say that password visible and set password with so I'm just using uh use state from react J right and since we using next so at the top we have to add one more thing that is use client okay so you have to just write use client okay use client that's it uh guys just a second okay perfect right so yeah what we are doing is we are using use state uh which is neither a react function or nor a compter react just name must start with an upper case Okay uh I think this is just some warning okay this is just some warning but you can skip that let me just check is it working so you can see there is no error here it's perfect so what we are saying is password visible or not initially I'm saying that password won't be visible so if password is not visible so I'm just going to say that password okay and here guys what we can do is we can just hide or show the password so for that what we can what we can do is type of this type of this if I say that the type of this equals equals password okay if I say the type of this is password so I'm just going to say password okay uh here I will just remove this for now okay I just remove this and and and and what we have to remove we have to just close the input field for now so you can see that we have basically just a second yes so you can see basically have a password field and type of this is password what what do you mean by type of this is password if you just go to the password field if you try to write something here you can see I'm seeing this I'm seeing this can see that here also we are able to okay just a second uh I think I have to refresh yes so you can see that what actually happened is you can see you are writing things here you're writing things here but if you're writing things here you can see you see dot dot dot that means password is not visible because time typ is password so what you can do is you can simply see you can simply see that here guys we're going to need something like if password visible is true is true that means you're going to make the type of this as text if the password visible is false that means you don't want to show your password so what you can do is you can just hide the password for that what you can do is you can just type password okay that's it so right now you can see that it's false that means password visible is false that me me you don't want to show the password that means here you if I just refresh you can see that if I type things you can see password is not visible but when I make it through when I make it through okay let's see what happens so if I come here back if I refresh you can see now if I type things and you can see now it's visible that means now you can see that now I made passw password visible or hidden because of this now how can I toggle this for that we're going to need a button okay we're going to need a button so we'll do that but let's make it false by default okay let's make it false by default so here I'm just going to say that I'll just cut this part okay I'm just going to create one more division here okay so uh in this specific row we're going to have the input field as well as the button as well as the icon okay so I'm just going to say that it's going to be something like input container one okay and here I'm going to say that it has a class name of styles Dot input row something like that okay input row so here inside this I'm going to show my input field okay I'm going to show my input field as well as a button okay as well as a button what button so let me just show you a button okay for that we can simply go to Hero icons for using icons or you can use any icon Library you can use mui also but for now we're going to use hero icons okay so I'm just going to type something like hero icons okay hero icon so you can see you can just visit here you don't need to install anything you can just search here I okay if you search your IE you can see you have Hidden Eye you have visible eye okay so uh now if I just say that when the password is not visible then I'm going to show the i icon okay something like that okay in some websit there is different but right now I'm going to assume that when password is um not visible then I'm going to show an i icon okay something like that or we're going to show the hidden I icon okay I'll just do one thing okay I'll just do one thing here I'll just say that if password is visible okay password is visible then I'm going to show this visible I okay when password is not visible then I'm going to show this hidden I so copy jsx and just paste it here okay so now I'm going to just save this so you can see now what would happen now let's just show it here so I'll just go here you can see that if I just refresh can see that right now password is not visible okay but when I make it true okay when I make it [Music] true I'm going to fix the CSS later on you can see now it's visible okay that means now it's working according to this so you can see now password is visible so I is also visible if I make it false if I make it false you can see that now you can see I is also hidden and password is also hidden okay so you can just check the logic later on but right now I I'll just add the CSS later on but right now you can see that it's something like that now what else you're going to need you have name email password you can have check password again something like that you can read the password compare password things like that but I have just added one password field okay so name email password is here and we'll add one more field something like um we going to have date field actually okay we're going to have the date field so I'm going to say that here guys uh I can I can just have one more input container okay so I'll just copy this okay I'll just paste it here and I'll just say that this is the date of birth okay date of birth and here I'll just say that the type of this would be date and placeholder would be okay we don't need any placeholder for this for now so I'm just going to remove it let's check if it's working or not so you can see yes we have the date field also perfect you can see we have the date field also perfect right so you can see that actually I think I must write it in short form that would look better so d o dat B okay so yeah we have these fields now we're going to need one more field that is for selecting the profile picture Okay so name is here email is here password is here do is here okay so I'll just add the do above this this it looks cool okay so yeah we have name email password now need we're going to need one more field that is selecting profile picture so for that guys what we're going to do is we are simply going to make this as something like a division okay and guys here I'm just going to say that this is what having a class name okay and here I'll just say that the styles of this would be uh profile profile diff something like that okay I'm just going to name it something like that so that I can identify it easily okay now inside this we have to first of all show the empty profile picture okay for that we're going to use image tag from next okay what is your age sir okay uh so guys here I'll just type i m a g e from nextjs so you're just going to go here if you are using normal react J you can use image tag from react J also but for next J we have next SL image okay and here guys I'll just type the SRC would be what so here I'm just going to leave it empty for now okay I'm just going to import the image so import no user that's the image which we downloaded right so I'm going to say from and here I'll just type ad theate slash assets slash no user uh by Fitness the code which I did for uh fitness app is complete but I forgot to upload that code so videos are available lectures are available for that but I forgot to upload the code so accidentally the code is deleted so I have to rewrite the code again so it's taking time but I'll do it definitely so yes you can see that we have the SRC here so here guys I'm just going to say that just type no user okay no user and U you can just give it some width and height okay width and height and now it would be fine okay I'm just going to SA that just use it normally I think still warning anyways you can just skip this this warning is totally fine so now you can see that after that at the top at the top you must see some kind of image okay right now it's not visible okay we have to style this division a little bit okay we'll style that later on we're going to make it to4 now let me just check why it's not happening H okay yeah now it's here now it's here you can see that now we able to see this image okay perfect so we're going to style this image later and guys we're going to need one more thing that is an input field okay we're going to need an input field so it would be something like okay we're going to create one constant here cons image user image user image right user image and I'm going to set it as n okay for now I'm going to set it as n n l okay n and yes so now after that I'm simply going to say that here we're going to have a button okay input field so input type and it's going to say that file okay and I'm just going to say that as soon as I click on this button it would simply trigger e. target. file that means it's going to just add this file to our user image that's it let's test this so uh let's refresh you can see we have a thing here okay so I'm going to go on uh something like show files okay and here suppose I just select this image or I select this image okay so if I click on open let's see so yeah you can see everything is fine but the problem is okay so since we are using next so uh we are using typescript also what you can do is for now I'm just going to write here any okay if you don't know typescript that's totally fine if you know just JavaScript that's plain JavaScript you just need to write any here okay if you have used typescript or if you don't know typescript just write here any okay for people who have added typescript in next okay so you can see uh guys what do we need to do is this just a second uh here what's the issue Target is possibly okay I think okay just write it just like that okay now what we going to do is what we going to do is we are simply going to say that if the image image is not none if the image is not none then show the image okay so I'm just going to say here that if user image exist okay user image exist okay then I'm just going to show that image okay I'm going to show that image by creating an object URL that's what we you do to show an image directly okay create object URL and just pass that image if you haven't selected any image you are just going to show image like that okay you're just going to show it something like that okay I'm just going to make it 150 for now and 150 would be fine for now okay so when image is selected image would be visible let's check this so now if I click on choose files okay and now show all files and now if I select this or this image okay so you can see that now I'm able to see this image okay perfect so you can see that now image is also here name is also here do is also here so now we need to catch these fields also name do email so for that I'm just going to create cons uh name for name also I'm going to store a data in this hook or you can create a single hook and you can store all the fields that's also fine but for beginners I'm going to say keep things separate so that it's easy for you similarly for email also for email also I'm going to store email inside this hook right and similarly guys we're going to store uh for data birth also would be stored in this hook right and later on guys we have one more thing that is the password so I'm going to say that password would also be stored in this hook so password would also be stored in this hook so you can see that all these things are available here now uh guys after that what we need to do is we are simply going to go here in the full name field I'm just going to see that it would be taking value from name value would be taken from name hook which we created just now right and then after that we going to say as soon as I start typing inside this I'm just going to say set name as e. target. value that's it so that's what we're going to do for do also okay we going to do this for do okay and similarly guys we're going to do this for this also okay and similarly guys we're going to do this for our I'm going to remove the value field for now from do we have to check something okay then guys uh we have to do this for password also for so for password I'm going to say value password and set password like that okay now you can see password field is also here name field is also everything is done okay let's check for do just a second so I'm going to refresh it for now and if I set some do something like that okay so yes now you can see that now it's seted okay so let's try this now okay so now let's try this now let's try to get the values whatever we type so for that we going to have a function so const uh handle submit something like that or you are registering to some website so I'm going to say handle submit okay handle submit styling it is very easy but writing the logic is a little bit complicated okay so yeah that's why I'm explaining this logic to you so yes inside this I'm just going to say let's print these things okay so console.log name email do we're going to also print the password also so console.log password okay I think these are the fields right so that's it okay we're going to read one more thing that is the profile picture so it would print the file okay it would give me the file okay now let's test this so uh for that we're going to have a submit button also register button also so we're going to create a button so button and I'm going to say that uh on clicking of this button on clicking of this button I'm just going to say on click I want to call what handle submit function okay on clicking on this okay so here I'm just going to say that this button is what submit button okay submit button right so now let's test this so uh if I if I just inspect and if I go to console okay uh okay if I go to console let me just refresh so you can see we have a submit button here don't worry about the styling we'll style this later on but right now why is vran Messi doing web development he's a great actor by the way thanks for the compliment by the way okay uh so I'm going to select things from here uh let's do this yeah select this and then full name would be har by the way my name is okay and okay so just choose 5 February okay Anda something by the way I'm not using my laptop that's why you are seeing some of the details okay yes so now let's try to submit if I click on submit you can see that yes I got the name here email also is here date of birth is also here password is also here user image is also here that's it guys so that's that that is the data which you're going to submit to your backend that's it so now we have the data right so you can just write more logic if you using backend you're going to write logic to handle the submit operation right now I have all the PS here after that you're going to call apis from your back end if you're using some kind of back end or you're using Firebase so you can save data to Firebase but till now my job was to tell you till now okay so now after that let's style this okay so I'm going to say that uh we have the stylings for this okay so uh first of all guys I'm going to bring things in Center okay so for that what we can do is uh I'm going to say give this a class something like styles do form page okay form page and inside this I'm just going to say that we have one division okay and let's say that then one profy Prof key hello bro hello okay so styles do um form or form container okay but yeah it helps okay easy login so control V so now guys what we did was you can simply see that now it would be easy so you can see that first of all we have the profile profile division right then we have the name division then we have the do o date of birth division right then we have the email division right then we have the password division perfect right then after that we have this button okay so for password division also we have to write one more logic that is you can see that we are showing this SVG okay so I'm just going to see that as soon as I click on this SVG I'm going to just change this okay so on click I'm going to hide the password okay password was visible I'm going to hide the password if password was not visible I'm going to show the password so I'm just going to make it as true so let's test this guys again so I'm going to go go back here let me just refresh and you can see that now if I click on this you can see password is visible okay let's try to add some Feld okay so I'm just going to add a few Fields here okay and let's add some details here and let's add some more details here now if I click on this okay hi sorry to interrupt your theme looks cool what plugin actually I'm not using my laptop by the way first time I'm using my friend's laptop uh let me just check what's the plugin what's the theme here okay just a second um I think you can just check out these extensions okay I'm I'm just showing you these extensions these are all the extensions which this specific theme is using let me just check actually there are first of all this is file icons this is a very popular extension I also use this and then guys uh let me just check okay let me just ch what's the exact theme he's using I think it's in the appearance okay I have to check okay exact theme which exact theme this specific vs code is using okay I'll just ask my friend L and I'll mention that in the comment section okay but yeah these are some uh extensions which are available you can check out some extensions actually there are a lot of extensions which this guy is using anyways okay so yeah you can just check out the themes later on but yeah you can just search about themes actually I'm just going to search about themes theme so if I just search about theme I'll get a lot of themes here you can see yeah actually I think this is most probably the GitHub theme or material theme okay so you can just check out these two things most probably between these two okay so yeah this is the theme okay so now guys let's continue and what I wanted to tell you is now you can see that password is visible hidden password visible hidden okay perfect and as soon as soon as you select the image I'm going to show the image also you can see that image is also here you have all the fields here you can just make the password visible you can hide the password if I click on submit you can see that now I have all the details okay so now the logic is complete we just have to complete the styling part of this form okay so for that you can use chat GPT also you can use whatever you want uh what I do is I use Bard sometimes okay because B has file upload features uh you can just upload the image kind of UI which you want and it would just create code for you something like that but I'm going to write things from scratch here okay so now guys I'll just split out some things okay I'll just split it a little bit so that uh it's visible enough okay so now we're going to go to our Au module. CSS okay Au module. CSS so uh let's Style with our Basics so first of all you can see that here we have the form page but one more thing guys one more thing uh I have to remove the root CSS okay so just go to this page. module. CSS just select all remove it okay because I don't want any pre-existing CSS so you can see that now if I just refresh can see that yeah there's no default background everything is fine so you can see everything is fine here okay now after that in global CSS what I'm going to do is I'm just going to say that we don't want any default margin not padding okay so I'm just going to say that m0 and P0 okay this is for next JS so similar for react JS you can just remove any default margin or padding perfect so now there is no any default margin and ping now perfect so now after that guys just go to this register page okay just go to this register page now we have to style it together okay so we have to style this together so form page okay form page we have to first of all style that so I'll just say that this is my form page okay so I can use any good color okay I can use any good color but for now I'm just going to say that display Flex I want everything in Center okay so I'm going to say everything in Center so first of all display Flex justify content Center all items are done okay so you can see everything is in Center for now and now if I want this container to be in center of my page I'm going to say that suppose for now minimum height would be around um 100 B 100 pH perfect so you can see now it's in Center okay perfect now I'm going to see that you can give some background color also okay so for that I'm going to say that background color uh let's choose some normal color for now so for now if I just choose green color so you can see now green color is here and I'll just make it a little bit military green or something like that okay so so something like this okay so yeah you can see some what military green okay so you can just pick the color code if you want some good color codes what you can do is get up theme noted okay perfect uh what you can do is uh if you want some color code you can just visit the website named c o l o r s colors um p okay you can just search something about it colors website palet so it would give you a pallette okay that means if you want to make a combination of a few colors you can just do it from here very easily okay so I'll just uh try something from here you can have a generator also you can just pick some generator you can explore trending pallet so I'm going to click on explore trending pallets okay and yes this is it so you can see that I got this theme so I can just pick any color from here I like this dark one so or you can just make a combination of all these colors if you want okay can you answer my question from the live chat yes uh what was your question please ask me I can't see your question okay so here I'll just face the color code with a hashtag that's it so now guys we have a good color code you can see so yeah that's all up to you you can just pick any color code right so yeah this is the form page now inside this we have a form container so I'm just going to go inside this form contain container okay and I'm just going to say that for now it has some border okay so border one pixel solid uh for now I'm just going to say that it has white okay white so you can see that yeah that's that's the form container which contains all of the data okay right so now inside this I'll just say first of all we're going to have some border radius also so border radius would be around let's say 20 pixel okay 20 pixel so you can see yeah that's it and one more thing that is Overflow of this would be hidden so that I don't have any over overflow you can see that now the Overflow would be gone okay so there is no overflow if any case accidentally so you can just hide the Overflow right now guys we're going to style this form container later on but we're going to style the inner one for now so profile division okay so I'm just going to come here and I'll just say that dot profile division okay and I'll just say that first of all it's having display Flex okay display Flex so you can see display flex and flex direction would be column okay Flex direction would be column right and one more thing guys here also I'm going to say that display is flex and flex direction is column okay and after that guys I'm going to see that align items as Center so that everything is in Center can see that now everything is in Center okay and here also I'm going to say that align items as Center okay flask or Jango uh actually U I'm not into python okay I'm not into python so I can't answer that specific that flask or Jango but yeah to be specific uh I have actually used D Jango for for web development so both are great but to be specifically I have used Jango in some cases but I'm not sure between both how which one is better in some cases okay I'm mostly focusing on one stack development of mon stack developer so it's mostly JavaScript there is no role of python that is flask or Jango so I can't answer that doubt okay I'm a student who have knowledge on Mon stack and also react native for mobile application I want to explore more aside from JavaScript what should I do uh if you know mobile app development what you can do is try to learn cotlin okay cotlin Android development so you'll have a more perspective so try to do that okay because that's what I did first I started learning HTM C JavaScript then I became a monack developer then I learned react native I made full stack project then after that I started cotland then I made full stack projects in cotland that means back end was still still in noj uh Express J but the front end that is your mobile application was in cotlin so yeah more complexity but it was fun so you can explore cotlin after that okay yes or if you want to explore something in the back end that means you learned nodejs Express JS if you want to explore something in the back end you can explore graphql graphql is something which saves a lot of time and a lot of companies are using that okay so in back end you can explore graphql and if in front end you want to do more in Mobile development field you can go for cotland that's great okay and it would become easier in initial phases you would feel cotlin is difficult but it's easy okay it's easy right so guys yeah we have styled this profile division I'm just going to say that inside this we have one image also okay so I'm just going to say that profile Division and we have this image okay so I'm just going to say that IMG okay so I'm just going to say that the Border radius would be what around 50% okay 50% so you can see yeah that's 50% now if I select some image let's select this some image from here okay so I'll just say that for now I'll just select this image okay so you can see that yeah that's how the image would look now you can style this a little bit more but I think this is fine okay and you can give it some width also width and height also but I think this is fine now inside profile division we have an input also okay we have an input field also so I can just say that it has some kind of margin so you can see some spacing is here and what else you want you can just say that some um I can just make the visibility as hidden okay I can just make the visibility as hidden or something like that or what I can do is guys just give me a second okay just give me a second just a second okay I'm checking something okay then I'll just show you that uh okay for that what we can do is uh first of all let's complete this much part okay I'm going to close this profile D for now first all let's complete the below part okay so I'm going to go on input container okay so I'll just commment this out for now okay I'm just going to comment this for now first of all let's style the input container okay so I'll just say that display of this would be Flex Flex okay and then I'm going to say Flex direction is what Flex direction is what column okay so you can see that now Flex direction is column okay I'm just going to say that the width taken by them would be 100% okay so you can see all of them are taking 100% now I'm going to say that some padding between would be there so you can see some padding is also here um actually I would say that width would be around 90% that would be fine okay so spacing is here right so you can see some padding is here if you want to decrease the padding you can see now I've decreased the padding a little bit okay so now inside this input container we have the label also so I'm just going to say that we have the label so we're going to style this label tag okay so I'm just going to say some basic styling would be there for this label tag okay uh I'm going to say that the color of this label tag would be what white okay yeah you can see that the color of this is white and then I can just see some gap between the input items gap of around five pixel would be fine so you can see some gap between the items name and this input field do and this input field email and this input field you can see that yeah there's some Gap right so you can see that now we have some things here actually I want to decrease the padding uh okay let's style the let's style the this first okay then we'll see the padding okay so I'm just going to say that it's going to have some font size so font size would be around 18 pixel okay let's check for 18 pixel you can see that's 18 pixel let's decrease it a little bit to 14 Pixel Perfect now I'm going to say one more thing that is uh we'll style the input field okay we'll style the input field so input field okay so first of all uh I'm just going to say that there is no border okay there is no border and then I'm I'm also going to say that background color is transparent so it's transparent okay so you can see background is transparent and border is what one pixel solid white okay so you can see one pixel solid white yeah that looks cool right so now that's done and after that guys we have full name do right if I select the data of birth let's select this okay perfect so now after that uh we are going to say that color of this would be also white color of this would be white okay so color of it would be white so you can see color of it is white now it looks fine okay now after that let's target the E let's target the password field also so it's actually input container one okay input container one and I'm just going to say again things would be exactly same in this case also can see exactly same but what we need is we have a row inside this okay so we're going to say that uh we have the label first of all same as it is same as it is just copy this and we going to have have the label for password so input container one you should use Ram instead of so that responsiveness would be easier uh yeah it depends like I'm using pixel because I just want to make a design like that okay I'm just going to make a design like that later on if you are making responsive then you can use REM that's a good suggestion okay so uh yes yes yes you can see that label is also here now similarly we have the input field so I'm going to style this input field but before that you can see that it has a row okay it has a row so I'm just going to style this input row okay so inside this input container one the main Moto of this video was to explain the logic how files are handled how input field is handled okay designing is up to you okay you can design any way okay so yeah I'm just going to say that display is flex this time I want it as a I want the I I want what I want the password field as well as this button something like that okay so if I click on this you can see that not it's visible hidden visible hidden right so you can see that not it's visible and hidden okay perfect so what you want here is uh now I would simply say that first of all why is this email visible let me just check okay okay perfect right so yeah you can see that we need to Target the password field now so for that we have the input row inside that we have to Simply say that the input field that is the password input field I'm going to say that first of all background is none okay background is none perfect okay so I'm going to remove it for now okay perfect and I'm going to say border is also none okay and then guys we're going to see that uh we're going to have one more thing that is outline is also n out line is also n okay so let's remove things from here so you can see now it looks empty okay so now around this we need to add some water okay so I'm just going to say that this input row is going to have some water so water one pixer solid white okay something like that so you can see that now I have a border okay so don't worry about this this happening because of autofill which generally happens in every website but yeah you can see now I have a border I can just give it some padding also so padding of around five pixel would be fine okay five pixel would be fine and one more thing guys you can see that this input field is having this styling okay padding is around this much okay now we have to style the SVG so I just see that inside this row we have SVG also so just St the SVG that is the icon so I'm just going to first of all say that this icon color is white you can see icon color is white I want to give it some width so I'm going to say that the width of this is around 15 pixel is smaller I guess yes let's make it 35 okay 25 would be final okay 25 would be final yes so similarly we're going to give it some height of around 25 pixel right so you can see that now it's styled a little bit but the problem here is again you are having some padding okay why we are having some padding because here we have given some padding I'm going to remove it from here okay uh we have to make it display Flex so okay I'm sorry this row was display Flex I just want to say that justify content as space between that's it so you can see now it's on left and right okay so if I remove the password for now you can see that that's the field similarly for the uh I can I can increase the padding if I want so from top and bottom I want more padding so I'm just going to say that some around 10 pixel padding would be here okay yes so now guys you can see that yeah this is visible this is visible right I can add some B radius also if I want so I just say that the B radius would be of around 10 pixel okay 10 pixels so you can see that of around 10 pixels there is some border radius okay perfect so now you can see that as soon as I type things here you can see it's perfect I just need to add one uh color also if I want to add color I would just say that color would be what white okay color would be what white so you can see that the color is white right and as I click this you can see that that's a form right so I can just do one more thing guys uh I would just say that this container input container form container actually is going to have width would be of around [Music] uh 100% okay 100% And then I'm going to say that maximum WID here I can decide the maximum width would be of around so 400 pixel or lesser 400 pixel is fine okay so now in some case let's test this if in some case now let's try some responsiveness it's a little bit responsive also so you can see that yeah now it's a little bit responsive okay so you can see that now if you are watching it a mobile view that's also fine you can add some margin also if you want I can just say some margin of 10 pixel would also be fine for this okay so yeah there will always be some margin so you can see that yeah there is always some margin so it's responsive anyways okay you don't need to do anything much here right now after that guys let's target the button finally we going to Target the button actually we have the button directly we going see that a button okay so we'll just say that there would be some button and some styling for that button would be here okay so we we have to just style this uh which is inside the form container okay so I'm just going to write it just like that so form container inside that we have the buttons we can't directly style the buttons in next so we're going to write it like that okay perfect so you can see that the button is also style we're going to give it some margin also so some margin from top and bottom of around 20 pixel let's check so guys you can see that that's a margin and that's how it looks okay so now more thing you can just give it some filter blur also if you want I can just give it some blur let's check how we can give it so I will just say that filter would be blur okay let's say if I give it blur of 50 pixel so you can see that that's a little bit of blur I can actually change it later on also if you want or for now I'm just going to give it some transparent background that would be better okay so uh this was the form page and this was the form container I'm just going to say that it has a background and let's say same background but a little bit of uh lighter right so you can see a little bit of color change would be or I can just pick the white color and I can just give it a transparent like that so it looks way more cooler okay so you can see that yeah it's a little bit more cool and one more thing if you want a more better design if you want a more better design what you can do is you can just give it some water bottom Also let's try to give it some water bottom uh this the input container uh instead of this whole border we can just give