PUG Template Engine Master Course

Explore the pug template engine, learn its syntax and features, and set up a local workflow to start writing clean, error-free templates.

Emphasizes indentation as a core rule in pug, showing how nesting tags like head, title, and body with a paragraph yields valid html. Demonstrates how consistent indentation keeps code clean.

Learn how to set up Pug as an HTML preprocessor, use indentation and dot notation to nest elements like ul and li, and see how Pug compiles to regular HTML.

Learn buffering versus unbuffered code in the Pug template engine, running plain JavaScript inside templates, declaring variables, building arrays, and printing items with loops and concatenation.

Learn how to write attributes in pug, including class, id, and input attributes like type, name, and required. Explore dot notation for multi-class and nesting, plus quick styling with parentheses.

Learn how to document your Pug templates with comments that help developers communicate without exposing notes in HTML, using // for visible comments and //- for hidden dev-only notes.

Learn how to use conditionals in Pug templates by evaluating variables like user login status to display messages with if, else, and else if, making the page dynamic.

Interpolate variables in pug by embedding them in text with #{name} or rendering with p= name inside a paragraph; use pipes and brackets to manage multi-line and inline styling.

Learn how to render multiple items in a Pug template by looping over a stores array, using each or for loops, and printing each store name in a paragraph.

Create and reuse mixins in pug by defining a mixin with arguments, printing links, using rest parameters, and iterating with each to render names.

Set up your local environment to run pug by installing node and npm, installing gulp and gulp-pug, and using browsersync for live reload while compiling pug to HTML.

Discover how to use includes in the Pug template engine: create a shared header in views, and include it across pages for consistent, maintainable layouts.

Learn how to create and extend layouts in Pug by defining blocks such as content, title, and footer, and using extends to compose pages with a shared header and footer.