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