Часть 2. Из второго модуля: редактор и хранение кода

Делаем README вместе с ИИ

Прочитайте до начала (2 минуты, это важно)

Сломать проект этим нельзя. README — это просто текстовый файл-описание. Он ничего не запускает и не ломает. Экспериментируйте смело.

Писать README руками не надо. Его напишет ИИ. Ваше дело — понятно попросить и потом проверить, что он не приврал. Это тот же навык «командовать ИИ», что и в первом модуле.

Всё делаем внутри редактора Cursor, который уже установили в первом уроке модуля. Ничего нового ставить не надо.

Понадобится один скриншот вашего трекера — как его сделать, расписано в шаге 4. Если ещё не готов — не страшно, дойдём.

Если на любом шаге застряли дольше 15 минут — не сидите, напишите в чат. Это обычное дело, спрашивают все.

Что такое README и зачем он вообще

Представьте табличку на двери магазина: название, часы работы, что продаётся. Человек ещё не зашёл внутрь, но уже понял, туда ли он попал.

README — это такая табличка для вашего проекта. Первое, что видит любой, кто открыл ваш репозиторий на GitHub: будущий заказчик, работодатель или вы сами через месяц, когда забудете, что тут вообще было.

Слово читается «ридми», от английского read me — «прочти меня». Так называют файл, который надо прочитать первым.

Почему на это стоит потратить 15 минут:

Представьте два одинаковых проекта. У одного — аккуратное описание с картинкой: видно, что умеет, есть скриншот. У второго — пусто, голый список файлов. Заказ уйдёт первому, даже если внутри код одинаковый. Оформленный README — это половина впечатления о вас как об исполнителе.

И самое приятное: всю эту табличку за вас напишет ИИ. Вы не сочиняете текст с нуля — вы объясняете ИИ, что за проект, а он оформляет. Ниже — как именно.

Что понадобится (проверьте перед началом)

Всё на месте? Поехали.

ШАГ 1. Создаём пустой файл — чтобы ИИ было куда писать

README.md

Файл создан и пока пустой. Наполнять его будем не мы — ИИ.

⚠️

Имя важно писать точно. Большими буквами README, потом точка, потом маленькими md. Если написать по-другому (readme, ReadMe, README.txt) — GitHub не поймёт, что это та самая «табличка», и не покажет её красиво. Не переживайте, если ошиблись: файл можно переименовать или удалить и создать заново. Сломать этим ничего нельзя.

Что такое .md? Это формат, в котором GitHub умеет делать текст красивым: заголовки крупными, списки с точками, картинки встроенными. Верстать ничего не нужно — ИИ напишет простой текст со значками # и -, а GitHub сам превратит его в аккуратную страницу. Увидите на своём примере в шаге 5.

ШАГ 2. Даём ИИ задание — и он пишет README сам

Вот главный шаг. Вы не печатаете описание — вы поручаете это ИИ.

Заполни файл README.md для моего проекта простыми словами, без сложных терминов. Проект называется «Трекер привычек». Он помогает отмечать выполненные привычки каждый день. Умеет: добавлять и удалять привычки, отмечать выполнение на сегодня, запоминать отметки после перезагрузки, подстраиваться под телефон. Сделан на HTML, CSS, JavaScript. Оформи с заголовком, списком возможностей, местом под скриншот и разделом «Автор». Не выдумывай возможности, которых я не назвал.

Всё. Табличку написал ИИ. Вам осталось её проверить — это следующий шаг.

💡

Как просить ИИ, чтобы вышло хорошо. Чем понятнее задание — тем лучше результат. Если про свой проект хочется добавить деталей (для кого он, чем особенный) — просто допишите это в задание своими словами. ИИ учтёт.

ШАГ 3. Проверяем за ИИ (это важно)

ИИ — хороший помощник, но он не знает ваш проект так, как вы. Иногда он дописывает то, чего нет. Поэтому текст надо прочитать. Пройдите его сверху вниз и задайте три вопроса:

Всё ли здесь правда? Возможности, которых у трекера нет («отправляет уведомления», хотя не отправляет), — убрать.

Понятно ли без терминов? Встретилось непонятное слово — так и напишите ИИ: «объясни проще» или «убери эту строчку».

Не осталось ли квадратных скобок? Если торчит [ваше имя] — впишите своё.

⚠️

Не принимайте текст вслепую. README должен говорить правду о проекте — иначе заказчик откроет и не найдёт обещанного. Минута на вычитку сейчас экономит неловкость потом.

ШАГ 4. Хотите что-то поправить — снова просите ИИ

Здесь тот же принцип: не лезем в текст руками, а объясняем ИИ, что поменять. Так же, как правили трекер в модуле 1.

Примеры, что можно просто написать в чат:

ИИ переделает и снова предложит вставить. Проверили — приняли. Повторяйте, пока не понравится.

Сомневаетесь между двумя вариантами формулировки — берите тот, что проще. Пустой README хуже короткого, а короткий лучше запутанного.

ШАГ 5. Добавляем скриншот трекера

Картинка в README — это та самая «половина впечатления». Без неё описание выглядит голым. Место под картинку ИИ уже подготовил в шаге 2, осталось положить сам файл.

Сначала делаем скриншот работающего трекера:

Сохраните картинку и переименуйте её ровно в:

screenshot.png

Теперь кладём картинку в проект:

![Скриншот трекера](screenshot.png)

Имя в скобках (screenshot.png) должно точно совпадать с именем файла, который вы положили. Совпало — картинка покажется. Не совпало — на месте картинки будет серый прямоугольник (см. блок ниже). Если что-то не так — снова можно попросить ИИ: «поправь путь к картинке, файл называется screenshot.png».

⚠️

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

Что НЕ является поломкой (не пугайтесь)

Пока возитесь с README и картинкой, вы можете увидеть вот такое — это нормально, чинить не надо:

На месте картинки серый прямоугольник или значок «сломанное фото»

Что это на самом деле

Имя файла в тексте и имя самого файла не совпали. Проверьте, что оба — screenshot.png

README долго не обновляется на GitHub

Что это на самом деле

Страница подгружается. Обновите её через минуту (F5)

Текст выглядит «как код», значки # и - видны

Что это на самом деле

Вы смотрите файл в режиме редактирования. На GitHub он покажется красиво — увидите в шаге 6

Картинка «тяжёлая», грузится не сразу

Что это на самом деле

Нормально для больших скринов. Подождите

ШАГ 6. Отправляем на GitHub и любуемся результатом

README живёт у вас на компьютере. Чтобы он появился «на табличке» вашего репозитория — его надо отправить на GitHub. Это тот самый цикл «сохранил → написал сообщение → отправил», который отрабатывали в начале урока.

И вот тут — момент, ради которого всё: под списком файлов GitHub сам показывает ваш README красиво. Заголовки стали крупными, список — с точками, скриншот встроился в страницу. ИИ написал простой текст со значками — GitHub превратил его в аккуратную табличку. Ни строить, ни верстать не пришлось.

Вот это увидит ваш будущий заказчик.

Что делать, если не получилось

Общее правило: почти любую заминку можно отдать тому же ИИ — покажите ему, что видите, и попросите помочь.

README не показывается красиво на GitHub, виден как обычный текст

Что сделать

Проверьте имя файла: должно быть README.md — большими буквами, с точкой и md. Переименуйте, если не так

Картинки нет, серый прямоугольник

Что сделать

Имя файла и имя в тексте ![...](screenshot.png) должны совпадать буква в букву. И файл должен лежать рядом с README

ИИ написал возможности, которых нет

Что сделать

Напишите ему: «убери строчку про …». README должен говорить правду

Изменений нет на GitHub, хотя сохранил

Что сделать

Сохранить (Ctrl/Cmd + S) — это ещё не отправка. Нужно закоммитить и отправить (шаг 6)

Всё запуталось, хочу начать заново

Что сделать

Удалите README.md и начните с шага 1. Начать заново — не поражение, это нормальный рабочий процесс

Не сидите над проблемой дольше 15 минут — напишите в чат. Скидывайте скриншот того, что видите, так помогут быстрее.

✅ Готово. Что вы теперь умеете

Эта табличка — то, что впервые видит заказчик или работодатель. Теперь она у вас есть — и написали её вы вместе с ИИ, почти не печатая руками.