Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Express Basics

Well done!

You have completed Express Basics!

Sign up for Treehouse Back to Library

What is Pug?

3:00 with Andrew Chalkley and Joel Kraft

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 up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up