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    • Организация отступов в верстке. margin, pa...   - организация отступов в верстке 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 #обучение #ошибки #частыеошибки