37 ошибок верстальщиков. Не делай так!

Привет! Ошибки допускают все, даже опытные верстальщики. И часто эти ошибки не поддаются никакому объяснению - они просто есть. То класс не так написан, то в сафари все поехало...В общем, в этом видео я хотел бы рассмотреть аж 37 подобных случаев, ошибок, которые не нужно допускать. В этом видео я не смеюсь над теми, кто их совершает, да даже сам некоторые до сих пор совершаю. Я хочу лишь донести то, что это действительно ошибки, и как их исправить. Поехали! Содержание: 00:00 - Вступление и критерии верстки 01:30 - Названия классов транслитом 02:38 - Названия классов не по назначению 03:44 - Названия классов верные, но теги - нет 04:40 - Большая длина названий классов 05:28 - Большая вложенность классов 06:40 - Проблема именования в БЭМ - элемент элемента 08:08 - Проблема именования в БЭМ - модификаторы 09:08 - Неверная табуляция кода 10:08 - Неправильная семантика в html 11:00 - Большая вложенность в html 12:26 - Неверное использование заголовков 14:22 - Использование тегов там, где их использовать нельзя 15:52 - Неверное использование ссылок и кнопок 17:48 - Декоративные элементы в html 18:48 - Декоративные изображения в html 19:44 - Проблема переполнения на сайте 21:26 - Не соблюдается базовая доступность 21:53 - Кириллица в названиях классов, картинок и т.д. 23:18 - Использование id для стилизации 24:15 - Бездумное использование br 25:36 - Использование инлайн-стилей 26:15 - Неверное использование абсолютного позиционирования 28:02 - Организация отступов в верстке 29:25 - Использование фиксированной высоты 30:35 - Следите за наследованием шрифтов 31:45 - Ошибки в стилизации textarea 33:52 - cursor: pointer и hover для интерактивных элементов 34:38 - Удаление outline без альтернативы 35:46 - Сброс и нормализация стилей 36:29 - Фоновые изображения и фоновый цвет 37:27 - Дробные пиксели 38:14 - анимация через left вместо transform 39:16 - Большое количество медиа-запросов 40:09 - Использование !important 41:22 - Неверный подход к верстке 42:20 - Несоответствие кодстайлу 43:03 - Кроссбраузерность 43:24 - Проблемы адаптива 44:02 - Заключение
- частоиспользуемые слова в классах
- последняя проверка работ на канале
- как семантика влияет на доступность
- видео по методологии БЭМ
- can i include (можно ли вложить?)
- отличная статья по ссылкам и кнопкам
- декоративные и контентные изображения
- Типограф
- focus-visible
- организация отступов в верстке
- normalize.css
- кодстайл
- видео про stylelint Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось?
Канал в телеграм:
Чат для верстальщиков:
Моя страница вконтакте: http://vk.com/maxdenaro
Мой блог:
Мой сайт:
#обучение #ошибки #частыеошибки