Проект: главная страница

💡 Объяснение

Главная страница — лицо сайта

Исследования показывают: посетитель решает, остаться ли на сайте, за несколько секунд. За это время главная страница должна ответить на три вопроса: «Куда я попал?», «Что здесь интересного?», «Куда нажать дальше?».

Типичная структура главной

1. Шапка (header) — логотип или название и меню на все страницы.
2. Первый экран, hero-блок — крупный заголовок, одно-два предложения описания, яркая картинка и кнопка-призыв («Узнать больше», «Смотреть галерею»). Это самое заметное место сайта.
3. Блоки содержания — 2–3 раздела с самым интересным: карточки, факты, преимущества. Каждый блок — section с заголовком h2.
4. Подвал (footer) — год, автор (только имя), ссылки.

Подготовка файлов

1. Создай папку проекта со структурой: index.html, папки css и images.
2. В index.html — каркас (! + Tab), lang="ru", свой title, тег viewport.
3. Создай css/style.css и подключи его в head.
4. Проверь подключение простым правилом body { background: pink; } — если фон порозовел, всё работает. Потом убери.

Первый экран (hero)

<section class="hero">
  <div class="hero-text">
    <h1>Мир динозавров</h1>
    <p>Всё о гигантах, живших миллионы лет назад</p>
    <a class="btn" href="facts.html">Начать путешествие</a>
  </div>
  <img src="images/dino.png" alt="Тираннозавр в джунглях">
</section>

.hero {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 3rem 1rem;
}
.hero-text { flex: 1; min-width: 250px; }
.hero h1 { font-size: 2.5rem; }

Кнопка-призыв — это ссылка, оформленная как кнопка. Текст кнопки — глагол, говорящий, что будет: «Смотреть галерею», а не «Нажми».

Блок карточек

<section class="features">
  <h2>Самое интересное</h2>
  <div class="cards">
    <article class="card">…</article>
    <article class="card">…</article>
    <article class="card">…</article>
  </div>
</section>

Карточки удобно раскладывать Grid с формулой repeat(auto-fill, minmax(220px, 1fr)) — сразу получится адаптивно.

Контейнер

Чтобы на широком мониторе текст не растягивался на весь экран, содержимое кладут в контейнер:

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

Фон секции при этом может быть на всю ширину, а содержимое — внутри контейнера.

Порядок работы на уроке

1. HTML всей главной сверху вниз (по своему wireframe).
2. Общие стили и переменные цветов.
3. Шапка → hero → карточки → подвал.
4. Проверка в браузере после каждого блока.

Не пытайся сразу сделать идеально. Сегодня цель — чтобы все блоки были на месте и выглядели аккуратно. Украшать будем на занятии 3.6.

Частые ошибки

• Стили не подключены или неверный путь к CSS.
• Картинка в hero огромная и вылезает — нужно max-width: 100%.
• Много разных идей на первом экране — посетитель не понимает, куда смотреть. Один заголовок, одна кнопка.
• Кнопка ведёт в никуда (href="#") — пусть ведёт на будущую страницу.

Проверь себя

1. На какие три вопроса должна ответить главная?
2. Что обычно есть на первом экране?
3. Как быстро проверить, что CSS-файл подключён?