WEBVTT 00:00.280 --> 00:00.730 OK. 00:00.840 --> 00:05.720 So at the end of this project all we have left is to style it. 00:05.970 --> 00:11.040 And it's kind of funny I think for a lot of people this is the most exciting part even though it has 00:11.910 --> 00:16.800 the least to do with the Course but I guess it's nice to have something visual to make it look nice 00:17.340 --> 00:19.990 if you know this as skip this. 00:20.160 --> 00:22.140 You can just copy the style sheet in. 00:22.140 --> 00:23.850 Take a look at what I did. 00:23.910 --> 00:29.210 This is not going to be like I've said a couple times not of course on X it's on a course on CSSA. 00:29.370 --> 00:34.980 So what I'm going to do is rather than spending two hours of video going over you know styling this 00:35.520 --> 00:39.900 one piece at a time and talking about my workflow and why I'm doing certain things what I've done is 00:39.900 --> 00:45.030 just copied over the finished style sheet and our finished markup. 00:45.300 --> 00:50.230 But we still have our empty marker or a basic markup and we don't have a style sheet. 00:50.250 --> 00:56.370 So what I'm going to do is just walk through and kind of copy bit by bit over and explain what chunks 00:56.370 --> 00:56.580 do. 00:56.580 --> 00:57.510 But not everything. 00:57.600 --> 01:03.480 And these two files you can also you can find yourself in the slides are too large but I've included 01:03.480 --> 01:08.190 them along with this video so that you can copy from there unless you're someone who likes to type things 01:08.190 --> 01:10.470 manually which some students do. 01:10.740 --> 01:11.210 OK. 01:11.400 --> 01:14.590 So again these are two files that are not connected to our app. 01:14.670 --> 01:15.990 These are the solution files. 01:15.990 --> 01:20.710 I'm going to refer back to but for now we're stuck with this our basic h team out. 01:20.970 --> 01:23.700 And we don't even have a way of styling it. 01:23.820 --> 01:29.850 And for those of you who don't know CSSA or know what it is it's how we add style color font images 01:29.910 --> 01:37.590 Well we add images generally but we can add a background image to something using C Ss and the way we 01:37.590 --> 01:43.770 usually write that is by creating an external style sheet a C S S file and writing styles in there like 01:43.830 --> 01:44.940 this. 01:45.000 --> 01:49.430 So we need a way to actually connect them and not going to go into too much detail. 01:49.440 --> 01:54.720 But usually what we do looks like this we would have a link raúl Eco's style sheet. 01:54.720 --> 01:58.270 This is NHT him I'll tag that includes an external stylesheet. 01:58.350 --> 02:02.670 So if I do that and I just paste in here there's two problems. 02:02.670 --> 02:09.520 One we don't even have an act out CSSA created but to express isn't going to know about it. 02:10.250 --> 02:14.560 Hi Paul Well we can do is start off by creating a new directory. 02:14.810 --> 02:17.450 And this is just a conventional name. 02:17.450 --> 02:19.000 I'm going to call it public. 02:19.100 --> 02:21.920 That's kind of standard for a web app but you can call it whatever you want. 02:21.950 --> 02:29.630 And inside if they're going to create a file called app C Ss like that and then we'll put our code in 02:29.630 --> 02:30.150 here. 02:30.620 --> 02:35.900 And let's start with something really simple like turn the whole body. 02:35.920 --> 02:43.550 It gets color purple so all our text is purple like that color purple blue. 02:43.700 --> 02:47.360 Hey my cat just attacked me. 02:47.420 --> 02:50.100 Hey why don't you let me record OK. 02:50.330 --> 02:52.640 Hang on I'll be back here to handle this. 02:52.700 --> 02:53.110 All right. 02:53.130 --> 02:55.880 That's been handled crazy cat. 02:56.210 --> 02:57.210 So back where we were. 02:57.260 --> 03:00.530 We've got our laptops the SS body color purple. 03:00.530 --> 03:02.460 This is not connected to our app. 03:02.540 --> 03:08.910 If it were then our techs would be purple but it's not. 03:09.310 --> 03:10.780 So how do we get it connected. 03:11.080 --> 03:12.000 Well there's a problem. 03:12.160 --> 03:15.040 Long story short we need to add this line. 03:15.040 --> 03:23.930 So this is another app you use and this tells the Express I go into our main file here app Jass is at 03:23.930 --> 03:29.320 it with the other apps that use keep all our configuration and it's basically saying take whatever is 03:29.320 --> 03:36.370 in the public directory which is right here take all the contents and serve them so they're accessible 03:36.370 --> 03:39.220 by our views or from our Javascript. 03:39.220 --> 03:46.590 So now if I can restart the server app just the SS is going to be available to this file. 03:50.070 --> 03:54.390 Hopefully And if we are fresh the page we now have purple text. 03:54.740 --> 03:54.990 OK. 03:54.990 --> 04:00.810 So we now have a stylesheet connected and if you had just a quick aside if you had multiple different 04:00.810 --> 04:05.220 views here and you wanted them to have the same style sheet you could use this line and all of them 04:06.110 --> 04:10.020 where there's actually a better way which I'm not going to talk about in this course called Parshall's 04:10.020 --> 04:15.480 where you can basically have code that runs on all of your views but you can also have a separate style 04:15.480 --> 04:19.260 sheet for different views if you want to just put them all in public. 04:19.710 --> 04:20.150 OK. 04:20.490 --> 04:22.320 So that's the first simplest thing. 04:22.470 --> 04:27.450 The next thing you'll notice in the finished markup is there's also a Google API. 04:27.540 --> 04:29.370 Google font included. 04:29.460 --> 04:31.910 So I'm going to put that in here too. 04:31.980 --> 04:37.120 This is for a font called rubato pretty common one if you're not familiar with Google fonts. 04:37.170 --> 04:40.630 Really great resource free fonts that you can use on your own web sites. 04:40.710 --> 04:42.060 And they look good. 04:42.150 --> 04:49.260 So now let's also go back to our See assess and learn to copy some of this body stuff over for example 04:49.500 --> 04:50.760 font family. 04:51.150 --> 04:52.750 Let's start with that. 04:52.860 --> 04:57.120 So we don't want things to be purple we can get rid of that but let's change the font so that we now 04:57.120 --> 05:00.560 are using that rubato font. 05:00.560 --> 05:01.480 There you go. 05:01.490 --> 05:05.050 Our font has changed slowly getting there. 05:05.060 --> 05:12.490 Next thing that will do if you go back to the SS is we'll take the color and the tech shadow and the 05:12.500 --> 05:14.860 text the line. 05:15.100 --> 05:25.000 So I don't need font family again I'll get rid of that blindness of OK so this color is like a slightly 05:25.000 --> 05:30.590 purple gray if I remember and we've got this slight shadow which I don't know if you could pick up on 05:30.590 --> 05:31.860 on the original. 05:31.930 --> 05:32.840 We're getting close. 05:32.920 --> 05:37.980 Well no that's a lie but we're getting close to being done with body. 05:38.230 --> 05:40.210 Then we've got a couple of other things. 05:40.210 --> 05:42.550 First off is the background image. 05:42.760 --> 05:50.500 And if I just show you this image in its entirety it's a massive image of peaceful mountain in Argentina 05:50.560 --> 05:51.700 down in Patagonia. 05:51.730 --> 05:53.990 They took on a backpacking trip. 05:54.040 --> 05:56.130 It is called Sarah Turei. 05:56.360 --> 05:59.780 And yeah that's my little plug for my photography. 05:59.780 --> 06:01.990 Maybe we'll have a photography course one day. 06:02.500 --> 06:07.780 So here's this photo that we'll use we just need that you are and we're setting the bodies background 06:07.810 --> 06:14.840 image to that photo save and refresh and it works. 06:14.860 --> 06:21.280 But you can see kind of just looks like a solid color but it's using the image just so big that it's 06:21.280 --> 06:21.940 taking fee. 06:22.030 --> 06:28.690 You know I don't know five or six of these screens or more so that's actually something that if this 06:28.690 --> 06:33.580 is a real app it would be good to just use a smaller image so we're not loading such a big image but 06:33.580 --> 06:38.040 what we can do is use background size and set that to be covered. 06:38.590 --> 06:44.080 And now it will basically take the image and make sure it covers the entire background. 06:44.200 --> 06:47.090 So we've got that getting a little closer now. 06:47.230 --> 06:52.300 The next thing that we can do if we scroll down we'll come back to this flex container we've got our 06:52.360 --> 06:54.760 H-1 and our paragraphs. 06:54.970 --> 06:58.260 And if you noticed I'm setting the font weight to be 100. 06:58.420 --> 07:02.230 I'm actually going to get rid of that in both of them. 07:02.390 --> 07:08.060 There's a better thing that I can do which is just sent the fat set the font weight to 100 in the body. 07:08.320 --> 07:14.420 And what that will do is just make our font thinner so that we get thinner text. 07:14.610 --> 07:15.050 OK. 07:15.130 --> 07:19.110 So we've done that and let's see moving on. 07:19.210 --> 07:21.670 Let's work on the H-1 next. 07:21.670 --> 07:28.560 So the H-1 is giant or what's not giant yet put this Join us that will be giant in a bit. 07:28.620 --> 07:30.490 It's got a couple of things that we're doing. 07:30.900 --> 07:36.570 We've got we're setting well let's just copy it all over the margin to be zero font size. 07:36.580 --> 07:37.720 Five hundred pixels 07:40.430 --> 07:43.910 line height is 400 pixels OK. 07:43.980 --> 07:46.540 So it looks massive right now. 07:46.950 --> 07:50.040 And that's because I'm super zoomed in. 07:50.640 --> 07:52.610 So it's not massive now. 07:52.860 --> 07:54.010 It's still big. 07:54.540 --> 07:56.370 But nowhere near as bad. 07:56.490 --> 07:57.000 So we've got. 07:57.000 --> 07:58.080 Join us. 07:58.650 --> 08:01.430 And that's big it looking relatively good. 08:01.680 --> 08:04.190 But we want to do of course is position it downwards. 08:04.200 --> 08:06.760 But I'm going to wait to talk about that. 08:06.840 --> 08:08.660 So we'll move on to the next thing. 08:08.820 --> 08:14.040 We've got our paragraph that we can style and really all we're doing for the paragraph is changing the 08:14.040 --> 08:15.290 font size. 08:15.420 --> 08:17.990 So this here gets bigger. 08:20.320 --> 08:23.580 Then after that we're onto the form and the button.