Запускаем: с вашего экрана — в мир
Запускаем: с вашего экрана — в мир
Горькая правда: страница, которая существует только на вашем компьютере, не запущена. Никто не может её увидеть, никто не может ею пользоваться, и никто не скажет вам, что она классная. Запуск означает одно — URL, который может открыть любой человек в мире. Это граница между «я учусь программировать» и «я что-то создал».
Хорошая новость? Получить URL теперь проще простого. Бесплатные сервисы делают это за секунды:
- Netlify Drop — откройте сайт, перетащите свой HTML-файл на страницу и получите живой URL. Это весь процесс.
- Vercel — подключите папку или репозиторий GitHub, нажмите deploy — готово. (На нём работает и сама эта академия.)
А если застрянете? Вы же вайб-кодер — спросите ИИ. «Проведи меня по шагам через деплой этого HTML-файла на Netlify» работает прекрасно. Раньше деплой был самой страшной частью программирования. Теперь это просто разговор.
Но прежде чем тащить файл куда-либо, важно понять разницу между страницей, которая работает, и страницей, готовой к запуску. У настоящих сайтов есть профессиональные штрихи: нормальный заголовок во вкладке браузера, описание, которое могут показать поисковики и превью ссылок, социальные теги, чтобы ваша ссылка хорошо выглядела, когда ею делятся в WhatsApp или X, и футер, который говорит: «это сделал живой человек — вот, поделитесь». В этом финальном уроке вы возьмёте свою доску идей из модуля 4 и добавите ей именно эти штрихи.
Что дальше на вашем пути
Это последний урок «Основ вайб-кодинга» — но лишь первый шаг пути «С нуля до героя». Дальше вас ждёт Claude Code в браузере (ИИ, который строит целые проекты из разговора), затем вы установите настоящий инструмент на свою машину и в итоге создадите собственного ИИ-агента. Теперь вы знаете, как делается веб. Пора сделать его гораздо больше.
Запускаем.
Инструкции
Дайте странице настоящий <title> — замените «Untitled» названием, достойным вкладки браузера. Это первое, что показывают поисковики и закладки.
Подсказка: Найдите `<title>Untitled</title>` в <head> и замените на что-то вроде `<title>Idea Board — Never Lose a Spark</title>`. Хотя бы несколько символов — сделайте его своим.
Добавьте тег <meta name="description"> в <head> — одно предложение, которое объясняет поисковикам (и любопытным людям), что делает ваше приложение.
Добавьте теги Open Graph — <meta property="og:title"> и <meta property="og:description">. Они определяют, как ваша ссылка выглядит в WhatsApp, X или LinkedIn.
Добавьте <footer> внизу карточки с подписью «Built with vibes» и ссылкой <a id="share-link"> — каждый выпущенный продукт подписывает свою работу.
Ваш код
Опишите, что хотите создать на этом шаге, и я напишу код — затем нажмите «Применить», чтобы вставить его в редактор. Текущий шаг: Дайте странице настоящий <title> — замените «Untitled» названием, достойным вкладки браузера. Это первое, что показывают поисковики и закладки.