🚀

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

Занятие 25
Планирование проекта

Сегодня мы спланируем итоговый сайт: выберем тему, нарисуем эскиз и подберём цвета со шрифтами.

👀

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

🏗

Сначала чертёж — потом стройка

Дом без чертежа: стены → «ой, забыли окна» → ломаем 🔨

30 минут плана экономят 3 урока переделок.

Сегодня мы не пишем код — мы планируем.

🎯

1. Тема и цель

  • 📌 О чём сайт? — одно предложение
  • 👥 Для кого?
  • 💡 Что посетитель узнает или сделает?

Темы: хобби · игра/фильм/книга · школа · город · питомец · личный сайт

🗺

2. Карта сайта

Схема страниц и связей (2–4 страницы):

       [ Главная ]
    /      |      \
[Порода] [Уход] [Галерея]

Под каждой страницей — список того, что там будет.

✏️

3. Wireframe

  • Схема из прямоугольников без цветов
  • ☒ — картинка, 〰 — текст, ▭ — кнопка
  • Два варианта: 🖥 компьютер и 📱 телефон

Wireframe — «что где», а не «как красиво».

<div class="wf">
  <div class="bar">ЛОГО &nbsp;&nbsp; меню меню меню</div>
  <div class="img">☒ большая картинка</div>
  <div class="row"><div>☒<br>〰〰</div><div>☒<br>〰〰</div><div>☒<br>〰〰</div></div>
  <div class="bar">подвал</div>
</div>
.wf { font-family: monospace; color: #636e72; display: grid; gap: 8px; }
.wf div { border: 2px dashed #636e72; padding: 10px; text-align: center; }
.img { height: 70px; }
.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border: none !important; padding: 0 !important; }
🎨

4. Палитра и шрифты

  • основной — характер сайта
  • акцентный — кнопки
  • светлый — фон
  • 1–2 шрифта с кириллицей

Записываем в CSS-переменные!

<div class="palette">
  <span style="background: var(--main)">main</span>
  <span style="background: var(--accent)">accent</span>
  <span style="background: var(--light); color: #333">light</span>
</div>
:root {
  --main: #e17055;
  --accent: #00b894;
  --light: #fff8f0;
}
.palette { display: flex; gap: 8px; font-family: sans-serif; }
.palette span { flex: 1; padding: 36px 8px; color: white; text-align: center; border-radius: 10px; border: 1px solid #ddd; }
📦

5. Контент

  • ✍️ Тексты — своими словами
  • 🖼 Картинки — свои или с фотостоков + источник
  • 🔤 Имена файлов — латиницей
  • 🛡 Никаких фамилий, адресов, номера школы
✅

Итог урока

  1. 🎯 Тема отмечена на странице «Итоговый проект»
  2. 🗺 Карта сайта
  3. ✏️ Wireframe: компьютер + телефон
  4. 🎨 Палитра и шрифты
  5. 📦 Список контента
🃏

Запомни!

  • WireframeСхема страницы из блоков
  • Карта сайтаСписок страниц и связей
  • Палитра2–3 основных цвета
  • КонтентТексты и картинки
  • ЛицензияМожно ли использовать картинку
⌨️

Практика: План и эскиз итогового проекта

  1. Выбери тему проекта и отметь её на странице «Итоговый проект» (выбор сохраняется только после входа в аккаунт).
  2. Нарисуй карту сайта: какие страницы и как они связаны.
  3. Нарисуй wireframe главной страницы для компьютера и телефона.
  4. Выбери палитру и шрифты — впиши их в CSS-переменные в редакторе.
  5. Составь список текстов и картинок, которые нужно подготовить.

🚀 Со звёздочкой: Сделай эскиз в онлайн-редакторе (например, Figma или Penpot) и покажи его близким или друзьям, чтобы получить обратную связь.

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

🪞

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

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

✨ По желанию: Подготовь тексты для всех страниц и 5–10 картинок в папку images.