акуленкоотчет.md 8.3 KB
Отчёт о создании веб-сайта «Онлайн-школа 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:
Все файлы (HTML, CSS, JS) загружены через панель управления хостингом. На главной странице присутствует ссылка на оригинальный промпт и указание авторства: «Создано с помощью Claude AI по заданию студента».
Адрес Claude AI: https://claude.ai/
7. Заключение
Claude AI позволил выполнить задание «3 страницы, кликабельность, проверка данных» за 4 часа диалога без написания ни одной строки кода вручную. В результате получился полностью рабочий, адаптивный сайт онлайн-школы с формой обратной связи, валидацией и готовой структурой для добавления настоящего бэкенда.