Отчёт о создании веб-сайта «Онлайн-школа CodeMaster»

Студент: Акуленко Илья
Дисциплина: Веб-разработка / Проектная практика
Итоговый URL: http://cdmage.beget.tech/
Дата сдачи: Июнь 2026 г.

1. Техническое задание (исходный промпт)

«Создай мне сайт, состоящий из 3 страниц, всё кликабельно и есть проверка данных».

Дополнительные уточнения в процессе диалога с нейросетью:

Тематика: IT-образование, онлайн-школа программирования
Целевая аудитория: новички и практикующие разработчики
Наличие формы обратной связи с валидацией полей
Современный, «продающий» дизайн без воды

2. Выбор инструментов и ход работы

Все этапы выполнялись с помощью Claude AI (версия Sonnet 3.5) в интерактивном режиме. Я выступал в роли заказчика и тестировщика, а нейросеть — в роли frontend-разработчика.

2.1. Генерация структуры и контента

Claude сразу предложил разбить сайт на три логические страницы:

Главная — ценность, статистика, преимущества
Курсы и обратная связь — каталог направлений, форма записи на консультацию
Отзывы и основатель — социальное доказательство, история создания школы

2.2. Разработка внешнего вида

Нейросеть сама выбрала стек:

HTML5 — структура
CSS3 (flexbox, grid, медиазапросы) — адаптивный дизайн
Чистый JavaScript — проверка данных и интерактив (выпадающий список курсов, модальное окно «Заявка принята»)

2.3. Реализация интерактива и проверки данных

По требованию «кликабельность и проверка данных» Claude реализовал:

Кликабельные кнопки навигации (меню, ссылки на курсы)
Форму с валидацией: имя, фамилия, email (формат), телефон (маска), выбор курса из списка. Все поля обязательны для заполнения.
Всплывающее уведомление при успешной отправке
Адаптивные карточки курсов при клике на кнопку «Подробнее»

2.4. Текстовое наполнение и изображения

Claude сгенерировал:

Логотип и название CodeMaster
Имя основателя — Илья Акуленко из Новозыбкова
Цифры: 1200+ выпускников, 94% трудоустройства
6 реальных отзывов с именами, компаниями и звёздами
Список технологий (Python, React, Docker и т.д.)

Все медиа (иконки, аватар основателя, скриншоты) были запрошены у Claude, он предоставил SVG-иконки и CSS-градиенты вместо внешних картинок.

3. Три страницы сайта (соответствие ТЗ)

Главная (index.html)
Содержание: герой-блок, преимущества школы, стек технологий, статистика
Кликабельность: кнопки «Начать обучение» → скролл к форме, ссылки на курсы
Проверка данных: нет формы

Курсы и заявка (courses.html)
Содержание: 8 карточек курсов с уровнем сложности, форма консультации (ФИО, email, телефон, выбор курса)
Кликабельность: карточки кликабельны → заполняют поле «Курс» в форме
Проверка данных: есть — проверка email, телефона, незаполненных полей

Отзывы и основатель (reviews.html)
Содержание: 6 отзывов с фото/именами, блок с историей Ильи Акуленко
Кликабельность: ссылка «Записаться» ведёт на форму со второй страницы
Проверка данных: нет формы (но через меню переход к форме)

Вывод: сайт полностью соответствует требованию «3 страницы, всё кликабельно, проверка данных».

4. Демонстрация работы проверки данных (пример)

При заполнении формы на странице курсов:

Если оставить поле «Имя» пустым → подсветка красным, текст «Введите ваше имя»
Если ввести test@mail в email → ошибка «Введите корректный email»
Если телефон короче 10 цифр → ошибка
При корректном заполнении → всплывает модальное окно: «🎉 Заявка принята! Илья свяжется с тобой в течение 30 минут»

В консоли браузера данные не отправляются на сервер — это frontend-симуляция по условию учебного проекта.

5. Трудности и их преодоление

Нейросеть иногда «забывала» проверку на пустые поля — я попросил: «Добавь проверку, что имя и фамилия не могут быть пустыми и содержать только буквы». Claude добавил.
На мобильных устройствах ломался грид карточек курсов — Claude переписал CSS на grid с repeat(auto-fit, minmax(280px, 1fr)).
Хотелось сохранить введённые данные в localStorage — Claude добавил 10 строк JS для автосохранения полей формы при перезагрузке.
Ссылки между тремя страницами были относительными (/courses) — нейросеть исправила на абсолютные пути к файлам courses.html.

6. Итоговая ссылка и размещение

Сайт выложен на бесплатный хостинг beget.tech:

🔗 http://cdmage.beget.tech/

Все файлы (HTML, CSS, JS) загружены через панель управления хостингом. На главной странице присутствует ссылка на оригинальный промпт и указание авторства: «Создано с помощью Claude AI по заданию студента».

Адрес Claude AI: https://claude.ai/

7. Заключение

Claude AI позволил выполнить задание «3 страницы, кликабельность, проверка данных» за 4 часа диалога без написания ни одной строки кода вручную. В результате получился полностью рабочий, адаптивный сайт онлайн-школы с формой обратной связи, валидацией и готовой структурой для добавления настоящего бэкенда.

акуленкоотчет.md 8.3 KB Verlauf Originalformat