WEBVTT

0
00:00.380 --> 00:03.080
Welcome to this very, very quick assignment.

1
00:03.080 --> 00:05.360
I just want to recap before we move on.

2
00:05.360 --> 00:10.670
And sometimes ... well, often, you know, having to think about it yourself and code something up yourself

3
00:10.670 --> 00:11.720
really, really helps.

4
00:11.720 --> 00:12.680
So here we go.

5
00:12.680 --> 00:14.990
A very, very simple assignment.

6
00:15.020 --> 00:16.430
What do I want you to do?

7
00:16.460 --> 00:22.190
I want you to wrap a form section in a fieldset element.

8
00:22.400 --> 00:29.000
I want you to label the fieldset, "Choose your favorite fruit" and I want you to have 3 input

9
00:29.000 --> 00:32.930
elements that allow the user to select their favorite fruit.

10
00:32.960 --> 00:38.930
Now, we haven't yet discussed the input type of radio, so that's just one clue I'm going to give you.

11
00:38.960 --> 00:45.290
When you're coding up this section of the form, make sure you use an input element with its type set

12
00:45.320 --> 00:46.130
to radio.

13
00:47.000 --> 00:49.790
So that's what I want you to do. As an extra bonus,

14
00:49.790 --> 00:55.790
what I've done, and what I'm going to show you in the solution, is how to animate and create our own cool

15
00:55.790 --> 00:56.600
functionality

16
00:56.600 --> 00:59.450
when it comes to selecting an item, look at that.

17
00:59.780 --> 01:01.650
How cool is that red dot?

18
01:02.690 --> 01:08.300
And the reason I'm doing all this is to show you that although the examples I've been using up until

19
01:08.300 --> 01:11.660
now have been rather ugly, you know, they haven't looked pretty,

20
01:11.690 --> 01:18.890
it's very easy to apply CSS styling to really transform what we've been doing into creating very cool

21
01:18.890 --> 01:20.480
and intuitive forms.

22
01:20.480 --> 01:21.770
But I don't want you to get lost.

23
01:21.800 --> 01:25.770
We are going to be using transition properties and transform properties in CSS.

24
01:25.790 --> 01:29.510
If you don't know CSS, don't worry, I'm going to show you the solution.

25
01:29.510 --> 01:32.240
But again, this course is not about CSS.

26
01:32.270 --> 01:34.730
It's about forms, and how to create forms.

27
01:34.760 --> 01:37.910
This is all about the fieldset and legend element.

28
01:37.910 --> 01:39.110
I want you to just try.

29
01:39.140 --> 01:41.000
You know, let's just refresh this page.

30
01:41.120 --> 01:43.310
I want you to try and just create that by yourself.

31
01:43.310 --> 01:47.840
And then if you don't know how to do the CSS, don't worry, I'm going to go through the solution with

32
01:47.840 --> 01:47.960
you.

33
01:47.960 --> 01:48.800
So give it a go.

34
01:48.800 --> 01:52.910
Have fun, grab a coffee, grab a Red Bull, and I'll see you in the solution video.