HTML: Preprocessor Pug

Included in the course

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

Description

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

• 1

  Introduction

  Learn about the goals and structure of the course

  theory
• 2

  Installation

  Install the Pug preprocessor and compile the first file

  theory
• 3

  Tags and content

  Learn to add tags, attributes, and content with Pug

  theory
• 4

  Connecting files

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

  theory
• 5

  JavaScript

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

  theory
• 6

  Conditional constructions

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

  theory
• 7

  Cycles

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

  theory
• 8

  Mixins

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

  theory
• 9

  Additional resources

  Some materials the Hexlet team have picked up. This will give you a more in-depth understanding of the topic