В рамках этого видео: адаптивная вёрстка, рефакторинг, работа над производительностью, немножко магии rem. Здесь есть много Flexbox, Grid CSS, Lighthouse и W3C анализ, и многое другое... ======================================= Стоит изучить перед просмотром: Вёрстка сайта ч. 1 (прошлое видео) - • Анализ, вёрстка десктопа, рефакторинг... Вёрстка сайта ч. 2 (это видео) - • Анализ, вёрстка адаптива, рефакторинг... Вёрстка сайта ч. 3 (смотреть после этого видео) - • Подключение Бургер меню, Swiper.js, А... Дополнения и горячие клавиши VS Code - • Лучшие дополнения vscode (Visual Stud... Grid CSS - • Введение в CSS Grid. Разбираемся с те... Flexbox - • Последовательность (order) элементов ... Макет:
======================================= 00:00 Введение 00:57 Ещё немного рефакторинга 12:01 Продумывание логики адаптива 15:34 Общие отступы для всех блоков 17:18 Поиск проблемных мест на планшете 18:08 Подготовка переменных для адаптива 21:20 Поиск проблемных мест на планшете 22:32 Рефакторинг навигации и первичный адаптив 39:08 Поиск места из-за которого появляется скролл 41:26 Блок Blog 42:45 Адаптив навигации 51:16 Блок Statistics 53:25 Поиск проблемных мест на планшете 55:03 Немножко rem магии 01:00:31 Блок Plan and manage 01:02:57 Блок Blog 01:08:55 Блок Newsletter 01:11:00 Рефакторинг и адаптив вертикальных отступов 01:19:48 Корректировка вертикальных отступов 01:21:30 Общая проверка 01:22:28 Поиск проблемных мест на больших телефонах 01:24:22 Блок Customers 01:27:18 Блок Plan and manage 01:28:49 Блок Features 01:35:34 Блок Statistics 01:36:28 Блок Blog 01:39:13 Блок Quotes 01:40:42 Блок FAQ 01:42:45 Блок Get started 01:43:40 Корректировка вертикальных отступов для телефонов и рефакторинг 01:46:39 Общая проверка 01:50:32 Поиск проблемных мест на маленьких телефонах 01:51:38 Блок Blog 01:59:44 Корректировка навигации 02:01:02 Блок Newsletter 02:02:18 Общая проверка и небольшие корректировки 02:05:30 Вынесение блока навигации 02:07:05 Улучшение производительности / performance