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

Прокачайте свои навыки по HTML, освоив современный инструмент веб-разработки Pug (ранее jade). 

Шаблонизатор Pug/jade - ускоритель для HTML
18 уроков18 уроков
СертификатСертификат
РусскийРусский
beONmax

Описание:

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

  • Основам работы с шаблонизатором 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 Подведение итогов