Небольшой сайт с помощью ChatGPT можно начать с одной статической страницы на HTML и CSS. Опишите содержание, ограничения и поведение ссылок, получите код и откройте его локально. Публикация, обработка формы и платежи не появляются автоматически вместе с разметкой.
Короткий ответ
Выберите простую страницу, перечислите секции и проверенные факты. Попросите полный HTML с CSS, адаптивной сеткой и доступными ссылками. Сохраните результат в файл и проверьте в браузере на узком и широком экране. Исправляйте конкретные наблюдаемые дефекты. Получение кода — отдельный этап от размещения: домен, сервер и обработка данных требуют своих решений.
Какой сайт подходит для первого примера
Хорошая учебная задача — визитка с описанием, несколькими возможностями и блоком подготовки к визиту. Она не хранит данные и не требует сервера приложений. Так проще понять связь между заданием, кодом и тем, что видно в браузере. Кабинет, магазин и бронирование значительно расширяют задачу.
Не добавляйте декоративную форму, которая выглядит рабочей, но ничего не делает. Посетитель может решить, что сообщение отправлено. В первом примере лучше использовать внутреннюю ссылку к существующей секции. Каждое действие страницы должно иметь понятный результат, который вы способны проверить.
Что написать в задании для ChatGPT
Содержание и структура
Назовите проект, читателя и три-четыре секции. Передайте факты в виде короткого списка. Если нет цены и контактов, прямо запретите их выдумывать. Для учебной страницы не нужны чужие логотипы, внешние шрифты и случайные изображения: они добавляют зависимости, не помогая проверить основную задачу.
Адаптивность и ограничения
Попросите семантические заголовки, один H1, читабельный размер текста и видимый фокус. Укажите, что карточки должны складываться в одну колонку на телефоне. Вместо универсального пожелания «современный сайт» опишите цвет, ширину и характер интерфейса. Ограничение одним файлом удобно для первого локального просмотра.
Промпт для простой страницы на HTML и CSS
Этот запрос намеренно исключает отправку данных и JavaScript. Его результат можно проверить без регистрации хостинга. Он также помогает увидеть, какие функции остаются вне задачи, даже если модель умеет нарисовать для них кнопку.
Создай учебную одностраничную визитку на чистом HTML и CSS.
Верни один полный index.html со встроенными стилями, lang="ru" и viewport.
Структура: о пространстве, возможности съёмки, подготовка к визиту.
Сделай адаптивную сетку, читабельный текст и видимый клавиатурный фокус.
Кнопки должны вести только к существующим секциям страницы.
Не добавляй внешние ресурсы, аналитику, формы отправки, цены и контакты.
Не придумывай отсутствующие факты. Не используй JavaScript.
Исходные сведения:
[вставьте факты о проекте]Пример: страница учебной фотостудии
Вымышленная фотостудия «Светлая комната»: светлый зал, стол для предметной съёмки, сменные бумажные фоны. Адрес, цена и расписание неизвестны. Секции — о пространстве, возможности, подготовка. Кнопка «Посмотреть возможности» ведёт на #vozmozhnosti и не имитирует бронирование.
Ниже полный минимальный файл. Сохраните его как index.html и откройте в обычном браузере. Все стили находятся внутри; отдельная установка инструментов для этого примера не нужна. Текст учебный, его нельзя выдавать за действующую студию с возможностью записи.
<!doctype html>
<html lang="ru">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Светлая комната — учебная страница</title>
<style>
*{box-sizing:border-box}
body{margin:0;background:#f3f3eb;color:#172016;font:18px/1.6 system-ui}
main{max-width:1000px;margin:auto;padding:32px 20px}
section{margin:48px 0;scroll-margin-top:20px}
h1{font-size:clamp(36px,7vw,64px);line-height:1.1}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px}
.card{padding:20px;background:#e1e7c7;border-radius:16px}
a{display:inline-block;padding:12px 18px;background:#d6ff62;color:#172016;border-radius:10px}
a:focus-visible{outline:3px solid #172016;outline-offset:4px}
</style>
<main>
<h1>Светлая комната</h1>
<p>Учебный пример страницы фотостудии.</p>
<a href="#vozmozhnosti">Посмотреть возможности</a>
<section><h2>О пространстве</h2>
<p>Светлый зал для съёмки. Условия посещения требуют уточнения.</p></section>
<section id="vozmozhnosti"><h2>Возможности съёмки</h2>
<div class="grid"><div class="card">Стол для предметной съёмки</div>
<div class="card">Сменные бумажные фоны</div></div></section>
<section><h2>Как подготовиться</h2>
<p>Определите задачу съёмки. Цену, адрес и расписание уточните отдельно.</p></section>
</main>
</html>У страницы есть один H1 и три H2. Карточки используют адаптивную сетку, а внутренняя ссылка ведёт к существующему ID. Нет формы, удалённых ресурсов и скриптов. Это делает пример небольшим, но не лишает его основного содержания. Для реального проекта сведения нужно заменить подтверждёнными.
Как проверить страницу на компьютере и телефоне
Измените ширину окна до примерно 390 пикселей. Текст не должен обрезаться, карточки — выходить за край, а кнопка — перекрывать соседний блок. Затем проверьте широкий экран. Увеличьте масштаб до 200%: страница должна оставаться читаемой. Табуляцией перейдите к ссылке и убедитесь, что положение фокуса видно.
Нажмите кнопку перехода к возможностям и проверьте целевую секцию. Посмотрите, не осталось ли пустых ссылок, незаменённых подсказок и вымышленных контактов. Если добавили изображения, задайте им размеры и подходящий alt. Не считайте страницу законченной только потому, что она открылась без сообщения об ошибке.
Как просить исправления по одному наблюдаемому дефекту
Сообщите ширину экрана, ожидаемое и фактическое поведение, приложите относящийся к проблеме код. Это помогает получить небольшое изменение. Просьба «переделай красиво» может сменить всю страницу и сломать то, что уже работало.
Помоги исправить конкретный дефект учебной HTML-страницы.
Условия: ширина экрана 390px; карточки выходят за правую границу.
Найди причину по коду и предложи минимальное изменение CSS.
Сохрани содержание, цвета и рабочие ссылки.
Объясни, как проверить результат на 390px и на широком экране.
Не добавляй зависимости и не переписывай всю страницу без необходимости.
Код:
[вставьте HTML и CSS]После исправления повторите именно проблемный сценарий и коротко проверьте соседний размер. Сохраните исходную версию, чтобы понимать изменения. Если модель добавила стороннюю библиотеку ради одного отступа, верните задачу к минимальному CSS. Масштаб решения должен соответствовать дефекту.
Что ещё нужно для публикации
Для публичного адреса выбирают хостинг и настраивают домен, HTTPS и поведение неизвестных URL. Это не часть локального HTML-примера. Реальная отправка формы также требует отдельной обработки и проверки данных. Нельзя объявлять её рабочей, добавив только поля и кнопку.
Сначала доведите содержание и поведение страницы, затем решайте размещение. Подготовить текстовое задание поможет гайд по документам, а проверить обещания в описании — разбор рекламного текста. Законченный небольшой сайт — это понятное содержание и проверенные действия, а не максимальное количество эффектов.
Вопросы и ответы
Нужны ли знания программирования?
Полезно понимать структуру файлов и уметь проверить результат; модель не снимает ответственность за проверку.
Почему форма не отправляет данные?
HTML-поля сами по себе не реализуют обработку.
Публикует ли ChatGPT страницу автоматически?
Получение кода не равно публикации; конкретные продукты имеют свои функции, эта статья использует локальный путь.
Можно ли сразу делать интернет-магазин?
Это другая задача с данными, платежами и безопасностью; учебный пример её не решает.
