Шаблонизатор Pug/jade - ускоритель для HTML

Вы научитесь:

• Основам работы с шаблонизатором Pug на реальных примерах
• Научитесь писать вёрстку на шаблонизаторе Pug (jade), создавать независимые блоки кода для импорта и последующей модификации на любые страницы
• Использовать переменные, условия-возможности, также включать расширенный функционал с помощью вложенных страниц, шапки, подвалы, файлы конфигурации и многое-многое другое
• Научитесь использовать шаблон, дополнять его, расширять и т.д.
• Познакомитесь с миксинами, заметно упрощающими однотипное наполнение сайта
• Увидите, как использовать возможности других языков вместе с языком Pug, таких как препроцессоры CSS
• Также узнаете о возможностях языка JavaScript, которые сделали Pug поистине потрясающим инструментом современного фронтенд-разработчика
• Создадите большой макет с разными фишками - переменными, условиями, с подключениями других блоков на сайт, с использованием миксинов, где это было нужно. С использованием конфигурационного файла, дополнения этого файла, изменений и прочих нюансов.

1. Введение. Подготовка окружения.

• 1.1 Введение
• 1.2 Настройка среды разработки для Pug

2. Основы синтаксиса PUG(JADE)

• 2.1 Быстрые теги HTML и вложенность
• 2.2 Работа с текстом внутри тегов
• 2.3 Быстрое добавление классов и идентификаторов
• 2.4 Расширенная работа с атрибутами
• 2.5 Создание базовой структуры HTML-документа

3. Работа с шаблонами

• 3.1 Создание родительских и дочерних шаблонов
• 3.2 Добавления в блоки - в конец и в начало
• 3.3 Переменные и условия для конфигурации шаблона
• 3.4 Обновление конфигурации для каждой страницы

4. Работа с другими языками внутри PUG

• 4.1 Добавление строчного JS или CSS
• 4.2 Использование языковых фильтров
• 4.3 Подключение внешнего HTML

5. Продвинутые техники шаблонизатора PUG

• 5.1 Возможности JavaScript
• 5.2 Использование миксинов. Пример со слайдером
• 5.3 Меню с использованием миксина

6. Заключение

• 6.1 Подведение итогов