1
00:00:00,300 --> 00:00:04,090
Pug is one of the most popular
templating engines for Node.

2
00:00:04,090 --> 00:00:06,830
It is also commonly used with Express and

3
00:00:06,830 --> 00:00:10,520
it is the templating engine of choice for
this course.

4
00:00:10,520 --> 00:00:13,500
Let's get a feel for how Pug works.

5
00:00:13,500 --> 00:00:16,840
Pug is a language that compiles or
translates to HTML.

6
00:00:17,860 --> 00:00:23,120
Instead of using HTML opening and closing
tags to describe elements, you just type

7
00:00:23,120 --> 00:00:29,690
the tag name a space, and then the content
that you want to appear inside that tag.

8
00:00:29,690 --> 00:00:33,916
For example, if I want to
render HTML heading number one,

9
00:00:33,916 --> 00:00:36,084
I'd use the following code.

10
00:00:36,084 --> 00:00:41,010
On the left, you can see the line of
Pug and on the right equivalent HTML.

11
00:00:41,010 --> 00:00:44,700
To nest HTML elements you use indentation.

12
00:00:45,830 --> 00:00:51,570
For example, here's how an ordered
list looks like in Pug.

13
00:00:52,610 --> 00:00:56,760
Because the line starting with
li are indented after the ul,

14
00:00:56,760 --> 00:01:01,450
Pug knows to nest these elements
inside of the ul HTML output.

15
00:01:01,450 --> 00:01:03,300
You can use tabs or spaces for this.

16
00:01:04,500 --> 00:01:08,030
Just make sure that you stay
consistent with whichever you choose.

17
00:01:09,180 --> 00:01:12,490
Let's see how to add
attributes to an element.

18
00:01:12,490 --> 00:01:16,560
For example,
let's a create a simple web page.

19
00:01:16,560 --> 00:01:21,080
We'll want the language attribute
on the HTML tag to be English, so

20
00:01:21,080 --> 00:01:22,050
we would write this.

21
00:01:23,250 --> 00:01:28,220
Let's put a div inside the body and
give it the class of wrapper.

22
00:01:28,220 --> 00:01:33,130
While this works just fine, Pug offers
a shortcut for adding classes to elements.

23
00:01:34,360 --> 00:01:37,700
The change in the Pug will
render the equivalent HTML.

24
00:01:38,710 --> 00:01:39,560
As you can see,

25
00:01:39,560 --> 00:01:45,700
we're just using a dot, just as you
would indicate the CSS class selector.

26
00:01:45,700 --> 00:01:50,180
You might have already guessed
that the shortcut is for ids too.

27
00:01:50,180 --> 00:01:55,650
This places a paragraph inside the wrapper
div with the id of "mainContent".

28
00:01:55,650 --> 00:01:59,443
If you need an attribute
other than the class or id,

29
00:01:59,443 --> 00:02:04,663
use parentheses and a key value pair
the way you can see on the HTML tag.

30
00:02:04,663 --> 00:02:09,309
One other thing I want to point out here
is that because divs are so prevalent

31
00:02:09,309 --> 00:02:14,630
in HTML, the makers of Pug have created
a shortcut so you can generate divs.

32
00:02:14,630 --> 00:02:16,460
If you just type the class name or

33
00:02:16,460 --> 00:02:20,050
the id, Pug will assume that
you want it to be on a div.

34
00:02:21,150 --> 00:02:23,110
Here, you see both possibilities.

35
00:02:23,110 --> 00:02:25,860
The wrapper class renders
a div with a class "wrapper".

36
00:02:27,070 --> 00:02:32,310
And the id of mainContent renders
a div with the id, "mainContent".

37
00:02:32,310 --> 00:02:34,100
You can see that with Pug,

38
00:02:34,100 --> 00:02:38,580
you don't need to type much in order
to render a complete HTML page.

39
00:02:38,580 --> 00:02:43,490
This compact style is a big reason why
some developers find it a pleasure to use.

40
00:02:43,490 --> 00:02:47,300
We're only scratching the surface
of what Pug is capable of.

41
00:02:47,300 --> 00:02:50,540
But we're going to do a lot more with
Pug templates throughout the rest of

42
00:02:50,540 --> 00:02:52,040
this course.

43
00:02:52,040 --> 00:02:56,410
Now that you have a feel for
how to use Pug, let's actually write some.

44
00:02:56,410 --> 00:03:00,100
In the next video, I'll teach you
how to use Pug in an Express app.