{

Отчёт о создании сайта «ВкусноЕд»

Выполнила: Пивоварова Анна

Ссылка на готовый сайт: http://pivovale.beget.tech/

Дата сдачи: 23 июня 2026 года

1. Введение

В современном мире доставка еды стала неотъемлемой частью жизни многих людей. Целью данного проекта было создать полноценный сайт службы доставки еды «ВкусноЕд», который:

работает без установки дополнительных программ
открывается в любом браузере
корректно отображается на компьютере и телефоне
содержит интерактивные элементы: корзину, калькулятор калорий и мини-игры

В ходе работы были освоены базовые технологии веб-разработки: HTML, CSS и JavaScript.

2. Выбор платформы для создания сайта

Первоначальный план: конструктор сайтов

Изначально планировалось создавать сайт на конструкторе (Tilda, Wix или аналогичных платформах). Казалось, что это будет проще и быстрее.

Преимущества конструкторов:

Не нужно программировать
Визуальный редактор «перетащи и оставь»
Много готовых шаблонов

Но были и недостатки:

Ограниченный функционал в бесплатных версиях
Сложно сделать что-то уникальное
Платная подписка для полноценной работы
Нельзя разместить на своём хостинге

Почему я выбрала ручную вёрстку и хостинг Beget

В процессе изучения вопроса я поняла, что хочу настоящий сайт, а не шаблонное решение. Поэтому приняла решение:

Научиться основам веб-разработки — HTML, CSS, JavaScript
Сделать сайт с нуля — полный контроль над дизайном и функционалом
Разместить на хостинге Beget — популярный российский хостинг с бесплатным тарифом для начала, удобным файловым менеджером, поддержкой PHP и баз данных, хорошей технической поддержкой

Сравнение подходов

Конструктор сайтов:

Время создания: 1–2 дня
Уникальность: низкая
Гибкость: ограничена
Стоимость: от 300 р. в месяц
Навыки: не развиваются
Переносимость: сложно

Ручная вёрстка + Beget:

Время создания: 2–3 недели
Уникальность: полная
Гибкость: безгранична
Стоимость: бесплатно
Навыки: реальный опыт
Переносимость: легко

Мой выбор: ручная вёрстка + Beget

Вывод: Хотя создание сайта вручную заняло больше времени, я получила бесценный опыт и настоящий рабочий проект, который можно развивать и улучшать.

3. Использование искусственного интеллекта

В процессе создания сайта я использовала искусственный интеллект (ИИ-ассистент Qwen) как инструмент помощи в разработке. ИИ помогал:

Объяснять сложные технические понятия простым языком
Писать и отлаживать код на HTML, CSS и JavaScript
Находить ошибки в коде и предлагать решения
Генерировать идеи для улучшения функционала
Составлять структуру проекта и отчёта

ИИ использовался как помощник и наставник, но все ключевые решения (выбор дизайна, структуры, функционала, контента) принимались мной самостоятельно. Я изучала предлагаемый код, задавала уточняющие вопросы и вносила изменения по своему усмотрению.

4. Используемые технологии

HTML5 — структура сайта: заголовки, карточки, кнопки, страницы.

CSS3 — оформление: цвета, анимации, адаптивность, тени.

JavaScript — логика: корзина, переключение страниц, игры, калькулятор.

Canvas API — отрисовка игры «Тетрис».

Весь сайт состоит из одного файла index.html — стили и скрипты встроены внутрь. Это упрощает загрузку на хостинг и позволяет сайту работать офлайн.

5. Этапы разработки

Этап 1. Планирование

Придумала название сайта: «ВкусноЕд»
Определила целевую аудиторию: люди, заказывающие еду на дом
Составила структуру: 3 страницы (Главная, Меню, О нас)
Выбрала цветовую палитру
Изучила возможности хостинга Beget

Этап 2. Изучение основ

Посмотрела уроки по HTML и CSS для начинающих
Разобралась с базовым синтаксисом JavaScript
Изучила документацию по Canvas API для игр
Почитала форумы о веб-разработке

Этап 3. Разработка структуры (HTML)

Создала «скелет» сайта:

Шапка с логотипом и меню навигации
Три страницы, переключающиеся без перезагрузки
Блоки с блюдами, отзывами, информацией
Всплывающая корзина
Модальные окна для игр

Этап 4. Оформление (CSS)

Применила современный дизайн:

Скруглённые углы (border-radius: 20px)
Мягкие тени (box-shadow)
Плавные анимации (hover, fade-in, shake)
Адаптивность через медиа-запросы (@media)

Этап 5. Программирование (JavaScript)

Реализовала интерактивные функции:

Массив из 25 блюд с данными (название, цена, калории, БЖУ)
Функция переключения страниц showPage()
Работающую корзину с подсчётом суммы
Калькулятор калорий с прогресс-барами
Фильтры блюд по категориям

Этап 6. Добавление игр

Создала три мини-приложения для получения скидок:

Тетрис — классическая игра, скидка 50% за 500 очков
Мемори — найди пары блюд за 30 секунд, скидка 20%
Кликер — 50 кликов по пицце за 10 секунд, скидка 25%

Этап 7. Работа с изображениями

Скачала фотографии еды с бесплатных сайтов (Unsplash)
Сохранила ссылки на изображения в коде
Настроила автоматическую замену на эмодзи, если фото не загрузилось

Этап 8. Тестирование и доработка

Проверила работу на компьютере и телефоне
Исправила ошибки с отображением картинок
Добавила информацию о директоре (Пивоваровой А. О.)
Протестировала все три игры

Этап 9. Подготовка к размещению на Beget

Оптимизировала код
Проверила все ссылки и пути к файлам
Подготовила инструкцию по загрузке

6. Структура сайта

index.html (один файл, ~1500 строк)
├── <head>
│   ├── META-теги (кодировка, адаптивность)
│   └── <style> (весь CSS — около 500 строк)
│
── <body>
│   ├── Шапка (header) с навигацией
│   ├── Страница 1: Главная
│   │   ├── Hero-блок с фото
│   │   ├── Популярные блюда
│   │   ├── Преимущества
│   │   ├── Игры (Тетрис, Мемори, Кликер)
│   │   └── Отзывы (7 штук)
│   ├── Страница 2: Меню
│   │   ├── Фильтры по 7 категориям
│   │   ├── 25 карточек блюд
│   │   └── Калькулятор калорий
│   ├── Страница 3: Информация
│   │   ├── О компании
│   │   ├── Директор
│   │   ├── Отзывы
│   │   └── Доставка
│   ├── Корзина (выезжающая панель)
│   ├── Модальные окна (3 игры)
│   ── Футер
│
└── <script> (весь JS — около 600 строк)
    ├── Массив dishes (25 блюд)
    ├── Функции страниц
    ├── Логика корзины
    ├── Калькулятор калорий
    ├── Тетрис
    ├── Мемори
    └── Кликер

7. Дизайн и цветовая палитра

Оранжевый (#FF6B35) — основной цвет, цены, кнопки
Зелёный (#2ECC71) — калории, кнопки «В корзину», скидки
Белый (#FFFFFF) — фон карточек
Кремовый (#FFF8F0) — фон секций
Тёмно-синий (#2C3E50) — основной текст, футер

Цвета заданы через CSS-переменные в блоке :root, что позволяет перекрасить весь сайт, изменив всего 5 строк кода.

8. Функциональные возможности

Навигация — переключение между страницами без перезагрузки (SPA)
Меню — 25 блюд с фильтрами по 7 категориям
Корзина — добавление, изменение количества, подсчёт суммы
Скидки — применяются автоматически к итоговой цене
Калькулятор калорий — считает КБЖУ в реальном времени
Отзывы — 7 развёрнутых отзывов с оценками
Игры — Тетрис (50%), Мемори (20%), Кликер (25%)
Адаптивность — корректное отображение на телефонах
Анимации — hover-эффекты, тряска корзины, плавные переходы

9. Описание игр

Тетрис (скидка 50%)

Классическая игра с падающими фигурами. Нужно набрать 500 очков, чтобы получить максимальную скидку. Управление стрелками клавиатуры.

Мемори (скидка 20%)

Игра на память с карточками блюд. Нужно найти все 8 пар за 30 секунд. Карточки переворачиваются по клику.

Кликер (скидка 25%)

Динамичная игра на скорость. Нужно сделать 50 кликов по большой пицце за 10 секунд. При каждом клике пицца анимируется.

10. Возникшие проблемы и их решение

Проблема 1: Картинки не отображались

Причина: некоторые ссылки на изображения блокировались.
Решение: использовала стабильные ссылки с Unsplash и добавила автоматическую замену на эмодзи через onerror.

Проблема 2: Русские буквы превращались в «кракозябры»

Причина: неправильная кодировка при сохранении.
Решение: сохранила файл в кодировке UTF-8.

Проблема 3: Сложности с изучением JavaScript

Причина: раньше не программировала.
Решение: смотрела видеоуроки.

Проблема 4: Адаптивность на мобильных устройствах

Причина: сайт «ломался» на маленьких экранах.
Решение: добавила медиа-запросы @media (max-width: 768px) для телефонов.

Проблема 5: Тетрис не работал корректно

Причина: ошибки в логике столкновений фигур.
Решение: тщательно протестировала каждую функцию и исправила баги.

11. Как запустить сайт

Локально (на своём компьютере)

Открыть файл index.html двойным кликом — запустится в браузере
Для редактирования — открыть в Блокноте или VS Code

На хостинге Beget

Зарегистрироваться на beget.com
Войти в панель управления
Открыть «Файловый менеджер»
Перейти в папку public_html
Загрузить файл index.html
Открыть свой домен — сайт доступен!

12. Источники изображений

Все фотографии взяты с бесплатного фотостока:

Unsplash.com — высококачественные фото еды с лицензией для свободного использования

13. Выводы

В ходе работы над проектом я:

Освоила основы HTML, CSS и JavaScript
Научилась создавать адаптивные сайты
Поняла, как работает интерактивность в браузере
Создала работающий проект, который можно показать как портфолио
Разобралась с хостингом Beget и загрузкой файлов
Научилась работать с Canvas API для создания игр
Поняла разницу между конструкторами сайтов и ручной вёрсткой

Главный вывод: Создание сайта вручную оказалось сложнее, но намного интереснее, чем использование конструктора. Я получила реальные навыки программирования, которые пригодятся в будущем.

Сайт получился ярким, функциональным и интересным для пользователей. Игровые элементы (Тетрис, Мемори, Кликер) повышают вовлечённость и мотивируют к заказу.

14. Планы на развитие

В будущем планирую добавить:

Форму оформления заказа с вводом адреса и телефона
Карту зон доставки (Яндекс.Карты API)
Сохранение корзины и скидки в localStorage
Сенсорное управление играми для телефонов
Больше реальных фотографий блюд
Уведомления о статусе заказа
Мультиязычность (русский + английский)
Статистику заказов (админ-панель)
Личный кабинет пользователя
Онлайн-оплату через платёжные системы

Приложение. Фрагмент кода (пример)

// Пример функции добавления в корзину
function addToCart(id) {
    const existing = cart.find(item => item.id === id);
    if (existing) {
        existing.qty++;
    } else {
        cart.push({ id: id, qty: 1 });
    }
    updateCart();
}

Что я узнала в процессе

Технические навыки

Структура HTML-документа
CSS-селекторы и свойства
JavaScript функции и массивы
Работа с DOM (Document Object Model)
Canvas API для графики
Адаптивная вёрстка
Работа с хостингом

Мягкие навыки (soft skills)

Умение искать информацию
Решение проблем
Терпение и настойчивость
Работа с ошибками
Тайм-менеджмент

Итог

Я довольна своим решением создать сайт вручную и разместить его на Beget. Это был вызов, но результат того стоил!

Сайт «ВкусноЕд» — это полноценный проект, который демонстрирует мои навыки в веб-разработке. Он готов к использованию и может быть легко расширен в будущем.

Отчёт подготовила: Пивоварова Анна

Ссылка на готовый сайт: http://pivovale.beget.tech/

Дата сдачи: 23 июня 2026 года }

Отчет_Пивоварова.md 19 KB Historia Czysty