Технология верстки 2020: создание простого лендинга (часть 1)

Ролик показывает подход к верстке простого современного лендинга из PSD-дизайна с использованием Pug, SCSS, Webpack, Flexbox, Avocode. Разбираем возникающие по ходу работы ситуации несколькими способами. В этой части анализ дизайна, подготовка структуры проекта, настройка сборщика и верстка первой секции. СОДЕРЖАНИЕ: 00:00:00 Введение. 00:00:47 Анализируем PSD-макет. 00:06:42 Итог анализа. 00:08:11 Структура папок и файлов проекта. HTML/Pug, CSS/SCSS. Совсем коротко про Pug. 00:10:01 Сборка для проекта на Webpack. Node/NPM/Git/Bash. 00:11:20 Заполнение .gitignore и первый коммит. Запуск сборки. Hot Module Reloading. 00:13:45 Краткий обзор сборки на Webpack. 00:19:31 Начинаем первую секцию - section-header. Файл .editorconfig. Извлечение фона секции через Avocode. Причина по которой изображение не появляется. 00:27:35 Вводим ограничивающий контейнер. 00:28:38 Правка конфига - inject:false. 00:29:15 Заголовки макета. 00:31:23 Список элементов. Буллеты как SVG.