Теория закончилась. Сделаем настоящую вещь: одностраничный сайт-визитку, который можно показать. Задача выбрана нарочно маленькой — важна не сложность, а полный круг: замысел, план, шаги, проверки, откат, сохранение.
Открой терминал и делай вместе со мной.
Шаг 0. Место для проекта
mkdir ~/my-first-site
cd ~/my-first-site
claude
Папка пустая — это нормально. Всё содержимое появится дальше.
Шаг 1. Договориться о правилах
Первое, что стоит сделать в любом новом проекте:
Это новый пустой проект. Я не программист, объясняй простыми словами.
Создай CLAUDE.md с такими правилами: сайт на чистом HTML и CSS без сборщиков,
комментарии на русском, никаких внешних библиотек, git push не делать без моей просьбы.
Теперь эти правила действуют всегда — повторять их не придётся.
Шаг 2. Машина времени
Заведи git в этой папке и сделай первый коммит.
Теперь у нас есть точка возврата. Дальше можно смело ломать.
Шаг 3. План, а не сразу код
Не создавай пока файлы. Опиши план: я хочу одностраничную визитку —
имя, чем занимаюсь, три моих услуги, кнопка «Написать мне».
Какие файлы будут, в каком порядке делаем, как я проверю каждый шаг?
Прочитай план. Если что-то не так понято — скажи сейчас, это дёшево. Когда устраивает: «делай первый шаг».
Шаг 4. По одному шагу с проверкой
После каждого шага проси показать результат:
Открой страницу в браузере и покажи, что получилось.
Смотришь. Нравится — сохраняемся:
Сделай коммит с понятной подписью.
Не нравится — говоришь прямо, что именно не так. Не «некрасиво», а «заголовок слишком мелкий, а кнопка теряется внизу».
Шаг 5. Правки в цикле
Дальше — обычная работа. Пара примеров формулировок, которые работают:
Кнопка «Написать мне» должна открывать почтовую программу с моим адресом.
Больше ничего не трогай.
На телефоне текст вылезает за края экрана. Проверь на ширине 375 пикселей и почини.
Верни как было — предыдущий вариант был лучше.
Заметь: во всех трёх есть место, наблюдаемое поведение и граница. Это та же формула из третьего урока.
Шаг 6. Проверить чужими глазами
Последняя проверка, которую все пропускают:
Посмотри на эту страницу как человек, который видит её впервые.
Что непонятно, что мешает, чего не хватает?
Он найдёт то, что у тебя уже замылилось.
Что ты только что сделал
Полный круг разработки: правила проекта, точка возврата, план до кода, шаги с проверками, коммиты, откат, финальный взгляд со стороны.
Именно так делают и большие вещи. Разница только в количестве шагов.
Если застрял
Три вещи, которые почти всегда помогают:
- Откатись к последнему рабочему коммиту. Начать с рабочего состояния проще, чем чинить сломанное.
- Очисти разговор командой
/clearи объясни задачу заново, другими словами. - Попроси объяснить, что сейчас происходит, простыми словами. Часто становится понятно, где вы разошлись.
В следующем, последнем уроке трека — куда двигаться дальше.