Первый мини-проект: страница-визитка за вечер

Чему вы научитесь

В этом уроке вы соберёте небольшую страницу для учебной мастерской «Тихая мастерская». Она занимается ремонтом деревянных предметов и хочет объяснить посетителю, какие задачи можно обсудить с мастером. Это вымышленный учебный пример, а не история действующего бизнеса. Мы не будем придумывать клиентов, отзывы, адрес, стаж работы или обещания результата. Для первой версии достаточно описания услуги и понятного способа узнать порядок обращения.

После выполнения задания вы сможете превратить расплывчатое «нужен красивый сайт» в одну конкретную задачу; создать файл страницы, открыть его в браузере и изменить текст; объяснить назначение заголовка, ссылки, раздела и оформления; проверить страницу на узком экране и с помощью клавиатуры; перечислить, что работает, а что ещё требует отдельной реализации.

Название занятия обозначает небольшой масштаб. Один вечер не является гарантированным сроком: время зависит от опыта, инструмента и количества правок. Если понадобится несколько подходов, это нормально. Важнее законченная маленькая работа, которую вы понимаете, чем большой проект, собранный случайными командами.

Что нужно знать заранее

Пройдите уроки об устройстве интернет-продукта, выборе инструментов и структуре промпта. Писать код по памяти пока не требуется. Вам понадобятся компьютер, текстовый редактор и браузер. ИИ-ассистент помогает разбирать ошибки и улучшать результат, но предложенный ниже пример можно выполнить без него.

Создайте папку workshop-card в удобном месте. Не помещайте её внутрь папки другой программы и не используйте для упражнения рабочие документы клиента. Отдельная папка уменьшает вероятность случайно изменить чужой файл. Если редактор предлагает доверять содержимому новой папки, сначала убедитесь, что путь ведёт именно к вашей учебной работе.

Ключевые термины

Страница-визитка — небольшая страница, которая отвечает на основные вопросы о человеке, услуге или проекте и предлагает следующее действие. Её задача не в количестве разделов, а в понятном знакомстве.

HTML — язык разметки. Он описывает, какие части есть у документа: заголовок, абзац, ссылка, список. Слово «разметка» можно понимать как подписи на плане помещения: здесь вход, здесь рабочая зона, здесь выход.

CSS — язык оформления. Он задаёт размеры, отступы, цвета и расположение частей страницы. Если HTML похож на план помещения, CSS определяет, как помещение выглядит и насколько удобно в нём двигаться.

Локальный файл — файл на вашем устройстве. Страница, открытая из такого файла, ещё не становится доступной другим людям по интернет-ссылке.

Адаптивность — способность интерфейса оставаться читаемым и удобным при разной ширине экрана. Это не простое уменьшение всего изображения: иногда элементы должны переноситься или менять порядок.

Критерий готовности — наблюдаемое условие, по которому вы решаете, выполнена ли задача. «Нравится» полезно как личная оценка, но «ссылка ведёт к разделу контакта и доступна с клавиатуры» проверяется точнее.

1. Сначала решите, что должен сделать посетитель

Представьте бумажную визитку. На ней не поместится подробная история всех проектов, зато должно быть ясно, кто вы и зачем к вам обращаться. Сайт работает похожим образом: на первом экране посетитель должен понять предложение, а не разгадывать красивую композицию.

Для учебной мастерской выберем одну задачу: объяснить, что можно обсудить ремонт деревянного предмета, и направить человека к разделу «Как обратиться». Мы не добавляем онлайн-оплату, регистрацию, личный кабинет, базу заказов или автоматический расчёт стоимости. Каждая из этих возможностей требует отдельной логики и проверки. Умение отказаться от лишнего в первой версии — полноценный навык разработки.

Запишите в обычном текстовом документе четыре предложения. Первое: кто посетитель. Второе: с какой ситуацией он приходит. Третье: что страница ему объясняет. Четвёртое: какое действие он совершает дальше. Например: «Владелец деревянного стула хочет понять, можно ли обсудить ремонт. Страница показывает направления работы и объясняет, какие сведения подготовить. После чтения он переходит к инструкции обращения».

Теперь определите содержание. Нам нужны заголовок, краткое объяснение, список из трёх направлений и инструкция обращения. Если вы не знаете реальные условия мастерской, не превращайте предположение в обещание. Вместо «вернём первоначальный вид любому предмету» напишите «возможность ремонта обсуждается после оценки состояния». Техническая честность начинается с текста, а не с программирования.

Проверка этапа простая: покажите описание другому человеку или перечитайте его без оформления. Если смысл понятен, можно переходить к странице. Если для объяснения приходится добавлять несколько устных оговорок, сначала улучшите текст. Код не исправляет неопределённость предложения автоматически.

2. Попросите ИИ сделать маленькую, проверяемую версию

ИИ-ассистент хорошо помогает, когда задача ограничена. Запрос «сделай лучший сайт» оставляет слишком много свободных решений. Ассистент может добавить вымышленные отзывы, неработающую форму или сложные библиотеки. Вы получите больше файлов, но не обязательно больше пользы.

Опишите страницу так же, как объяснили бы работу помощнику за соседним столом. Назовите результат, аудиторию, обязательные разделы и ограничения. Отдельно скажите, что неизвестные сведения нельзя выдумывать. Для первого упражнения попросите один HTML-файл со встроенным CSS, без сторонних библиотек. Это не универсальная архитектура для любых сайтов, а способ уменьшить количество движущихся частей в учебном примере.

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

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

Сохраняйте исходный запрос рядом с проектом, например в brief.txt. Через несколько дней он поможет вспомнить цель. Если вы измените требования, обновите описание. Иначе у вас будут две разные версии задачи: одна в голове, другая в переписке с ассистентом.

3. Создайте первый файл и откройте результат

Создайте в папке проекта файл index.html. Расширение .html сообщает браузеру, что перед ним HTML-документ. Проверьте, что редактор не сохранил файл как index.html.txt. На некоторых системах расширения скрыты, поэтому полезно посмотреть тип файла в свойствах или в списке редактора.

Следующий код — самостоятельная рабочая страница. Скопируйте его целиком в index.html, сохраните файл и откройте двойным щелчком. Он не отправляет данные и не подключается к внешним сервисам. Ссылка внутри страницы ведёт к инструкции обращения.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Тихая мастерская — учебный проект</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #f7fbf9;
      color: #0e2a22;
      line-height: 1.6;
    }
    main { width: min(100% - 40px, 900px); margin: 0 auto; }
    section { padding: 56px 0; }
    h1 { font-size: clamp(36px, 7vw, 72px); line-height: 1.05; }
    h2 { font-size: 30px; line-height: 1.2; }
    p { max-width: 65ch; }
    .button {
      display: inline-block;
      padding: 14px 22px;
      background: #0e2a22;
      color: white;
      border-radius: 28px;
    }
    a:focus-visible { outline: 3px solid #267b61; outline-offset: 5px; }
    .note { padding: 20px; border-radius: 20px; background: #bfebdd; }
  </style>
</head>
<body>
  <main>
    <section aria-labelledby="main-title">
      <p>Учебная страница небольшой мастерской</p>
      <h1 id="main-title">Вещи, с которыми хочется остаться.</h1>
      <p>Обсудите ремонт деревянного предмета. Возможность и объём
        работы зависят от его состояния.</p>
      <a class="button" href="#contact">Как обратиться</a>
    </section>
    <section aria-labelledby="services-title">
      <h2 id="services-title">Что можно обсудить</h2>
      <ul>
        <li>Состояние деревянной мебели.</li>
        <li>Восстановление отдельных деталей.</li>
        <li>Уход за предметом после ремонта.</li>
      </ul>
    </section>
    <section id="contact" aria-labelledby="contact-title">
      <h2 id="contact-title">Как обратиться</h2>
      <p>Подготовьте описание предмета и фотографии повреждений.
        Не передавайте документы или личные сведения без необходимости.</p>
      <p class="note">Это учебный проект. Приёма заказов на этой странице нет.</p>
    </section>
  </main>
</body>
</html>

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

Обратите внимание на адрес в браузере. Он начинается с указания локального файла, а не с адреса опубликованного сайта. Если отправить этот путь знакомому, ваш файл у него не появится. Для совместного просмотра можно передать сам файл, а для постоянной интернет-ссылки потребуется публикация, которую мы разберём отдельно.

4. Улучшайте оформление через понятные решения

Дизайн начинается с того, что читать первым и куда смотреть дальше. Большой заголовок создаёт точку входа, короткий абзац уточняет смысл, кнопка предлагает действие. Если всё одинаково крупное и яркое, посетителю придётся самостоятельно придумывать порядок чтения.

Сначала проверьте длину текста. Длинный заголовок может занимать весь экран телефона. Попробуйте убрать слова, которые не меняют смысл. Затем проверьте ширину строки. В примере ограничение 65ch удерживает абзац в удобной области: единица ch приблизительно связана с шириной символа в выбранном шрифте. Это ориентир для чтения, а не точное обещание количества букв.

Дальше посмотрите на отступы. Отступ внутри элемента называется внутренним, а расстояние снаружи — внешним. В CSS за них отвечают разные свойства. На этом этапе достаточно понимать практический смысл: текст не должен упираться в край цветного блока, а независимые разделы должны отделяться друг от друга.

Изменяйте только одну группу параметров за раз. Например, сначала размер заголовка, затем расстояния, затем цвет фона. Если одновременно заменить шрифт, ширину, высоту и расположение, будет трудно понять, какое изменение помогло, а какое сломало композицию. Сохранённая предыдущая версия файла станет простой страховкой до изучения системы контроля версий.

Не оценивайте страницу только на большом мониторе. Сузьте окно браузера. Заголовок должен переноситься естественно, кнопка — оставаться читаемой, текст — помещаться по ширине. Для более точного просмотра откройте инструменты разработчика браузера и выберите режим устройства. Названия команд отличаются между браузерами, поэтому ищите функцию изменения ширины области просмотра, а не конкретное расположение значка.

5. Проверьте поведение до того, как назвать работу готовой

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

Нажмите ссылку «Как обратиться». Страница должна перейти к соответствующему разделу. Затем обновите страницу и несколько раз нажмите клавишу Tab. Ссылка получит видимое выделение. Нажмите Enter: действие должно выполниться без мыши. Если вы изменили оформление и убрали выделение, верните его. Видимый фокус нужен людям, которые управляют страницей с клавиатуры.

Проверьте текст отдельно от внешнего вида. Есть ли утверждение, которое вы не можете подтвердить? Есть ли действие, которое на самом деле не выполняется? Название «Оставить заявку» было бы неверным для ссылки на инструкцию, поэтому в примере используется точное «Как обратиться». Подпись кнопки должна описывать её реальный результат.

Наконец, проверьте размер 390 пикселей и широкий экран. На узком экране не должно появляться горизонтальной прокрутки. Если она появилась, найдите элемент с фиксированной шириной больше доступной области. Не скрывайте всю прокрутку, чтобы замаскировать проблему: так можно обрезать часть содержимого. Исправляйте размер или перенос конкретного элемента.

Составьте короткий журнал проверки: действие, ожидаемый результат, фактический результат. Это не бюрократия, а способ не повторять одни и те же догадки. Если ошибка возникает только при определённой последовательности действий, последовательность тоже запишите. Такой журнал станет хорошим контекстом для ИИ при поиске причины.

Разбор на примере

У мастерской появилась страница, которая объясняет направление работы, содержит понятную инструкцию и честно обозначает учебный характер. Здесь нет базы заказов, автоматических сообщений и приёма денег. Это ограничение соответствует выбранной задаче, поэтому не мешает считать учебную версию законченной.

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

Если заказчик попросит «сделать дороже на вид», переведите оценку в наблюдаемые изменения. Например: сократить первый абзац, увеличить свободное пространство, согласовать один акцентный цвет, выровнять разделы по общей линии. Попросите показать конкретные примеры и объяснить, что в них нравится. Так разговор перестаёт быть угадыванием вкуса.

Готовые промпты для ИИ

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

Создай учебную страницу-визитку одним файлом index.html.
Проект: [название и смысл]. Аудитория: [кто приходит].
Главная задача: [одно действие посетителя].
Разделы: заголовок, объяснение, направления работы, инструкция обращения.
Используй HTML и встроенный CSS без библиотек и JavaScript.
Не придумывай отзывы, контакты, стаж, цены и гарантии.
Не добавляй формы отправки. Сделай читаемую мобильную версию.
Сначала перечисли решения, затем дай полный файл и шаги проверки.

Второй запрос помогает исправить конкретный дефект. Приложите текущий файл и реальное описание поведения. Не ограничивайтесь фразой «не работает».

Проверь приложенный HTML. На ширине [число] появляется [проблема].
Ожидание: [как должно выглядеть или работать].
Предложи минимальную правку, объясни причину и перечисли проверки.
Не меняй тексты, цвета и структуру разделов без необходимости.

Типичные ошибки новичков

1. Сразу добавлять все возможные функции. В результате учебная визитка превращается в недоделанный сервис. Вернитесь к одному действию посетителя и перенесите остальные пожелания в отдельный список.
2. Открывать не тот файл. Несколько копий с похожими названиями мешают понимать результат. Оставьте одну рабочую папку и проверяйте путь открытой вкладки.
3. Использовать вымышленные факты ради убедительности. Красивый текст не оправдывает ложное обещание. Уберите неподтверждённые сведения или замените их точным описанием процесса.
4. Проверять только внешний вид. Неработающая ссылка остаётся ошибкой даже на красивой странице. Пройдите все действия вручную и с клавиатуры.
5. Маскировать дефект новой декоративной деталью. Если заголовок не помещается, дополнительный фон не решит проблему. Изучите длину текста, размер и доступную ширину.

Практическое задание

Соберите свою страницу-визитку для учебной услуги: ремонта, занятий, небольшой мастерской или личного проекта. Запланируйте примерно два-три часа, включая проверку. Это ориентир для распределения работы, а не норматив темпа.

Результат задания — папка с index.html, кратким описанием задачи и журналом проверки. На странице должны быть один главный заголовок, объяснение предложения, минимум два содержательных раздела и одно работающее действие. Если контакт вымышленный, не публикуйте его: оставьте честное учебное объяснение, как в примере.

Работа готова, когда файл открывается без дополнительных установок; смысл понятен без устного рассказа; кнопка выполняет заявленное действие; ширина 390 пикселей не вызывает горизонтальную прокрутку; клавиатурный фокус виден; факты не выдуманы. Дополнительно попросите другого человека назвать главное действие страницы. Если он затрудняется, вернитесь к первому экрану и уточните текст.

Самопроверка

Краткий итог

Вы прошли полный маленький цикл: сформулировали цель, ограничили объём, создали страницу, изменили оформление и проверили поведение. Уже сейчас можно объяснить, где находится результат и какие задачи он решает. Это более надёжная основа, чем проект, который выглядит впечатляюще, но остаётся непонятным своему автору.

Дальше мы разберём планирование проекта: как превратить набор пожеланий в техническое задание и разделить работу на этапы, каждый из которых можно отдельно проверить.