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

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

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

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

Описание

На этом курсе вы изучите препроцессор Pug для языка HTML. Вы узнаете больше о возможностях по шаблонизации HTML с использованием дополнительных инструментов, которые используются в Pug. В итоге вы научитесь использовать циклы, переменные, миксины для HTML. Pug пригодится, если вы решите создавать многостраничные сайты со сложной логикой. Знания из этого курса помогают программистам шаблонировать HTML для его переиспользования и использовать приемы из программирования для создания страниц.

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

• Создание структуры HTML документа
• Семантическая верстка
• Базовые теги для верстки элементов (таблицы, формы, заголовки, текст)

Изучить эти темы можно в следующих курсах:

1. Основы современной верстки
2. Основы верстки контента

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

• 1

  Введение

  Поговорим о целях и структуре курса

  теория
• 2

  Установка

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

  теория
• 3

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

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

  теория

  тесты

  упражнение

• 4

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

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

  теория

  тесты

  упражнение

• 5

  JavaScript

  Учимся использовать JavaScript внутри препроцессора и использовать интерполяцию переменных и выражений

  теория

  тесты

  упражнение

• 6

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

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

  теория

  тесты

  упражнение

• 7

  Циклы

  Учимся перебирать массивы и объекты с использованием циклов Pug

  теория

  тесты

  упражнение

• 8

  Миксины

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

  теория

  тесты

  упражнение

• 9

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

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

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

Испытания

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