Сайт использует сервис веб-аналитики Яндекс Метрика с помощью технологии «cookie». Пользуясь сайтом, вы даете согласие на использование данной технологии.
Хватит мучиться с HTML кодом! Освойте простой и очень гибкий язык разметки Pug! В этой части мы изучим все основные возможности языка Pug, а также научимся быстро создавать эффектные прототипы разметок. Для освоения материала достаточно базовых знаний HTML и JavaScript. ➡️ Следующая часть: • PHP ОТ МИРА JAVASCRIPT! Pug. Полный курс. ... 📂 Материалы ролика: • Редактор CodePen: • GitHub репозиторий с примерами: 🔗 Полезные ссылки • Официальный сайт Pug (документация с примерами): • Pug на npm: • Pug на GitHub: 📜 Содержание: 0:00 Вступление 1:38 Чем плох HTML? 3:06 Что такое Pug? 3:26 Преимущества Pug 3:53 Знакомство с редактором CodePen 5:58 Теги 8:45 Атрибуты 9:49 Классы и идентификаторы 10:56 Тег div 12:30 Комментарии 13:57 Пример: Красивое сообщение 19:43 Блоки JavaScript кода 21:50 JavaScript внутри тегов 23:39 Неэкранированный JavaScript внутри тегов 24:17 JavaScript в атрибутах 25:31 Неэкранированный JavaScript в атрибутах 26:15 Javascript в атрибутах и внутри тегов 27:18 Встраивание JavaScript в контент 28:32 Условия. if ... else 29:56 Условия. case ... when 31:29 Цикл while 33:09 Цикл each по массивам 35:12 Цикл each по объектам 36:37 Атрибуты без значения 37:54 Атрибуты через объект 39:18 Продвинутая работа с классами 41:28 Пример: Радуга 47:48 Пример: Массив сообщений 57:00 Понятие миксина 58:27 Миксины без параметра 59:30 Миксины с параметрами 1:02:01 Пример: Акцент-блок. Начало 1:04:10 Ключевое слово block 1:05:26 Пример: Акцент-блок. Завершение 1:08:23 Атрибуты миксина 1:11:16 Пример: Много сообщений через миксин 1:14:45 Пример: Рекурсивный миксин 1:20:23 Заключение #pug #pugjs #html #javascript #js
