Привет! Ошибки допускают все, даже опытные верстальщики. И часто эти ошибки не поддаются никакому объяснению - они просто есть. То класс не так написан, то в сафари все поехало...В общем, в этом видео я хотел бы рассмотреть аж 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 - Заключение
github.com/yoksel/common-words - частоиспользуемые слова в классах
• Разбор ваших работ по ... - последняя проверка работ на канале
• Веб-доступность №2. Ка... - как семантика влияет на доступность
• Методология БЭМ. Теори... - видео по методологии БЭМ
caninclude.glitch.me/ - can i include (можно ли вложить?)
css-tricks.com/a-complete-gui... - отличная статья по ссылкам и кнопкам
clck.ru/RSUHK - декоративные и контентные изображения
www.artlebedev.ru/typograf/ - Типограф
github.com/WICG/focus-visible - focus-visible
• Организация отступов в... - организация отступов в верстке
necolas.github.io/normalize.css/ - normalize.css
codeguide.maxgraph.ru/ - кодстайл
• Stylelint. Как установ... - видео про stylelint
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
#обучение #ошибки #частыеошибки