Что вы узнаете
- Как описать одну задачу пользователя вместо «сделай сайт»
- Как собирать страницу по частям: структура, стили, поведение
- Как проверить страницу на телефоне и с клавиатуры
- Что нельзя класть в код страницы
Ключевые понятия
- HTML
- Структура страницы: заголовки, текст, кнопки, формы.
- CSS
- Оформление: цвета, шрифты, отступы, адаптация под экран.
- JavaScript
- Поведение: что происходит при нажатии, отправка форм, анимация.
- Адаптивность
- Страница одинаково удобна на телефоне, планшете и компьютере.
01Опишите один сценарий
Выберите пользователя и одно действие: найти материал, оставить заявку, открыть каталог. Запишите, что человек видит до действия и что получает после. Это и есть задача для первой версии.
Пример. «Стример заходит на страницу, за 10 секунд понимает, что донаты приходят сразу на его кошелёк, и нажимает „Создать ссылку“».
02Собирайте по частям
Попросите AI сначала только структуру HTML: заголовок, описание, три преимущества и одну кнопку. Затем стили, затем поведение. Проверяйте каждую часть в браузере, прежде чем переходить к следующей: так ошибку легко найти.
Совет. Просите короткие комментарии в коде: так его проще поддерживать.
03Проверьте на телефоне и с клавиатуры
Откройте страницу на узком экране: ничего не должно выезжать за край, а кнопки должны нажиматься пальцем. Пройдите страницу клавишей Tab: каждая ссылка и кнопка должна получать заметный фокус.
- Ширина 360 пикселей без горизонтальной прокрутки
- Основной шрифт не меньше 16 пикселей
- У полей формы есть подписи
- Все ссылки работают
04Безопасность
Всё, что лежит в коде страницы, видно любому посетителю. Ключи API, пароли и токены в код страницы не кладут никогда: их хранят на сервере.
- Не вставляйте ключи и пароли в HTML и JavaScript
- Не подключайте скрипты с неизвестных сайтов
05Подготовьте к публикации
Добавьте понятный заголовок страницы (title) и описание (description): их показывают поисковики. Проверьте, что у картинок есть описания (alt), а страница быстро открывается на мобильном интернете.
Перед публикацией
- Страница решает один понятный сценарий
- На телефоне нет горизонтальной прокрутки
- Все кнопки и ссылки работают и доступны с клавиатуры
- В коде нет ключей, паролей и токенов
- Есть title, description и описания картинок
Частые ошибки и как правильно
Просить AI сразу «сделать весь сайт»
Начните с одного сценария и собирайте по частям.
Проверять только на компьютере
Большинство посетителей приходит с телефона.
Ключ API прямо в коде страницы
Секреты хранятся только на сервере.
Публиковать без title и description
Без них страницу хуже находят в поиске.
Попробуйте сами
Соберите страницу своего проекта: заголовок, описание, три возможности и одно работающее действие.
- Опишите сценарий пользователя одним предложением
- Получите от AI структуру HTML и проверьте её в браузере
- Добавьте стили и проверьте на ширине 360 пикселей
- Пройдите страницу клавишей Tab и запишите, что нашли
Результат. Рабочая страница и список проверок, которые она прошла.
Проверьте себя
Сначала ответьте мысленно, потом откройте ответ.
1Почему страницу лучше собирать по частям?Ответ
Каждую часть проверяют сразу, и ошибку легко найти. Большой код целиком трудно отладить.
2Можно ли хранить ключ API в JavaScript страницы?Ответ
Нет. Код страницы видит любой посетитель, ключи хранят на сервере.
3Как быстро проверить доступность страницы?Ответ
Пройти её клавишей Tab: все кнопки и ссылки должны получать видимый фокус.
Коротко
Один сценарий, сборка по частям с проверкой в браузере, телефон и клавиатура, никаких секретов в коде, понятные title и description. Так первая страница получается рабочей, а не просто красивой.