HTML: Preprocessor Pug

2 students
Course updated 02 February 2023
Course HTML: Preprocessor Pug
$49 per month
for all Hexlet's courses
Sign up
  • Permanent access to theory
  • Asynchronous learning

Included in the course

8 lessons (video or text)
Assistance in Discussions on the website
Access to other courses of the our platform

What you'll learn

  • Mark up the page using Pug syntax
  • Include files and plugins
  • Use JavaScript to add logic to compile a template
  • Create myxins to reuse code snippets


The course is devoted to the Pug HTML preprocessor, the main purpose of which is to speed up development and facilitate work with application structure. Pug allows you to add new functionality to page layout: plugins and files, templates, mixins, interaction with JS. This allows you to optimize your work with the layout and reduce the number of errors in it.

Course program

Estimated time: 3 hours
  • 1


    Learn about the goals and structure of the course
  • 2


    Install the Pug preprocessor and compile the first file
  • 3

    Tags and content

    Learn to add tags, attributes, and content with Pug
  • 4

    Connecting files

    To learn how to connect Pug files and work with additional modules that allow you to process data in different formats
  • 5


    Learn to use JavaScript inside the preprocessor and use interpolation of variables and expressions. Learn how to add buffered and unbuffered code.
  • 6

    Conditional constructions

    Learn the conditional constructs of the Pug preprocess. Learn how to use the if, else, unless constructions.
  • 7


    Learn how to loop through arrays and objects using Pug loops. Learn the construct of each else
  • 8


    Learn how to create mixins to reuse a layout within Pug. Learn about passing arguments and the block construct
  • 9

    Additional resources

    Some materials the Hexlet team have picked up. This will give you a more in-depth understanding of the topic
Suggested learning programs
Layout Designer icon
Under development beginner
Layout with the latest CSS standards
start anytime 5 months