Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Let's walk through some Pug basics.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Pug is one of the most popular
templating engines for Node.
0:00
It is also commonly used with Express and
0:04
it is the templating engine of choice for
this course.
0:06
Let's get a feel for how Pug works.
0:10
Pug is a language that compiles or
translates to HTML.
0:13
Instead of using HTML opening and closing
tags to describe elements, you just type
0:17
the tag name a space, and then the content
that you want to appear inside that tag.
0:23
For example, if I want to
render HTML heading number one,
0:29
I'd use the following code.
0:33
On the left, you can see the line of
Pug and on the right equivalent HTML.
0:36
To nest HTML elements you use indentation.
0:41
For example, here's how an ordered
list looks like in Pug.
0:45
Because the line starting with
li are indented after the ul,
0:52
Pug knows to nest these elements
inside of the ul HTML output.
0:56
You can use tabs or spaces for this.
1:01
Just make sure that you stay
consistent with whichever you choose.
1:04
Let's see how to add
attributes to an element.
1:09
For example,
let's a create a simple web page.
1:12
We'll want the language attribute
on the HTML tag to be English, so
1:16
we would write this.
1:21
Let's put a div inside the body and
give it the class of wrapper.
1:23
While this works just fine, Pug offers
a shortcut for adding classes to elements.
1:28
The change in the Pug will
render the equivalent HTML.
1:34
As you can see,
1:38
we're just using a dot, just as you
would indicate the CSS class selector.
1:39
You might have already guessed
that the shortcut is for ids too.
1:45
This places a paragraph inside the wrapper
div with the id of "mainContent".
1:50
If you need an attribute
other than the class or id,
1:55
use parentheses and a key value pair
the way you can see on the HTML tag.
1:59
One other thing I want to point out here
is that because divs are so prevalent
2:04
in HTML, the makers of Pug have created
a shortcut so you can generate divs.
2:09
If you just type the class name or
2:14
the id, Pug will assume that
you want it to be on a div.
2:16
Here, you see both possibilities.
2:21
The wrapper class renders
a div with a class "wrapper".
2:23
And the id of mainContent renders
a div with the id, "mainContent".
2:27
You can see that with Pug,
2:32
you don't need to type much in order
to render a complete HTML page.
2:34
This compact style is a big reason why
some developers find it a pleasure to use.
2:38
We're only scratching the surface
of what Pug is capable of.
2:43
But we're going to do a lot more with
Pug templates throughout the rest of
2:47
this course.
2:50
Now that you have a feel for
how to use Pug, let's actually write some.
2:52
In the next video, I'll teach you
how to use Pug in an Express app.
2:56
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up