🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?
✅ Без входа можно
- читать все 33 занятия, смотреть слайды и шпаргалку;
- пробовать код в редакторе и песочнице.
⛔ Без входа нельзя
- сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
- отмечать пройденные занятия и видеть свой прогресс;
- выбрать тему итогового проекта и отмечать чек-лист;
- отправить итоговый тест и сохранить результат.
Повторение CSS
Сегодня мы сверстаем страницу точно по образцу — как настоящие верстальщики, получившие макет от дизайнера.
Изучаем: Соединение HTML + CSS
Результат: Макет страницы по образцу
👀 Сегодня сделаем вот такое
Показать код примера
<header class="header">
<strong>🐾 Питомцы</strong>
<nav><a href="#">Кошки</a> <a href="#">Собаки</a></nav>
</header>
<section class="banner">
<h1>Лучшие друзья человека</h1>
<p>Узнай, как заботиться о питомце</p>
<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>
<article class="card"><img src="/images/rocket.svg" alt="Ракета"><h3>Космические собаки</h3></article>
</main>
<footer class="footer">© 2026 Школьный проект</footer>* { box-sizing: border-box; }
body { margin: 0; font-family: sans-serif; color: #2d3436; }
.header {
display: flex; justify-content: space-between; align-items: center;
padding: 1rem 2rem; background: white; box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.header nav { display: flex; gap: 1rem; }
.header a { color: #e17055; text-decoration: none; }
.banner {
padding: 3rem 1rem; text-align: center; color: white;
background: linear-gradient(135deg, #e17055, #fdcb6e);
}
.btn {
display: inline-block; padding: .7rem 1.5rem; border-radius: 30px;
background: white; color: #e17055; text-decoration: none; font-weight: bold;
}
.cards {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem; max-width: 900px; margin: 2rem auto; padding: 0 1rem;
}
.card { background: #fff; border-radius: 16px; padding: 1rem; text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.card img { width: 100%; }
.footer { text-align: center; padding: 1rem; background: #2d3436; color: white; }💡 Объяснение
Верстальщик и дизайнер
В настоящих командах сайт создают разные специалисты. Дизайнер рисует, как будет выглядеть страница, — это картинка, которая называется макет. Верстальщик (frontend-разработчик) превращает макет в HTML и CSS так, чтобы страница выглядела точь-в-точь как на картинке и работала на любых экранах. Сегодня ты — верстальщик.
Шаг 1. Смотрим на макет и делим на блоки
Не бросайся сразу писать код. Сначала внимательно рассмотри образец и мысленно (или карандашом на распечатке) обведи прямоугольниками крупные части:
- шапка с логотипом и меню;
- баннер (первый экран) с заголовком и кнопкой;
- блок карточек;
- подвал.
Потом внутри каждого крупного блока найди мелкие: в карточке — картинка, заголовок, текст. Спроси себя про каждый блок: элементы внутри стоят в ряд (Flexbox), сеткой (Grid) или друг под другом (обычный поток)?
Шаг 2. HTML без стилей
Пишем разметку сверху вниз, используя семантические теги: header, nav, section, main, article, footer. Вставляем все тексты и картинки. Сразу придумываем понятные классы: .header, .banner, .cards, .card.
Проверь: даже без CSS страница должна быть логичной и читаемой — заголовки по порядку, картинки с alt.
Шаг 3. Общие стили
* { box-sizing: border-box; }
body {
margin: 0;
font-family: sans-serif;
color: #2d3436;
}
img { max-width: 100%; }Здесь же удобно завести CSS-переменные для цветов макета — чтобы не искать HEX-коды каждый раз.
Шаг 4. Раскладка крупных блоков
Двигаемся сверху вниз: шапка (display: flex; justify-content: space-between; align-items: center), баннер (выравнивание по центру, градиент), карточки (display: grid с repeat(auto-fill, minmax(…))), подвал.
Шаг 5. Детали
Когда раскладка готова, добавляем «косметику»: отступы, скругления, тени, эффекты :hover. Сравнивай с макетом постоянно: размеры, цвета, расстояния.
Шаг 6. Адаптивность
Сужаем окно до 360px и дописываем медиазапрос для того, что сломалось.
Как сравнивать с образцом
- Поставь окна рядом: макет слева, твоя страница справа.
- Используй «пипетку» цвета: в F12 нажми на квадратик цвета у свойства — появится инструмент выбора цвета с экрана.
- Прищурься: при размытом взгляде хорошо видно, совпадают ли крупные пятна и пропорции.
- Ищи отличия как в игре «Найди 5 отличий».
Если что-то не получается
- Включи временно рамки:
* { outline: 1px solid red; }— станет видно, какой блок какого размера. - Открой F12, выбери элемент и посмотри, какие стили к нему применились, а какие зачёркнуты.
- Проверь, тому ли элементу написан
display: flex(родителю!). - Закомментируй часть CSS и возвращай по одному правилу, чтобы найти виновника.
Проверь себя
- Почему сначала пишут HTML, а только потом CSS?
- Как решить, использовать для блока Flexbox или Grid?
- Какие три способа поиска ошибок в вёрстке ты знаешь?
⌨️ Практика
- Нарисуй схему образца прямоугольниками.
- Сверстай HTML: шапку, баннер, три карточки, подвал.
- Добавь стили по образцу: цвета, шрифты, раскладку.
- Сравни свою страницу с образцом и найди 3 отличия. Исправь их.
🧪 Редактор
🪞 Рефлексия
- Что нового я сегодня узнал(а)?
- Что получилось лучше всего?
- Где было трудно и что поможет в следующий раз?
🔒 Отметить занятие пройденным можно только после входа. Без аккаунта сайт не запомнит, до какого занятия ты дошёл(дошла). Регистрация · Вход