Технічні помилки на сайті та 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 – висновок

Оцініть статтю
Додати коментар