HTML: Препроцессор Pug

Курс посвящён HTML препроцессору Pug, основной целью которого является ускорение разработки и облегчение работы со структурой приложения. Pug позволяет добавить новую функциональность при разметке страниц: подключение модулей и файлов, шаблонизация, миксины, взаимодействие с JS. Это позволяет оптимизировать работу с вёрсткой и уменьшить количество ошибок в ней.

Чему вы научитесь:

• Размечать страницу с использованием синтаксиса Pug.
• Подключать файлы и дополнительные модули.
• Использовать JavaScript для добавления логики компиляции шаблона.
• Создавать миксины для переиспользования участков кода.

Уроки курса

• 1

  Введение

  Узнать о целях и структуре курса

  теория
• 2

  Установка

  Установить препроцессор Pug и скомпилировать первый файл

  теория
• 3

  Теги и контент

  Научиться добавлять теги, атрибуты и контент с помощью Pug

  теория

  тесты

  упражнение

• 4

  Подключение файлов

  Изучить подключение Pug файлов и работу с дополнительными модулями, позволяющие обрабатывать данные в разных форматах

  теория

  тесты

  упражнение

• 5

  JavaScript

  Научиться использовать JavaScript внутри препроцессора и использовать интерполяцию переменных и выражений. Изучить добавление буферизованного и небуферизованного кода.

  теория

  тесты

  упражнение

• 6

  Условные конструкции

  Изучить условные конструкции препроцесса Pug. Научиться использоваться конструкции if, else, unless

  теория

  тесты

  упражнение

• 7

  Циклы

  Научиться перебирать массивы и объекты с использованием циклов Pug. Изучить конструкцию each else

  теория

  тесты

  упражнение

• 8

  Миксины

  Научиться создавать миксины для переиспользования вёрстки внутри Pug. Узнать о передаче аргументов и конструкции block

  теория

  тесты

  упражнение