Original subtitles

Now admittedly, our To Do list at the moment looks pretty awful even though the functionality works where

we can add new items on the go and it will continuously get added to our list, but it doesn't look that

great right?

So in this lesson we're going to style our To Do list to make it look beautiful as well as function

well.

So the first thing I want to do is in the resources section of this lesson you'll find a link to download

a file called styles.css.

And I want to open up this file inside Atom.

I want you to take a look at what I've added in here.

Now the majority of this code you should already be pretty familiar with, for example things like color or

padding or targeting the h1 or targeting classes as we've talked about this extensively inside the

CSS module.

Now there might be a few things that will look new to you and I'll explain them as I go along

and as we implement this CSS in our project.

Now of course if you don't want to use the skeleton CSS that I've created for you and you want to create

this from scratch then you already have the ability and knowledge to do this yourself.

So while I recommend you use the styles that we provide, it's of course up to you if you wish to create

this yourself.

Now if you want to do that then simply take a look at the way that the website looks in the first lesson

of this module where I showed you what we're going to be building by the end of the module. And you can

create and write the CSS yourself.

Now through a lot of testing we find that students do best when we focus on one topic in one module.

So this topic we're talking about templating and EJS

so that's why I recommend using the CSS that I've already created for you so that you can speed up development

and your learning

but again I'm leaving the decision up to you.

Now once you've downloaded this styles.css file, I want you to go into your current project folder

and I want you to create a new folder called css and I want you to move this styles.css that

you downloaded into our css folder.

So now we want to be able to access those styles inside our list.

ej

s.

And the way that we would normally do that is we would add a link up here and it has a relationship

of stylesheet and it has an href of /css/styles.css.

And normally we've deleted that first forward slash and this is how we've normally structured our CSS

link.

Now if you save this file and you go ahead and try to reload your website you'll notice that absolutely

nothing from the CSS file has been implemented.

And in fact if you pull up the Chrome developer tools you'll see a warning in here that it could not

apply the style from css/styles

.css. Now the reason is because our styles.css lives in a folder called css which is in the

root of our project.

Now when you use Express, it doesn't automatically serve up all the files in your project.

No.

In fact it only serves up the main access point which we define in our packag.json as app.js

and it also serves up the views folder.

But everything else it chooses to ignore.

So you can't simply just go to localhost:3000 /css/styles.css because we're

no longer operating a static website and in fact all the files if we want to use them they have to

be served up by our server.

So even though we can see that that file exists at that pathway, we can't simply just use this as a href

to access it when we're creating a server based website.

So previously when we are creating static websites for example our Drum kit, you can actually simply

just put in the file path to the project in your browser and it will show you all of the files that

are there.

And when we're here we can navigate to the index.

html or we can navigate to another static file like the styles.css and we can modify this

URL or this file path as much as we want to in order to get hold of the relevant files.

But unfortunately we can't just replace this part with localhost: 3000 and hope that somehow we're able

to find this file at this location. In order to access the CSS for our website

we have to tell Express explicitly to serve up the CSS files. And we need to tell it the location of

our file and tell it to use it.

Now in the future, we might be creating other static files that are not CSS for example some plain Javascript

which we need to run on the browser side or images or sound assets or various other things.

So normally, developers will create a new folder called public and inside this public folder you can

have your CSS folder and you can have your Javascript folder,

you can have your images folder and we can tell Express to serve up this public folder as a static resource.

So in order to do that, we go over to app.js and just below where we said app.use body-parser,

we're going to say app.use another thing which is Express .static and then we specify the location

of our static files which is the folder called public.

So now we can save our app.js and make sure that you've got nodemon that's running in the background

rerunning our server whenever we make changes. And now if we head over to our browser and refresh our website

then you can see that our CSS styles have been applied.

Now if you don't see any changes when you've done all of that and you've refreshed the website, make

sure that you check your CSS file path and that it matches exactly with mine.

Namely there's no forward slash to begin with

and then it's css/styles.css

if you have a folder called css that has styles.css in it and all of this should be inside the

public folder.

Now while we've applied some backgrounds and styling, it still doesn't look that great right? And that's

because inside our CSS file we've added the styles to various classes and IDs and inputs etc..

So we have to go ahead and change our list.

ejs so that we add in those divs with those classes so that we can actually get the styling that we

want.

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

class of the div is going to be called box because I want to apply the CSS from this box class to give

it a maxim width, to give it a margin, background, border radius etc..

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

it from the other divs that have the class of box because we're going to be reusing that class for

all of our to do list items.

So the id for this heading is just called heading and that allows us to apply the CSS that I've placed

into the id of heading giving it a different background color and making align center rather align left.

So now that we're done with our heading the next step is to move on to our items.

So again I'm going to create a div that has a class of box,

so we're reusing the class styles here.

And inside that div I'm going to move all of my items

that gets generated dynamically using Javascript and EJS.

Now instead of using uls and lis and having bullet points, I'm in fact going to get rid of the uls

and place each item into a div. And the div is going to have a class of item and this will apply the

CSS that is included under the class selector of item and item last-class child which targets the last item

because each item has a bottom border to separate it from the previous item

other than the last one because that's the end of our list of items. Each item is going to have its own

separate div called item. And instead of having an li which has a bullet point remember

I'm going to instead change it to a p element or a paragraph element and I'm going to move it into my

div.

Now for the paragraph element I've applied a margin of 0all sides given it some padding, changed the font

size, changed the font color etc.

just to make it look quite nice.

And we've gotten rid of that a bullet point. Instead of having a bullet point

I'm going to add a checkbox instead.

And if you remember we can add checkboxes by creating an input with type of checkbox and I don't

need to have a value or a name. So let's just quickly beautify our HTML. And we can move on to the next

step.

Now our form where we have our input and our submit button is going to be the last item in our box.

So if you click over here you can see that this is the end of our div class box and we want our form

to be inside the box and just below the other items.

So right here. And our form is also going to have a class of item just so that we style it similarly

to the other to do list items.

But it's still going to have an action of targeting the root route

and also it's going to have a method equal to post.

Now the next thing is our inputs.

And in addition to having a type as well as a name, I'm also going to add a placeholder.

And this allows us to tell the user that this input is for your and new items that you're going to add.

And the final thing I'm going to do is I'm going to change the submit button from saying Add to simply

being a plus sign so that when the user sees the button, it'll be very similar to the Google material

design buttons where you just have a round circle with a plus sign in it.

So now let's hit refresh and you can see that we've styled our to do list and we've done that through

using just a few lines of CSS.

Now if we test out our functionality and let's just see if we're happy with the way it looks.

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

we get this auto suggest box which I don't really like because nobody really needs auto-suggestion

for you to do list items.

So I'm going to remove that by going into the input and changing the autocomplete to off. And now if

I refreshed the website, you can see that it no longer gives me that autocomplete and I have a much

cleaner interface.

So now that we've implemented our styles into our HTML, I just want to quickly walk you through the CSS

and address anything that you might not have seen before.

So the first thing is this Web Kit Linear gradient and this is a very simple way of creating a gradient

and you specify the degree of your gradient and you add the the percentage of your different colors.

So mine is going to be 50% this purple color and 50% this light whitish color.

And then it's going to create a linear gradient at 45 degrees and that is where this background comes

from.

Now the next thing I want to talk about is this item :last-child.

So this is going to look at all the items inside a div and then it's going to target specifically the

last child item and it's going to apply a specific style to it.

The next thing is this input:checked.

And that means it's going to look for an input that is in a checked state,

so that means that we've ticked a checkbox, and the +p

if you take a look at the reference, the plus sign means that it selects all the elements that come at the

end of the plus and they are placed immediately after the beginning of the selecter.

So in this case we're targeting all of the paragraph elements that come after checked inputs.

And this allows us to apply this nice little purple line to our paragraphs when we change the checkbox

to the checked state.

Now the next thing you might not have seen is this type of selecter which is where we use an input and

then we have these square brackets.

And this allows us to specify our CSS for a particular value of an attribute.

So in this case we're saying that look at all the inputs that have an attribute type that's equal to

checkbox and apply this style only to those things.

So because currently in our file we have both an input that are checkboxes as well as inputs which are

text inputs,

so if we wanted to apply that style to only the checkboxes, then this is one way of doing it.

And the last one I want to draw your attention to is this pseudo selector which is called placeholder and this

simply just targets our placeholder which remember just says newItem and gives it a particular style

of gray and makes it completely opaque.

Now a lot of these selectors are available in the reference over here on w3schools.com as well as MDN's

reference and there are more selectors then you could possibly go through.

So some students might wonder, why it is

have I not gone through every single one of these selectors? And the reason is because that would take

over 40 hours and it's not really the way that developers work.

It's much better when you want to target something specific

and if you can't work out how to do it then simply just search for it on Google or on Stack Overflow

and somebody will point you to a specific combo of CSS selectors that will achieve what it is that you

want.

So that is a much better way rather than going through each of these individually one by one by which

point everybody will forget how to do it anyways. So don't worry if these look new or unfamiliar.

As long as you can find out how they work and how to use it and in the future when you want to select

something specific and you can't figure out how to do it then remember that the references and Stack

Overflow is always there for you.

Now in the next lesson I want to talk about EJS layouts,

so another way of templating essentially but approaching it slightly differently.

So for all of that and more, I'll see you on the next lesson.