Ошибки, которые совершают все новички в вёрстке — и ты можешь их избежать

От <br> до пикселей и пропущенного alt — разложили по полочкам 10 частых ошибок вёрстки и рассказали, как не наступить на те же грабли.

WebРазработка

Начал учить HTML и CSS — вроде всё просто: теги, стили, шрифт добавил… Но вдруг всё ломается: отступы едут, кнопка не кликается, шапка выпрыгнула наружу. Знакомо? 😅

Вот 10 самых частых ошибок, которые совершают новички в вёрстке — и советы, как их не допустить.

❌ Ошибка 1: Отступы без системы

Отступы ставятся "на глаз", с разными margin и padding, в пикселях. В итоге — хаос.

Как избежать: используйте box-sizing: border-box и сетку отступов (например, кратную 8px).

❌ Ошибка 2: Не сброшены стили браузера

В каждом браузере h1, ul, body выглядят по-разному.

Как избежать: подключите normalize.css или используйте Tailwind CSS с нуля.

❌ Ошибка 3: Глубокая вложенность без структуры

div в div в div — и никто не понимает, где что.

Как избежать: стройте логичную структуру, используйте семантические теги и методологии (например, BEM).

❌ Ошибка 4: Использование `<br>` для отступов

Ставить несколько <br> — это не вёрстка.

Как избежать: управляйте отступами через CSS: margin и padding.

❌ Ошибка 5: Вся вёрстка в `px`

Сайт не масштабируется на разных экранах.

Как избежать: используйте rem, %, clamp() — они гибче и адаптивнее.

❌ Ошибка 6: Игнор адаптивности

На телефоне всё ломается, шрифт слишком мелкий, блоки не помещаются.

Как избежать: верстайте по принципу mobile first, подключайте @media-запросы.

❌ Ошибка 7: Не используется DevTools

Новички боятся открывать инспектор браузера, а зря.

Как избежать: используйте DevTools для анализа, отладки и «живого» редактирования стилей.

❌ Ошибка 8: Разбросанные стили

CSS везде: в style="", в <head>, в разных файлах.

Как избежать: держите стили централизованно, не злоупотребляйте !important.

❌ Ошибка 9: Проблемы с доступностью (a11y)

Нет alt у изображений, кнопки — это div.

Как избежать: следите за семантикой, добавляйте атрибуты alt, используйте правильные теги.

❌ Ошибка 10: Ранний переход к JavaScript

Сначала нужно уверенно владеть HTML и CSS.

Как избежать: сначала изучите flex, grid, position, адаптивность, затем переходите к JS.

🧠 А что в итоге?

Ошибка	Как избежать
Случайные отступы	Используйте сетку + `border-box`
Не сброшены стили	Подключите reset/normalize
Глубокая вложенность	Семантика + BEM
`<br>` для отступов	Используйте CSS
Только `px`	Добавьте `rem`, `%`, `clamp()`
Нет адаптивности	Mobile first, `@media`
DevTools игнорируется	Используйте для отладки
Разбросанные стили	Централизованный CSS
Нет доступности	`alt`, правильные теги
Ранний JavaScript	Сначала HTML+CSS

Хочешь выучить вёрстку без головной боли и путаницы? В приложении "Кодик" ты проходишь вёрстку от самого нуля: от блоков и Flexbox до адаптивности и компонентов. Без воды — только практика 💻

Веб-сайт Кодика - https://itcodik.com/