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

  теория
• &.

  Продолжение следует

Автор

Никита Михайлов

Ключевые навыки: HTML, CSS, JS Frontend.

Много лет работал в аутсорсинговой компании. Развивал клиентские проекты, делал фичи для разных CMS. В основном верстал, готов передать весь опыт вам. Поработав с сотнями проектов, научился выкручиваться даже из самых безнадёжных ситуаций. Помогу освоить вёрстку, чтобы она перестала казаться чем-то страшным.