Что вам понадобится?
- VS Code — крутой и бесплатный редактор кода (просто запомните: это как Word, только для сайтов).
- DeepSeek (или другая нейросеть) — ваш личный программист, который сделает всю скучную работу.
- Netlify — волшебный сервис, который опубликует сайт за 5 секунд.
Всё это бесплатно, всё работает на любом компьютере. Ну что, готовы? 👇
Шаг 1. Ставим VS Code — нашу главную программу
VS Code (Visual Studio Code) — это место, где вы будете смотреть и сохранять код, который напишет нейросеть. Он ничего не сломает и не попросит денег.
- Загуглите «скачать VS Code» или откройте сайт code.visualstudio.com.
- Скачайте версию для своей системы (Windows, Mac или Linux).
- Установите как обычную программу: просто жмите «Далее» и соглашайтесь со всем.
- Когда установка закончится, откройте его. Пока просто пусть побудет открытым — скоро будем работать.
Шаг 2. Просим DeepSeek написать код
Вот тут начинается магия. Зачем учить теги и атрибуты, если нейросеть знает их лучше нас?
- Зайдите на сайт DeepSeek (или откройте приложение, если пользуетесь с телефона).
- Скопируйте и отправьте такой запрос (промт):
«Напиши код красивой одностраничной визитки для сайта. Используй HTML, CSS и немного JavaScript. Сайт должен быть про [вставьте свою тему — например, "путешествия", "котики" или "моё фото"]. Сделай современный дизайн, чтобы хорошо смотрелся и на компьютере, и на телефоне. Весь код помести в один файл index.html со встроенными стилями». - Нейросеть выдаст готовый код. Нажмите «Копировать» (обычно есть иконка 📋).
Теперь открывайте VS Code. Создайте новый файл: меню «Файл» → «Новый файл» (или нажмите Ctrl+N). Вставьте скопированный код (Ctrl+V).
Сохраните файл: «Файл» → «Сохранить как...» (или Ctrl+Shift+S). Назовите его index.html и создайте для него отдельную папку, например, «Мой сайт». Важно: расширение .html обязательно!
Шаг 3. Смотрим, что получилось (самый простой способ)
Не нужно никаких хитрых программ, чтобы увидеть результат.
- Откройте папку «Мой сайт» в проводнике Windows (или Finder на Mac).
- Найдите там файл index.html.
- Дважды кликните по нему мышкой — файл откроется в вашем браузере!
Всё работает? Отлично! Видите свой будущий сайт? Если что-то не нравится, можете вернуться в VS Code, поменять текст или картинки (их тоже просим у нейросети), сохранить (Ctrl+S) и обновить страницу в браузере (F5).
Шаг 4. Как изменить название сайта (самое важное!)
Скорее всего, сейчас ваш сайт называется как-то скучно — например, «Моя визитка» или «Сайт про путешествия». Давайте сделаем название поинтереснее!
Что можно менять:
- Заголовок на вкладке браузера — это то, что написано наверху вкладки (рядом с иконкой).
- Крупный заголовок на самой странице — обычно он самый большой и сразу бросается в глаза.
Как это сделать:
- Вернитесь в VS Code и откройте файл index.html (если он уже закрыт, просто перетащите его в окно редактора).
- Найдите в коде строчку, которая начинается с <title> и заканчивается </title>. Обычно она находится в первой части кода (в разделе <head>).
Например: <title>Моя классная визитка</title>
Всё, что между этими тегами, — и есть название вкладки. Просто сотрите старый текст и напишите свой, например: <title>Крутой сайт про котиков</title>. - Теперь найдите большой заголовок на странице — обычно он внутри тегов <h1> и </h1>. Это самый главный текст на сайте.
Например: <h1>Привет, я путешественник</h1>
Поменяйте его на что-то своё, например: <h1>Добро пожаловать в мир котиков!</h1> - Сохраните изменения (Ctrl+S).
- Обновите страницу в браузере (F5) — новые названия появятся!
Важно: Название может быть на любом языке — хоть на русском, хоть на английском. Главное, чтобы оно нравилось вам и подходило к теме сайта.
Шаг 5. Публикуем в интернет через Netlify
То, что вы видите сейчас на своём компьютере, никто кроме вас не увидит. Чтобы показать сайт миру, нужен хостинг. Netlify — идеальный выбор для новичков: там всё делается перетаскиванием папки.
- Зарегистрируйтесь на сайте netlify.app (можно войти через аккаунт Google или почту).
- После входа вы попадёте на главную панель (Dashboard). Найдите область, где написано «Drag and drop your site folder here» — «Перетащите папку с сайтом сюда».
- Идите в проводник, возьмите папку «Мой сайт» (ту самую, где лежит index.html) и просто перетащите её мышкой в это окно браузера на Netlify.
- Начнётся загрузка. Через несколько секунд появится сообщение, что сайт опубликован, и ссылка на него — что-то вроде random-words-12345.netlify.app.
- Перейдите по этой ссылке — ваш сайт уже в интернете! Вы можете отправить ссылку друзьям, добавить в Instagram или Telegram. Ваш собственный сайт готов!
Как обновить сайт после изменений?
Если вы потом снова поменяете название или текст в VS Code и захотите, чтобы эти изменения появились в интернете:
- Сохраните файл в VS Code.
- Снова перетащите всю папку «Мой сайт» на Netlify (прямо поверх старой версии). Через пару секунд сайт обновится, и ссылка останется той же.
Что дальше?
Поздравляем! Вы только что создали свой первый сайт и научились менять его название. 🎉 Это намного проще, чем кажется, правда?
Теперь вы можете:
- Менять текст и картинки в VS Code.
- Просить нейросеть добавить новые блоки («сделай блок с контактами» или «добавь галерею»).
- Перезаливать папку на Netlify заново — сайт будет обновляться.
Самое главное — вы поняли принцип. Дальше можно создавать сайты для своих проектов, друзей или даже на заказ. Всё в ваших руках!
Пробуйте, экспериментируйте, и у вас обязательно получится. Если возникнут вопросы — пишите в комментарии, разберёмся вместе 👇
Оставляйте свои ссылки на сайты в комментариях!