Популярные ошибки и как их избегать

Популярные ошибки и как их избегать

Web vector created by stories - www.freepik.com

0. Не сохранили изменения/не обновили страницу

Редакторы кода показывают, что файл не сохранен кружком на вкладке.

Можно включить авто сохранение

Всегда обновляйте страницу. Иногда нужно обновить минуя кэш браузера (ctrl+f5 или ctrl+shift+r). Есть расширения, которые будут обновлять сами (live server).

Опечатки/ошибки

1. Опечатка в именах файлов, папок

2. Несоответствие расширений

Расширения файлов должны быть написаны в путях точно также как в имени файла.

3. Регистр имен и расширений

Копируйте все имена, а не переписывайте.

4. Пробелы и кириллица

Не используйте в названиях. На реальном сервере могут быть проблемы.

5. Кириллица вместо латиницы

Тут опять же поможет копирование. Если опечатка в атрибуте, то косвенно подскажет валидатор.

6. Неверный относительный путь

Нельзя использовать локальные пути (как у вас на пк) в вебе.

Используйте относительные пути для ресурсов сайта (картинки, страницы) и абсолютные для внешних ссылок.

7. Каша в файловой структуре

Каждый проект в отдельном файле. Ничего лишнего внутри. Все типы файлов отдельно.

Главная всегда index.html и в корне. Нет файлов с двумя расширениями.

7.1 Бэкапы

Делайте бэкапы.

Для кода: система контроля версий Гит + удаленный репозиторий на Гитхабе

Для других файлов (документы): облачные сервисы для синхронизации и бэкапа

7.2 html и css в отдельных файлах

css подключен в отдельном файле.

8. Ошибки валидации

Всегда проверяйте код на ошибки валидации через валидатор.

8.1 Символы, которые нельзя использовать в коде

Нужно заменять спецсимволами

8.2 Устаревшая информация

Часто источник ошибок - устаревшая информация в интернете. Посмотрите лекцию про Поиск информации (более актуальный конспект)

9. Ошибки в CSS

Никогда не спешите изменять верстку. Сначала всегда проверьте все на ошибки/опечатки, невалидный код.

Верстка

10. Обертки

Прежде чем начать верстать посмотрите на макет. Разделите его на минимальное количество прямоугольников. Если вы верстаете на флексбоксе, то смотрите, какие элементы и обертки можно поставить в ряд. Если на гридах, то перенесите в верстку дизайнерскую сетку, если она есть. Или составьте ее сами. Можете рисовать на скриншоте макета. Старайтесь не создавать лишних оберток, но и экономить не надо:)

11. Фикс. отступы для центрирования

Отступы по бокам контента на макете нельзя переносить в верстку. Макет - зафиксированная картинка. А экраны у всех разные. Поэтому основные секции выравниваются через авто марджины, флексбокс или гриды.

12. Ширина больше вьюпорта

Если вы видите горизонтальный скролл, значит что-то выходит за пределы вьюпорта. Часто это означает, что ширина чего-то больше родителя/вьюпорта. Можно отловить такие элементы через девтулзы

Не используйте единицы vw для ширины оберток.

Не используйте для скрытия того, что выходит за вьюпорт overflow: hidden.

13. Абсолютное позиционирование

Нельзя использовать позиционирование в раскладке. Оно нужно в отдельных случаях. Почитайте конспект лекции Эволюция раскладок.

Если вы попиксельно располагаете каждый элемент, то скорее всего вы делаете что-то не так:)

14. Фикс. высота

Нельзя ограничивать высоту элементов в вебе. Стоит проверять элементы на переполнение (содержимое и количество). Там, где без этого не обойтись можно задавать минимальную высоту.

15. Усложнение раскладки

Во время обучения на моем курсе, не спешите забегать вперед:) Если вы прошли только верстку и делаете практику, не пытайтесь делать адаптив. Сначала освойте флексбокс с фиксированной версткой. Не усложняйте и не спешите с вещами, которые вы еще не проходили. Не пытайтесь использовать проценты для половин секции. Вы не сможете нормально их выровнять. Просто задайте размеры и отступ в пикселях.

Поиск ошибок

16. Локальный сервер vs реальный сервер

Многие вещи в браузере могут работать по-разному с локальным файлом, локальным сервером (live server, xampp) и реальным сервером.

Не открывайте html файл в браузере. Всегда используйте локальный сервер.

17. Самопроверка

Проверяйте, что вы написали. Часто помогает отложить код и вернуться к нему позже.

18. Как задавать вопросы самому себе

Задавайте вопросы сами себе. Это развивает логическое мышление, которое поможет вам найти источник проблемы, а часто и ее решение. Не всегда просто это сделать. Начните с того, что вы видите и уже знаете.

Всегда спрашивайте, что вы видите, в чем проблема, что может на это влиять. Вы удивитесь, как часто вы сами можете ответить на свой же вопрос.

19. Подскажут ошибки