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

Включено в курс

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

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

Описание

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

Программа курса

• 1

  Введение

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

  теория
• 2

  Установка

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

  теория
• 3

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

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

  теория

  тесты

  упражнение
• 4

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

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

  теория

  тесты

  упражнение
• 5

  JavaScript

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

  теория

  тесты

  упражнение
• 6

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

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

  теория

  тесты

  упражнение
• 7

  Циклы

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

  теория

  тесты

  упражнение
• 8

  Миксины

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

  теория

  тесты

  упражнение
• 9

  Дополнительные материалы

  Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса

Формат обучения

Испытания

Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже