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 mixins 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

  Learning about the goals and structure of the course

  theory
• 2

  Installation

  Installing the Pug preprocessor and compiling the first file

  theory
• 3

  Tags and content

  Learning to add tags, attributes, and content with Pug

  theory

  quiz

  exercise

• 4

  Connecting files

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

  theory

  quiz

  exercise

• 5

  JavaScript

  Learning to use JavaScript in the preprocessor, to work with interpolating variables and expressions, and add buffered and unbuffered code

  theory

  quiz

  exercise

• 6

  Conditional constructions

  Learning about the conditional constructs (if, else, unless)

  theory

  quiz

  exercise

• 7

  Cycles

  Learning how to loop through arrays and objects using Pug loops

  theory

  quiz

  exercise

• 8

  Mixins

  Learning how to create mixins to reuse a layout within Pug

  theory

  quiz

  exercise

• 9

  Additional resources

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

Challenges

We recommend working on these challenges after completing the course. They'll help you obtain more experience in programming and strengthen your new skills.