Speed up your HTML Creation with Pug
Pug Tutorial
Pug is a useful, but perhaps lesser known, tool for creating HTML documents without the hassle and extra verbiage of HTML syntax.
With Pug there is no need to type closing tags, and nesting is achieved by indentation. Repeated code is avoided through the use of included files, which normal HTML does not allow, and blocks of code can be used to override default code, meaning that page-specific content can be created whilst still avoiding code repetition.
But Pug offers much more than that; it offers all the programming power of JavaScript - variables, objects, iteration, mixins, and the ability to read data files can all be combined to generate dynamic HTML with highly efficient and tersely written source code.
Pug will transform the way you create your HTML pages so jump on in and learn it now!
Course Curriculum
-
PreviewPug Tutorial - Preliminaries. Install Visual Studio Code, Nodejs, and Pug (4:05)
-
PreviewLesson 1 - Create your first Pug file; Basic Pug syntax; Compiling to HTML (7:16)
-
PreviewLesson 2 - More Pug syntax; Multi line content; Classes, IDs and attributes (5:46)
-
StartLesson 3 - Assignment: Create a more complete index file (1:52)
-
StartLesson 4 - Go through assignment (5:59)
-
StartLesson 5 - Emmet in Pug (6:25)
-
StartLesson 6 - Including files (6:16)
-
StartLesson 7 - Extends and blocks (7:29)
-
StartAssignment - Create other pages (1:15)
-
StartLesson 8 - JavaScript in Pug: Variables (5:09)
-
StartLesson 9 - JavaScript: Arrays, Objects and Iteration (4:27)
-
StartLesson 10 - Mixins (3:30)
-
StartLesson 11 (1) - Go through final project: Static Pug file (3:21)
-
StartLesson 11 (2) - Go through final project: Includes, Extends, Blocks (3:59)
-
StartLesson 11 (3) - Go through final project: Mixins, Data, Iteration and Tidy Up (6:48)