🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?
✅ Без входа можно
- читать все 33 занятия, смотреть слайды и шпаргалку;
- пробовать код в редакторе и песочнице.
⛔ Без входа нельзя
- сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
- отмечать пройденные занятия и видеть свой прогресс;
- выбрать тему итогового проекта и отмечать чек-лист;
- отправить итоговый тест и сохранить результат.
Планирование проекта
Сегодня мы спланируем итоговый сайт: выберем тему, нарисуем эскиз и подберём цвета со шрифтами.
Изучаем: Wireframe, цвета, шрифты, контент
Результат: План и эскиз итогового проекта
👀 Сегодня сделаем вот такое
Показать код примера
<div class="plan">
<h2>План проекта «Мой питомец»</h2>
<ul>
<li><b>Страницы:</b> Главная, Порода, Уход, Галерея</li>
<li><b>Настроение:</b> тёплое и весёлое</li>
<li><b>Шрифты:</b> Nunito (заголовки), Arial (текст)</li>
</ul>
<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>
</div>:root {
--main: #e17055;
--accent: #00b894;
--light: #ffeaa7;
}
body { font-family: sans-serif; padding: 1rem; }
.plan { max-width: 480px; border: 2px dashed var(--main); border-radius: 12px; padding: 1rem; }
.palette { display: flex; gap: .5rem; }
.palette span {
flex: 1; padding: 1.5rem .5rem; color: white;
text-align: center; border-radius: 8px;
}💡 Объяснение
Почему нельзя сразу писать код
Представь, что строишь дом без чертежа: сначала стены, потом вспоминаешь про окна, ломаешь стену, потом оказывается, что нет места для лестницы… С сайтом так же. Полчаса планирования экономят несколько уроков переделок. Профессионалы всегда начинают с плана.
1. Тема и цель
Выбери тему из списка: «Моё хобби», «Моя любимая игра/фильм/книга», «Моя школа», «Мой город», «Мой питомец», «Мой личный сайт». Затем ответь на три вопроса:
- О чём сайт? (одно предложение: «Сайт о том, как ухаживать за хомяком».)
- Для кого он? (друзья, начинающие, родители.)
- Что посетитель должен узнать или сделать? (узнать интересные факты, посмотреть галерею, задать вопрос.)
Выбирай тему, о которой знаешь много и которая тебе правда интересна, — так будет что рассказать и захочется доделать.
2. Карта сайта
Карта сайта — схема страниц и связей между ними. Для нашего проекта нужно 2–4 страницы. Нарисуй прямоугольники с названиями страниц и под каждым — список того, что там будет:
[ Главная ]
/ | \
[ Порода ] [ Уход ] [ Галерея ]Главная обычно кратко рассказывает обо всём и ведёт на остальные страницы. На каждой странице должна быть своя понятная задача.
3. Wireframe — каркас страницы
Wireframe (буквально «проволочный каркас») — это схема страницы из простых прямоугольников, без цветов, шрифтов и картинок. Её рисуют карандашом за 5–10 минут.
- Прямоугольник с крестиком — место для картинки.
- Волнистые линии — текст.
- Прямоугольник с подписью — кнопка или меню.
Нарисуй два варианта главной страницы: для компьютера (широкий, блоки в ряд) и для телефона (узкий, блоки друг под другом). Так ты заранее продумаешь адаптивность.
Wireframe отвечает на вопрос «что где», а не «как красиво». Поэтому его легко переделывать: стёр и нарисовал заново.
4. Стиль: цвета и шрифты
Палитра. Выбери 3 цвета:
- основной — цвет «характера» сайта (шапка, заголовки);
- акцентный — для кнопок и важных элементов, контрастный к основному;
- светлый фон — чтобы текст хорошо читался.
Цвета должны подходить теме и настроению: для сайта о космосе — тёмно-синий и фиолетовый, о питомце — тёплые оранжевые, о природе — зелёные. Помогут генераторы палитр (например, coolors.co).
Шрифты. Один-два шрифта с кириллицей: например, яркий для заголовков и спокойный для текста.
Запиши цвета сразу в CSS-переменные — в проекте ими будет удобно пользоваться:
:root {
--main: #e17055;
--accent: #00b894;
--light: #fff8f0;
}
h1 { color: var(--main); }5. Контент
Контент — это всё содержимое: тексты, картинки, факты. Составь список, что нужно подготовить для каждой страницы, и начинай собирать уже сейчас:
- тексты пиши своими словами (не копируй с чужих сайтов);
- картинки — свои или с бесплатных фотостоков, записывай источник;
- сохраняй картинки сразу с правильными именами латиницей в папку
images.
Безопасность проекта
На сайте «Мой личный сайт» или «Моя школа» особенно легко случайно раскрыть лишнее. Проверь план: нет ли в нём фамилии, адреса, номера школы, телефона, фотографий других людей без их разрешения.
Итог занятия
К концу урока у тебя должны быть: выбранная тема (отметь её на странице «Итоговый проект»), карта сайта, wireframe главной для компьютера и телефона, палитра и шрифты, список контента.
Проверь себя
- Чем wireframe отличается от готового дизайна?
- Зачем рисовать вариант страницы для телефона заранее?
- Какие три цвета входят в палитру?
⌨️ Практика
- Выбери тему проекта и отметь её на странице «Итоговый проект» (выбор сохраняется только после входа в аккаунт).
- Нарисуй карту сайта: какие страницы и как они связаны.
- Нарисуй wireframe главной страницы для компьютера и телефона.
- Выбери палитру и шрифты — впиши их в CSS-переменные в редакторе.
- Составь список текстов и картинок, которые нужно подготовить.
🧪 Редактор
🪞 Рефлексия
- Что нового я сегодня узнал(а)?
- Что получилось лучше всего?
- Где было трудно и что поможет в следующий раз?
🔒 Отметить занятие пройденным можно только после входа. Без аккаунта сайт не запомнит, до какого занятия ты дошёл(дошла). Регистрация · Вход