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