Урок-событие · 45 минут · все филиалы

Секретная открытка

Ученик делает сайт-открытку для родного человека и отправляет ему ссылку прямо с урока. Через 45 минут у каждого — первый сайт в интернете и ответ «вау» в Telegram.

👶 7–17 лет, три уровня 🪙 +100 coins каждому автоматом 📱 нужен только Telegram
Посмотреть демо-открытку →

Идея урока

Прочитай один раз — и держи в голове весь урок.

Мы не учим хостинг. Мы дарим момент: ребёнок сделал штуку — и его мама открыла её на своём телефоне через 30 минут. Слово «деплой» можно вообще не произносить. Технология здесь — фокусник за кулисами; на сцене — эмоция. Всё остальное (что такое хостинг, домены, CLI) дети спросят сами — потом, и это будет лучший момент рассказать.

Подготовь за 10 минут до урока

Четыре пункта, без них не начинай.

Сценарий по минутам

Фразы в фиолетовых блоках можно говорить дословно.

0–3

Хук

Сколько сайтов вы открыли за свою жизнь? Тысячи. А сколько сделали? Сегодня — первый. И он будет не «для урока» — его сегодня откроет человек, которого вы любите.

Покажи демо на проекторе. Кликни по открытке — конфетти. Скажи: «через 30 минут у каждого будет своя, и мы отправим её адресату».

3–8

Разбор заготовки

Открой shablon.html в редакторе на проекторе. Покажи: в файле 5 мест с пометкой МЕНЯЙ — эмодзи, кому, послание, подпись, цвета фона и набор конфетти.

Весь код уже написан. Ваша задача — сделать открытку СВОЕЙ. Выберите человека: мама, папа, бабушка, лучший друг. Это секрет — никому не говорим, кому делаем.

Слово «секрет» работает: каждый сосредоточен на своей открытке, а не подглядывает.

8–25

Делаем

Ученики правят заготовку и проверяют двойным кликом по файлу (откроется в браузере). Ходи по классу, помогай с эмодзи (Win: Win + ., Mac: Ctrl + Cmd + Пробел).

Кто закончил раньше — давай апгрейды из списка ниже, не давай скучать.

25–33

Выпускаем в интернет

Сейчас будет магия. Ваша открытка живёт только на этом компьютере. Через минуту у неё появится адрес, который работает на любом телефоне в мире.

Каждый отправляет свой index.html файлом боту @marshubbot в Telegram. Бот отвечает ссылкой вида имя.marshub.uz. Всё.

Старшие могут через браузер: marshub.uz/panel — перетащить файл мышкой.

33–40

Кульминация — отправляем адресату

А теперь — главное. Отправьте свою ссылку тому, для кого делали. Прямо сейчас, в Telegram. И ждём.

Это момент урока. Первые «Мама ответила!!!» — дай прочитать вслух, похлопайте. Покажи: бот по команде /sites показывает сайты, у открытки растёт счётчик просмотров.

40–45

Финал — coins и что дальше

Вы только что сделали то, что умеет далеко не каждый взрослый: опубликовали сайт в интернете. Mars это засчитал — каждому уже начислено 100 коинов. А если вашу открытку откроют 100 разных людей — упадёт ещё 500.

Домашка: отправить открытку ещё трём людям. Кто хочет вторую страницу — напиши боту /template, там есть портфолио и мини-игра.

Три уровня — одна канва

Урок один и тот же, меняется только глубина правок.

🐣

Младшие

7–10 лет
  1. Меняют только текст и эмодзи
  2. Отправляют файл боту (или ментор со своего телефона)
  3. Ссылку адресату шлёт родительский чат
🚀

Средние

10–13 лет
  1. Текст + цвета фона + набор конфетти
  2. Сами деплоят через бота или панель
  3. Сами отправляют адресату
⚡

Старшие

13–17 лет
  1. Всё выше + апгрейды кода (см. список)
  2. Деплой через панель, имя сайта выбирают сами
  3. Спросят про «как это работает» → расскажи про хостинг, покажи marshub.uz/cli

Апгрейды для быстрых

Выдавай по одному, по мере готовности.

1. Поменяй три цвета фона на свою палитру (в файле есть готовые: закат, океан, космос).
2. Сделай дождь не из конфетти, а из котиков: замени набор на ['🐱','🐈','😺'].
3. Найди в коде, где меняется скорость конфетти, и сделай взрыв мощнее (число 50).
4. Добавь вторую строку послания — найди тег <p> и продублируй его.
5. Босс-уровень: добавь звук на клик (подскажи: тег <audio> + .play() в функции boom).

Если что-то пошло не так

Все известные грабли — и что делать.

СитуацияРешение
У ученика нет TelegramДеплой делаешь ты со своего телефона: кидаешь его файл @marshubbot. Сайт привяжется к тебе — не страшно, цель урока — ссылка.
Сайт не открывается первые секундыНорма: выпускается сертификат. Подожди 20–30 секунд и обнови страницу.
Открытка «сломалась» после правокЧаще всего стёрта кавычка или скобка. Скачай заготовку заново и перенеси текст — быстрее, чем искать.
Эмодзи показываются квадратами в редактореЭто только в редакторе. В браузере всё будет ок — проверяй двойным кликом по файлу.
Адресат не отвечает до конца урокаОтправь ссылку в чат группы — пусть одногруппники открывают. Счётчик просмотров растёт — эффект тот же.
Бот молчитПроверь, что отправлен именно файл (не текст кода). Если совсем тишина — напиши в чат менторов.

Coins — скажи об этом правильно

Начисляется автоматикой Mars, тебе делать ничего не нужно.

+100

за первый опубликованный сайт — придёт уведомление в Telegram в течение часа

+500

когда сайт наберёт 100 уникальных посетителей — мотивируй делиться ссылкой

Для ментора: как это устроено

Это уже не для урока — для твоего понимания.

Что такое MarsHub в двух словах

Хостинг Mars IT School: любой статический сайт (HTML/CSS/JS) публикуется на имя.marshub.uz с HTTPS. Бесплатно, до 20 сайтов на ученика, вход через Telegram. Деплой: файлом боту, перетаскиванием на /panel, или из терминала (marshub.uz/cli).

Правила имён и ограничения
  • Имя сайта: 3–30 символов, латиница/цифры/дефис: dlya-mamy-amir
  • Только статика: PHP/Python-серверы не запустятся (файлы блокируются)
  • Лимиты: 50 MB на загрузку, 1 GB и 20 сайтов на ученика
  • Повторная загрузка с тем же именем = обновление сайта
Статусы, галерея и канал

Сайт рождается черновиком. Когда ученик переводит его в live (через бота или панель), сайт попадает в галерею и автоматически публикуется в канале «Сайты учеников Mars» со скриншотом. Открытки-секреты можно оставить черновиками — реши с учеником.

Куда писать, если сломалось

Команда /support прямо в @marshubbot — сообщение долетит до команды MarsHub.