Welcome back to yet another cool challenge.
And this challenge is super cool because we're building a form, a very, very simple sign-up form I may
add.
And just a piece of advice when you are creating a sign-up form, keep it as simple as possible.
You don't want to scare users away with asking for too much detail at the beginning.
So anyway, this is a very, very simple form and you should be able to actually do this now, I think
give it a go.
What's really cool is we are not using any JavaScript here.
This is pure HTML and pure CSS.
So how does this form work?
Well, we have three widgets: username, email address and password.
They are all required, so you cannot submit the form without filling them in. And the browser gives
us front-end validation right out of the box.
When the user correctly enters information like his name, we get a green background and we get a little
check mark.
It's telling us we're all good to go with this form.
With an email address,
when the user starts typing an incorrect email address, it tells the user, "hey, your email needs to
be valid".
So of course when an @ symbol is included, followed by text, we get a valid email address according
to the browser.
Remember, from a front-end point of view, we cannot verify that it's an accurate email address.
That has to be done with server side code.
I'm talking about now front-end validation.
This is now regarded by the browser as a valid email address.
The password is also really cool here, because the password we've defined, or I've defined, as having to
meet certain requirements.
It's got to be at least six characters in length, at least one lowercase, uppercase and one number.
So when the user just types random text, they get an error message saying your password must contain
at least six characters, one uppercase, one lowercase, and one number. When the user does that ...
boom ðŸ’¥.
It's all sorted.
And of course the user then can submit the form and you can redirect it to the login page.
Whew, so there we go.
This is what I want you to create.
It's going to be relatively simple, but we are using CSS, pseudo classes and elements quite a bit.
I can't wait.
I'll see you in the next solutions video.