В рамках этого видео: анализ макета, вёрстка десктоп версии сайта, рефакторинг, оптимизация, доступность. Здесь есть много Flexbox, Grid CSS, Lighthouse, W3C анализ.
=======================================
Стоит изучить перед просмотром:
Вёрстка сайта ч. 1 (это видео) - • Анализ, вёрстка дескто...
Вёрстка сайта ч. 2 (смотреть следующим) - • Анализ, вёрстка адапти...
Вёрстка сайта ч. 3 (а потом вот это) - • Подключение Бургер мен...
Дополнения и горячие клавиши VS Code - • Лучшие дополнения vsco...
Grid CSS - • Введение в CSS Grid. Р...
Flexbox - • Последовательность (or...
Макет:
www.figma.com/file/8T4byFDAV5...
=======================================
Таймлайн:
00:00 Анализ макета
06:21 Формирование общей структуры
28:55 Шапка / Header
1:00:31 Подвал / Footer
1:04:02 Блок 1. Hero image
1:41:27 Блок 2. Customers
1:46:48 Блок 3. Plan and manage
2:05:42 Блок 4. Features
2:33:04 Блок 5. Statistics
2:45:44 Блок 6. Blog
3:31:36 Блок 7. Quotes
3:48:47 Блок 8. FAQ
4:12:15 Блок 9. Get started
4:26:46 Блок 10. Newsletter
4:39:32 Рефакторинг, оптимизация, танцы с бубном
5:38:11 Улучшение доступности / Accessibility