[HTML Academy] Онлайн-курс «Шаблонизаторы HTML»
Использование шаблонизаторов позволяет сократить время на разработку продуктов и уменьшить количество ошибок и исправлений. На курсе мы познакомимся с основными принципами работы шаблонов и рассмотрим их на примере Pug — одного из самых популярных шаблонизаторов.
Раздел 1
Синтаксис шаблонизаторов
— Введение в шаблонизаторы
— Выделение компонентов
— Тест по разделу
— Введение в синтаксис шаблонизатора Pug
— Правила написания тегов, работа с атрибутами
— Практика: перевод учебного проекта в синтаксис шаблонизатора
— Тест по разделу
— 6 демо-кейсов по материалам раздела
Раздел 2
Деление на шаблоны и компоненты
— Общие правила выделения шаблонов и компонентов
— Принцип описания шаблона и интеграция данных в него
— Принцип описания шаблонов через подключение компонентов
— Деление разметки на компоненты
— Практика: создаём шаблон для проекта и подключаем его ко всем страницам
— Практика: выделяем компоненты из разметки учебного проекта
— 2 демо-кейса по материалам раздела
Раздел 3
JavaScript внутри шаблонизатора
— Использование JavaScript внутри шаблонизатора
— Кейс: начинаем использовать JavaScript на страницах учебного проекта
— Практика: создаём переменные и начинаем их использовать
— Объекты и массивы внутри шаблонизатора
— Кейс: создаём данные для компонентов
— Практика: создаём данные для компонентов и подключаем их в разметку
Раздел 4
Циклы в шаблонизаторе PUG
— Использование циклов в шаблонизаторе PUG
— Кейс: решаем задачу по обработке и выводу данных с помощью циклов
— Практика: с помощью циклов выводим данные в разметку
Раздел 5
Условия и миксины в шаблонизаторе PUG
— Варианты использования условных конструкций внутри шаблонизатора
— Замена контента или классов по условиям
— Использование условных выражений в циклах
— Синтаксис условных конструкций в Pug
— Кейс: придаём логику разметке с помощью условий
— Практика: создание логики в учебном проекте с помощью условий
— Использование миксинов внутри разметки
— Кейс: создаём миксины для компонентов
— Практика: применение миксинов в учебном проекте
Раздел 6
Итоги курса
В этом разделе мы подведем итоги курса и поговорим о планах на будущее
— Итоги и планы
— Итоговый тест на усвоение знаний по шаблонизаторам