Урок 2 из 8 · 20 мин · обновлено

Первый результат за вечер: страница из одного файла

Как попросить нейросеть сделать страницу, сохранить код в файл, открыть его в браузере и что делать, если вместо страницы видно текст или кракозябры.

Что понадобится

  • Чат-помощник с нейросетью, который умеет писать код. Подойдёт любой — от того, каким вы пользуетесь для текстов, до специального помощника для программистов.
  • Браузер — тот, в котором вы читаете этот урок.
  • Простой текстовый редактор. На Windows — Блокнот. На Mac — TextEdit, но в нём включите режим простого текста: меню «Формат» → «Создать простой текст».

Ставить ничего не нужно. Весь проект — один файл, который браузер откроет сам.

Первый запрос

Начнём с внешнего вида трекера, без логики. Короткий запрос, где сказано главное: что за страница, что на ней и в каком виде нужен код.

Текст
Сделай страницу «Мои привычки» одним HTML-файлом: разметка,
стили и код в одном файле. На странице заголовок и список из трёх
привычек: «Зарядка», «Читать 20 минут», «Выпить 2 литра воды».
У каждой привычки галочка слева. Простой светлый дизайн,
карточки со скруглёнными углами, удобно на телефоне.

Обратите внимание на слова «одним HTML-файлом». Без них нейросеть может разложить проект на несколько файлов — стили отдельно, код отдельно, — и для первого раза это лишняя сложность.

Нейросеть ответит блоком кода. Начало обычно выглядит так:

HTML
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Трекер привычек</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 480px; margin: 40px auto; }
    .habit { padding: 12px; border: 1px solid #ddd; border-radius: 12px; }
  </style>
</head>

Разбирать каждую строку пока не нужно. Главное — увидеть, что код начинается с <!DOCTYPE html> и заканчивается </html>: значит, нейросеть выдала файл целиком. Если ответ оборвался посередине, попросите: «Продолжи код с того места, где остановился» — или «Пришли весь файл целиком ещё раз».

Сохраняем и открываем

  1. Нажмите в чате кнопку копирования над блоком кода.
  2. Откройте Блокнот и вставьте код.
  3. «Файл» → «Сохранить как». Внизу окна выберите тип файла «Все файлы» и кодировку UTF-8. Имя — tracker.html.
  4. Найдите файл в папке и откройте двойным щелчком. Он откроется в браузере.

Вы видите страницу со списком привычек. Галочки можно ставить, но после обновления страницы они пропадут: сохранять данные трекер пока не умеет. Это нормально — логику добавим позже.

Если что-то пошло не так

Что видно Причина Что делать
Вместо страницы — текст кода файл сохранился как tracker.html.txt сохранить заново с типом «Все файлы»
Вместо русских букв — непонятные символы неверная кодировка сохранить в UTF-8, проверить строку <meta charset="UTF-8">
Страница пустая код скопирован не целиком скопировать ответ полностью или попросить прислать файл целиком
Правка не видна страница не обновлена сохранить файл и нажать F5 в браузере

Как вносить изменения

Хочется другой цвет или крупнее шрифт — просите в том же чате, одним сообщением про одну вещь:

Текст
Сделай фон отмеченной привычки светло-зелёным.
Пришли файл целиком.

Получили новый код — замените им старый в Блокноте полностью, сохраните и обновите страницу. Просьба «пришли файл целиком» избавляет от необходимости вставлять куски в нужное место: для новичка это частый источник поломок.

Попробуйте сами. Сделайте первую версию трекера по запросу из урока, сохраните файл и откройте его в браузере. Затем одним запросом измените одну деталь оформления — цвет, шрифт или скругление карточек — и проверьте, что изменение появилось.

Как понять, что всё получилось
  1. Файл называется tracker.html и открывается двойным щелчком в браузере.
  2. На странице заголовок «Мои привычки» и три карточки с галочками.
  3. Русские буквы отображаются нормально.
  4. После вашего запроса изменилась ровно одна деталь, остальное осталось как было.

Если изменилось что-то ещё, кроме просьбы, — это нормальное поведение нейросети. Напишите: «Верни всё как было, кроме цвета фона отмеченной привычки». В уроке 4 разберём, как не ломать то, что уже работает.

Сохраните удачную версию отдельной копией — tracker-1.html. Это ваша точка возврата, если следующий шаг что-то испортит.

Мини-тест: проверьте себя

Закрепите урок: несколько вопросов, разбор ответов — в конце.

  1. Почему для первого проекта просят всё в одном HTML-файле?

  2. Вы сохранили код, открыли файл, а браузер показывает текст кода вместо страницы. В чём вероятная причина?

  3. Вместо русских букв на странице непонятные символы. Что исправить?

  4. Вы поменяли цвет в коде, а страница в браузере не изменилась. Что сделать?