# Мини-проект: собираем простую страницу с Claude

Курс: Claude Code и терминал: с 0 — https://zero2claude.ru/learn/code-terminal
Канонический URL: https://zero2claude.ru/learn/code-terminal/9-9-mini-proekt-stranica

Собираем страницу-визитку с Claude: описываем словами — он создаёт index.html и style.css. Структура, вид и файлы вместе.

Вот и финиш уровня 9. Ты узнал, из каких файлов состоит сайт, что такое сервер и чем статика отличается от динамики. Пора собрать всё в один маленький, но настоящий результат — **свою страницу-визитку**. И сделаем мы это вместе с Claude.

## Опиши страницу словами

Тебе не нужно писать HTML и CSS вручную. Главный навык здесь — **понятно объяснить, что ты хочешь**. Claude знает, как устроены файлы сайта, а ты теперь знаешь, из чего они состоят, — этого достаточно.

Попробуй такой запрос:

```
Собери простую страницу-визитку: заголовок с моим именем,
пара строк о себе и одна кнопка «Связаться».
Сделай аккуратный вид: приятный цвет фона и крупный заголовок.
Дай файлы index.html и style.css.
```

В ответ Claude соберёт два знакомых тебе файла:

- **index.html** — структура: заголовок с именем, абзац о себе, кнопка. Это то, *что* написано на странице.
- **style.css** — внешний вид: цвет фона, размер заголовка, отступы. Это то, *как* страница выглядит.

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

## Как всё связано

Давай ещё раз соберём картину целиком, теперь она у тебя в голове должна щёлкнуть:

1. **HTML** (`index.html`) — структура и текст. Скелет страницы.
2. **CSS** (`style.css`) — оформление. Делает скелет красивым.
3. **Файлы в папке** — всё это просто лежит рядом, как любые другие файлы, с которыми ты работал с первого уровня.

Браузер открывает `index.html`, видит подключённый `style.css` и показывает тебе готовую страницу. Никакой магии — только знакомые кирпичики.

Хочешь что-то поменять? Просто скажи Claude: «сделай кнопку зелёной» или «добавь ещё один абзац». Тебе не нужно помнить точные названия свойств CSS — достаточно описать результат словами.

## Поздравляю

Ты прошёл целый уровень про то, как устроены сайты, и собрал свою первую страницу. Это уже не «терминал ради терминала» — это настоящий маленький проект, который можно показать.

Что дальше? Тебя ждёт **JavaScript** — тот самый `script.js`, который оживляет страницу. Не пугайся слова «программирование»: ты начнёшь с самого простого — кнопка, которая что-то делает по нажатию. И, как и здесь, ты сможешь опираться на Claude, описывая словами, что хочешь получить.

## Попробуй

Задания в терминале нет — этот урок завершает уровень. Попробуй сам описать Claude страницу-визитку и посмотреть, что он соберёт. А потом закрепи пройденное на вопросах ниже.