Ошибки верстки сайтов. Самые распространенные ошибки начинающих

1. Задавать высоту блока
Самая главная ошибка начинающих верстальщиков. За редким исключением фиксированную высоту блока нельзя задавать по следующим причинам:
1) Большинство блоков меняют высоту, так как в зависимости от разрешения экрана, количество, например, строк текста может увеличиваться или уменьшаться в связи с изменяющейся шириной сайта и соответственно блока. Ширина сайта меняется в связи с тем что современная верстка автоматически подстраивается под ширину экрана пользователя и может меняться от 320px до 3840 рх.
2)Также может поменяться содержимое блока(например текст).

 Поэтому в большинстве случаев задавать фиксированную высоту блока категорически нельзя!!! Кроме исключительных случаев, небольших блоков для кнопок или иконок, когда вы на 100% уверены, что блок будет неизменным.

2. Задавать фиксированный margin справа или слева от края страницы для выравнивания блока по центру
Для выравнивания блока по центру используется margin-right:auto; margin-left:auto;  И ни в коем случае расстояние в пикселах от края экрана, так как в этом случае макет будет съезжать на всех разрешениях экрана кроме одного, того которое у вас на компьютере в момент верстки.

3. Использование разных классов для одинаковых блоков

4. Несколько тэгов h1 на странице запрещены поисковиками

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

Пример: ... <div class="apple"> <img class="onion"> </div> ...
В данном случае код class="onion" лишний. Так как данный элемент можно однозначно определить в ксс как .apple img


6. Градиент задается кодом, а не картинкой
background: linear-gradient(#E4AF9D 20%, #E4E4D8 50%, #A19887 80%);


7. Оборачивайте код в див с определенным классом, если вы делаете верстку для новой страницы на существующем сайте
Если вы делаете верстку не сайта, а страницы на сайте и код будет добавляться в ксс всего сайта, обязательно оберните весь код в див с определенным классом, который добавляйте во все классы в css для того чтобы избежать случайного дублирования названий классов, иначе верстка может слететь в разных местах сайта, на разных разрешениях.
Пример вы назвали класс одного из блоков "container", как делают тысячи других разработчиков. На сайте уже были элементы с таким классом и вся верстка для них слетела. Или что ещё хуже вы задали стили прямо для тэга. И верстка слетела в 50 местах на сайте. Если вы обернете все в блок со своим классом, например "veryuniquename". То в ксс нужно будет добавлять этот класс перед всеми классами .veryuniquename .container{...}