Этап 1: HTML и стили

Free Preview
Продолжительность:

Первый этап — создать визуальный каркас приложения. Пока без данных и без JavaScript: только HTML-структура и стили.

Требования

HTML

  • Страница начинается с семантически корректного <header>. Внутри — название приложения и строка поиска (<input type="search">).
  • Ниже — блок с кнопками фильтрации по категориям. Категории пока можно захардкодить: «Все», «Музей», «Собор», «Дворец», «Крепость», «Театр», «Улица». На следующем этапе они будут генерироваться из данных.
  • Основной контент — <main> с сеткой карточек. Добавьте несколько карточек-заглушек с произвольным содержимым, чтобы увидеть как выглядит сетка.
  • Каждая карточка (<article>) содержит: изображение, бейдж категории, название, краткое описание, рейтинг.
  • В конце страницы — <footer> с любым коротким текстом.
  • Страница подключает style.css и app.js (с атрибутом defer).

Структура карточки. Чтобы наложить бейдж категории поверх изображения, нужен контейнер с position: relative. Примерная HTML-структура карточки:

<article class="card" data-id="1">
  <div class="card__image-wrap">
    <img src="..." alt="..." class="card__image">
    <span class="card__category">Музей</span>
  </div>
  <div class="card__body">
    <h3 class="card__title">Эрмитаж</h3>
    <p class="card__description">Краткое описание...</p>
    <div class="card__footer">
      <span class="card__rating">★ 4.9</span>
    </div>
  </div>
</article>
html

Атрибут data-id пригодится позже — по нему JavaScript поймёт, на какую карточку кликнул пользователь.

CSS — переменные

Объявите CSS-переменные в :root для всей цветовой схемы и общих значений. Минимальный набор:

  • основной цвет бренда
  • цвет текста и цвет вторичного текста
  • цвет фона страницы и фона карточки
  • скругление углов (border-radius)
  • тень карточки

Используйте эти переменные везде в стилях — не пишите конкретные значения цветов напрямую. Это позволит легко изменить оформление в одном месте.

CSS — сетка карточек

  • Сетка строится через CSS Grid с auto-fill и minmax — без единого медиазапроса карточки должны сами перестраиваться от одной колонки на мобильном до трёх-четырёх на широком экране.
  • Минимальная ширина карточки — на ваш вкус, обычно 280–320px.

Как выглядит адаптивная сетка без медиазапросов. Всё делается одной строкой:

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
css

auto-fill автоматически вычисляет, сколько колонок влезет. minmax(300px, 1fr) означает «минимум 300px, максимум — занять всё доступное пространство». На узком экране влезет одна колонка, на широком — три-четыре.

CSS — карточка

  • Карточка имеет скругление, тень и плавный hover-эффект (масштаб или тень — на выбор).
  • Изображение занимает фиксированную высоту и обрезается через object-fit: cover.
  • Бейдж категории наложен поверх изображения (абсолютное позиционирование).
  • Рейтинг отображается рядом со звёздочкой.

Как позиционировать бейдж на изображении. Родительский контейнер изображения должен быть position: relative, сам бейдж — position: absolute с нужными top/left или top/right. Зафиксируйте высоту контейнера изображения, а само изображение поставьте width: 100%; height: 100%; object-fit: cover.

CSS — поиск и фильтры

  • Строка поиска стилизована: без стандартного браузерного оформления, с кастомными border, padding, border-radius.
  • Кнопки фильтров — ряд с горизонтальной прокруткой на мобильном. Активная кнопка визуально отличается от неактивных.

Горизонтальная прокрутка для фильтров. Оберните кнопки в контейнер с overflow-x: auto и white-space: nowrap — тогда на узком экране они не перенесутся, а появится горизонтальная прокрутка. Чтобы скрыть некрасивый скроллбар в большинстве браузеров, добавьте:

.filters::-webkit-scrollbar {
  display: none;
}
css

Ожидаемый результат

После этого этапа у вас есть статичная страница, которая:

  • корректно отображает шапку с поиском
  • показывает ряд кнопок фильтрации
  • отображает сетку карточек-заглушек
  • сетка адаптируется к ширине экрана без медиазапросов
  • карточки реагируют на наведение курсора
  • вся цветовая схема задана через CSS-переменные
Предыдущий урокСледующий урок