Шаблонізатор Pug

Ціль уроку – познайомити студентів з явищем шаблонізації, пояснити, для яких потреб вона використовується. Допомогти обрати правильне середовище розробки. Розказати про історію виникнення Pug та розглянути переваги Pug над звичайним HTML.

Ціль уроку – налаштувати середовище розробки Pug, при цьому встановивши всі необхідні програми, залежності та плагіни. Познайомити студентів із Node.js та таск-менеджером для автоматичного виконання завдань Gulp. Розказати та пояснити принцип роботи нашого базового шаблону Pug для автоматичної компіляції, з яким ми будемо працювати протягом усього курсу.

Ціль уроку – розглянути базовий синтаксис шаблонізатора Pug, а саме логіку його побудови та різновидність тегів. Навчитись створювати швидкі HTML теги та вкладати їх один в одного. Попрактикуватись вставляти текст всередину тегів, а також додавати необхідні атрибути.

Ціль уроку – розглянути різні варіанти передачі тексту усередину тегів в Pug. Дізнатись про звичайний та найбільш популярний - рядковий текст (inline) у тегах. Навчитись використовувати так званий конвеєрний текст (piped) та розглянути на практиці доволі популярний блоковий текст. Попрактикуватись із контролем пробілів для запобігання синтаксичних помилок.

Ціль уроку – навчитись додавати класи та ідентифікатори до тегів, використовуючи скорочений (швидкий) синтаксис Pug. Розглянути варіативність атрибутів, а саме багаторядкові та “в лапках”. Зрозуміти, в яких випадках слід застосовувати логічні атрибути. На практиці засвоїти розбиття об’єкта на атрибути елемента за допомогою синтаксису &attributes.

Ціль уроку – навчитись додавати коментарі до вашого коду в шаблонізаторі Pug та розуміти різницю між їх видами. Розглянути дуже важливу тему вбудованого коду Javascript в Pug, вміти на практиці використовувати різні види цього коду, а саме: буферизованого, небуферизованого та неекранованого-буферизованого. Засвоїти синтаксис використання змінних в Pug.

Ціль уроку – навчитись використовувати умовний синтаксис в шаблонізаторі Pug, а саме умовні оператори if та else. Вивчити новий оператор unless для більш стислого та зручного коду. Розглянути на практиці оператор case (when), що по своїй суті є повним аналогом switch (case) в Javascript.

Ціль уроку – вивчити цикли each та while в шаблонізаторі Pug. Зрозуміти, яким чином вони працюють, вміти контролювати розгалуження та ітерації. Дізнатись про міксини як аналог функціональних компонентів у прогресивних фронтенд-фреймворках. Поговоримо про атрибути міксинів та про задання дефолтного значення аргументу, якщо його не передано користувачем. Розглянемо важливий аспект передачі невідомої кількості аргументів у міксини - так званий Rest Arguments.

Ціль уроку – навчитись включати різні файли у наш шаблон Pug, використовуючи новий оператор include. Дізнатись про спадкування шаблонів, що дозволяє розділяти складні структури шаблонів сторінок на менші та простіші файли. Вивчити оператори block та extends. На практиці вміти застосовувати блоки append та prepend.

Ціль уроку – розробити повноцінну сторінку (лендинг) з використанням усіх навичок, здобутих під час даного курсу. Навчитись створювати GitHub репозиторій та заливати туди свій проєкт. На практиці засвоїти процес деплою вашого проєкту на безплатний хостинг Netlify.