Продолжение видео Кумисай
5 столпов вайб-кодинга → боевые инструменты
Сегодня — следующий уровень
Берём всё это и переносим с песочницы в реальный мир
«Ты бы кинул свою
CodePen-ссылку
работодателю?»
— Вот и ответ на вопрос «зачем этот урок»
❌ codepen.io/you/pen/abc123
Выглядит как хобби
✓ yourname.netlify.app
Выглядит как продакшен
Песочница: учишься
— Нет истории изменений
— Нет настоящего URL
— Нет командной работы
— Сломал → нет отката
Продакшен: запускаешь
+ Полная история коммитов
+ Живой URL на интернете
+ Портфолио для работодателя
+ Сломал → git revert
Этот урок = этот мост 🌉
Из 5 столпов видео — 3 работают в CodePen на 30%
СТОЛП 2
Контрольные точки
СТОЛП 3
Дебаггинг
git revert СТОЛП 4
Контекст для AI
Ты уже знаешь концепцию — теперь три новые суперспособности
Бесконечная история
Каждый коммит — это точка в истории. Можешь вернуться к любой.
Параллельные вселенные
Branches — пробуешь новое, не ломая основной код.
git checkout -b experiment Подписанные сейвы
Commits с осмысленными сообщениями = дневник разработчика.
git commit -m "add dark mode" git commit -m "..." Подписанный сейв
Сохраняет момент в истории
git push Загрузить в GitHub
И автоматически задеплоить
git revert HEAD Откатить назад
Машина времени в действии
Публичное портфолио
Каждый репо — работа в твоём резюме
График активности
Зелёные клетки = доказательство работы
Интеграции
Netlify, Vercel, CI/CD — все смотрят сюда
Видно как мыслишь
История коммитов = твой образ мысли
30 секунд от push до обновления сайта
VS Code
пишешь код
git push 1 команда
GitHub
хранилище
Netlify
автодеплой
Интернет
живой сайт
CI
Continuous
Integration
Код автоматически проверяется при каждом push
CD
Continuous
Deployment
Проверен → автоматически в прод
ПРОСТЫМИ СЛОВАМИ:
Пишешь код → он автоматически в мире 🌍
От CodePen до живого URL — смотри вместе со мной
Ctrl+A → Ctrl+C — копируем весь код
Ctrl + C
Вся работа из видео Кумисай — в буфере обмена
ЧТО КОПИРУЕМ:
HTML + CSS + JavaScript
из трёх панелей CodePen
REPOSITORY NAME
ОБЯЗАТЕЛЬНО:
Название репо = URL сайта
habit-tracker → habit-tracker.netlify.app
git clone
Скачать репо на компьютер
cd habit-tracker
Зайти в папку проекта
code .
Открыть в VS Code — точка важна!
ШАГ 1
git add . Добавить все файлы в staging
ШАГ 2
git commit -m "import from codepen" Сохранить с описанием
ШАГ 3
git push Загрузить на GitHub
ВЫБЕРИТЕ ПРОВАЙДЕР:
РЕПОЗИТОРИЙ:
30 секунд
От нажатия Deploy до живого URL
ТВОЙ URL:
habit-tracker.netlify.app
🎉 Первый живой сайт готов!
Можно делиться со всеми
Ломаем тег
<div> без закрывающего тега Делаем git push
git add . && git push Сайт упал
Netlify задеплоил сломанный код
git revert HEAD
git revert HEAD --no-edit && git push Сайт снова жив!
Машина времени спасла нас
git revert
Машина времени из видео Кумисай — в боевом режиме
Три уровня. Каждый сложнее.
Уровень 1
Founder Card
ДОСТУПЕН ВСЕМ
Уровень 2
Трекер + Контекст
РЕКОМЕНДУЕТСЯ
Уровень 3
Hardcore Mode
ЧЕЛЛЕНДЖ
Минимум — первый уровень. Максимум — все три.
Уровень 1 — Минимум
Founder Card
ЧЕКЛИСТ:
my-founder-cardindex.html с 4 секциямиКРИТЕРИЙ ГОТОВНОСТИ:
✓ Ссылка открывается с телефона
💡 Подсказка
В секцию Projects можно добавить CodePen-трекер из видео Кумисай!
НАГРАДА:
+150 XP за живую ссылку 🎉
HERO
Имя + фраза
Одно предложение — кто ты и что делаешь
ABOUT
О себе
3-4 предложения: кто ты, чем занимаешься
PROJECTS
Три проекта
Можно добавить трекер из видео Кумисай!
CONTACT
Связь
Минимум 2 способа: email + соцсеть
Уровень 2
Трекер + новый Контекст
ЧЕКЛИСТ:
habit-trackerНОВЫЙ ПРОМПТ ДЛЯ GEMINI:
↗ Отсылка к видео
Раньше ты давал код копипастом → теперь ссылкой. Это новый уровень столпа «Контекст»
РАНЬШЕ (видео)
❌ Неудобно, часто режется контекст
ТЕПЕРЬ
✓ Чисто, удобно, AI видит всё
Уровень 3 — Hardcore
Branches, Revert, Netlify Forms
ЧЕКЛИСТ:
experiment + смена палитрыgit revert → починить🌿 Ветка experiment:
🎯 Цель уровня 3:
Отправить URL 10 друзьям и получить 3 реальных отзыва
Один атрибут — и у тебя рабочая форма без бэкенда
✓ Что получаешь:
Все сообщения приходят в Netlify Dashboard — без единой строки бэкенда
Один атрибут =
Email-уведомления + Spam protection + Dashboard — всё бесплатно
Favicon
Иконка сайта в табе браузера
Open Graph
Красивый превью при расшаривании
404 страница
Кастомная ошибка = профессионал
Custom subdomain
yourname.netlify.app
Финальная цель уровня 3
Отправить URL 10 друзьям → получить 3 реальных отзыва
| ❌ До (CodePen) | ✓ После (GitHub + Netlify) |
|---|---|
| codepen.io/link (для себя) | yourname.netlify.app (для всех) |
| Одна версия | Вся история коммитов |
| Кнопка Save | git commit + история |
| Сломал — нет возврата | git revert HEAD — всегда |
| Копипаст кода в AI | Ссылка на файл → новый уровень |
| Нет портфолио | GitHub профиль = твоё лицо |
README с тремя вопросами
Кто? Что? Как? — из видео Кумисай
Вторая итерация трекера
Добавь фичу через Gemini + ссылку
Минимум 5 осмысленных коммитов
Не "fix", а "feat: add habit counter"
Скриншот Deploys в Netlify
Доказательство живого сайта
Бонус: Gemini + ссылка на репо
Дай AI ссылку и попроси 2 улучшения
Дедлайн
До следующего урока
📤 Сдача:
Живая ссылка Netlify + ссылка на GitHub репо в Discord
+500 XP за полную сдачу 🚀
Красота твоего сайта — голосом
СЕГОДНЯ ТЫ СТАЛ:
✓Вайб-кодером с реальным URL
✓Git-пользователем
✓Имеешь GitHub-профиль
НА УРОКЕ 2 СТАНЕШЬ:
→Дизайнером через голосовой UI
→Мастером Google Stitch
→Сайт будет красивым 🎨
ДО ВСТРЕЧИ 👋
Сдавай домашку в Discord