In this tutorial, you are going to learn how to make a website using HTML & CSS and add some functionality to a saved user input into our local server, so be sure to watch the complete series of videos and start building your awesome website today.
Download the Complete file here: #Mirror1,#Mirror2
Hello everyone welcome to tutorial number three our web development tutorial in the previous tutorial we created this field input field for our users, In this tutorial, we will assign an id to our elements so first, we need to open our editor, so first we need to change some id so I will rename it then you will assign a placeholder this will give hint the user, username and you need to save now if we view the preview to our HTML so let's open this is in file explorer we need to go to our project instead of demo now if we try to view the file we should see the order of user names also we just want to change
confirm password will be text password so I'm just renaming the id or elements so then we also want to put a placeholder in our email to inform the user that it must need to be these four mods the next will be to put the fields of our password so we can prompt the users we can put up these folders this one here
okay let me just assign a placeholder to the input elements so I'll just put one icon so we can know or the user will know that it could be a password so it does a minimum of seven characters and click save placeholder will be the password so you can see the icon before okay so let me just style to our CSS so we need to go to our css file so let's open the CSS but first I would like to rename the CSS fine so to avoid conflicts to our to avoid conflicts because we have the same name register PHP and cc so I need to rename the create a system's files
register I will rename to something else so it will not conflict with the other files register user so I will put name register user CSS now I will go and edit just the link so we'll put register user so we rename our file so there is the user and we need also to modify the name of the host reference now we have I need to assign an id so with an id and saved.
We have also assigned the class from the form elements and also to the build sets so I'll just try to debug it we can debug it, so if you want to change the background for example you want to put some image in the body so you can just assign an image background image but we need to type it in a department
image background image run image will be maybe URL so we need to type URL open and close bracket inside we can just you can place the reference file name the URL so I need to refer to the image folder and let us try to use for example a particular prompt or use this one I will try to copy and put it here so I will just put image folder and slash forward slash and then I paste I will paste so
we will paste so that the extension of our files jpeg I think it's a jpeg file so jpeg so let's save we have to put display one hundred percent so let's see 50 percent, okay if we correctly uh assigned a reaper CSS to it's speeding we should see that it will work okay you can see the background so let's open also we can see that we properly prepared the CSS file for student statement documents but the problem is the backgrounds keep repeating so what we will do is uh we need to get that okay so background
let me just try to background repeat so we need to put background I think to try to open
so let me just view, it so you can see that it is redundant so it keeps repeating and we need to fix
background-repeat if it will not work yeah we can just fix it later so because it is redundant so
let me just open it so it keeps again so how we can fix these problems so we need to we need to finally fix this one so we just both display black and what you do will be marching so I'm gonna do to do it again okay the same so this so you can just even remove this one
right now we will just remove the image so you will not put some image into the body but we will put it into the form instead or in the table now we're just okay so
what we need to do we need to style the table and the form so I'll go to the uh CSS file move down I will put the one I think so first we need to debug that line so that that okay and we were just checking if we can debug the form so you can see that there is already a grid that symbolizes the form now let's do the same thing for our field so what is the id so I will just style also the builds or just the id will be the film I think to put that line so then you can see the build so the bill is covered by the bomb
okay so it is built so the id is here and it is covered by the very point so that's why we cannot see so we just remove this from and save it so you can see if we can debug let's set okay so let open back okay we didn't see from the field so you see the green so okay just make sure that it is working so you can just go to register PHP and we will let's see it when it goes and saves build is not working so if we try to do it back there is no decrease it entirely covers the whole pitch of the document so the build seems to be not working so I will just okay the build is not working yes so what if I remove this fire and I will create a build set instead so I will just change this one too built it and
just open so we can see that the building seat is decreasing and you can see the outline green but I think we should increase the build set so we just put display 100 instead you can just leave it by default, okay you can leave it by default so now if we try to open so you can see that builds it was outlined in green and you can see the table so let's try to debug our table so in the registered space so we are table registered speak simple idea with eventually
and just put the outline this time will put solid blue top x hopefully, if we turn it right you can see that there is an outline of glue, okay so we can see the table so we debug the table now we need to put a margin to our table so we just put the margin to our tables margin so it will automatically set a margin vertical and it will automatically move in the right place so restart the table so the table is gone now we didn't see the table so so we should replace it to margin instead of watching that so I'll just try it again
the table is gone so what happened to our table okay so it is moved towards the center so the table is moved to the center but our build set is covering the entire page so what we will do we can decrease the size of the build set and or we can just leave it and leave it as it is or but let me just put it builds it so let's just put the height will be also, 250 for 250 px 80 px save margin would be automatically
it's the dukes we demo hp and try to do so we see that part builds it smooth at the center we decide now uh to add some padding we need we can add fading for table and also to our you know we can add funding button to our build set so we can just put padding adding then go to the bottom so we need to add button buttons we need let's just try to add some in okay so there are no changes because we set the written height okay so so because we already fixed the size of the plate set so we cannot sign
so okay so we're gonna instead of area padding we can just move just try 10 px and we need to close it again so I think the time is low now so just okay let me just move a little bit so you can see that it's not there's nothing happening so okay there's nothing happening so what we need to do you can just increase the size of this one to 1050 50 px just remove the t1 merchant button you can put fading instead padding and you can put things for listing putting pegs then we need to okay so just try to see if it is working now so let me just go back to them instead of the demo, okay so we have now seems like
we add the height so but we can also put a margin tab to our build set so you can see 300 instead now we can put a margin-top so margin-top so it will be five percent or ten percent so you can just ten percent than just try to okay it's not more field sit so 100 but the fieldset does not work okay so it is not good to let apply to the pencil now let's try the form okay
but I will remove this marginal group so I'm just trying to imagine it to see if the build set will put margin to the top so now you can see you can't see the build set and we don't know where's our build set right where the build set really goes down so we need to do the build series really go down so we need to put in per second and to put margin margin-left will be said 45 percent see let's try
that is right there moving a little bit, okay so 45 percent is so this is how you are doing the style we are in the CSS so uh let me just here so let's see that, okay so it's moved so we need to decrease a little bit so to make it look like in the center so let me just put 33 or 32 just uh so we can see hope it is in the center so we go to demo hp so these ones look great so now we can see
we can see the field set and the table we also add a filing to our table now we are doing in the next tutorial will add some maybe images to serve as background to our registration form so thanks for watching guys see you in my next tutorial
#Home Screen Page HTML Code:
#HomeScreen Page CSS Code:
0 Comments