Друзья, это видео для тех, кто знает базовый HTML и CSS. В нём я буду адаптивно верстать лендинг, ссылку на который вы можете найти ниже. Также я объясню на примерах следующую теорию: 1) Что такое адаптивная и резиновая верстка и зачем это нужно; 2) Что такое css-препроцессоры, зачем они нужны и как ими пользоваться; 3) Как использовать методологию BEM для именования классов в разметке; 4) Что такое компонентный подход в разработке интерфейсов; 5) Что такое svg-спрайты, зачем они нужны, как их создавать. Лендинг сверстаем частично, а остальное останется вам в качестве домашнего задания. Приятного просмотра Полезные ссылки: Дизайн лендинга:
Репозиторий с кодом:
Документация Sass на русском:
Документация BEM на русском:
Таймкоды: 0:00 - Введение 0:40 - Бонус для первых 10 подписчиков 0:54 - Адаптивная вёрстка 13:56 - СSS-препроцессоры 14:26 - Устанавливаем и используем Sass 18:35 - BEM 24:32 - Компонентный подход 28:43 - Подключаем шрифты 30:54 - Готовим изображения 33:35 - Создаем sass-переменные и компоненты 47:12 - Создаем svg-спрайт 49:15 - Продолжаем описывать стили для компонентов 55:38 - Верстаем первую секцию 1:02:06 - Верстаем вторую секцию 1:16:43 - Напоминание про бонус
