🚀

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

Занятие 23
Повторение CSS

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

👀

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

👩‍🎨

Дизайнер и верстальщик

🎨 Дизайнер
рисует макет — картинку страницы
👩‍💻 Верстальщик
превращает макет в HTML + CSS

Сегодня ты — верстальщик!

🎯

Наш образец

Шапка · баннер · карточки · подвал

Посмотри внимательно: какие блоки ты видишь?

<header class="header"><strong>🐾 Питомцы</strong><nav><a href="#">Кошки</a> <a href="#">Собаки</a></nav></header>
<section class="banner"><h1>Лучшие друзья</h1><a class="btn" href="#">Читать</a></section>
<main class="cards">
  <article class="card"><img src="/images/cat.svg" alt="Кот"><h3>Кошки</h3></article>
  <article class="card"><img src="/images/dog.svg" alt="Собака"><h3>Собаки</h3></article>
</main>
<footer class="footer">© 2026</footer>
* { box-sizing: border-box; }
body { margin: 0; font-family: sans-serif; }
.header { display: flex; justify-content: space-between; padding: 12px 20px; }
.header nav { display: flex; gap: 12px; }
.banner { padding: 24px; text-align: center; color: white; background: linear-gradient(135deg, #e17055, #fdcb6e); }
.btn { background: white; color: #e17055; padding: 6px 16px; border-radius: 30px; text-decoration: none; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
.card { text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,.1); border-radius: 12px; padding: 8px; }
.card img { width: 60%; }
.footer { background: #2d3436; color: white; text-align: center; padding: 8px; }
✂️

Шаг 1: делим на блоки

  1. Обведи крупные блоки прямоугольниками
  2. Найди мелкие блоки внутри
  3. Для каждого спроси:
↔️ в ряд?
Flexbox
▦ сеткой?
Grid
↕️ стопкой?
обычный поток
🪜

Шаги 2–6

  1. 🦴 HTML — семантика, тексты, картинки
  2. 🌍 Общие стили — шрифт, цвета, box-sizing
  3. 🧱 Раскладка — flex и grid сверху вниз
  4. ✨ Детали — отступы, тени, :hover
  5. 📱 Адаптивность — @media

От крупного — к мелкому.

🔍

Найди 5 отличий

  • 🪟 Окна рядом: образец и твоя страница
  • 💧 Пипетка цвета в F12
  • 😑 Прищурься — видны крупные пятна
  • 📏 Сравни отступы и размеры
🧯

Если не получается

  1. Рентген: * { outline: 1px solid red; }
  2. F12 → зачёркнутые стили
  3. display: flex точно у родителя?
  4. Закомментируй CSS и возвращай по одному правилу
🃏

Запомни!

  • header / main / footerКаркас
  • display: flexРяд
  • display: gridСетка
  • padding / margin / gapВоздух
  • border-radius / box-shadowДетали
  • @mediaТелефон
⌨️

Практика: Макет страницы по образцу

  1. Нарисуй схему образца прямоугольниками.
  2. Сверстай HTML: шапку, баннер, три карточки, подвал.
  3. Добавь стили по образцу: цвета, шрифты, раскладку.
  4. Сравни свою страницу с образцом и найди 3 отличия. Исправь их.

🚀 Со звёздочкой: Найди в интернете макет простого лендинга и сверстай его первый экран.

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

🪞

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

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

✨ По желанию: Выбери тему итогового проекта из списка на странице «Итоговый проект».