WEBVTT

0
00:00.330 --> 00:04.530
OK, so you've seen what the form is going to look like, and, of course, the best way to learn is

1
00:04.530 --> 00:05.310
by doing so.

2
00:05.320 --> 00:08.340
Let's jump into it and let's create a very simple form.

3
00:08.550 --> 00:13.410
Actually, I'm using that word with a bit of "tongue-in-cheek", because although it's a simple form,

4
00:13.740 --> 00:16.590
there's a lot happening and we're going to take it quite slow.

5
00:16.590 --> 00:22.800
But the rest of this section, I want us to actually build this form together before we go into more advanced

6
00:22.800 --> 00:23.340
sections.

7
00:23.950 --> 00:24.630
Okeydokey.

8
00:24.870 --> 00:30.720
So the first step is to create our heading section, telling the user what the form is all about.

9
00:32.590 --> 00:38.200
So you can see here I'm using Visual Studio Code and it's empty. So let's create a file called,

10
00:38.200 --> 00:41.910
first-form.html. And now we can start coding our form.

11
00:41.920 --> 00:47.430
So let's start with a very simple HTML template and let's title our document, 

12
00:47.680 --> 00:49.900
I don't know, Personal Profile.

13
00:50.950 --> 00:57.370
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

14
00:57.370 --> 00:57.820
it styles.css. 

15
00:57.910 --> 01:00.240
Very simple, 

16
01:00.250 --> 01:01.720
nothing you haven't seen before.

17
01:01.900 --> 01:07.300
And as I mentioned, the very first thing we need to do is just code up our header, telling the user what

18
01:07.300 --> 01:08.500
the form is all about.

19
01:10.120 --> 01:11.170
This is what it looks like.

20
01:13.610 --> 01:18.620
And in programming, there are many, many ways to skin a cat, but the way I would do it is I would

21
01:18.620 --> 01:21.250
wrap this all in a <header> element. 

22
01:21.650 --> 01:28.490
So let's create a header element, and I don't know, let's have a class called "profile-header". 

23
01:29.430 --> 01:34.480
Very simple, and we called it Personal Profile.

24
01:35.040 --> 01:41.460
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

25
01:41.460 --> 01:41.640
we?

26
01:42.810 --> 01:45.000
Here, we can say update your profile, 

27
01:47.190 --> 01:51.720
so others can get to know you better.

28
01:52.710 --> 01:53.370
So there we go.

29
01:53.760 --> 01:54.390
Nothing

30
01:55.370 --> 01:59.060
very difficult. Now I just want to open our Live Server. 

31
02:06.360 --> 02:13.020
There we go, and you can see it's pretty boring and dull. And that's exactly why we created this 

32
02:13.020 --> 02:14.240
styles.css link. 

33
02:14.510 --> 02:17.160
But right now, this file does not exist.

34
02:17.490 --> 02:18.720
So let's quickly create that.

35
02:21.240 --> 02:22.990
We'll call it 

36
02:23.010 --> 02:23.750
style.css. 

37
02:25.290 --> 02:26.280
And let's start coding. 

38
02:26.760 --> 02:30.180
I just want to mention here, let's utilize

39
02:32.030 --> 02:35.870
the latest CSS variable functionality

40
02:37.340 --> 02:46.440
so that we can define some root level CSS rules. And this course is not about CSS, but hopefully

41
02:46.440 --> 02:52.040
it'll just give you a bit of a flavor. Um, we're going to just define some, you know, CSS variables

42
02:52.040 --> 02:52.240
here.

43
02:53.560 --> 02:58.540
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

44
02:58.540 --> 02:59.590
why we're putting them all here.

45
02:59.920 --> 03:04.000
But I just wanted to define things so we don't have to keep defining it later on in our code.

46
03:04.010 --> 03:08.050
I always love putting in the hard work at the beginning to make the rest very simple.

47
03:10.390 --> 03:12.550
Let's define another one called

48
03:13.580 --> 03:14.750
--label-padding-right. 

49
03:17.700 --> 03:18.660
label-width, 

50
03:20.620 --> 03:21.280
width. 

51
03:23.390 --> 03:25.010
We're going to get into labels later.

52
03:25.680 --> 03:27.590
I forgot the two dashes here, silly me. 

53
03:29.840 --> 03:35.260
And then, of course, we've got our form controls or our widgets, and I want to define their width as well,

54
03:35.260 --> 03:37.430
let's just say 250 pixels. 

55
03:37.820 --> 03:38.960
I keep forgetting those dashes 🙈.

56
03:41.810 --> 03:43.430
And what about --border-radius, um,

57
03:44.460 --> 03:46.280
so it's slightly rounded.

58
03:46.550 --> 03:48.680
So it's not an exact square 🔲.

59
03:49.780 --> 03:52.480
And then let's define another --main-padding variable.

60
03:56.450 --> 04:01.520
--input-text-size, let's say 14 pixels.

61
04:02.850 --> 04:09.360
And let's say the --color-main is, and we will define a random color here, #5D

62
04:11.410 --> 04:13.200
6063.

63
04:15.700 --> 04:20.680
So there we go, there are our CSS variables. 
(music starts)