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

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

---

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

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

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

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

---

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

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

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

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

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

### 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 часа диалога** без написания ни одной строки кода вручную. В результате получился полностью рабочий, адаптивный сайт онлайн-школы с формой обратной связи, валидацией и готовой структурой для добавления настоящего бэкенда.