1
00:00:00,300 --> 00:00:00,780
Okay.

2
00:00:00,780 --> 00:00:02,969
So we're at the end of this project.

3
00:00:02,969 --> 00:00:05,610
All we have left is to style it.

4
00:00:05,730 --> 00:00:07,080
And it's kind of funny.

5
00:00:07,080 --> 00:00:12,600
I think for a lot of people this is the most exciting part, even though it has like the least to do

6
00:00:12,600 --> 00:00:13,170
with the course.

7
00:00:13,170 --> 00:00:13,860
But I get it.

8
00:00:13,860 --> 00:00:14,880
It's nice to have it.

9
00:00:14,880 --> 00:00:17,040
Something visual to make it look nice.

10
00:00:17,310 --> 00:00:22,040
If you know CSS, skip this, you can just copy the style sheet in.

11
00:00:22,050 --> 00:00:23,370
Take a look at what I did.

12
00:00:23,910 --> 00:00:28,470
This is not going to be like I've said a couple of times, not a course on X, it's not a course on

13
00:00:28,470 --> 00:00:29,190
CSS.

14
00:00:29,190 --> 00:00:35,970
So what I'm going to do is rather than spending 2 hours of video going over, styling this one piece

15
00:00:35,970 --> 00:00:40,890
at a time and talking about my workflow and why I'm doing certain things, what I've done is just copied

16
00:00:40,890 --> 00:00:48,600
over the finished style sheet and our finished markup, but we still have our empty mark or basic markup

17
00:00:48,600 --> 00:00:50,070
and we don't have a style sheet.

18
00:00:50,070 --> 00:00:56,400
So what I'm going to do is just walk through and kind of copy bit by bit over and explain what chunks

19
00:00:56,400 --> 00:00:57,510
do, but not everything.

20
00:00:57,510 --> 00:01:02,790
And these two files, you can also you can find yourself, they're not in the slides, they're too large.

21
00:01:02,790 --> 00:01:07,350
But I've included them along with this video so that you can copy from there, unless you're someone

22
00:01:07,350 --> 00:01:10,530
who likes to type things manually, which some students do.

23
00:01:10,740 --> 00:01:11,210
Okay.

24
00:01:11,250 --> 00:01:14,550
So again, these are two files that are not connected to our app.

25
00:01:14,550 --> 00:01:17,400
These are the solution files I'm going to refer back to.

26
00:01:17,400 --> 00:01:23,700
But for now we're stuck with this, our basic HTML, and we don't even have a way of styling it.

27
00:01:23,700 --> 00:01:29,910
And for those of you who don't know CSS or know what it is, it's how we add style color font images.

28
00:01:29,910 --> 00:01:36,180
Well, how we add images generally, but it's how we can add a background image to something using CSS.

29
00:01:36,180 --> 00:01:42,870
And the way we usually write that is by creating an external style sheet, a CSS file, and writing

30
00:01:42,870 --> 00:01:44,400
our styles in there like this.

31
00:01:44,850 --> 00:01:47,130
So we need a way to actually connect them.

32
00:01:47,130 --> 00:01:52,050
And I'm not going to go into too much detail, but so usually what we do looks like this we'd have a

33
00:01:52,050 --> 00:01:54,720
link rel equals stylesheet.

34
00:01:54,720 --> 00:01:58,170
This is an HTML tag that includes an external stylesheet.

35
00:01:58,170 --> 00:02:02,730
So if I do that and I just paste that in here, there's two problems.

36
00:02:02,730 --> 00:02:08,880
One, we don't even have an apt CSS created, but two, Express isn't going to know about it.

37
00:02:10,169 --> 00:02:10,979
Hi Blue.

38
00:02:11,100 --> 00:02:13,710
What we can do is start off by creating a new directory.

39
00:02:14,720 --> 00:02:17,390
And this is just a conventional name.

40
00:02:17,390 --> 00:02:19,040
I'm going to call it public.

41
00:02:19,070 --> 00:02:21,950
That's kind of standard for a web app, but you can call it whatever you want.

42
00:02:21,950 --> 00:02:26,920
And inside of there, I'm going to create a file called Dot CSS.

43
00:02:27,320 --> 00:02:28,070
Like that.

44
00:02:28,310 --> 00:02:30,200
And then we'll put our code in here.

45
00:02:30,410 --> 00:02:37,700
And let's start with something really simple, like turn the whole body, make it color purple.

46
00:02:37,700 --> 00:02:39,500
So all our text is purple.

47
00:02:40,050 --> 00:02:41,450
Oh, like that?

48
00:02:41,690 --> 00:02:42,670
Color purple.

49
00:02:42,680 --> 00:02:43,580
Oh, blue.

50
00:02:43,670 --> 00:02:44,210
Hey.

51
00:02:45,080 --> 00:02:46,490
My cat just attacked me.

52
00:02:47,210 --> 00:02:47,540
Okay.

53
00:02:48,470 --> 00:02:49,600
Why don't you let me record?

54
00:02:49,610 --> 00:02:50,020
Okay.

55
00:02:50,330 --> 00:02:50,840
Hang on.

56
00:02:50,840 --> 00:02:51,450
I'll be back.

57
00:02:51,470 --> 00:02:52,340
I got to handle this.

58
00:02:52,670 --> 00:02:53,120
All right.

59
00:02:53,120 --> 00:02:54,260
That's been handled.

60
00:02:54,260 --> 00:02:55,340
Crazy cats.

61
00:02:56,180 --> 00:02:57,200
So back where we were.

62
00:02:57,230 --> 00:03:00,350
We've got our body color purple.

63
00:03:00,380 --> 00:03:02,440
This is not connected to our app.

64
00:03:02,450 --> 00:03:03,710
If it were.

65
00:03:05,530 --> 00:03:07,930
Then our text would be purple.

66
00:03:07,930 --> 00:03:08,800
But it's not.

67
00:03:09,160 --> 00:03:10,750
So how do we get it connected?

68
00:03:10,900 --> 00:03:12,070
Well, there's a problem.

69
00:03:12,130 --> 00:03:14,770
Long story short, we need to add this line.

70
00:03:14,860 --> 00:03:17,540
So this is another app use.

71
00:03:17,650 --> 00:03:22,690
And this tells express if I go into our main file here, app JS.

72
00:03:23,630 --> 00:03:25,480
Just add it with the other app use.

73
00:03:25,520 --> 00:03:31,910
Keep all our configuration and it's basically saying take whatever is in the public directory, which

74
00:03:31,910 --> 00:03:32,780
is right here.

75
00:03:32,810 --> 00:03:39,070
Take all the contents and serve them so they're accessible by our views or from our JavaScript.

76
00:03:39,080 --> 00:03:46,580
So now if I restart the server app, CSS is going to be available to this file.

77
00:03:50,070 --> 00:03:50,760
Hopefully.

78
00:03:51,150 --> 00:03:54,300
And if we refresh the page, we now have purple text.

79
00:03:55,020 --> 00:03:57,090
So we now have a stylesheet connected.

80
00:03:57,090 --> 00:04:02,400
And if you had just as a quick aside, if you had multiple different views here and you wanted them

81
00:04:02,400 --> 00:04:05,460
to have the same stylesheet, you could use this line in all of them.

82
00:04:06,060 --> 00:04:10,050
Or there's actually a better way, which I'm not going to talk about in this course called partials,

83
00:04:10,050 --> 00:04:15,270
where you can basically have code that runs on all of your views, but you could also have a separate

84
00:04:15,270 --> 00:04:19,050
stylesheet for different views if you wanted to just put them all in public.

85
00:04:19,680 --> 00:04:20,180
Okay.

86
00:04:20,490 --> 00:04:22,079
So that's the first simplest thing.

87
00:04:22,470 --> 00:04:28,500
The next thing you'll notice in the finished markup is there's also a Google API or a Google font that

88
00:04:28,500 --> 00:04:29,340
I included.

89
00:04:29,340 --> 00:04:30,960
So I'm going to put that in here too.

90
00:04:31,890 --> 00:04:34,230
This is for a font called Roboto.

91
00:04:34,350 --> 00:04:39,420
Pretty common one if you're not familiar with Google Fonts, really great resource free fonts that you

92
00:04:39,420 --> 00:04:41,970
can use on your own websites and they look good.

93
00:04:41,970 --> 00:04:49,470
So now let's also go back to our finished CSS and let's copy some of this body stuff over, for example,

94
00:04:49,470 --> 00:04:50,580
font family.

95
00:04:51,150 --> 00:04:52,230
Let's start with that.

96
00:04:52,740 --> 00:04:56,940
So we don't want things to be purple, we can get rid of that, but let's change the font so that we

97
00:04:56,940 --> 00:04:59,160
now are using that Roboto font.

98
00:05:00,530 --> 00:05:01,370
There you go.

99
00:05:01,400 --> 00:05:02,720
Our font has changed.

100
00:05:03,230 --> 00:05:04,580
Slowly getting there.

101
00:05:04,910 --> 00:05:12,530
Next thing that we'll do if we go back to our CSS is we'll take the color and the text shadow and the

102
00:05:12,530 --> 00:05:13,550
text the line.

103
00:05:15,150 --> 00:05:16,910
So I don't need font family again.

104
00:05:16,920 --> 00:05:17,940
I'll get rid of that.

105
00:05:19,780 --> 00:05:20,980
So line this up.

106
00:05:22,940 --> 00:05:23,110
Okay.

107
00:05:23,320 --> 00:05:26,710
So this color is like a slightly purply gray, if I remember.

108
00:05:27,010 --> 00:05:31,510
And we've got this, this slight shadow, which I don't know if you could pick up on on the original.

109
00:05:31,840 --> 00:05:32,830
We're getting close.

110
00:05:32,830 --> 00:05:36,640
Well, that's a lie, but we're getting close to being done with body.

111
00:05:38,080 --> 00:05:40,080
Then we've got a couple other things.

112
00:05:40,090 --> 00:05:42,370
First off is the background image.

113
00:05:42,580 --> 00:05:50,560
And if I just show you this image and its entirety is a massive image of a beautiful mountain in Argentina

114
00:05:50,590 --> 00:05:58,720
down in Patagonia that I took on a backpacking trip is called Satori and yeah, that's my little plug

115
00:05:58,720 --> 00:05:59,740
for my photography.

116
00:05:59,740 --> 00:06:01,630
Maybe I'll have a photography course one day.

117
00:06:02,500 --> 00:06:04,240
So here's this photo that we'll use.

118
00:06:04,600 --> 00:06:09,700
We just need the URL and we're setting the body's background image to that photo.

119
00:06:11,920 --> 00:06:14,830
Save and refresh and it worked.

120
00:06:14,830 --> 00:06:19,900
But you can see it kind of just looks like a solid color, but it's using the image.

121
00:06:19,900 --> 00:06:25,720
It's just so big that it's taking up the, you know, I don't know, five or six of these screens or

122
00:06:25,720 --> 00:06:26,290
more.

123
00:06:26,290 --> 00:06:31,720
So that's actually something that if this is a real app, it would be good to just use a smaller image.

124
00:06:31,720 --> 00:06:37,000
So we're not loading such a big image, but what we can do is use background size and set that to be

125
00:06:37,000 --> 00:06:37,660
cover.

126
00:06:38,440 --> 00:06:43,330
And now it will basically take the image and make sure it covers the entire background.

127
00:06:44,080 --> 00:06:47,140
So we've got that getting a little closer now.

128
00:06:47,140 --> 00:06:51,670
The next thing that we can do, if we scroll down, we'll come back to this flex container.

129
00:06:51,670 --> 00:06:58,360
We've got our H one and our paragraphs, and if you notice, I'm setting the font weight to be 100.

130
00:06:58,360 --> 00:07:01,060
I'm actually going to get rid of that in both of them.

131
00:07:02,410 --> 00:07:07,060
There's a better thing that I can do, which is just sent the set, the font weight to be 100 in the

132
00:07:07,060 --> 00:07:07,690
body.

133
00:07:08,200 --> 00:07:14,560
And what that will do is just make our font thinner so that we get this thinner text.

134
00:07:15,100 --> 00:07:16,210
So we've done that.

135
00:07:16,870 --> 00:07:21,010
And let's see, moving on, let's work on the H one next.

136
00:07:21,550 --> 00:07:24,730
So the H one, this giant or what's not giant yet but this.

137
00:07:24,730 --> 00:07:25,210
Join us.

138
00:07:25,210 --> 00:07:27,040
That will be giant in a bit.

139
00:07:28,590 --> 00:07:30,330
We've got a couple of things that we're doing.

140
00:07:30,750 --> 00:07:37,950
We've got we're setting well, let's just copy it all over margin to be zero font size, 500 pixels.

141
00:07:40,400 --> 00:07:42,260
Line height is 400 pixels.

142
00:07:43,430 --> 00:07:43,870
Okay.

143
00:07:43,940 --> 00:07:49,010
So it looks massive right now, and that's because I'm super zoomed in.

144
00:07:50,570 --> 00:07:52,430
So it's not as massive now.

145
00:07:52,760 --> 00:07:56,320
It still is big, but nowhere near as bad.

146
00:07:56,330 --> 00:08:01,160
So we've got join us and that's big looking relatively good.

147
00:08:01,580 --> 00:08:04,220
What we want to do, of course, is position it downwards.

148
00:08:04,220 --> 00:08:06,350
But I'm going to wait to talk about that.

149
00:08:06,710 --> 00:08:08,750
So we'll move on to the next thing.

150
00:08:08,750 --> 00:08:14,090
We've got our paragraph that we can style and really all we're doing for the paragraph is changing the

151
00:08:14,090 --> 00:08:15,140
font size.

152
00:08:15,260 --> 00:08:16,340
So this here.

153
00:08:17,130 --> 00:08:17,980
It gets bigger.

154
00:08:20,200 --> 00:08:23,830
Then after that, we're onto the form and the button.