Технология верстки 2021: создание простого лендинга (часть 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. 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 Заключение. Задавайте ваши вопросы как спонсоры и получите ВИДЕООТВЕТ. Исходники к ролику (PSD-файл с дизайном находится там же): https://github.com/makewebme/website-landing-technology-2021 Основы Flexbox: https://youtu.be/H6O90IIqrtA Курс по Git: https://www.youtube.com/playlist?list=PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6 ⚛️⚛️⚛️ Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me. Детали тут: https://makeweb.me/course-js-fullstack-developer Телеграм для связи по курсу: @makewebchatme 🛍 🛍 🛍 Поддержи проект и получи скидку 5% на 1-ю оплату хостинга/домена Reg.ru. Промо-код: 948E-53B9-CF98-8204 (вводится во время оплаты услуги). 💬 💬 💬 Присоединяйся к нашему Telegram-чату https://t.me/makewebme