Урок 15 · Адаптивный лендинг · Челлендж по вёрстке

Адаптивный лендинг

Урок 15 24 минуты Видео + практика с проверкой

Адаптивная вёрстка — это когда один и тот же лендинг хорошо выглядит и на телефоне, и на ноутбуке. Не две разные версии, а одна, которая «подстраивается» под ширину экрана.

Главный инструмент — медиазапросы. Подход mobile-first: сначала верстаем под узкий экран, потом добавляем правила для широких. Так проще и надёжнее.

/* мобильный — по умолчанию */
.hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* планшет и шире */
@media (min-width: 768px) {
  .hero {
    flex-direction: row;
    align-items: center;
  }
}

На узком экране блоки .hero идут колонкой. Как только ширина дорастает до 768px, они выстраиваются в ряд. Один и тот же HTML — два разных вида.

Что проверить перед сдачей

Открой свою работу на ширине 375px, 768px и 1280px. Нигде не должно быть горизонтального скролла, налезающего текста и «съехавших» картинок.

★ Домашнее задание ещё не сдано

Свёрстай адаптивную hero-секцию

На мобильном — заголовок и картинка идут колонкой. С 768px — в две колонки: текст слева, картинка справа. Залей работу на GitHub Pages или CodePen и пришли ссылку — куратор проверит и пришлёт фидбек.

⏳ Дедлайн недели — суббота, 23:59 МСК. Успей, чтобы не потерять жизнь.