OK, so you've seen what the form is going to look like, and, of course, the best way to learn is
by doing so.
Let's jump into it and let's create a very simple form.
Actually, I'm using that word with a bit of "tongue-in-cheek", because although it's a simple form,
there's a lot happening and we're going to take it quite slow.
But the rest of this section, I want us to actually build this form together before we go into more advanced
sections.
Okeydokey.
So the first step is to create our heading section, telling the user what the form is all about.
So you can see here I'm using Visual Studio Code and it's empty. So let's create a file called,
first-form.html. And now we can start coding our form.
So let's start with a very simple HTML template and let's title our document,
I don't know, Personal Profile.
And I do want to include a CSS file. We haven't put one in here yet, but we will. And let's just name
it styles.css.
Very simple,
nothing you haven't seen before.
And as I mentioned, the very first thing we need to do is just code up our header, telling the user what
the form is all about.
This is what it looks like.
And in programming, there are many, many ways to skin a cat, but the way I would do it is I would
wrap this all in a <header> element.
So let's create a header element, and I don't know, let's have a class called "profile-header".
Very simple, and we called it Personal Profile.
We can wrap that in an <h1> tag. And then let's just put a paragraph below it and we want some emphasis don't
we?
Here, we can say update your profile,
so others can get to know you better.
So there we go.
Nothing
very difficult. Now I just want to open our Live Server.
There we go, and you can see it's pretty boring and dull. And that's exactly why we created this
styles.css link.
But right now, this file does not exist.
So let's quickly create that.
We'll call it
style.css.
And let's start coding.
I just want to mention here, let's utilize
the latest CSS variable functionality
so that we can define some root level CSS rules. And this course is not about CSS, but hopefully
it'll just give you a bit of a flavor. Um, we're going to just define some, you know, CSS variables
here.
And we're going to be using these as we go along, and I'll tell you when we do use them so you'll know
why we're putting them all here.
But I just wanted to define things so we don't have to keep defining it later on in our code.
I always love putting in the hard work at the beginning to make the rest very simple.
Let's define another one called
--label-padding-right.
label-width,
width.
We're going to get into labels later.
I forgot the two dashes here, silly me.
And then, of course, we've got our form controls or our widgets, and I want to define their width as well,
let's just say 250 pixels.
I keep forgetting those dashes ðŸ™ˆ.
And what about --border-radius, um,
so it's slightly rounded.
So it's not an exact square ðŸ”².
And then let's define another --main-padding variable.
--input-text-size, let's say 14 pixels.
And let's say the --color-main is, and we will define a random color here, #5D
6063.
So there we go, there are our CSS variables. (music starts)