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 - Заключение

https://github.com/yoksel/common-words - частоиспользуемые слова в классах
   • Разбор ваших работ по верстке онлайн....   - последняя проверка работ на канале
   • Веб-доступность №2. Как HTML-семантик...   - как семантика влияет на доступность
   • Методология БЭМ. Теория + пример   - видео по методологии БЭМ
https://caninclude.glitch.me/ - can i include (можно ли вложить?)
https://css-tricks.com/a-complete-gui... - отличная статья по ссылкам и кнопкам
https://clck.ru/RSUHK - декоративные и контентные изображения
https://www.artlebedev.ru/typograf/ - Типограф
https://github.com/WICG/focus-visible - focus-visible
   • Организация отступов в верстке. margi...   - организация отступов в верстке
https://necolas.github.io/normalize.css/ - normalize.css
https://codeguide.maxgraph.ru/ - кодстайл
   • Stylelint. Как установить и пользоваться   - видео про stylelint



Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.

Понравилось? https://clck.ru/Gr9Ec
Канал в телеграм: https://teleg.run/maxgraph
Чат для верстальщиков: https://teleg.run/maxgraph_chat
Моя страница вконтакте: http://vk.com/maxdenaro
Мой блог: http://blog.maxgraph.ru
Мой сайт: http://maxgraph.ru


#обучение #ошибки #частыеошибки