Популярные ошибки и как их избегать
Web vector created by stories - www.freepik.com
Web vector created by stories - www.freepik.com
Редакторы кода показывают, что файл не сохранен кружком на вкладке.
Можно включить авто сохранение
Всегда обновляйте страницу. Иногда нужно обновить минуя кэш браузера (ctrl+f5 или ctrl+shift+r). Есть расширения, которые будут обновлять сами (live server).
Расширения файлов должны быть написаны в путях точно также как в имени файла.
Не используйте в названиях. На реальном сервере могут быть проблемы.
Тут опять же поможет копирование. Если опечатка в атрибуте, то косвенно подскажет валидатор.
Нельзя использовать локальные пути (как у вас на пк) в вебе.
Используйте относительные пути для ресурсов сайта (картинки, страницы) и абсолютные для внешних ссылок.
Каждый проект в отдельном файле. Ничего лишнего внутри. Все типы файлов отдельно.
Главная всегда index.html и в корне. Нет файлов с двумя расширениями.
Делайте бэкапы.
Для кода: система контроля версий Гит + удаленный репозиторий на Гитхабе
Для других файлов (документы): облачные сервисы для синхронизации и бэкапа
css подключен в отдельном файле.
Всегда проверяйте код на ошибки валидации через валидатор.
Ошибки вложенности. Как узнать это по спекам и онлайн инструмент.
Неверное написание элементов/атрибутов.
Незакрытые элементы.
Нужно заменять спецсимволами
Часто источник ошибок - устаревшая информация в интернете. Посмотрите лекцию про Поиск информации (более актуальный конспект)
Никогда не спешите изменять верстку. Сначала всегда проверьте все на ошибки/опечатки, невалидный код.
Прежде чем начать верстать посмотрите на макет. Разделите его на минимальное количество прямоугольников. Если вы верстаете на флексбоксе, то смотрите, какие элементы и обертки можно поставить в ряд. Если на гридах, то перенесите в верстку дизайнерскую сетку, если она есть. Или составьте ее сами. Можете рисовать на скриншоте макета. Старайтесь не создавать лишних оберток, но и экономить не надо:)
Отступы по бокам контента на макете нельзя переносить в верстку. Макет - зафиксированная картинка. А экраны у всех разные. Поэтому основные секции выравниваются через авто марджины, флексбокс или гриды.
Если вы видите горизонтальный скролл, значит что-то выходит за пределы вьюпорта. Часто это означает, что ширина чего-то больше родителя/вьюпорта. Можно отловить такие элементы через девтулзы
Не используйте единицы vw для ширины оберток.
Не используйте для скрытия того, что выходит за вьюпорт overflow: hidden.
Нельзя использовать позиционирование в раскладке. Оно нужно в отдельных случаях. Почитайте конспект лекции Эволюция раскладок.
Если вы попиксельно располагаете каждый элемент, то скорее всего вы делаете что-то не так:)
Нельзя ограничивать высоту элементов в вебе. Стоит проверять элементы на переполнение (содержимое и количество). Там, где без этого не обойтись можно задавать минимальную высоту.
Во время обучения на моем курсе, не спешите забегать вперед:) Если вы прошли только верстку и делаете практику, не пытайтесь делать адаптив. Сначала освойте флексбокс с фиксированной версткой. Не усложняйте и не спешите с вещами, которые вы еще не проходили. Не пытайтесь использовать проценты для половин секции. Вы не сможете нормально их выровнять. Просто задайте размеры и отступ в пикселях.
Многие вещи в браузере могут работать по-разному с локальным файлом, локальным сервером (live server, xampp) и реальным сервером.
Не открывайте html файл в браузере. Всегда используйте локальный сервер.
Проверяйте, что вы написали. Часто помогает отложить код и вернуться к нему позже.
Задавайте вопросы сами себе. Это развивает логическое мышление, которое поможет вам найти источник проблемы, а часто и ее решение. Не всегда просто это сделать. Начните с того, что вы видите и уже знаете.
Всегда спрашивайте, что вы видите, в чем проблема, что может на это влиять. Вы удивитесь, как часто вы сами можете ответить на свой же вопрос.