Ревью и рефакторинг верстки сайта: Практическое руководство для улучшения адаптивности. Стрим

В этом видео вы погрузитесь в процесс ревью и рефакторинга верстки сайта, где мы обнаружим и исправим проблемы с адаптивностью, горизонтальным скроллом, отступами и UX. Мы рассмотрим каждую проблему в деталях и проведем кодовые изменения для улучшения сайта. Вы узнаете о методологии БЭМ, использовании CSS-нейминга, а также о применении медиа-запросов для адаптивного дизайна. В конце видео мы оценим результаты нашего рефакторинга и попрощаемся с проектом. Присоединяйтесь к нам и улучшите свои навыки в верстке и адаптивном дизайне! Перезалив стрима верстки Как не нужно верстать - ускорил ролик в x1.2, убрал шумы, увеличил громкость. 0:00 Приветствие 0:30 История болезни пациента 1:06 Осмотр проблемных мест верстки сайта 1:13 Проблема адаптивности сайта 2:10 Проблема адаптивности карусели 2:33 Проблема горизонтального скролла 3:14 Проблема отступов контента 3:35 UX проблема - ссылки без ссылок 4:05 Приступим к коду 4:19 Добавляем doctype 4:57 Неверное место подключения скриптов 5:14 Исправление сносок тега label на тег input 6:13 Не делайте отступы при помощи br, он не для этого 6:39 Исправление открытых и закрытых тэгов 7:36 Ошибка местоположения тегов и пара слов о семантике 8:27 Про историю тега b 9:17 Пара слов от верстальщике, авторе кода 10:00 Исправление ссылок в подвале 11:58 Использование Nobr тега, зачем он нужен и как работает 12:30 Займемся отступами 12:45 Свойство css text-indent и как он работает 13:03 Используй padding, короткая запись и как ее понимать 15:10 Ошибки CSS: Не указывать единицы измерения 15:40 Ошибки CSS: Неправильно указан fallback шрифтов и что такое sans-serif 16:49 Float-ы для верстки прошлый век и зачем они нужны на самом деле 18:14 Исправление отступов без text-indent 18:51 Избавление от ненужных css классов. Don't Repeat Yourself 19:42 Пара слов про нейминг 19:51 Поиски решений исправления горизонтального отступа 28:03 Исправления высоты фона контента 28:48 Исправление адаптивности карусели и can I use object-fit 35:15 Проблема верстки меню и исправление 36:42 Проблема логотипа 37:59 Про использование id в верстке 38:41 Про путь до картинки из css файла 39:12 Давайте всё, нах...р, переверстаем! 39:18 Тэг header 39:29 Почему вешать стили на class лучше, чем на тэг и теория о спецификации 40:41 Header - это хидер 41:08 Методология css-нейминга БЭМ: Блок, Элемент, Модификатор 42:22 Единицы измерения VW и как они работают 43:23 Можно использовать Flexbox: align-items, flex-flow 45:30 Элемент хидера - меню, бэм-нейминг 46:01 Переверстаем по бэму элементы меню. Про БЭМ и каскад 47:05 Как работает якорь (anchor) 48:15 Продолжаем обмазывать БЭМ-ом верстку, говорит про смысл БЭМа и что он решает 49:20 Переверстываем список на flex-ы 50:44 Про позиционирование: relative, absolute, fixed 51:30 Потеря мыслей 51:50 Мы продолжаем 51:59 Псевдоклассы в CSS: hover, active, focus 53:17 Проверка состояния и продолжаем 54:15 Социальные иконки, БЭМ нейминг и элементы элементов 58:40 Правки шапки: Как работает flexbox justify-content: space-between 1:00:05 Упростим меню, покрутим шапку, доделки правок 1:09:30 Исправляем адаптивность отступов - css функция calc и как она работает 1:11:40 Проблема paralax эффекта 1:13:56 Смешение БЭМ и SMACSS 1:15:10 Использование нативных css переменных 1:16:55 Список должен быть списком 1:18:15 Что в итоге получилось с отступами? 1:20:20 Про семантику заголовков h1, h2, h3, h4 1:21:00 Попытка избавиться от лишних тегов и не сломать parallax 1:25:00 Рефакторинг блоков параллакса по БЭМ и SMACSS 1:28:25 Рефакторинг блока контакты и заодно подвала 1:35:50 Рефакторинг блоков контента 1:42:15 Исправление горизонтального скролла - виновник найден - форма обратной связи 1:48:13 Применение медиа-запросо (media-query) и как они работают 1:52:04 Исправление заголовков 1:57:45 Итог и прощание