Студентам Хакатон HTML/CSS/JS

На хакатоне у вас 24-48 часов. Оценивают не только код, но и презентацию. Сайт проекта — это ваш главный аргумент перед жюри. В этом гайде вы научитесь создавать лендинг для хакатонного проекта быстро, красиво и эффективно.

Хакатон — команда студентов работает над проектом

Зачем проекту нужен сайт

Вы написали крутой бэкенд, обучили ML-модель или сделали мобильное приложение. Но как показать это жюри за 5 минут питча? Как отправить результат преподавателю? Как добавить проект в портфолио?

Сайт проекта решает все эти задачи:

На хакатоне — жюри открывает ссылку и видит, что вы сделали, без установки чего-либо
В учёбе — преподаватель оценивает проект по ссылке, а не копается в ZIP-архивах
В портфолио — работодателю можно показать живой проект, а не скриншот
В презентации — QR-код на слайде → зрители открывают сайт прямо с телефона
Для команды — единая точка, где собрана вся информация: описание, демо, GitHub, участники

Реальный пример: на хакатоне HackMoscow 2024 команда-победитель показала жюри не просто репозиторий на GitHub, а лендинг с демо-видео, описанием архитектуры и ссылкой на рабочий прототип. Это произвело впечатление и выделило их среди 40 других команд.

Когда делать сайт на хакатоне: таймлайн

Главная ошибка — откладывать сайт «на потом» и лепить его за 20 минут до дедлайна. Вот оптимальный план:

Первые 2 часа

Создайте заготовку сайта: шаблон с названием проекта и описанием идеи. Даже если идея изменится — основа будет готова.

Середина хакатона

Обновите сайт реальными скриншотами и описанием того, что уже работает. Добавьте ссылку на демо, если оно есть.

За 2-3 часа до конца

Финальная версия: отполированные тексты, реальные скриншоты, рабочие ссылки. Залейте на хостинг.

Питч / защита

Покажите QR-код с ссылкой на сайт на первом слайде. Жюри откроет его с телефона прямо во время питча.

Что понадобится

Текстовый редактор — VS Code (бесплатный, скачайте заранее)
Базовые знания HTML/CSS — если знаете, что такое <div> и display: flex, этого хватит
Скриншоты проекта — делайте их по ходу работы, не в последний момент
20-40 минут — на весь сайт, если использовать наш шаблон

Структура сайта для проекта

Идеальный лендинг для хакатонного проекта состоит из 7 блоков:

Hero — название, слоган, кнопки «Демо» и «GitHub»
Проблема — какую проблему решает ваш проект
Решение — как именно вы её решаете (с картинками)
Как это работает — 3-4 шага использования
Технологии — стек проекта
Команда — участники с ролями
Ссылки — GitHub, демо, презентация

Студенческая команда на хакатоне обсуждает проект

Шаг 1. Создаём проект

1Создайте папку и файл

hackathon-site/
├── index.html
└── images/
    ├── screenshot-1.png
    ├── screenshot-2.png
    └── team/
        ├── alex.jpg
        ├── maria.jpg
        └── ivan.jpg

Шаг 2. Hero-секция — первое впечатление

2Создайте яркую шапку с названием проекта

Жюри на хакатоне просматривает десятки проектов. У вас есть 5 секунд, чтобы зацепить внимание.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>EcoTrack — трекер углеродного следа</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont,
                'Segoe UI', Roboto, sans-serif;
            line-height: 1.7; color: #1a1a1a;
        }
    </style>
</head>
<body>

<section style="min-height: 100vh;
    background: linear-gradient(135deg,
        #064e3b 0%, #059669 50%, #34d399 100%);
    color: white; display: flex; align-items: center;
    justify-content: center; text-align: center;
    padding: 40px 20px;">

    <div>
        <p style="font-size: 1rem; opacity: 0.8;
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 2px;">
            HackMoscow 2024
        </p>

        <h1 style="font-size: 3.5rem;
            margin-bottom: 16px;
            font-weight: 800;">
            EcoTrack
        </h1>

        <p style="font-size: 1.4rem; opacity: 0.9;
            margin-bottom: 40px;
            max-width: 600px;">
            Считаем углеродный след ваших
            ежедневных привычек и помогаем
            его сократить
        </p>

        <div style="display: flex; gap: 16px;
            justify-content: center;
            flex-wrap: wrap;">

            <a href="#demo"
                style="background: white;
                    color: #059669;
                    padding: 14px 36px;
                    border-radius: 50px;
                    font-weight: 700;
                    font-size: 1.1rem;
                    text-decoration: none;">
                Попробовать демо
            </a>

            <a href="https://github.com/team/ecotrack"
                target="_blank" rel="noopener"
                style="border: 2px solid white;
                    color: white;
                    padding: 14px 36px;
                    border-radius: 50px;
                    font-weight: 500;
                    text-decoration: none;">
                GitHub
            </a>
        </div>
    </div>
</section>

Совет: название хакатона в шапке сразу даёт контекст жюри и показывает, что сайт сделан специально для этого мероприятия. Если это курсовой проект — укажите название курса или предмета.

Шаг 3. Блок «Проблема»

3Объясните, какую проблему решает проект

Каждый хороший проект начинается с проблемы. Жюри хочет понять: почему это важно?

<section style="padding: 80px 20px;
    max-width: 800px; margin: 0 auto;">

    <h2 style="font-size: 2rem; color: #059669;
        margin-bottom: 24px;
        text-align: center;">Проблема</h2>

    <div style="display: grid;
        grid-template-columns: repeat(auto-fit,
            minmax(220px, 1fr));
        gap: 24px; text-align: center;">

        <div style="background: #fef2f2;
            padding: 24px; border-radius: 12px;">
            <div style="font-size: 2.5rem;
                margin-bottom: 8px;">🏭</div>
            <p><strong>36,8 Гт CO₂</strong> — мировые
                выбросы в 2023 году</p>
        </div>

        <div style="background: #fef2f2;
            padding: 24px; border-radius: 12px;">
            <div style="font-size: 2.5rem;
                margin-bottom: 8px;">🤷</div>
            <p><strong>73%</strong> людей не знают
                свой углеродный след</p>
        </div>

        <div style="background: #fef2f2;
            padding: 24px; border-radius: 12px;">
            <div style="font-size: 2.5rem;
                margin-bottom: 8px;">📊</div>
            <p>Существующие калькуляторы
                <strong>сложные</strong>
                и неудобные</p>
        </div>
    </div>
</section>

Шаг 4. Блок «Решение» со скриншотами

4Покажите, как работает ваш проект

Скриншоты — самое убедительное доказательство того, что проект реально работает.

<section style="background: #f9fafb;
    padding: 80px 20px;">
    <div style="max-width: 1000px; margin: 0 auto;">

        <h2 style="font-size: 2rem; color: #059669;
            margin-bottom: 12px;
            text-align: center;">Наше решение</h2>

        <p style="text-align: center; color: #6b7280;
            margin-bottom: 40px; max-width: 600px;
            margin-left: auto; margin-right: auto;">
            Простое мобильное приложение,
            которое считает углеродный след
            по ежедневным действиям
        </p>

        <div style="display: grid;
            grid-template-columns:
                repeat(auto-fit, minmax(300px, 1fr));
            gap: 32px; align-items: center;">

            <div>
                <img src="images/screenshot-1.png"
                    alt="Главный экран EcoTrack"
                    style="width: 100%;
                        border-radius: 12px;
                        box-shadow: 0 8px 24px
                            rgba(0,0,0,0.12);">
            </div>

            <div>
                <h3 style="margin-bottom: 16px;
                    font-size: 1.4rem;">
                    Отслеживайте свой след
                </h3>
                <ul style="list-style: none;
                    padding: 0;">
                    <li style="padding: 8px 0;
                        border-bottom:
                            1px solid #e5e7eb;">
                        ✅ Ввод ежедневных привычек
                        за 30 секунд
                    </li>
                    <li style="padding: 8px 0;
                        border-bottom:
                            1px solid #e5e7eb;">
                        ✅ Автоматический расчёт CO₂
                        по базе коэффициентов
                    </li>
                    <li style="padding: 8px 0;
                        border-bottom:
                            1px solid #e5e7eb;">
                        ✅ Персональные рекомендации
                        по снижению
                    </li>
                    <li style="padding: 8px 0;">
                        ✅ Сравнение со средним
                        показателем по стране
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

Команда разработчиков обсуждает проект на хакатоне

Шаг 5. Блок «Как это работает»

5Опишите пользовательский путь в 3-4 шагах

<section style="padding: 80px 20px;
    max-width: 900px; margin: 0 auto;">

    <h2 style="font-size: 2rem; color: #059669;
        margin-bottom: 40px;
        text-align: center;">Как это работает</h2>

    <div style="display: grid;
        grid-template-columns:
            repeat(auto-fit, minmax(200px, 1fr));
        gap: 24px; text-align: center;">

        <div>
            <div style="width: 60px; height: 60px;
                background: #ecfdf5; border-radius: 50%;
                display: flex; align-items: center;
                justify-content: center; margin: 0 auto 16px;
                font-size: 1.5rem;
                font-weight: 700;
                color: #059669;">1</div>
            <h3>Заполните анкету</h3>
            <p style="color: #6b7280;">
                Ответьте на 10 вопросов о ваших
                ежедневных привычках
            </p>
        </div>

        <div>
            <div style="width: 60px; height: 60px;
                background: #ecfdf5; border-radius: 50%;
                display: flex; align-items: center;
                justify-content: center; margin: 0 auto 16px;
                font-size: 1.5rem; font-weight: 700;
                color: #059669;">2</div>
            <h3>Получите расчёт</h3>
            <p style="color: #6b7280;">
                Алгоритм рассчитает ваш
                углеродный след в кг CO₂/год
            </p>
        </div>

        <div>
            <div style="width: 60px; height: 60px;
                background: #ecfdf5; border-radius: 50%;
                display: flex; align-items: center;
                justify-content: center; margin: 0 auto 16px;
                font-size: 1.5rem; font-weight: 700;
                color: #059669;">3</div>
            <h3>Следуйте советам</h3>
            <p style="color: #6b7280;">
                Персональные рекомендации,
                как снизить след на 20-40%
            </p>
        </div>

        <div>
            <div style="width: 60px; height: 60px;
                background: #ecfdf5; border-radius: 50%;
                display: flex; align-items: center;
                justify-content: center; margin: 0 auto 16px;
                font-size: 1.5rem; font-weight: 700;
                color: #059669;">4</div>
            <h3>Отслеживайте прогресс</h3>
            <p style="color: #6b7280;">
                Графики и статистика за неделю,
                месяц и год
            </p>
        </div>
    </div>
</section>

Шаг 6. Технологический стек

6Покажите, на чём построен проект

Жюри на хакатоне оценивает не только идею, но и техническую реализацию. Покажите стек красиво.

<section style="background: #111827; color: white;
    padding: 80px 20px;">
    <div style="max-width: 900px; margin: 0 auto;">

        <h2 style="font-size: 2rem;
            margin-bottom: 40px;
            text-align: center;">Технологии</h2>

        <div style="display: grid;
            grid-template-columns:
                repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;">

            <div style="background: rgba(255,255,255,0.05);
                padding: 24px; border-radius: 12px;
                border: 1px solid rgba(255,255,255,0.1);">
                <h3 style="color: #34d399;
                    margin-bottom: 8px;">Frontend</h3>
                <p style="opacity: 0.8;">
                    React, TypeScript, Tailwind CSS,
                    Recharts
                </p>
            </div>

            <div style="background: rgba(255,255,255,0.05);
                padding: 24px; border-radius: 12px;
                border: 1px solid rgba(255,255,255,0.1);">
                <h3 style="color: #34d399;
                    margin-bottom: 8px;">Backend</h3>
                <p style="opacity: 0.8;">
                    Python, FastAPI, PostgreSQL
                </p>
            </div>

            <div style="background: rgba(255,255,255,0.05);
                padding: 24px; border-radius: 12px;
                border: 1px solid rgba(255,255,255,0.1);">
                <h3 style="color: #34d399;
                    margin-bottom: 8px;">ML</h3>
                <p style="opacity: 0.8;">
                    scikit-learn, pandas,
                    собственная модель
                    коэффициентов
                </p>
            </div>

            <div style="background: rgba(255,255,255,0.05);
                padding: 24px; border-radius: 12px;
                border: 1px solid rgba(255,255,255,0.1);">
                <h3 style="color: #34d399;
                    margin-bottom: 8px;">Deploy</h3>
                <p style="opacity: 0.8;">
                    VibeHosting (лендинг),
                    Railway (API)
                </p>
            </div>
        </div>
    </div>
</section>

Шаг 7. Команда

7Покажите участников команды

Жюри и преподаватели хотят знать, кто стоит за проектом. Укажите роли каждого участника.

<section style="padding: 80px 20px;
    max-width: 900px; margin: 0 auto;">

    <h2 style="font-size: 2rem; color: #059669;
        margin-bottom: 40px;
        text-align: center;">Команда</h2>

    <div style="display: grid;
        grid-template-columns:
            repeat(auto-fit, minmax(200px, 1fr));
        gap: 24px; text-align: center;">

        <div>
            <img src="images/team/alex.jpg"
                alt="Алексей"
                style="width: 100px; height: 100px;
                    border-radius: 50%;
                    object-fit: cover;
                    margin-bottom: 12px;">
            <h3 style="margin-bottom: 4px;">
                Алексей Петров
            </h3>
            <p style="color: #059669;
                font-weight: 500;
                margin-bottom: 4px;">
                Frontend
            </p>
            <p style="color: #6b7280;
                font-size: 0.9rem;">
                React, TypeScript, UI/UX
            </p>
            <a href="https://github.com/alex"
                target="_blank" rel="noopener"
                style="color: #059669;
                    font-size: 0.9rem;">
                GitHub
            </a>
        </div>

        <!-- Повторите для остальных участников -->
    </div>
</section>

Совет: если нет профессиональных фото — используйте аватарки из GitHub или сделайте фото на хакатоне. Даже фото на телефон лучше, чем стоковые заглушки. Если совсем нет фото — используйте эмодзи или инициалы на цветном фоне.

Шаг 8. Финальный блок со ссылками

8Добавьте все ссылки на проект

<section style="background:
    linear-gradient(135deg, #064e3b, #059669);
    color: white; padding: 60px 20px;
    text-align: center;">

    <h2 style="font-size: 2rem;
        margin-bottom: 12px;">Попробуйте EcoTrack</h2>

    <p style="opacity: 0.9; margin-bottom: 32px;
        max-width: 500px; margin-left: auto;
        margin-right: auto;">
        Проект создан на хакатоне HackMoscow 2024
        за 48 часов. Исходный код открыт.
    </p>

    <div style="display: flex; gap: 16px;
        justify-content: center; flex-wrap: wrap;">

        <a href="#" style="background: white;
            color: #059669; padding: 14px 32px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 700;">
            Демо-версия
        </a>

        <a href="#" style="border: 2px solid white;
            color: white; padding: 14px 32px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 500;">
            GitHub
        </a>

        <a href="#" style="border: 2px solid white;
            color: white; padding: 14px 32px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 500;">
            Презентация (PDF)
        </a>
    </div>
</section>

Шаг 9. Публикация на VibeHosting

9Залейте сайт за 1 минуту

На хакатоне каждая минута на счету. VibeHosting — самый быстрый способ опубликовать лендинг.

Сжмите папку в ZIP — index.html + папка images
Откройтеhostingvibe.ru
Зарегистрируйтесь (2 клика)
Загрузите ZIP
Выберите slug — например, ecotrack
Готово! Сайт доступен по адресу ecotrack.hostingvibe.ru

Бесплатный хостинг для студенческих проектов

VibeHosting — бесплатный план для студентов. ZIP → сайт за 1 минуту. Идеально для хакатонов, курсовых и портфолио.

Загрузить проект на VibeHosting →

QR-код для презентации

На VibeHosting для каждого сайта автоматически генерируется QR-код. Вставьте его на первый слайд презентации — жюри откроет ваш сайт прямо с телефона.

Если QR нужен раньше — сгенерируйте его бесплатно на любом QR-генераторе, указав URL вашего сайта.

Лайфхак для питча: покажите QR-код на экране и скажите: «Отсканируйте QR и следите за демо на своих устройствах». Это вовлекает жюри и создаёт вау-эффект, которого нет у команд с обычными слайдами.

Презентация проекта на хакатоне — выступление перед жюри

Шаблоны для разных типов проектов

В зависимости от типа проекта, акценты на сайте будут разными:

Тип проекта	На что делать акцент	Обязательные блоки
ML / Data Science	Данные, модель, метрики точности	Датасет, архитектура модели, графики результатов
Веб-приложение	UX, скорость, функциональность	Скриншоты, демо-ссылка, стек
Мобильное приложение	Удобство, дизайн экранов	Мокапы телефонов, видео-демо
IoT / Hardware	Как работает устройство	Фото прототипа, схема, видео работы
Курсовая / диплом	Научная новизна, методология	Постановка задачи, результаты, список литературы

Как сделать сайт ещё круче (если есть время)

Добавьте видео-демо

Запишите 1-2 минутное видео работы вашего проекта (OBS Studio — бесплатный инструмент для записи экрана). Загрузите на YouTube (можно как unlisted) и вставьте iframe:

<iframe width="100%" height="400"
    src="https://www.youtube.com/embed/VIDEO_ID"
    frameborder="0" allowfullscreen
    style="border-radius: 12px; margin: 20px 0;">
</iframe>

Добавьте анимации

Простая CSS-анимация появления элементов при загрузке страницы:

<style>
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

section {
    animation: fadeInUp 0.6s ease-out;
}
</style>

Добавьте метрики проекта

Числа впечатляют. Если за время хакатона вы собрали данные — покажите их:

<div style="display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px; text-align: center;
    padding: 40px 0;">

    <div>
        <div style="font-size: 3rem; font-weight: 800;
            color: #059669;">48ч</div>
        <p style="color: #6b7280;">Время разработки</p>
    </div>
    <div>
        <div style="font-size: 3rem; font-weight: 800;
            color: #059669;">3.2K</div>
        <p style="color: #6b7280;">Строк кода</p>
    </div>
    <div>
        <div style="font-size: 3rem; font-weight: 800;
            color: #059669;">94%</div>
        <p style="color: #6b7280;">Точность модели</p>
    </div>
</div>

Частые ошибки на хакатонах

Нет сайта — «у нас всё в репо на GitHub» не работает. Жюри хочет увидеть результат одним кликом
Сайт без скриншотов — стена текста не убеждает. Покажите, как выглядит ваш продукт
Нерабочие ссылки — проверяйте все ссылки перед питчем. Мёртвая ссылка на демо — провал
Слишком много текста — жюри сканирует, а не читает. Заголовки, списки, картинки — ваши друзья
Нет информации о команде — проект делают люди, покажите их
Забыли про мобильную версию — жюри часто смотрит с телефона, используйте адаптивный дизайн
Нет призыва к действию — кнопка «Попробовать демо» должна быть заметной

Чек-лист перед защитой

☐ Сайт открывается по ссылке (не только на вашем компьютере!)
☐ Все скриншоты загружаются
☐ Ссылка на GitHub работает
☐ Демо-версия работает (если есть)
☐ Сайт адаптивен — проверьте на телефоне
☐ QR-код работает
☐ Все участники команды указаны
☐ Нет орфографических ошибок
☐ Сайт загружается быстро (сжали картинки)

Итоги

Сайт проекта — это ваш MVP для коммуникации. Он рассказывает историю проекта тем, кто не может запустить ваш код локально: жюри, преподавателям, потенциальным работодателям.

Создать его можно за 20-40 минут, используя наш шаблон. А опубликовать на VibeHosting — за 1 минуту. Не забудьте QR-код для презентации!

Удачи на хакатоне! Сделайте проект, которым будете гордиться, — и покажите его миру.

VibeHosting для студентов — бесплатно

Загрузите ZIP → получите ссылку ваш-проект.hostingvibe.ru за 1 минуту. Хакатоны, курсовые, портфолио — всё в одном месте.