WEBVTT 0 00:04.380 --> 00:05.610 My dear students. 1 00:05.790 --> 00:07.590 My dear students. 2 00:08.720 --> 00:14.340 I want you to sit back in this section, get a cup of coffee ☕ and just relax ☺. 3 00:14.820 --> 00:16.890 Why am I even doing this section? 4 00:16.920 --> 00:19.560 Well, I'm doing it because I just want to have some fun. 5 00:19.590 --> 00:21.570 This is not really anything significant 6 00:21.570 --> 00:22.290 you're going to learn. 7 00:22.290 --> 00:28.200 In fact, one of the reasons why I wanted to do this simple, fun example is so we can talk a bit more 8 00:28.200 --> 00:29.560 about fonts. 9 00:29.580 --> 00:31.500 We haven't spoken a lot about fonts in this course. 10 00:31.500 --> 00:37.260 I know maybe I should have done that in the CSS section, but I just wanted to do it via an example. 11 00:37.260 --> 00:38.100 So here we go. 12 00:38.100 --> 00:40.080 We're going to have a very, very simple form. 13 00:40.080 --> 00:42.210 In fact, it's not even really much validation. 14 00:42.210 --> 00:45.570 I'm actually there's no validation I'm doing on the front end. 15 00:45.810 --> 00:51.960 I'm just wanting to show you how to build a quick and easy form, using CSS and I'm going to be using 16 00:51.960 --> 00:53.670 the CSS grid system. 17 00:53.670 --> 00:55.710 So I'm going to teach you a little bit about that as well. 18 00:55.710 --> 00:57.150 So you're going to learn a few things. 19 00:57.150 --> 00:57.780 It's going to be fun. 20 00:57.780 --> 00:59.030 It's going to be exciting. 21 00:59.040 --> 00:59.940 Grab your coffee. 22 00:59.940 --> 01:05.550 And before we begin, before I start the solution video, let me just jump over to the computer quickly 23 01:05.550 --> 01:09.970 and let me show you what the form looks like, and what we're going to be building together. 24 01:09.970 --> 01:10.690 I can't wait. 25 01:15.510 --> 01:16.400 This coffee really is good. 26 01:19.060 --> 01:19.930 Here we go. 27 01:19.960 --> 01:21.910 This is the cool form I want us to create. 28 01:21.910 --> 01:23.140 And doesn't it look funky? 29 01:23.500 --> 01:24.640 Man, it looks cool. 30 01:24.820 --> 01:26.320 And let me just walk you through it. 31 01:26.320 --> 01:26.590 Right. 32 01:26.590 --> 01:27.810 So we've got our message. 33 01:27.820 --> 01:30.400 This is where obviously the user types their message. 34 01:30.400 --> 01:33.280 You can see we've given it very specific styling. 35 01:33.280 --> 01:39.160 And yes, I've wrapped this in a textarea element and of course the user can type their own custom 36 01:39.160 --> 01:39.900 message. 37 01:39.910 --> 01:43.780 I like the grass this side of 38 01:44.880 --> 01:45.780 the world. 39 01:45.810 --> 01:48.390 It is really green. 40 01:48.420 --> 01:50.310 The "to:" would be going to our server. 41 01:50.310 --> 01:53.490 So this is not an editable text input. 42 01:53.490 --> 01:54.630 And then we've got "from". 43 01:54.660 --> 01:56.550 This is from Wally, obviously. 44 01:56.550 --> 01:58.620 And then what's your own email. 45 01:58.620 --> 02:00.750 So this could be wally@gmail.com. 46 02:01.290 --> 02:02.640 Very, very simple form. 47 02:02.640 --> 02:03.120 Right. 48 02:03.160 --> 02:04.020 Very simple form. 49 02:04.020 --> 02:06.630 We've got this really cool "Send your message" button. 50 02:06.870 --> 02:11.850 There's a hover effect. The user submits, and it gets submitted in the URL. 51 02:11.880 --> 02:12.750 You can see it there. 52 02:12.750 --> 02:17.640 So a very simple example, and I've used the grid system here, so if we inspect this form, 53 02:20.150 --> 02:20.540 right. 54 02:20.540 --> 02:21.320 Have a look here. 55 02:21.350 --> 02:22.670 Can you see the word grid? 56 02:22.850 --> 02:24.230 Let me just zoom in slightly. 57 02:24.260 --> 02:25.460 Can you see the word grid? 58 02:26.280 --> 02:31.160 If I click on that word grid, you can see how we've set up this postcard. 59 02:31.670 --> 02:34.850 We've got two columns and we've got four rows. 60 02:35.030 --> 02:36.920 And that's what's cool about working with the grid. 61 02:36.920 --> 02:43.370 We can be very explicit as to how we want to split up, or proportion, our elements we're working with, 62 02:43.400 --> 02:46.130 in this case a form. So very, very cool example. 63 02:46.130 --> 02:48.410 I know it's not that in depth. 64 02:48.410 --> 02:54.050 The reason, like I mentioned I want to do this example is I want to talk a little bit more about fonts 65 02:54.050 --> 02:54.650 with you. 66 02:54.830 --> 02:57.080 And you can see here we've got custom heading fonts. 67 02:57.080 --> 02:59.150 Your message, to, from, and reply ... 68 02:59.240 --> 03:00.650 those are all custom fonts. 69 03:00.650 --> 03:03.230 They're not standard fonts that your browser will have. 70 03:03.260 --> 03:08.830 Also, when the user starts typing a message that is now a different font. 71 03:08.840 --> 03:13.610 So I've imported here two different types of fonts, so I'm going to talk about how I do that. 72 03:13.610 --> 03:18.950 I'm then going to talk about this grid system and then we're literally going to just code up this form. 73 03:18.950 --> 03:21.300 It's not going to be complicated by any means. 74 03:21.300 --> 03:23.220 I just wanted to have a bit of fun with you. 75 03:23.220 --> 03:27.090 So get ready, buckle up and I'll see you in the next lecture.