Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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
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
3
00:00:17,240 --> 00:00:18,680
great right?
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
5
00:00:25,760 --> 00:00:26,700
well.
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
7
00:00:34,400 --> 00:00:36,930
a file called styles.css.
8
00:00:37,310 --> 00:00:41,260
And I want to open up this file inside Atom.
9
00:00:41,410 --> 00:00:44,480
I want you to take a look at what I've added in here.
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
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
12
00:00:57,440 --> 00:00:58,950
CSS module.
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
14
00:01:05,900 --> 00:01:10,040
and as we implement this CSS in our project.
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
16
00:01:17,180 --> 00:01:23,450
this from scratch then you already have the ability and knowledge to do this yourself.
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
18
00:01:29,810 --> 00:01:31,130
this yourself.
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
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
21
00:01:42,980 --> 00:01:45,790
create and write the CSS yourself.
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.
23
00:01:52,580 --> 00:01:55,960
So this topic we're talking about templating and EJS
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
25
00:02:02,510 --> 00:02:03,720
and your learning
26
00:02:03,740 --> 00:02:06,660
but again I'm leaving the decision up to you.
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
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
29
00:02:22,010 --> 00:02:25,900
you downloaded into our css folder.
30
00:02:26,090 --> 00:02:31,750
So now we want to be able to access those styles inside our list.
31
00:02:31,780 --> 00:02:32,110
ej
32
00:02:32,120 --> 00:02:32,990
s.
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
34
00:02:39,410 --> 00:02:48,790
of stylesheet and it has an href of /css/styles.css.
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
36
00:02:55,850 --> 00:02:56,820
link.
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
38
00:03:03,980 --> 00:03:08,300
nothing from the CSS file has been implemented.
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
40
00:03:15,410 --> 00:03:18,940
apply the style from css/styles
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
42
00:03:27,350 --> 00:03:29,240
root of our project.
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.
44
00:03:36,560 --> 00:03:36,840
No.
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
46
00:03:45,680 --> 00:03:48,560
and it also serves up the views folder.
47
00:03:49,040 --> 00:03:51,860
But everything else it chooses to ignore.
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
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
50
00:04:06,080 --> 00:04:08,620
be served up by our server.
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
52
00:04:16,550 --> 00:04:19,870
to access it when we're creating a server based website.
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
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
55
00:04:32,750 --> 00:04:33,650
are there.
56
00:04:33,920 --> 00:04:37,140
And when we're here we can navigate to the index.
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
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.
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
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
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
62
00:05:16,820 --> 00:05:19,420
our file and tell it to use it.
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
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.
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
66
00:05:41,420 --> 00:05:45,990
have your CSS folder and you can have your Javascript folder,
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.
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,
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
70
00:06:11,810 --> 00:06:16,100
of our static files which is the folder called public.
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
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
73
00:06:30,590 --> 00:06:34,960
then you can see that our CSS styles have been applied.
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
75
00:06:40,400 --> 00:06:46,750
sure that you check your CSS file path and that it matches exactly with mine.
76
00:06:46,790 --> 00:06:49,360
Namely there's no forward slash to begin with
77
00:06:49,550 --> 00:06:52,880
and then it's css/styles.css
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
79
00:06:59,360 --> 00:07:00,670
public folder.
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
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..
82
00:07:18,560 --> 00:07:21,320
So we have to go ahead and change our list.
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
84
00:07:26,810 --> 00:07:27,880
want.
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
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
87
00:07:42,710 --> 00:07:47,720
it a maxim width, to give it a margin, background, border radius etc..
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
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
90
00:08:02,300 --> 00:08:04,340
all of our to do list items.
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
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.
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.
94
00:08:26,150 --> 00:08:30,870
So again I'm going to create a div that has a class of box,
95
00:08:30,920 --> 00:08:33,830
so we're reusing the class styles here.
96
00:08:34,610 --> 00:08:38,590
And inside that div I'm going to move all of my items
97
00:08:38,720 --> 00:08:43,780
that gets generated dynamically using Javascript and EJS.
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
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
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
101
00:09:07,790 --> 00:09:13,590
because each item has a bottom border to separate it from the previous item
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
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
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
105
00:09:33,380 --> 00:09:34,110
div.
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
107
00:09:40,730 --> 00:09:43,210
size, changed the font color etc.
108
00:09:43,220 --> 00:09:45,330
just to make it look quite nice.
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
110
00:09:50,510 --> 00:09:53,810
I'm going to add a checkbox instead.
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
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
113
00:10:09,780 --> 00:10:10,480
step.
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.
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
116
00:10:25,380 --> 00:10:30,540
to be inside the box and just below the other items.
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
118
00:10:37,860 --> 00:10:39,770
to the other to do list items.
119
00:10:40,020 --> 00:10:43,890
But it's still going to have an action of targeting the root route
120
00:10:44,100 --> 00:10:47,670
and also it's going to have a method equal to post.
121
00:10:47,730 --> 00:10:49,970
Now the next thing is our inputs.
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.
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.
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
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
126
00:11:15,420 --> 00:11:20,030
design buttons where you just have a round circle with a plus sign in it.
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
128
00:11:26,910 --> 00:11:29,700
using just a few lines of CSS.
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.
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
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
132
00:11:48,930 --> 00:11:50,500
for you to do list items.
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
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
135
00:12:08,560 --> 00:12:09,930
cleaner interface.
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
137
00:12:16,090 --> 00:12:19,220
and address anything that you might not have seen before.
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
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.
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.
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
142
00:12:46,690 --> 00:12:47,380
from.
143
00:12:47,380 --> 00:12:52,030
Now the next thing I want to talk about is this item :last-child.
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
145
00:12:59,710 --> 00:13:05,250
last child item and it's going to apply a specific style to it.
146
00:13:05,260 --> 00:13:08,570
The next thing is this input:checked.
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,
148
00:13:14,050 --> 00:13:18,050
so that means that we've ticked a checkbox, and the +p
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
150
00:13:25,750 --> 00:13:32,280
end of the plus and they are placed immediately after the beginning of the selecter.
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.
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
153
00:13:47,830 --> 00:13:49,900
to the checked state.
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
155
00:13:56,440 --> 00:13:59,110
then we have these square brackets.
156
00:13:59,260 --> 00:14:05,860
And this allows us to specify our CSS for a particular value of an attribute.
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
158
00:14:12,400 --> 00:14:16,580
checkbox and apply this style only to those things.
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
160
00:14:25,060 --> 00:14:26,620
text inputs,
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.
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
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
164
00:14:46,690 --> 00:14:49,950
of gray and makes it completely opaque.
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
166
00:14:57,790 --> 00:15:03,710
reference and there are more selectors then you could possibly go through.
167
00:15:03,850 --> 00:15:06,420
So some students might wonder, why it is
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
169
00:15:12,070 --> 00:15:17,010
over 40 hours and it's not really the way that developers work.
170
00:15:17,140 --> 00:15:20,700
It's much better when you want to target something specific
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
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
173
00:15:33,610 --> 00:15:34,190
want.
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
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.
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
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
178
00:15:58,480 --> 00:16:00,690
Overflow is always there for you.
179
00:16:00,750 --> 00:16:04,420
Now in the next lesson I want to talk about EJS layouts,
180
00:16:04,570 --> 00:16:10,460
so another way of templating essentially but approaching it slightly differently.
181
00:16:10,540 --> 00:16:13,630
So for all of that and more, I'll see you on the next lesson.
20175
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.