🚀

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

Занятие 28
Проект: стилизация

Сегодня мы сделаем сайт по-настоящему красивым: единый стиль, ровная раскладка и приятные детали.

👀

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

💎

4 секрета хорошего дизайна

🧩 Единство
одинаковое — одинаково
📐 Порядок
всё выровнено
🌬 Воздух
свободное место
🔆 Контраст
главное заметно
🎛

CSS-переменные

  • Объявляем в :root
  • Имя с двумя дефисами: --main
  • Используем: var(--main)

Поменял 1 строку — поменялся весь сайт.

<h1>Мои игры</h1>
<a class="btn" href="#">Подробнее</a>
:root {
  --main: #6c5ce7;
  --accent: #fd79a8;
  --radius: 16px;
}
body { font-family: sans-serif; }
h1 { color: var(--main); }
.btn {
  display: inline-block; padding: 10px 20px;
  color: white; text-decoration: none;
  background: var(--accent);
  border-radius: var(--radius);
}
🌬

Воздух и правило близости

  • Шаг отступов: 8 · 16 · 24 · 32 · 48
  • Связанное — ближе, несвязанное — дальше

Какой вариант понятнее? 👉

<div class="bad"><h3>Кот</h3><p>Любит спать</p><h3>Пёс</h3><p>Любит гулять</p></div>
<hr>
<div class="good"><h3>Кот</h3><p>Любит спать</p><h3>Пёс</h3><p>Любит гулять</p></div>
body { font-family: sans-serif; }
.bad h3, .bad p { margin: 14px 0; }
.good h3 { margin: 24px 0 4px; }
.good p { margin: 0; }
🔆

Контраст и иерархия

  • Тёмный текст на светлом фоне
  • Заголовок заметно крупнее
  • Одна яркая кнопка

Выделено всё = не выделено ничего.

<p class="low">Светло-серый на белом — трудно читать</p>
<p class="high">Тёмный на светлом — легко</p>
p { font: 22px sans-serif; padding: 12px; background: white; }
.low { color: #d0d0d0; }
.high { color: #2d3436; }
🧱

Компоненты

Один стиль — на всех страницах:

  • .btn — все кнопки
  • .card — все карточки
  • .container — ширина
<div class="container">
  <div class="grid">
    <article class="card"><h3>Minecraft</h3><a class="btn" href="#">Подробнее</a></article>
    <article class="card"><h3>Шахматы</h3><a class="btn" href="#">Подробнее</a></article>
  </div>
</div>
:root { --main: #6c5ce7; --space: 16px; }
body { margin: 0; background: #f5f6fa; font-family: sans-serif; }
.container { max-width: 700px; margin: 0 auto; padding: var(--space); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space); }
.card { background: white; padding: var(--space); border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,.08); transition: .2s; }
.card:hover { transform: translateY(-4px); }
.btn { display: inline-block; padding: 8px var(--space); border-radius: 8px; background: var(--main); color: white; text-decoration: none; }
🌙

Бонус: тёмная тема

С переменными — несколько строк:

@media (prefers-color-scheme: dark) {
  :root { --bg: #1e1e2e; --text: #f5f6fa; }
}

Сайт сам станет тёмным, если в системе включена тёмная тема.

🔎

Проверь свой дизайн

  1. 😑 Прищурься — видно главное?
  2. 📄📄 Страницы похожи на один сайт?
  3. 🎨 Не больше 3 цветов и 2 шрифтов?
  4. 👀 Близкие за 10 секунд поняли, о чём сайт?
🃏

Запомни!

  • :root { --main: #0984e3; }Объявить переменную
  • color: var(--main)Использовать переменную
  • max-width + margin: 0 autoКонтейнер по центру
  • display: flex / gridРаскладка
  • :hover + transitionЖивые элементы
⌨️

Практика: Улучшаем дизайн

  1. Вынеси цвета сайта в CSS-переменные.
  2. Сделай общий контейнер .container шириной не более 1000px по центру.
  3. Выстрой карточки через Grid или Flexbox.
  4. Сделай единый стиль кнопок и ссылок с эффектом :hover.
  5. Покажи сайт близким, попроси одно замечание по дизайну и исправь его.

🚀 Со звёздочкой: Добавь переключение на тёмную тему через @media (prefers-color-scheme: dark) и лёгкую анимацию появления карточек.

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

🪞

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

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

✨ По желанию: Сделай скриншот сайта «до» и «после» стилизации.