Урок 21. Ошибки: Основы макетирования и статичный landing

📁 Раздел: Блочная модель и позиционирование ⏱️ Время изучения: ~70 мин 🎯 Сложность: Средняя
#min #width #margin-inline #padding-block #display #position

⚡ Кратко

Макетирование начинается не с CSS-свойств, а с разбиения страницы на смысловые блоки. В этом уроке собирается статичный landing: header, main, секции, карточки и footer.

Типичные ошибки

Ошибка 1: начинать с декоративного CSS до структуры. В итоге landing красиво выглядит, но плохо читается и сложно поддерживается.
Ошибка 2: использовать div для всего, где нужны header, main, section, footer.
Ошибка 3: фиксировать ширину контейнера в пикселях без ограничения для узких экранов.

Ошибка 4: sticky-шапка без фона

Частая ловушка в этом уроке: делаем шапку sticky, но не задаём ей background. При прокрутке контент просвечивает сквозь шапку — текст наслаивается.

❌ Как ломается (фон шапки прозрачный):

Длинный текст контента, который проезжает под шапкой…
…и накладывается на ссылки шапки, читать невозможно.
CodeStart · Меню
📄 lesson-21/header.css
.site-header {
  position: sticky;
  top: 0;
  /* background НЕ задан → контент просвечивает сквозь шапку */
}

✅ Как правильно (непрозрачный фон):

Длинный текст контента проезжает ровно под шапкой.
CodeStart · Меню
📄 lesson-21/header.css
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;   /* перекрывает контент под собой */
}
Проверка: отключите CSS в DevTools. Если порядок страницы всё ещё понятен, HTML-структура хорошая.

Навигация