Новоселье и дорога дальше
Доводим проект, чиним баг, добавляем фичу сами — и смотрим, куда расти дальше
Цели урока
К концу этого урока вы:
- Пройдёте карту всего курса от первого участка до живого адреса — и увидите, как части складываются в целое.
- Примените стратегии Урока 9 к реальному типовому багу — без паники, по шагам.
- Добавите одну фичу к задеплоенному проекту, собирая вместе задачу (Урок 2), каркас (Урок 4) и базу (Урок 6).
- Пройдёте чек-лист «проект готов» перед тем, как звать гостей.
- Поймёте, куда расти дальше — и как не бросить следующий проект на полпути.
Видишь? Запомни это место — к нему ещё вернёмся.
Новоселье и дорога дальше
Ваша страница уже живёт по ссылке. Не на вашем компьютере — по-настоящему, в интернете, доступная с любого телефона. Это произошло в Уроке 8: вы нажали деплой и получили адрес. Теперь ситуация другая. Вы больше не строитель, который осторожно ходит по незаконченным перекрытиям. Вы — хозяин дома. Такой хозяин, который спокойно переставляет мебель, меняет лампочку, а если что-то сломалось — не звонит в панике, а открывает инструментальный ящик и разбирается.
Этот урок не добавляет новых концепций. Он собирает всё, что вы уже умеете, и направляет в одно место: починить один реальный баг, добавить одну реальную фичу и понять, что навык — теперь ваш. Не «я прошёл курс». А «я знаю, как это делается».
Что вы возьмёте из этого урока
- Пройдёте карту всего курса от первого участка до живого адреса — и увидите, как части складываются в целое.
- Примените стратегии Урока 9 к реальному типовому багу — без паники, по шагам.
- Добавите одну фичу к задеплоенному проекту, собирая вместе задачу (Урок 2), каркас (Урок 4) и базу (Урок 6).
- Пройдёте чек-лист «проект готов» перед тем, как звать гостей.
- Поймёте, куда расти дальше — и как не бросить следующий проект на полпути.
Часть 1. Путь от пустого участка до дома с адресом
Остановитесь на секунду и посмотрите назад. В Уроке 1 у вас был пустой участок — только идея и Claude Code в терминале. Теперь у вас есть живой проект по ссылке. Между этими двумя точками — девять шагов, и каждый из них вы прошли сами.
Вот она — полная карта того, что вы построили.
Посмотрите на схему и найдите то, что вы помните. Большинство людей в конце курса думают, что запомнили меньше, чем на самом деле — потому что знание стало привычным. Вы уже не думаете «как сделать git-коммит». Вы просто делаете.
Часть 2. Чиним типовой баг — шаг за шагом
Возьмём реальную ситуацию. Вы зашли на свою страницу, и что-то сломалось: кнопка отправки формы ничего не делает, или раздел с контактами съехал на мобильном, или деплой прошёл — а новые изменения на сайте не появились. Что делать?
В Уроке 9 вы разобрали четыре стратегии работы с ошибками: откат к последней сохранёнке, переформулировать задачу, разбить на шаги, проверить самому. Давайте применим их по порядку — не теорию, а конкретный план.
Шаг 1. Не трогайте ничего — сначала диагностика
Откройте консоль браузера (F12 → вкладка «Console»). Там будут сообщения об ошибках красным. Скопируйте текст ошибки дословно — не «что-то красное», а весь текст. Это ваш главный инструмент.
Шаг 2. Покажите ошибку прорабу точно
Откройте Claude Code и опишите так, как вы научились в Уроке 2: ЧТО случилось, ГДЕ (какая страница, какое действие), ЧТО вы ожидали, ЧТО видите вместо этого. Вставьте текст ошибки из консоли. Чем точнее — тем быстрее прораб найдёт место.
Шаг 3. Если первая попытка не помогла — разбейте
Не «почини форму» — а «сначала только проверь, что кнопка отправки вообще привязана к функции». Один шаг, один вопрос. Помните стратегию из Урока 9: маленький вопрос даёт маленький ответ, который можно проверить.
Шаг 4. Деплой не обновился? Это не баг кода
Если на сайте старая версия — сначала проверьте: вы сделали git commit? Потом — git push? Деплой на Vercel запускается автоматически после push [2]. Без коммита изменения не сохранились. Без push — хостинг не знает, что что-то изменилось.
— Откуда ты знаешь? Там 347 строк.
— Именно поэтому.
Когда в проекте что-то не работает, виновата почти всегда та строка, которую вы изменили последней. Начните с неё, а не с поиска по всему коду.
Часть 3. Добавляем одну фичу — сами, с нуля
Теперь — не починить, а добавить что-то новое. Это важнее, чем кажется. Чинить — значит знать, где искать. Добавлять — значит уметь начать с чистого листа.
Вспомните трёхчастную конструкцию из Урока 2: хорошая задача прорабу состоит из ЧТО (что именно сделать), ГДЕ (на какой странице или в каком файле), КАК (в каком виде) и ГОТОВО (как проверить, что получилось). Без четвёртого пункта вы никогда не поймёте, закончена работа или нет.
Возьмём конкретный пример: добавить раздел «Мои проекты» к визитке из Урока 4. Вот как это выглядит в виде нормальной задачи для Claude Code:
Задача, которая работает:
«Добавь на главную страницу (файл index.html или page.tsx) новый раздел после контактов. Раздел называется "Мои проекты". В нём — три карточки: название проекта, одна строка описания, ссылка. Данные пока хардкодом прямо в разметку. Раздел должен выглядеть как три колонки на десктопе и одна колонка на мобильном. Готово — когда раздел виден на живой странице после деплоя.»
Теперь — если фича нужна с базой. Например, форма «Оставить отзыв» с сохранением в базу-кладовку из Урока 6. Тут та же схема, только добавляется уточнение про базу:
Задача с базой:
«Добавь форму "Оставить отзыв" в нижнюю часть страницы. Форма — два поля: имя (короткое) и текст отзыва (многострочное). При отправке — данные сохраняются в базу в новую таблицу reviews: поля id, name, body, created_at. Пользователю показывается сообщение "Спасибо!". Готово — когда можно отправить форму, увидеть "Спасибо", зайти в базу и найти там запись.»
Важный момент: после того как Claude Code напишет изменения, сделайте git-коммит с понятным сообщением — «добавил раздел "Мои проекты"», — как вы делали начиная с Урока 5. Потом git push. Деплой обновится автоматически — если хостинг подключён к репозиторию [2].
Часть 4. Чек-лист «проект готов»
Прежде чем давать ссылку знакомым, пройдитесь по этому списку. Не потому что это обязательно, а потому что неловко, когда гость замечает сломанную кнопку раньше вас.
| Что проверить | Как проверить | Статус |
|---|---|---|
| Страница открывается по ссылке | Откройте ссылку в режиме инкогнито — без ваших куков и авторизации | ☐ |
| Страница работает на телефоне | Откройте на смартфоне или в DevTools (F12 → иконка телефона). Всё читается? | ☐ |
| Форма отправляется | Заполните форму и отправьте — убедитесь, что данные сохранились | ☐ |
| Все ссылки рабочие | Кликните каждую ссылку — никаких 404 | ☐ |
| Фото и картинки загружаются | Открывается ли ваше фото? Нет ли сломанных <img> с крестиком? | ☐ |
| В консоли нет красных ошибок | F12 → Console. Красные строки — это сигнал, что что-то не работает тихо | ☐ |
| Git-история чистая | git status — нет не сохранённых изменений. Всё закоммичено и запушено |
☐ |
Семь пунктов — это десять минут работы. Хозяин дома делает обход перед тем, как приглашать гостей. Вы теперь — тот самый хозяин.
Часть 5. Куда расти: три пути и как не бросить
Вы построили первый проект. Следующий вопрос неизбежный: что дальше? Вот три пути — не «выбирайте один», а просто три направления, которые реально открыты прямо сейчас.
Улучшить этот же проект
Добавить раздел «Портфолио», настроить свой домен (не vercel.app, а ваш адрес), добавить аналитику, чтобы видеть, сколько людей заходило. Этот путь — самый короткий старт: инфраструктура уже есть, вы знаете каждый угол. Хорошо подходит, если страница сама по себе вам полезна.
Следующий пет-проект: что-то полезное для себя
Трекер привычек, список фильмов с заметками, маленький инструмент для вашей работы. Главный критерий выбора — это должно решать вашу собственную задачу, не воображаемую. Тогда у вас есть личная причина довести до конца. Все навыки из курса переносятся: задача по схеме Урока 2, файлы и git как в Уроке 5, деплой как в Уроке 8.
Углубиться в технологию
Если вам понравилось — можно пойти глубже. Next.js Learn [3] — бесплатный интерактивный курс, делаете реальное приложение, учите основы фреймворка по-настоящему. Pro Git [4] — книга про git на русском и английском, первые две главы достаточно для уверенной работы. Документация Claude Code [1] — там есть про агентские возможности, которые вы трогали в Уроке 9, только подробнее.
Как не бросить следующий проект
Большинство пет-проектов бросают не потому что «стало скучно». Бросают, когда заходит один большой неответствующий день: и модель ошиблась, и мотивация упала, и непонятно, с чего продолжать. Вот что работает против этого.
«Завтра сяду и доделаю»
«Завтра» — дорогая валюта. Если у вас нет конкретного следующего шага, сформулированного прямо сейчас, проект, скорее всего, не вернётся.
Маленький следующий шаг
Перед тем как закрыть ноутбук — запишите одну конкретную задачу на следующий раз. Не «доделать раздел», а «добавить карточку с первым проектом». Именно так работают git-сохранёнки: маленький шаг, зафиксированный.
Это то самое, что вы делали весь курс с git-коммитами из Урока 5. Каждый коммит — это «вот где я сейчас, вот что сделано». Следующий проект — та же логика. Фиксируйте маленькие шаги, не откладывайте до «готово».
Часть 6. Главный сдвиг: что именно изменилось
Можно подумать, что вы научились «делать сайты». Это неточная формулировка. Сайт — это конкретный артефакт. Навык — другой.
Разница важная. Конкретный сайт на Vercel с конкретной базой — это результат одного набора решений. Другой проект потребует других решений: другой хостинг, другая структура страниц, другая база или вообще никакой базы. Но процесс — тот же. Вы знаете, как сформулировать задачу (Урок 2), как сохранить прогресс (Урок 5), как задеплоить (Урок 8), как не впасть в панику когда что-то сломалось (Урок 9).
Это и есть перенос. Конкретные инструменты поменяются — через год появятся новые. Процесс останется.
Было: «я не умею программировать»
Стена между желанием и результатом. Непонятный код, страх сломать, ощущение, что надо «сначала выучиться».
Стало: «я умею ставить задачу и доводить до ссылки»
Конкретный опыт: от пустого участка до живого проекта. Вы знаете, как ошибаться и исправлять, как сохранять прогресс, как переспрашивать прораба, как деплоить.
Резюме: десять уроков в одном абзаце
Роли ясны
Вы — прораб. Claude Code — строитель. Ответственность за результат лежит на прорабе — то есть на вас. Это не недостаток, это сила.
Задача — это инструмент
ЧТО / ГДЕ / КАК / ГОТОВО — четыре вопроса, которые превращают «хочу что-нибудь» в инструкцию. Без хорошей задачи лучший прораб-ИИ не поможет.
Проект живёт в git
Каждое изменение — коммит. Каждый коммит — точка возврата. Это не формальность, это страховая сетка, которую вы натянули в Уроке 5.
База — не страшно
Кладовка с полками. Форма с двумя полями. Таблица с тремя колонками. Это не «программирование» — это описание структуры словами, которое вы делали в Уроке 6.
Ошибки — протокол, не кризис
Откат. Переформулировать. Разбить. Проверить самому. Четыре шага из Урока 9, которые превращают панику в диагностику.
Что дальше — уже без нас
Курс закончился. Дорога — нет. Вот несколько идей, с чего начать следующий проект:
Для себя: трекер привычек, дневник с заметками, личная база рецептов, маленький инструмент для вашей работы.
Для кого-то: страница для родителей или друга, простая витрина для небольшого дела, форма сбора заявок для кружка или клуба.
Для роста: Next.js Learn (nextjs.org/learn [3]) — следующий уровень с реальным проектом. Документация Claude Code (docs.claude.com [1]) — когда захотите автоматизировать больше.
Главное: не ждите идеального проекта. Первый шаг всегда неловкий. Второй — чуть увереннее. Вы это уже знаете — потому что прошли один раз от участка до дома.
Источники / Sources
- docs Anthropic. «Claude Code — Overview» — что такое Claude Code: агент в терминале, читает и правит файлы, запускает команды; агентские возможности и воркфлоу.
- docs Vercel. «Getting started with Vercel» — деплой через git push, автоматическое обновление после push в подключённый репозиторий, бесплатный план Hobby.
- docs Vercel / Next.js team. «Learn Next.js» — бесплатный интерактивный курс: Next.js App Router, реальное приложение, постепенное освоение фреймворка.
- books Chacon, S., Straub, B. «Pro Git», 2nd ed. Apress. — официальная книга по git: первые две главы достаточны для уверенной работы; доступна бесплатно онлайн.
- docs Anthropic. «Claude Code — Set up / Advanced setup» — команды установки, проверка окружения, требования к аккаунту.