🚀

Модуль 3. Проектная работа

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

Сегодня мы сверстаем главную страницу своего сайта по нарисованному эскизу.

👀

Сегодня сделаем вот такое

⏱

5 секунд на первое впечатление

Главная должна сразу ответить:

  1. 🧭 Куда я попал?
  2. ✨ Что здесь интересного?
  3. 👉 Куда нажать дальше?
🧱

Из чего состоит главная

  1. 🧢 Шапка — название и меню
  2. 🦸 Первый экран — заголовок, текст, картинка, кнопка
  3. 🃏 2–3 блока с самым интересным
  4. 👣 Подвал
📁

Готовим файлы

  1. index.html + папки css, images
  2. Каркас, lang="ru", title, viewport
  3. <link rel="stylesheet" href="css/style.css">
  4. Проверка: body { background: pink; } 🩷
🦸

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

  • Один крупный заголовок
  • Короткое описание
  • Картинка
  • Одна кнопка-призыв с глаголом
<section class="hero">
  <div class="text">
    <h1>Мир динозавров</h1>
    <p>Всё о гигантах прошлого</p>
    <a class="btn" href="#">Начать путешествие</a>
  </div>
  <img src="/images/mountain.svg" alt="Древние горы">
</section>
body { margin: 0; font-family: sans-serif; }
.hero {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 24px; background: #55efc4;
}
.text { flex: 1; min-width: 200px; }
.hero h1 { font-size: 2.2rem; margin: 0 0 8px; }
.hero img { width: 180px; max-width: 100%; }
.btn {
  display: inline-block; margin-top: 12px; padding: 10px 20px;
  background: #2d3436; color: white; border-radius: 30px; text-decoration: none;
}
🃏

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

  • section + заголовок h2
  • Карточки — article
  • Grid + auto-fill, minmax — сразу адаптивно
<section>
  <h2>Самое интересное</h2>
  <div class="cards">
    <article class="card">🦖<h3>Хищники</h3></article>
    <article class="card">🦕<h3>Травоядные</h3></article>
    <article class="card">🥚<h3>Яйца</h3></article>
  </div>
</section>
body { font-family: sans-serif; padding: 12px; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.card { font-size: 40px; text-align: center; padding: 12px; background: #f5f6fa; border-radius: 14px; }
.card h3 { font-size: 18px; margin: 6px 0 0; }
📏

Контейнер

max-width: 1000px; margin: 0 auto;

  • На широком мониторе текст не растягивается
  • Фон секции — на всю ширину
  • Содержимое — по центру

Сегодня цель — все блоки на месте. Украшаем на занятии 28.

🃏

Запомни!

  • <header> + <nav>Шапка и меню
  • .heroПервый экран
  • .btnКнопка-призыв
  • .featuresБлоки с карточками
  • <footer>Подвал
⌨️

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

  1. Создай index.html и style.css в папке проекта, подключи стили.
  2. Сверстай шапку с меню на все будущие страницы.
  3. Сделай первый экран: заголовок, описание, картинка, кнопка.
  4. Добавь блок с тремя карточками и подвал.

🚀 Со звёздочкой: Добавь на главную блок «Интересный факт дня» с эффектом при наведении и плавную прокрутку scroll-behavior: smooth.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Покажи главную страницу родным и спроси, понятно ли, о чём сайт.