WEBVTT

0
00:09.450 --> 00:15.270
I want us now to take a step back from the theory, and before we start getting really advanced into the

1
00:15.270 --> 00:21.810
different types of form widgets, what they all mean, it really does get advanced, I want us just to code a form together.  

2
00:22.590 --> 00:27.390
I don't want you to get bored in this section, but I thought it was very useful for us to now at least

3
00:27.390 --> 00:32.210
code together a form, so you can kind of get at least a feel for how we set one up.

4
00:32.910 --> 00:34.980
We are going to be going on a few tangents.

5
00:34.990 --> 00:37.530
For example, we're going to be obviously coding up some CSS.

6
00:37.780 --> 00:39.600
We're going to be looking at flexbox, 

7
00:39.600 --> 00:43.740
the box model, box shadows ...  really, this course isn't about CSS, 

8
00:43.750 --> 00:49.250
so if you are lost, if you don't fully understand what CSS is about, don't panic.

9
00:49.270 --> 00:50.930
That's not what this course is about.

10
00:51.180 --> 00:58.410
And in fact, in future videos, we're going to be, or I'm going to be explaining some of these CSS attributes

11
00:58.410 --> 00:59.510
in a lot more detail.

12
01:00.180 --> 01:02.010
So that's kind of, call it, bonus footage.

13
01:02.520 --> 01:05.790
But anyway, I just wanted you to be aware that this is what we're going to be doing now. We're just

14
01:05.800 --> 01:07.920
going to build a form. And I'm going to build it from scratch.

15
01:07.950 --> 01:09.420
I'm going to do the HTML with you.

16
01:09.430 --> 01:10.040
I'm going to do the

17
01:10.040 --> 01:10.890
CSS with you. 

18
01:11.310 --> 01:17.640
And I'm going to be kind of giving you a bit of hints, a bit of advanced tidbits now and again, when

19
01:17.640 --> 01:21.960
we look at the different form widgets. But really the remainder of this section is not meant to be

20
01:21.960 --> 01:22.530
advanced, okay. 

21
01:22.830 --> 01:24.960
We just kind of coding together,

22
01:24.960 --> 01:25.860
we're having a bit of fun.

23
01:26.310 --> 01:29.470
If you are very familiar with forms, know how to set them up,

24
01:29.670 --> 01:34.920
you know a lot about CSS, then you can skip this section entirely and continue the course on the next

25
01:34.920 --> 01:35.240
section.

26
01:35.820 --> 01:40.740
But really, if you can, stick with me, because you obviously learn a lot when you code with me and

27
01:41.440 --> 01:45.270
yeah, you pick up something new every time. But enough of this jibber jabber,

28
01:45.630 --> 01:46.460
let's get started.

29
01:46.470 --> 01:47.320
Let's get coding.

30
01:47.370 --> 01:50.670
So let me show you what the form is going to look like

31
01:51.030 --> 01:55.810
so you kind of have a visual representation of what we are doing before we actually start with the lectures. 

32
01:55.860 --> 02:00.000
So let me hop into the computer, and show you the form we are going to code.

33
02:02.670 --> 02:04.950
Alright, enough looking at peacocks.

34
02:04.950 --> 02:09.120
Let's quickly, quickly go through this form because this is what we're going to build together.

35
02:09.150 --> 02:11.430
Like I said, we're going to be building it from scratch.

36
02:11.430 --> 02:14.280
We're going to write the HTML and the CSS together. 

37
02:14.940 --> 02:20.280
And I'm doing this just to give you an introduction as to how to build a form

38
02:20.700 --> 02:25.590
and some of the very simple form widgets. Trust me, it does get a lot more complicated.

39
02:26.100 --> 02:27.390
But anyway, what are we building?

40
02:27.420 --> 02:32.810
Well, you can see we have a header here, Personal Profile, and then we have a few widgets below.

41
02:33.090 --> 02:34.410
So we've got the first name

42
02:34.410 --> 02:36.990
and of course, it's pretty stock-standard.

43
02:37.350 --> 02:40.890
We've got an email here, which you can see kind of like a text input

44
02:40.890 --> 02:42.420
but now we've got placeholder text.

45
02:42.420 --> 02:43.920
We've got text that we haven't written.

46
02:44.070 --> 02:45.000
That's just default.

47
02:45.950 --> 02:51.350
Now, if we start writing, let's just say our name is Tom, you can see that we've got red text,

48
02:51.350 --> 02:54.410
which indicates to the user that it's not quite complete.

49
02:54.410 --> 02:55.090
There's an error.

50
02:55.370 --> 02:57.590
And, of course, when we finish typing this out,

51
02:58.810 --> 03:01.860
gmail.com, the red text goes away.

52
03:03.250 --> 03:06.520
The next line is this "Allow push notifcations?". We've defaulted it to 

53
03:06.550 --> 03:10.060
yes, but it's a toggle of some sort. Then now

54
03:10.060 --> 03:16.210
we've got some sort of selection box where we can choose a profile color, blue, green, dark and light.

55
03:17.140 --> 03:22.400
Now, I haven't linked this up, so if you click dark, nothing happens, but this course is not about

56
03:22.450 --> 03:25.750
CSS so I don't want to harp on about that. 

57
03:26.140 --> 03:28.990
I just wanted to show you a different type of widget.

58
03:30.040 --> 03:34.450
We've got this profile description, which is, you know, we've all seen this, it's just a textbox. 

59
03:34.960 --> 03:38.080
And, of course, you know, you can change the size of this box, up and down.

60
03:39.080 --> 03:43.480
And then here at the very end, we've just got a checkbox, you know, I'm generally a happy person.

61
03:43.520 --> 03:44.390
Well, yes I am 😊. 

62
03:45.290 --> 03:51.150
And then we can just update this form, and all that data gets sent somewhere.

63
03:52.020 --> 03:53.990
Anyway, that's what we're going to be building together.

64
03:54.770 --> 03:56.640
Enough talk, enough jibber jabber.

65
03:57.260 --> 03:59.560
I'll see you in the next lecture.