1
00:00:02,280 --> 00:00:05,200
It's now time to practice what we learned.

2
00:00:05,200 --> 00:00:06,033
And for this,

3
00:00:06,033 --> 00:00:08,840
I want you to build this form.

4
00:00:08,840 --> 00:00:11,750
As always, if the colors are different,

5
00:00:11,750 --> 00:00:13,720
that's not the main focus.

6
00:00:13,720 --> 00:00:17,660
You should just try to generally build this form

7
00:00:17,660 --> 00:00:21,740
and come as close to that form as possible.

8
00:00:21,740 --> 00:00:22,573
Now, of course,

9
00:00:22,573 --> 00:00:26,880
it's mostly about the HTML input elements which you use.

10
00:00:26,880 --> 00:00:29,130
Please note that we'll have different elements

11
00:00:29,130 --> 00:00:30,840
for just a name,

12
00:00:30,840 --> 00:00:32,020
for an email address,

13
00:00:32,020 --> 00:00:33,490
for a phone number.

14
00:00:33,490 --> 00:00:35,590
Then a longer element here,

15
00:00:35,590 --> 00:00:38,600
which has more space for the message.

16
00:00:38,600 --> 00:00:41,360
A dropdown here for selecting the channel,

17
00:00:41,360 --> 00:00:43,540
how we found this page.

18
00:00:43,540 --> 00:00:45,350
Then some radio buttons here.

19
00:00:45,350 --> 00:00:48,310
And then also this check box at the bottom.

20
00:00:48,310 --> 00:00:50,110
And we also have some validation.

21
00:00:50,110 --> 00:00:52,350
If I try to submit this in an empty state,

22
00:00:52,350 --> 00:00:55,970
I get this automatic warning by the browser.

23
00:00:55,970 --> 00:00:58,010
And that is your task.

24
00:00:58,010 --> 00:01:01,160
Try building this form, this entire page,

25
00:01:01,160 --> 00:01:03,150
on your own, from the ground up.

26
00:01:03,150 --> 00:01:04,620
Add this form.

27
00:01:04,620 --> 00:01:08,640
Also configure the form submission with what you learned,

28
00:01:08,640 --> 00:01:10,680
though, that's not too important

29
00:01:10,680 --> 00:01:14,010
since we don't handle the form submission anyways.

30
00:01:14,010 --> 00:01:17,360
But make sure you add all those HTML elements

31
00:01:17,360 --> 00:01:20,150
for handling the input, for having validation,

32
00:01:20,150 --> 00:01:25,120
for structuring the form, and also add some styling.

33
00:01:25,120 --> 00:01:26,940
Styling, of course, is up to you.

34
00:01:26,940 --> 00:01:30,980
You get a general idea of how you could style it here.

35
00:01:30,980 --> 00:01:33,960
Please note that the buttons also look differently,

36
00:01:33,960 --> 00:01:37,470
that I got slight hover effects here for those buttons,

37
00:01:37,470 --> 00:01:39,870
and that we also have a focus style

38
00:01:39,870 --> 00:01:42,700
if I click into one of these inputs.

39
00:01:42,700 --> 00:01:44,460
And now, with that,

40
00:01:44,460 --> 00:01:46,050
that is your challenge.

41
00:01:46,050 --> 00:01:48,700
As always, try it on your own first.

42
00:01:48,700 --> 00:01:50,120
In the next lectures,

43
00:01:50,120 --> 00:01:53,380
we are going to solve this together, step by step

44
00:01:53,380 --> 00:01:55,840
and definitely use these lectures

45
00:01:55,840 --> 00:01:58,370
to compare your solution to mine,

46
00:01:58,370 --> 00:02:02,550
and to also, again, practice all those core concepts,

47
00:02:02,550 --> 00:02:03,600
but as mentioned,

48
00:02:03,600 --> 00:02:05,750
definitely give it a try on your own first.