Ролик показывает подход к верстке простого современного лендинга из 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.
00:36:34 Разрешаем SVG-артефакт вручную.
00:40:13 Список элементов. Line-height, padding
00:42:10 Делаем кнопку.
00:44:54 Подключаем шрифт Roboto с Google Fonts.
00:47:45 Второй способ сделать галочки в буллетах списка.
00:49:47 Выставляем отступы между блоками внутри section-header.
00:56:25 Приводим список элементов к внешнему виду как на макете.
01:05:32 Решаем проблему с фоновой картинкой двумя способами - через Photoshop и через сплошной фоновый цвет.
01:15:33 Верхняя полупрозрачная плашка
01:26:33 Подводим итог и правим контейнер верхней плашки с помощью padding'ов.
01:28:07 Добавляем наши изменения в Git. Как надо делать коммиты.
01:29:33 Заключение. Задавайте ваши вопросы как спонсоры и получите ВИДЕООТВЕТ.

Исходники к ролику:
https://github.com/makewebme/website-tech2020-simple-landing

Основы Flexbox:
https://youtu.be/H6O90IIqrtA

Курс по Git:
https://www.youtube.com/playlist?list=PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6