Анализ, вёрстка адаптива, рефакторинг, оптимизация, производительность
В рамках этого видео: адаптивная вёрстка, рефакторинг, работа над производительностью, немножко магии rem. Здесь есть много Flexbox, Grid CSS, Lighthouse и W3C анализ, и многое другое...
=======================================
Стоит изучить перед просмотром:
Вёрстка сайта ч. 1 (прошлое видео) - • Анализ, вёрстка десктопа, рефакторинг...
Вёрстка сайта ч. 2 (это видео) - • Анализ, вёрстка адаптива, рефакторинг...
Вёрстка сайта ч. 3 (смотреть после этого видео) - • Подключение Бургер меню, Swiper.js, А...
Дополнения и горячие клавиши VS Code - • Лучшие дополнения vscode (Visual Stud...
Grid CSS - • Введение в CSS Grid. Разбираемся с те...
Flexbox - • Последовательность (order) элементов ...
Макет:
https://www.figma.com/file/8T4byFDAV5...
=======================================
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
Смотрите видео Анализ, вёрстка адаптива, рефакторинг, оптимизация, производительность онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Просто: разработка 20 Февраль 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 12,71 раз и оно понравилось 42 людям.