Урок 1

После этого урока вы:

• Поймёте суть вайбкодинга и его преимущества.
• Зарегистрируете аккаунт на GitHub и настроите GitHub Pages.
• Установите VS Code и расширение Live Server.
• Напишете свой первый промпт в нейросети DeepSeek.
• Создадите и опубликуете первую веб-страницу в интернете.
• Научитесь основам работы с Git (commit, push) через VS Code.

Вайбкодинг (vibe coding) — это подход, при котором вы не пишете код вручную, а описываете словами то, что хотите получить, а нейросеть генерирует готовый код.

Аналогия: вы заказываете пиццу — говорите, какую хотите, и вам приносят готовую. Здесь то же самое: вы говорите нейросети: «Сделай страницу с моим именем», и она выдаёт готовый HTML.

Почему это работает?

• Нейросети обучены на миллионах примеров кода.
• Они понимают естественный язык (русский, английский).
• Вы можете уточнять и дорабатывать результат в диалоге.

Где применяется? Создание лендингов, прототипов, автоматизация задач, быстрый запуск сайтов для школ и бизнеса.

Мы будем использовать только бесплатные сервисы:

• GitHub — хранение кода и публикация сайтов (GitHub Pages).
• VS Code — редактор кода с расширениями.
• Live Server — расширение для мгновенного предпросмотра.
• DeepSeek — бесплатная нейросеть для генерации кода.
• Встроенный Git в VS Code — для управления версиями.

Всё это доступно бесплатно и работает в браузере.

1. Перейдите на github.com и нажмите Sign up.
2. Введите Email, Password и Username (он будет частью адреса вашего сайта, например, ваш_логин.github.io).
3. Пройдите капчу и нажмите Create account.
4. Подтвердите email, перейдя по ссылке из письма.

Важно: запомните логин и пароль — они понадобятся на каждом занятии.

1. Скачайте VS Code с code.visualstudio.com и установите (обязательно отметьте «Добавить в PATH»).
2. Запустите VS Code, откройте вкладку Extensions (Ctrl+Shift+X).
3. Найдите расширение Live Server от Ritwick Dey и установите его.
4. Создайте на рабочем столе папку my-first-site и откройте её в VS Code (File → Open Folder).
5. Внутри папки создайте файл index.html (правой кнопкой → New File).

Пока не пишем код — просто проверяем, что всё работает.

1. Перейдите на chat.deepseek.com и зарегистрируйтесь.
2. Вставьте в чат такой промпт (можно скопировать):

DeepSeek предложит структуру, затем вы сможете попросить её сгенерировать готовый HTML-код. Скопируйте полученный код.

1. В VS Code откройте файл index.html, вставьте скопированный код.
2. Сохраните файл (Ctrl+S).
3. Нажмите Go Live в правом нижнем углу VS Code — откроется браузер с вашей страницей.
4. Поменяйте текст, цвета, сохраните — страница обновится автоматически.

1. В VS Code авторизуйтесь в GitHub (шестерёнка → Sign in).
2. Инициализируйте Git: Ctrl+Shift+P → «Git: Initialize Repository».
3. В панели Source Control добавьте файлы (знак +), напишите коммит «Первый коммит» и нажмите галочку.
4. Нажмите Publish to GitHub (выберите Public).
5. На GitHub перейдите в репозиторий → Settings → Pages, выберите ветку main и папку /(root), сохраните.
6. Через 1–2 минуты ваш сайт будет доступен по ссылке https://ваш_логин.github.io/my-first-site/.

Поздравляю! Ваш первый сайт опубликован.

1. Измените страницу под себя (имя, хобби, цвета).
2. Спросите у DeepSeek, как добавить блок «Мои контакты» и вставьте его.
3. Закоммитьте и запушьте изменения через VS Code.
4. Проверьте, что изменения отобразились на сайте (через 2–3 минуты).
5. Пришлите ссылку на ваш сайт в чат группы.

Что мы узнали?

• Что такое вайбкодинг и как он работает.
• Как регистрироваться на GitHub и пользоваться VS Code.
• Как общаться с нейросетью на примере DeepSeek.
• Как создать веб-страницу и опубликовать её в интернете бесплатно.
• Как использовать встроенный Git в VS Code.

Главный итог: вы создали свой первый сайт, не написав ни строчки кода вручную — только словами описали, что нужно. Это и есть вайбкодинг!

Дополнительные материалы: prompts.md, checklists.md