О курсе
Pug – это шаблонизатор или HTML-препроцессор, позволяющий в удобной манере писать код более понятный для восприятия человеком. С помощью шаблонизатора разработчик пишет меньше кода, создает удобные для восприятия вложенные конструкции, необходимые переменные и прочее.
Курс «Шаблонизатор Pug» рассматривает особенности этого инструмента. Вы начнете изучение Pug с истории возникновения и его основных преимуществ по сравнению с традиционным HTML. Далее, шаг за шагом продолжим рассмотрение всех нюансов работы с этим инструментом.
В ходе курса вы подробно узнаете об особенностях синтаксиса Pug, его тегах и атрибутах. Будут подробно рассмотрены способы использования текста в рамках различных меток, а также вы освоите возможности управления атрибутами, классами и идентификаторами.
Кроме основного синтаксиса, вы научитесь работать со встроенным кодом JavaScript в Pug, использовать условные операторы, а также овладеете созданием циклов и миксинов для оптимизации и облегчения работы над проектами.
Курс также включает важные аспекты использования макетов и включений, помогая вам освоить наследование шаблонов и эффективное использование блоков в своих проектах.
На заключительном этапе вы сможете применить полученные знания при создании практического проекта, который будет включать разработку полноценной страницы с использованием всех навыков, полученных во время курса.
Курс подойдет как новичкам, так и опытным разработчикам, желающим углубить свои знания и навыки в работе с Pug. Для успешного прохождения этого курса необходимы базовые знания по HTML, CSS и JavaScript.
Этот курс входит в специальности:
Предварительные Требования
- Базовые знания HTML
- Базовые знания CSS
- Базовые знания JS
Вы научитесь
- Использовать весь функционал шаблонизатора Pug.
- Понимать основы шаблонизации.
- Настраивать среду Pug для работы.
- Понимать и использовать основы Pug: его синтаксис, тэги и работу с текстом.
- Понимать использование строкового текста (inline) в тегах, уметь использовать конвейерный (piped) и блочный текст.
- Понимать вариативность атрибутов. Использовать многострочные, логические атрибуты и атрибуты "в кавычках". Разбивать объект на атрибуты элемента с помощью синтаксиса &attributes.
- На практике использовать встроенный Javascript в Pug, а именно: буферизированный, небуферизованный и неэкранированный-буферизованный код. Также использовать синтаксис переменных.
- Использовать условный синтаксис в шаблонизаторе Pug, а именно: условные операторы if и else, оператор unless, оператор case (when).
- Понимать и применять циклы each и while в шаблоне Pug.
- Использовать миксины как аналог функциональных компонентов. Использовать атрибуты миксинов и так называемый Rest Arguments.
- Использовать операторы block, extends, append и prepend.
- Использовать Pug для создания структурированных и оптимизированных HTML-шаблонов.
- Создавать гибкие и адаптивные макеты веб-страниц с использованием всего функционала Pug.
- Разработка шаблонов, отличающихся чистотой и структурированностью, без использования дополнительных стилей и классов CSS.
- 6 ч 27 м
- 28.09.2023
- 10
- 28.09.2023
- украинский
Что входит в курс
×
Вы действительно хотите открыть доступ к тестированию по курсу Шаблонизатор Pug на 40 дней?
Цель урока – познакомить студентов с явлением шаблонизации, объяснить, для каких нужд она используется. Помочь выбрать правильную среду разработки. Рассказать об истории возникновения 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.
Доступ к полному курсу с учебными материалами и тестированием на 30 дней за 14,99 USD
Купить