My dear students.
I want you to sit back in this section, get a cup of coffee ☕ and just relax ☺.
Why am I even doing this section?
Well, I'm doing it because I just want to have some fun.
This is not really anything significant
you're going to learn.
In fact, one of the reasons why I wanted to do this simple, fun example is so we can talk a bit more
about fonts.
We haven't spoken a lot about fonts in this course.
I know maybe I should have done that in the CSS section, but I just wanted to do it via an example.
So here we go.
We're going to have a very, very simple form.
In fact, it's not even really much validation.
I'm actually there's no validation I'm doing on the front end.
I'm just wanting to show you how to build a quick and easy form, using CSS and I'm going to be using
the CSS grid system.
So I'm going to teach you a little bit about that as well.
So you're going to learn a few things.
It's going to be fun.
It's going to be exciting.
Grab your coffee.
And before we begin, before I start the solution video, let me just jump over to the computer quickly
and let me show you what the form looks like, and what we're going to be building together.
I can't wait.
This coffee really is good.
Here we go.
This is the cool form I want us to create.
And doesn't it look funky?
Man, it looks cool.
And let me just walk you through it.
Right.
So we've got our message.
This is where obviously the user types their message.
You can see we've given it very specific styling.
And yes, I've wrapped this in a textarea element and of course the user can type their own custom
message.
I like the grass this side of
the world.
It is really green.
The "to:" would be going to our server.
So this is not an editable text input.
And then we've got "from".
This is from Wally, obviously.
And then what's your own email.
So this could be wally@gmail.com.
Very, very simple form.
Right.
Very simple form.
We've got this really cool "Send your message" button.
There's a hover effect. The user submits, and it gets submitted in the URL.
You can see it there.
So a very simple example, and I've used the grid system here, so if we inspect this form,
right.
Have a look here.
Can you see the word grid?
Let me just zoom in slightly.
Can you see the word grid?
If I click on that word grid, you can see how we've set up this postcard.
We've got two columns and we've got four rows.
And that's what's cool about working with the grid.
We can be very explicit as to how we want to split up, or proportion, our elements we're working with,
in this case a form. So very, very cool example.
I know it's not that in depth.
The reason, like I mentioned I want to do this example is I want to talk a little bit more about fonts
with you.
And you can see here we've got custom heading fonts.
Your message, to, from, and reply ...
those are all custom fonts.
They're not standard fonts that your browser will have.
Also, when the user starts typing a message that is now a different font.
So I've imported here two different types of fonts, so I'm going to talk about how I do that.
I'm then going to talk about this grid system and then we're literally going to just code up this form.
It's not going to be complicated by any means.
I just wanted to have a bit of fun with you.
So get ready, buckle up and I'll see you in the next lecture.