0
1
00:00:01,010 --> 00:00:09,160
Now admittedly, our To Do list at the moment looks pretty awful even though the functionality works where
1

2
00:00:09,170 --> 00:00:17,240
we can add new items on the go and it will continuously get added to our list, but it doesn't look that
2

3
00:00:17,240 --> 00:00:18,680
great right?
3

4
00:00:18,710 --> 00:00:25,730
So in this lesson we're going to style our To Do list to make it look beautiful as well as function
4

5
00:00:25,760 --> 00:00:26,700
well.
5

6
00:00:26,750 --> 00:00:34,370
So the first thing I want to do is in the resources section of this lesson you'll find a link to download
6

7
00:00:34,400 --> 00:00:36,930
a file called styles.css.
7

8
00:00:37,310 --> 00:00:41,260
And I want to open up this file inside Atom.
8

9
00:00:41,410 --> 00:00:44,480
I want you to take a look at what I've added in here.
9

10
00:00:44,510 --> 00:00:50,300
Now the majority of this code you should already be pretty familiar with, for example things like color or
10

11
00:00:50,300 --> 00:00:57,440
padding or targeting the h1 or targeting classes as we've talked about this extensively inside the
11

12
00:00:57,440 --> 00:00:58,950
CSS module.
12

13
00:00:58,970 --> 00:01:05,870
Now there might be a few things that will look new to you and I'll explain them as I go along
13

14
00:01:05,900 --> 00:01:10,040
and as we implement this CSS in our project.
14

15
00:01:10,040 --> 00:01:17,180
Now of course if you don't want to use the skeleton CSS that I've created for you and you want to create
15

16
00:01:17,180 --> 00:01:23,450
this from scratch then you already have the ability and knowledge to do this yourself.
16

17
00:01:23,450 --> 00:01:29,810
So while I recommend you use the styles that we provide, it's of course up to you if you wish to create
17

18
00:01:29,810 --> 00:01:31,130
this yourself.
18

19
00:01:31,130 --> 00:01:37,520
Now if you want to do that then simply take a look at the way that the website looks in the first lesson
19

20
00:01:37,700 --> 00:01:42,980
of this module where I showed you what we're going to be building by the end of the module. And you can
20

21
00:01:42,980 --> 00:01:45,790
create and write the CSS yourself.
21

22
00:01:45,920 --> 00:01:52,580
Now through a lot of testing we find that students do best when we focus on one topic in one module.
22

23
00:01:52,580 --> 00:01:55,960
So this topic we're talking about templating and EJS
23

24
00:01:56,060 --> 00:02:02,420
so that's why I recommend using the CSS that I've already created for you so that you can speed up development
24

25
00:02:02,510 --> 00:02:03,720
and your learning
25

26
00:02:03,740 --> 00:02:06,660
but again I'm leaving the decision up to you.
26

27
00:02:07,040 --> 00:02:14,270
Now once you've downloaded this styles.css file, I want you to go into your current project folder
27

28
00:02:14,390 --> 00:02:22,010
and I want you to create a new folder called css and I want you to move this styles.css that
28

29
00:02:22,010 --> 00:02:25,900
you downloaded into our css folder.
29

30
00:02:26,090 --> 00:02:31,750
So now we want to be able to access those styles inside our list.
30

31
00:02:31,780 --> 00:02:32,110
ej
31

32
00:02:32,120 --> 00:02:32,990
s.
32

33
00:02:33,080 --> 00:02:39,380
And the way that we would normally do that is we would add a link up here and it has a relationship
33

34
00:02:39,410 --> 00:02:48,790
of stylesheet and it has an href of /css/styles.css.
34

35
00:02:48,980 --> 00:02:55,760
And normally we've deleted that first forward slash and this is how we've normally structured our CSS
35

36
00:02:55,850 --> 00:02:56,820
link.
36

37
00:02:56,840 --> 00:03:03,980
Now if you save this file and you go ahead and try to reload your website you'll notice that absolutely
37

38
00:03:03,980 --> 00:03:08,300
nothing from the CSS file has been implemented.
38

39
00:03:08,300 --> 00:03:15,320
And in fact if you pull up the Chrome developer tools you'll see a warning in here that it could not
39

40
00:03:15,410 --> 00:03:18,940
apply the style from css/styles
40

41
00:03:19,020 --> 00:03:27,350
.css. Now the reason is because our styles.css lives in a folder called css which is in the
41

42
00:03:27,350 --> 00:03:29,240
root of our project.
42

43
00:03:29,270 --> 00:03:36,480
Now when you use Express, it doesn't automatically serve up all the files in your project.
43

44
00:03:36,560 --> 00:03:36,840
No.
44

45
00:03:36,860 --> 00:03:45,520
In fact it only serves up the main access point which we define in our packag.json as app.js
45

46
00:03:45,680 --> 00:03:48,560
and it also serves up the views folder.
46

47
00:03:49,040 --> 00:03:51,860
But everything else it chooses to ignore.
47

48
00:03:51,890 --> 00:03:59,480
So you can't simply just go to localhost:3000 /css/styles.css because we're
48

49
00:03:59,480 --> 00:04:06,080
no longer operating a static website and in fact all the files if we want to use them they have to
49

50
00:04:06,080 --> 00:04:08,620
be served up by our server.
50

51
00:04:08,810 --> 00:04:16,390
So even though we can see that that file exists at that pathway, we can't simply just use this as a href
51

52
00:04:16,550 --> 00:04:19,870
to access it when we're creating a server based website.
52

53
00:04:19,880 --> 00:04:25,820
So previously when we are creating static websites for example our Drum kit, you can actually simply
53

54
00:04:25,820 --> 00:04:32,750
just put in the file path to the project in your browser and it will show you all of the files that
54

55
00:04:32,750 --> 00:04:33,650
are there.
55

56
00:04:33,920 --> 00:04:37,140
And when we're here we can navigate to the index.
56

57
00:04:37,190 --> 00:04:44,420
html or we can navigate to another static file like the styles.css and we can modify this
57

58
00:04:44,420 --> 00:04:52,760
URL or this file path as much as we want to in order to get hold of the relevant files.
58

59
00:04:52,760 --> 00:05:01,190
But unfortunately we can't just replace this part with localhost: 3000 and hope that somehow we're able
59

60
00:05:01,190 --> 00:05:08,210
to find this file at this location. In order to access the CSS for our website
60

61
00:05:08,270 --> 00:05:16,820
we have to tell Express explicitly to serve up the CSS files. And we need to tell it the location of
61

62
00:05:16,820 --> 00:05:19,420
our file and tell it to use it.
62

63
00:05:19,550 --> 00:05:27,380
Now in the future, we might be creating other static files that are not CSS for example some plain Javascript
63

64
00:05:27,400 --> 00:05:34,330
which we need to run on the browser side or images or sound assets or various other things.
64

65
00:05:34,340 --> 00:05:41,420
So normally, developers will create a new folder called public and inside this public folder you can
65

66
00:05:41,420 --> 00:05:45,990
have your CSS folder and you can have your Javascript folder,
66

67
00:05:46,010 --> 00:05:56,480
you can have your images folder and we can tell Express to serve up this public folder as a static resource.
67

68
00:05:56,480 --> 00:06:02,640
So in order to do that, we go over to app.js and just below where we said app.use body-parser,
68

69
00:06:02,690 --> 00:06:11,720
we're going to say app.use another thing which is Express .static and then we specify the location
69

70
00:06:11,810 --> 00:06:16,100
of our static files which is the folder called public.
70

71
00:06:16,460 --> 00:06:23,070
So now we can save our app.js and make sure that you've got nodemon that's running in the background
71

72
00:06:23,150 --> 00:06:30,110
rerunning our server whenever we make changes. And now if we head over to our browser and refresh our website
72

73
00:06:30,590 --> 00:06:34,960
then you can see that our CSS styles have been applied.
73

74
00:06:35,030 --> 00:06:40,400
Now if you don't see any changes when you've done all of that and you've refreshed the website, make
74

75
00:06:40,400 --> 00:06:46,750
sure that you check your CSS file path and that it matches exactly with mine.
75

76
00:06:46,790 --> 00:06:49,360
Namely there's no forward slash to begin with
76

77
00:06:49,550 --> 00:06:52,880
and then it's css/styles.css
77

78
00:06:53,150 --> 00:06:59,360
if you have a folder called css that has styles.css in it and all of this should be inside the
78

79
00:06:59,360 --> 00:07:00,670
public folder.
79

80
00:07:00,680 --> 00:07:08,510
Now while we've applied some backgrounds and styling, it still doesn't look that great right? And that's
80

81
00:07:08,510 --> 00:07:18,530
because inside our CSS file we've added the styles to various classes and IDs and inputs etc..
81

82
00:07:18,560 --> 00:07:21,320
So we have to go ahead and change our list.
82

83
00:07:21,350 --> 00:07:26,810
ejs so that we add in those divs with those classes so that we can actually get the styling that we
83

84
00:07:26,810 --> 00:07:27,880
want.
84

85
00:07:27,890 --> 00:07:34,490
So the first thing that I'm going to do is for the heading I'm going to give it a separate div. And the
85

86
00:07:34,490 --> 00:07:42,710
class of the div is going to be called box because I want to apply the CSS from this box class to give
86

87
00:07:42,710 --> 00:07:47,720
it a maxim width, to give it a margin, background, border radius etc..
87

88
00:07:47,930 --> 00:07:57,530
So I'm going to move my h1 into my brand new div. Now this div is also going to have an id to separate
88

89
00:07:57,530 --> 00:08:02,300
it from the other divs that have the class of box because we're going to be reusing that class for
89

90
00:08:02,300 --> 00:08:04,340
all of our to do list items.
90

91
00:08:04,340 --> 00:08:13,610
So the id for this heading is just called heading and that allows us to apply the CSS that I've placed
91

92
00:08:13,730 --> 00:08:20,840
into the id of heading giving it a different background color and making align center rather align left.
92

93
00:08:20,840 --> 00:08:26,130
So now that we're done with our heading the next step is to move on to our items.
93

94
00:08:26,150 --> 00:08:30,870
So again I'm going to create a div that has a class of box,
94

95
00:08:30,920 --> 00:08:33,830
so we're reusing the class styles here.
95

96
00:08:34,610 --> 00:08:38,590
And inside that div I'm going to move all of my items
96

97
00:08:38,720 --> 00:08:43,780
that gets generated dynamically using Javascript and EJS.
97

98
00:08:43,820 --> 00:08:51,080
Now instead of using uls and lis and having bullet points, I'm in fact going to get rid of the uls
98

99
00:08:51,350 --> 00:08:59,150
and place each item into a div. And the div is going to have a class of item and this will apply the
99

100
00:08:59,210 --> 00:09:07,430
CSS that is included under the class selector of item and item last-class child which targets the last item
100

101
00:09:07,790 --> 00:09:13,590
because each item has a bottom border to separate it from the previous item
101

102
00:09:13,700 --> 00:09:19,940
other than the last one because that's the end of our list of items. Each item is going to have its own
102

103
00:09:19,940 --> 00:09:26,290
separate div called item. And instead of having an li which has a bullet point remember
103

104
00:09:26,540 --> 00:09:33,380
I'm going to instead change it to a p element or a paragraph element and I'm going to move it into my
104

105
00:09:33,380 --> 00:09:34,110
div.
105

106
00:09:34,370 --> 00:09:40,730
Now for the paragraph element I've applied a margin of 0all sides given it some padding, changed the font
106

107
00:09:40,730 --> 00:09:43,210
size, changed the font color etc.
107

108
00:09:43,220 --> 00:09:45,330
just to make it look quite nice.
108

109
00:09:45,440 --> 00:09:50,470
And we've gotten rid of that a bullet point. Instead of having a bullet point
109

110
00:09:50,510 --> 00:09:53,810
I'm going to add a checkbox instead.
110

111
00:09:53,870 --> 00:10:01,110
And if you remember we can add checkboxes by creating an input with type of checkbox and I don't
111

112
00:10:01,110 --> 00:10:09,780
need to have a value or a name. So let's just quickly beautify our HTML. And we can move on to the next
112

113
00:10:09,780 --> 00:10:10,480
step.
113

114
00:10:10,590 --> 00:10:18,910
Now our form where we have our input and our submit button is going to be the last item in our box.
114

115
00:10:18,930 --> 00:10:25,350
So if you click over here you can see that this is the end of our div class box and we want our form
115

116
00:10:25,380 --> 00:10:30,540
to be inside the box and just below the other items.
116

117
00:10:30,570 --> 00:10:37,860
So right here. And our form is also going to have a class of item just so that we style it similarly
117

118
00:10:37,860 --> 00:10:39,770
to the other to do list items.
118

119
00:10:40,020 --> 00:10:43,890
But it's still going to have an action of targeting the root route
119

120
00:10:44,100 --> 00:10:47,670
and also it's going to have a method equal to post.
120

121
00:10:47,730 --> 00:10:49,970
Now the next thing is our inputs.
121

122
00:10:50,010 --> 00:10:55,760
And in addition to having a type as well as a name, I'm also going to add a placeholder.
122

123
00:10:56,070 --> 00:11:02,350
And this allows us to tell the user that this input is for your and new items that you're going to add.
123

124
00:11:02,730 --> 00:11:09,000
And the final thing I'm going to do is I'm going to change the submit button from saying Add to simply
124

125
00:11:09,000 --> 00:11:15,420
being a plus sign so that when the user sees the button, it'll be very similar to the Google material
125

126
00:11:15,420 --> 00:11:20,030
design buttons where you just have a round circle with a plus sign in it.
126

127
00:11:20,040 --> 00:11:26,910
So now let's hit refresh and you can see that we've styled our to do list and we've done that through
127

128
00:11:26,910 --> 00:11:29,700
using just a few lines of CSS.
128

129
00:11:29,700 --> 00:11:34,830
Now if we test out our functionality and let's just see if we're happy with the way it looks.
129

130
00:11:35,010 --> 00:11:41,880
So if I tick an item you can see that it gets crossed out. And if I add a new item then you can see that
130

131
00:11:41,880 --> 00:11:48,750
we get this auto suggest box which I don't really like because nobody really needs auto-suggestion
131

132
00:11:48,930 --> 00:11:50,500
for you to do list items.
132

133
00:11:50,640 --> 00:12:02,980
So I'm going to remove that by going into the input and changing the autocomplete to off. And now if
133

134
00:12:02,980 --> 00:12:08,440
I refreshed the website, you can see that it no longer gives me that autocomplete and I have a much
134

135
00:12:08,560 --> 00:12:09,930
cleaner interface.
135

136
00:12:10,000 --> 00:12:15,700
So now that we've implemented our styles into our HTML, I just want to quickly walk you through the CSS
136

137
00:12:16,090 --> 00:12:19,220
and address anything that you might not have seen before.
137

138
00:12:19,510 --> 00:12:27,010
So the first thing is this Web Kit Linear gradient and this is a very simple way of creating a gradient
138

139
00:12:27,460 --> 00:12:34,990
and you specify the degree of your gradient and you add the the percentage of your different colors.
139

140
00:12:35,080 --> 00:12:40,710
So mine is going to be 50% this purple color and 50% this light whitish color.
140

141
00:12:40,960 --> 00:12:46,690
And then it's going to create a linear gradient at 45 degrees and that is where this background comes
141

142
00:12:46,690 --> 00:12:47,380
from.
142

143
00:12:47,380 --> 00:12:52,030
Now the next thing I want to talk about is this item :last-child.
143

144
00:12:52,240 --> 00:12:59,710
So this is going to look at all the items inside a div and then it's going to target specifically the
144

145
00:12:59,710 --> 00:13:05,250
last child item and it's going to apply a specific style to it.
145

146
00:13:05,260 --> 00:13:08,570
The next thing is this input:checked.
146

147
00:13:08,830 --> 00:13:13,990
And that means it's going to look for an input that is in a checked state,
147

148
00:13:14,050 --> 00:13:18,050
so that means that we've ticked a checkbox, and the +p
148

149
00:13:18,190 --> 00:13:25,750
if you take a look at the reference, the plus sign means that it selects all the elements that come at the
149

150
00:13:25,750 --> 00:13:32,280
end of the plus and they are placed immediately after the beginning of the selecter.
150

151
00:13:32,680 --> 00:13:39,720
So in this case we're targeting all of the paragraph elements that come after checked inputs.
151

152
00:13:39,910 --> 00:13:47,560
And this allows us to apply this nice little purple line to our paragraphs when we change the checkbox
152

153
00:13:47,830 --> 00:13:49,900
to the checked state.
153

154
00:13:49,900 --> 00:13:56,440
Now the next thing you might not have seen is this type of selecter which is where we use an input and
154

155
00:13:56,440 --> 00:13:59,110
then we have these square brackets.
155

156
00:13:59,260 --> 00:14:05,860
And this allows us to specify our CSS for a particular value of an attribute.
156

157
00:14:05,950 --> 00:14:12,370
So in this case we're saying that look at all the inputs that have an attribute type that's equal to
157

158
00:14:12,400 --> 00:14:16,580
checkbox and apply this style only to those things.
158

159
00:14:16,780 --> 00:14:24,880
So because currently in our file we have both an input that are checkboxes as well as inputs which are
159

160
00:14:25,060 --> 00:14:26,620
text inputs,
160

161
00:14:26,620 --> 00:14:32,840
so if we wanted to apply that style to only the checkboxes, then this is one way of doing it.
161

162
00:14:33,010 --> 00:14:39,160
And the last one I want to draw your attention to is this pseudo selector which is called placeholder and this
162

163
00:14:39,160 --> 00:14:46,630
simply just targets our placeholder which remember just says newItem and gives it a particular style
163

164
00:14:46,690 --> 00:14:49,950
of gray and makes it completely opaque.
164

165
00:14:50,170 --> 00:14:57,700
Now a lot of these selectors are available in the reference over here on w3schools.com as well as MDN's
165

166
00:14:57,790 --> 00:15:03,710
reference and there are more selectors then you could possibly go through.
166

167
00:15:03,850 --> 00:15:06,420
So some students might wonder, why it is
167

168
00:15:06,460 --> 00:15:12,070
have I not gone through every single one of these selectors? And the reason is because that would take
168

169
00:15:12,070 --> 00:15:17,010
over 40 hours and it's not really the way that developers work.
169

170
00:15:17,140 --> 00:15:20,700
It's much better when you want to target something specific
170

171
00:15:20,860 --> 00:15:26,680
and if you can't work out how to do it then simply just search for it on Google or on Stack Overflow
171

172
00:15:27,010 --> 00:15:33,610
and somebody will point you to a specific combo of CSS selectors that will achieve what it is that you
172

173
00:15:33,610 --> 00:15:34,190
want.
173

174
00:15:34,210 --> 00:15:40,240
So that is a much better way rather than going through each of these individually one by one by which
174

175
00:15:40,240 --> 00:15:46,700
point everybody will forget how to do it anyways. So don't worry if these look new or unfamiliar.
175

176
00:15:46,930 --> 00:15:52,990
As long as you can find out how they work and how to use it and in the future when you want to select
176

177
00:15:52,990 --> 00:15:58,480
something specific and you can't figure out how to do it then remember that the references and Stack
177

178
00:15:58,480 --> 00:16:00,690
Overflow is always there for you.
178

179
00:16:00,750 --> 00:16:04,420
Now in the next lesson I want to talk about EJS layouts,
179

180
00:16:04,570 --> 00:16:10,460
so another way of templating essentially but approaching it slightly differently.
180

181
00:16:10,540 --> 00:16:13,630
So for all of that and more, I'll see you on the next lesson.