HTML БОЛЬШЕ НЕ НУЖЕН! Pug. Полный курс. Часть 1
Хватит мучиться с HTML кодом!
Освойте простой и очень гибкий язык разметки Pug!
В этой части мы изучим все основные возможности языка Pug, а также научимся быстро создавать эффектные прототипы разметок.
Для освоения материала достаточно базовых знаний HTML и JavaScript.
➡️ Следующая часть:
• PHP ОТ МИРА JAVASCRIPT! Pug. Полный к...
📂 Материалы ролика:
• Редактор CodePen:
https://codepen.io
• GitHub репозиторий с примерами:
https://github.com/CMTV/youtube/tree/...
🔗 Полезные ссылки
• Официальный сайт Pug (документация с примерами):
https://pugjs.org/
• Pug на npm:
https://www.npmjs.com/package/pug
• Pug на GitHub:
https://github.com/pugjs/pug
📜 Содержание:
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
