Coding a signup form with HTML and CSS

Key Takeaways

that was just an absolute slaughter I knew that one of them would probably be a bit more popular than the other ones but that the it wasn't even close hi my name is Kevin and if you didn't see it last week I code it I keep saying coded up I didn't code anything this is like my fourth take and every time I say code I designed three different to sign up things for like an email you know the name email submit things sign up for my newsletter type of deal and one of them won and it won by a longshot so in this video we're coding up this design right here it's gonna be fully responsive we're gonna make it just really really cool really awesome I think the best one one as far as at least being the most interesting one I know a few people said stuff like the one of them especially the first one a few people said is outdated I think it depends on the layout and maybe just standalone like that yeah yeah but I do think for the purposes here the best one did one it's gonna be the most interesting one to design so let's go and listen before I said code when I meant to say design and now I said design when I should say code let me stop fumbling over my words and let's go and code it up alright so here we are in vs code I'm ready to go I just have a really basic document here I am linking to my own CSS file as well as the Google font here PT size narrow which I used in my design so let's get started on this we'll move down a little bit and the first thing we want is a form form there we go I don't really want to go anywhere right now and I'll just give this a class of form because I like having classes on everything inside my form what I think I'm gonna do is do I'm gonna have a form item so we have my form item and in there I'm gonna give this we're gonna put in our input so type text is awesome but on the type text here we're also going to want to put in a class and I'll call it form input so we can style that a little bit we can give this the placeholder because this is going to be my first we just wit name what was put a name like that and I'm also going to put an area label on here I'm in a bit of first name I want to keep it short because that one's gonna be a little tighter it's a little small so we'll do a placeholder of first name with an area label equals to first name because we don't have a actual label so because we don't have an actual label that we're putting on it we're just using a placeholder I want my area label here for accessibility reasons so that is there there we go my first name we can see and I can copy this whole little div here this one is going to be my email so we can switch that over it's still a form input this will just be email and this one will be email nice and simple there we go and the last thing we need is a button so my button will get class equals form button and I'll also give it a type is equal to submit so we can submit our form with it and here we can just put in sign up there we go so as far as that goes that is everything we need on the mark-up side I believe I don't think we're gonna have to come back here so we're going to go over to my CSS now you'll notice it says s CSS I could be writing sass I just I have my demo folder set up to be sass files but I'm not going to be writing any sass in this one we're just gonna be writing regular CSS so let's get started on it so the first thing I'm gonna do is just up here make a CSS I'm thinking constant for some reason but it's not a constant it's a not a variable it is variable sort of custom property there we go we have my custom property where I'm just going to store my color and I'm gonna come to my body just to do a few things gonna give it a min height of 100 VH we'll give it a display of grid and normally I would not be doing this but place items Center I get an error whenever I do place items I don't know what is up with that maybe because it's not so widely supported I'm not sure but what that will allow us to do is Center everything indirectly in the middle of the page no no I like doing this to Center stuff on the page for demos place items seems to have lower support than most stuff so like you could do as a display flex and justify content to line items and all that so I'm just saving a line of code just because it's a demo so font family can be Pte sans narrow like I mentioned with a fallback of just a saucer cool and now we can get into the nitty-gritty make sure we do things properly there and we can dive in so let's grab our form and start setting things up so display of flex now one thing is I only just design this as like this I didn't design a mobile version of it we're going to be doing both so we're going to start with the mobile version and because of that so display flex we'll put them all next to each other so I'm going to do a flex direction of column on here so instead of that they are going to stack this way around you'll see it does help structure up my button which will make things look a little better I will put on my box shadow so a box shadow of let's say 40 pixels rgba 0 0 0.2 and I said point to as a question mark because you never really know what these things that's not terrible actually because we're gonna be playing around with everything I want it to be really subtle maybe I'll drop this down a little bit there we go again I like having it nice and subtle I'm gonna add in a border radius on this because obviously it's nice and round here now I think if we did a full border radius like that it wouldn't look so hot and actually see oh these are it this doesn't look like it's doing anything let's put a background on here background of red that was not even going at work I'm seeing you and we'll give it a bit of padding padding 5 pixels just so we can see there is a border radius on it it's working I think that's even gonna be too big we're gonna drop it down to 20 and the reason that I find it's a little bit too big a third so we can see that it's working but the problem is these things are sticking out from it so instead of a what we can do is an overflow of hidden so we can hide those parts that were sticking out from there now it's hard to notice but let's take that padding off because by doing that there we go so now you can see we're encapsulating everything in there so we don't need the background color or that and we're sort of stuck in this little bubble that we're making now I also want to make it a bit bigger so let's give this a whiff of like a percent which is probably gonna be way too big I am I'm gonna go to my inspect here so if it in my dev tools in chrome this button that I'm looking for is on this side but I'm in Firefox so it's this one here which is responsive mode I get lots of questions about responsive mode when I use it so you know it is built into the browser it's nice and easy to use so yeah it gets too wide so with 80% but let's give this a max width of I don't know 350 ish pixels or something like that just to stop it from exploding and if we have to play with that I think that's still give me too big let's drop it down a little bit cool cool cool so I think that's okay for the forum itself now let's come on to my forum input because I want to set the font family on this so font family can be inherited and why this isn't the default who knows we also want to text transform uppercase because everything should be capitalized and my font weight I did use the bowl that doesn't look too bold in the design down below but I definitely used it so let's a see that's starting to work a little bit and you know what this can also be on my button like that let's check that out you might notice when I save like button drop down there I do have prettier on so sometimes when I save you might not don't remember seeing it come in on the index but if I hit save and things shift a little bit it's just from prettier kicking into action the font size is way too big font size what I did it 12 maybe it's still too big it is gonna be 10 which is tiny I usually try that makes me cringe I'm so used to using big font sizes and we problem with some letter spacing on here I have we start at one and work my way around from there that's not bad maybe a little bit more try that okay and let's do a border of zero because obviously we don't want these borders to be on there much better look we're really careful way there I think maybe not quite but so this is on my form input so the input item itself but we have our form we want to give it some space right so like padding just to create a bit of a spacing around them and so they're not touching the sides there so well already oh so much better awesome now we also want our placeholders to we want to change the color of these when we click in it so it's it's noticeable what's going on because we don't really have a focus state otherwise so what we can do is my form input input placeholder and we can say the color of that is my power color the other color color I just called the color before because it's my only color it's not the best name for a variable but again we're just doing a little sing single little demo here so that's a good start the only problem is we can't really see it too well so um I want to what am i doing I don't want it to always be blue I only want it to be blue when I'm clicked inside sort of indicate that I've clicked in so on my placeholder let's here we're gonna add focus for focus placeholder so when I click and it focuses the placeholder is going to change color and we're also in the opacity like point eight five maybe because I do want to make it a bit darker there we go so now it makes it and even what I think I'm gonna do is form input placeholder capacity of like 0.4 don't want to get too low we do have the area labels on there but it's probably a bit too much there may be a 3/5 instead before there we go I think that looks pretty good and by highlighting it we are showing which one we're definitely in now we want that line they go between no obviously I don't want it this way in this case we're gonna want it to come this way I just realized I put a border of zero here but I still have a border oh this should be forum button not just button formed button how did I not notice that before it will fix up the button in a little bit but let's come and do that line so before that we can do our form name a new form item and then my first of type and I'm going to add a position of rel relative on this so first of type it's gonna select my first form item which if you remember is the parent here I'm I don't want to select my input itself I want to select this whole div I don't think we're gonna need this div on the small sizes but I think it's gonna come into play at the larger screen sizes just for flex alignment and stuff so the first of types of the form item so I'm taking this parent div because on that I'm going to place a pseudo element and actually I wouldn't be able to use this pseudo element on the form input I'm not I don't think because form inputs are they replaced elements I'm not sure images or replaced elements maybe I could put it on an input but first of type position:relative so then I can come and do a form item first of type after so get into pseudo element so that means here I need my content I need my position of absolute I had a question the other day about whether we need this to be a position of absolute or not it doesn't have to be if you do a display:block you don't actually need to assign a position to a pseudo element so fun little fact there and if you want to know more about pseudo elements I do have a little series on them let's just think I'm just gonna do right zero left zero bottom zero and give it a height of 1 pixel and we'll give it a color rgba 0 0 0 I want to be pretty settled so I'll just go with 10% and see what that looks like boom super I think I'm just gonna leave it like that we'll see I might move the line in a little bit but I'm gonna keep my sign up button sort of like it is now so I may be not so here with a form button so the background right where our color color itself should be white and I need some padding on it so padding I'm gonna do one m2m and we can adjust from there actually the left and right padding won't really matter right now top and bottom I want it a little bit more than that 1.25 you know I'm gonna leave I think I think I'm done I think that looks really nice I was yeah I think that works I think that works really well except I can't click out here but I can click here oh no let's fix that because that's a bit of a problem that we have to come here and I can't click out there form input background is red let's do a lighter color than red so we don't hurt your eyes too much pink so I need that to go the whole size so what I'm gonna actually do is my form item just lay flex is that gonna be enough for item border I just want to see one pixel solid red that's doing that so this is display flex flex direction of column there we go now it's going to search the whole size I could just give those a width of 100 I guess but I'm going to need this I'm pretty sure afterwards anyway so that will work and the reason that's half this is actually working is by default flex items stretch on the the axis the up and down way but because I switch the Flex Direction this way they're stretching left and right now so they fill up the whole space automatically so there we go okay so now we can actually click all the way out here which makes a lot more sense but now we want at the larger screen sizes so let's come down I think we're big enough so let's say at media only screen and what do we do and min-width again I'm just coming up with numbers right now that I think are going to work so on the form itself we need to flex direction to row and that should switch them to go next to each other my button is disappeared but that's okay at least it's working I think what we'll also do is the min width sorry max width is gonna have to change is the max width is way too small so max width can become 600 pixels and we'll see do I get my button back yeah my button has returned to that might be too big we'll do 550 that might even be too big we'll stick with that for now as we style the rest of it and I can always come back and change it so one thing that's gonna change is now I need this white space here I want to bring that around and actually I want to move my button over let's do my button the first form button margin-left:auto I could do it's in a flex parent so I could use like in a line itself or whatever but bang that is the easiest way to do it in my opinion this is also you need a border radius on there no border radius of terminal to him is that gonna be enough to round it off completely yep so here my max width we're gonna put a border I'm gonna try that looks like about 10 pixels solid white and we'll see how 10 pixels looks that looks okay but my border-radius needs to change now border-radius cuz it just looks ugly so we'll try the same to him it might be too small a perfection there we go maybe tens a little big and this I can come back to the original just so I'm not overriding for nothing because that was if you remember when I made my forum button sorry I'm scrolling a lot this was the top and bottom I just sort of guessed it this one so I'm I guess wrong is that perfectly round I'm gonna boost I think it's a little too much it'll go over that and I'm just gonna boost the border radius of these up to three cuz I don't trust that there yeah that looks a bit more pill-shaped I think I was missing a little bit of border radius on those cool I think that maybe the last thing we need to change is my forum item first of type after um and what I'm gonna do on this one now cuz it's clearly in the wrong spot let's go right I'm gonna do right zero top:0 bottom:0 width is one pixel I had a height so I'm gonna have to reset the height so to reset something we can put it to initial right top bottom I must have had a left so I'm also gonna put the left to initial as well and this drives me nuts that left is all the way down here so let's put left there right usually I anyway uh whatever doesn't matter let's see what that looks like Oh boom that worked and actually everything's more or less working I'm a little bit surprised the only thing I'm not sure about right now is actually if these are perfectly centered that looks like there might be more space on the bottom you know they actually do Ewing cuz I think let's just go to my forum button and padding to m1m see like right now I don't screw at my button on purpose it's kind of fun as a circle but I'm going to change that back see how these came off like they're not centered so the reason I thought that I was actually an in need those forum items is so I could do might as well just keep that here forum item so it's already display flex from what we did above outside the media query and because it's display flex and because the flex direction is column or a main axis is now up and down so it on my main axis I can do a justified justified content center I think that would there we go it would actually Center directly in that space in this case it wasn't really needed because my button wasn't too thick but I think it's safe to have that on there is just sort of some sort of like a little fallback to make sure that it works so this so we don't need this padding on there so we can get rid of it because I'm pretty happy with how it looks so not a hundred percent necessary but it could be if ever some numbers changed at least we know those would stay in the middle I thought we'd actually have to do a little bit of work to get this to be bigger than this one but it was sort of a happy accident now except it's not quite a happy accident that was it let's do that's the item form input just really fast order radius border one pixel solid red because I think they're too small yeah I want them I want email to stretch more so form item that's my input what about my item background think we're doing it the other way around this time the outside one is pink and the inside one has the border radius on it so I think so we have our 2 there flex items the problem with a flex item is the it always defaults like if you do this shorthand flex it's defaults to zero one I don't know what the percentage is 100% probably but the zero is the grow and this is the shrink so it's actually pretty much just trying to shrink and it won't grow so if we changed like if I save nothing would change now but if I set that to a 1 1 it's gonna say it can grow so they should stretch the only thing is I don't want this one to stretch I only worry I only want that one to stretch I don't want this one to because I like the sizing of that so let's turn that this off I can't see my pink backgrounds because these have my background color on it anyway so we can save there so what we could do instead and my form inputs are gonna go with it because there these are the flex these are flex parents as well this is where maybe I should have given this one act like a class name form name and form email or something like that but I will just go with my form item last of type you know I can do an F whoops and child - and say - yeah but we'll just do last of type is going to be a flex grow of 1 and that should mean I don't look at that and that means we can click anywhere in there so we don't need this anymore refresh ha ha there we go and this whole thing is the email field that I can click on SuperDuper I think that's done let's just shrink that back down and make sure it's looking good and it looks like it'll work at all screen sizes now it doesn't look exactly the same at this you know we're getting rid of that border that's on here if but I think it keeps the spirit of things alive at the diff you know here I'm cutting the whole way across my line whereas on here again we have that border that goes the whole way so there is a bit of a space but I think overall it's looking good at both I think with the border here it would probably look a little strange so I'm gonna keep it that way if you want to experiment it with it further by all means go for it I hope you like that I hope you enjoyed it I really had a lot of fun coding it it was cool not overly challenging but interesting and fun to do and yeah I enjoyed that so I really hope you did too I hope you learned something along the way if you'd learned something new please let me know it down in the comments below what it was that you learned cuz I like knowing when I can help you guys out and just a little bits of knowledge that you might have come across in that video even if you didn't learn anything leave a comment down below anyway I love talking to you guys and speaking of talking to you guys come and join us over at the community it's a discord channel it's free to join there's a link to it in the description below you click on that username and if you already have a discord it probably just throws you in the channel don't know how that works but it's easy to do like super super easy so come and join us and I try and get in there as much as I can and there's a whole bunch of really cool awesome dev people in there with all ranges of experience so come and join us please a big thank you to my patrons for helping support everything I do here at this channel in an especially big thank you to Fernando Jonathan and Lauren for being supporters of Awesome you guys are amazing with your super generous contribution so I really really appreciate that this is now gonna be closed captioned my last video is closed captioned if it's not the as soon as it's released really shortly after all my videos from now on should be a closed caption so thank you very much to my patrons for helping make that possible it's because of their support that I'm able to do it because without that it's just way too expensive so now you can actually watch these videos will your work on mute and you know that what's coming up is exactly what I'm saying don't do that though you might get fired but you can if you want to if you don't know about patreon it is a place where you can help support creators who make content you find valuable so I try and get my videos up early there and I try and give if a vlog and other stuff that is patron only so if you want a little bit of you're content on my said you can check that out and see what is on going on over there it once again link in the description and below thank you so much for watching all of this I really hope you did enjoy it and I'm guessing you did if you're still around here right now I look forward to seeing you again next week but until then don't forget to make you a corn in the Internet just a little bit more awesome