WEBVTT

0
00:00.350 --> 00:00.980
All right.

1
00:00.980 --> 00:06.320
This, I'm going to admit, is a very, very easy challenge, because before we can run, we need to

2
00:06.320 --> 00:07.310
learn how to walk.

3
00:07.310 --> 00:10.700
Before you walk through a door, you need to open that door.

4
00:10.730 --> 00:11.510
So here we are.

5
00:11.510 --> 00:13.850
We are just opening the door to harder challenges.

6
00:13.850 --> 00:16.310
This is going to be a very simple example.

7
00:16.310 --> 00:22.490
Like I said, all I want you to do is I want you to visually show the user when this email field is

8
00:22.490 --> 00:24.770
invalid and when it's valid.

9
00:24.770 --> 00:31.280
You can see here that the email is a required field that the user has to fill in and therefore it's

10
00:31.280 --> 00:31.550
red.

11
00:31.550 --> 00:32.510
The background color is red.

12
00:32.510 --> 00:34.640
It's showing us that something's wrong.

13
00:34.850 --> 00:35.990
It's not valid yet.

14
00:36.020 --> 00:44.390
If the user, however, types an email address abc@abc.com, we can see now that it's changed appearance.

15
00:44.390 --> 00:47.750
It's telling us that this is good, we're good to go.

16
00:48.170 --> 00:49.310
Very simple challenge.

17
00:49.310 --> 00:56.720
All I want you to do is I want you to have an input with type email and I want you to include CSS specifically

18
00:56.720 --> 01:00.690
targeting the :valid and :invalid pseudo classes.

19
01:00.690 --> 01:02.040
So what are you waiting for?

20
01:02.070 --> 01:05.670
Grab a coffee, give it a go and I'll see you in the solution video.

21
01:05.670 --> 01:06.360
Good luck.