Как сделать сайт в Visual Studio: VS Code или полная IDE

Q: Можно ли попросить ИИ написать страницу?

Да, но дайте ему узкое задание: один index.html, без серверной части и без внешних библиотек. Откройте результат сами, проверьте ссылки, адаптивность и то, что агент не добавил формы сбора данных без необходимости.

Для простой страницы установите Visual Studio Code, создайте папку проекта и файл index.html, вставьте HTML и откройте его в браузере. Название часто путают с полной Visual Studio: она нужна, если вы осознанно строите приложение на C# и ASP.NET Core. Ни одна из программ сама по себе не размещает готовый сайт в интернете. Ниже вы получите работающую локальную страницу и проверите, какой путь нужен дальше.

Какую программу выбрать

Visual Studio Code, или VS Code, это редактор для файлов сайта. Официальная документация VS Code по HTML подтверждает встроенную подсветку, подсказки и предпросмотр HTML. Для страницы с текстом, карточкой, кнопкой и обычным CSS этого достаточно. Полная Visual Studio создаёт проекты с дополнительной структурой; учебник Microsoft по ASP.NET Core требует установленный компонент ASP.NET и веб-разработки.

Нужна страница, портфолио или небольшой лендинг без входа и базы данных: начните с VS Code и обычного HTML.
Уже выбран C# и серверное приложение ASP.NET Core: используйте полную Visual Studio и её шаблон веб-приложения.
Не знаете, что выбрать: сначала сделайте одностраничный прототип в VS Code. Если появятся серверные данные и сложные роли, решите вопрос с архитектурой отдельно.

Правило выбора: редактор определяется задачей сайта, а не похожим названием двух программ.

Это отличие важно и при работе с ИИ: фраза «сделай сайт в Visual Studio» может привести агента к тяжёлому проекту ASP.NET вместо одного HTML-файла. Сначала назовите формат результата. Если вы хотите разобраться в самих файлах страницы, поможет руководство по сайту на HTML.

Теория понятна, дальше нужен ваш сайт, а не пример из статьи. На бесплатном вебинаре страницу собирают с нуля и сразу публикуют в интернете.

Собрать свой сайт

Подготовьте папку и первую страницу в VS Code

Загрузите VS Code с официальной страницы и откройте папку через File > Open Folder. Для примера назовите папку my-site. В панели файлов создайте index.html. Расширение .html существенно: файл index.html.txt браузер не распознает как HTML-страницу. Сохраните файл, прежде чем смотреть предпросмотр.

Откройте пустую папку my-site в VS Code и создайте файл index.html.
Вставьте минимальный пример ниже целиком и сохраните файл.
Щёлкните файл правой кнопкой и выберите Open in Integrated Browser. Такой предпросмотр описан в справке VS Code. Можно также открыть сохранённый файл в обычном браузере.
Замените заголовок, текст и адрес ссылки на свои. Сохраните изменения и обновите обычную вкладку браузера, если она не обновилась сама.

Пример намеренно не требует сборщика, сервера или внешних библиотек. Он показывает структуру документа, адаптивную ширину и ссылку. Подставьте собственный адрес вместо example.com перед публикацией.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Мой первый сайт</title>
  <style>
    body { font: 18px/1.5 system-ui, sans-serif; margin: 0; color: #222; }
    main { max-width: 680px; margin: 0 auto; padding: 32px 20px; }
    a { color: #a43d1a; }
  </style>
</head>
<body>
  <main>
    <h1>Добро пожаловать</h1>
    <p>Здесь коротко объясняется, чем полезен сайт.</p>
    <a href="https://example.com">Связаться со мной</a>
  </main>
</body>
</html>

По теме: Как сделать надпись на сайте: текстовый блок, HTML и CSS

Как понять, что страница работает

В браузере должны появиться один крупный заголовок, абзац и ссылка. Уменьшите ширину окна: текст обязан оставаться в пределах экрана без горизонтальной прокрутки. Затем проверьте страницу на телефоне после публикации по настоящему адресу сайта: локальный путь file:///... на вашем компьютере с телефона не откроется. MDN описывает, что создание локальных файлов и публикация в сети являются разными этапами.

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

Один собранный сайт учит больше десяти инструкций, потому что ошибки видны сразу. На бесплатном эфире по вайбкодингу показывают, как описать идею словами и получить работающую страницу, а участникам достаётся гайд.

Собрать сайт с ИИ

Когда нужна полная Visual Studio

Если проект действительно должен работать на ASP.NET Core, устанавливают полную Visual Studio с компонентом ASP.NET и веб-разработки, выбирают шаблон ASP.NET Core Web App и запускают проект в отладке. Это отдельный путь, его показывает Microsoft. Он подходит для команды, уже использующей C# и серверную инфраструктуру. Для первой статичной страницы дополнительные проекты, пакеты и настройки только увеличивают число мест, где можно ошибиться.

Не переносите HTML-файл из примера в произвольную папку проекта ASP.NET и не ожидайте, что Visual Studio сама назначит ему адрес. У серверного приложения маршруты и публикация устроены по своим правилам. Если цель всё ещё просто показать текст и кнопку, завершите работу в VS Code; если нужен вход, данные и серверная логика, сначала опишите требования и выберите стек. Об общей связке с агентом отдельно рассказано в статье про Codex в VS Code.

По теме: Как создать сайт без своего сервера: хостинг и домен

Диагностика по симптому

Вместо страницы виден исходный код: проверьте расширение файла и открывайте его именно как HTML, а не как текстовый документ.
Изменения не появились: сохраните index.html, проверьте, что открыт файл из той же папки, и обновите вкладку.
Стили не действуют: найдите опечатку в имени файла или селекторе; в нашем одном файле CSS лежит внутри тега style, поэтому внешнего файла нет.
На компьютере видно, а на телефоне нет: локальный файл не опубликован. Разместите папку на хостинге, затем проверяйте публичную ссылку.
VS Code предлагает доверять чужой папке: не запускайте неизвестные команды и расширения. В справке Microsoft рекомендуется проверять источник папки перед выдачей ей доверия.

Если проблема осталась, вернитесь к исходному примеру в новой пустой папке. Если он открывается, причина в добавленных файлах или изменениях. Если не открывается и он, проверьте, что браузер действительно получает сохранённый index.html. Такой контрольный пример быстрее отделяет ошибку содержимого от ошибки редактора.

Частые вопросы

Нужен ли сервер для одной страницы?

Для локальной проверки этого примера обычно достаточно открыть index.html в браузере. Чтобы другие люди увидели страницу по ссылке, её нужно разместить в интернете. Сложные модули и запросы к API могут потребовать локальный сервер уже во время разработки.

Visual Studio Code и Visual Studio бесплатны?

VS Code доступен для установки с официального сайта. У полной Visual Studio условия зависят от редакции и типа использования; проверяйте их на странице Microsoft перед выбором, особенно для команды или компании.

Можно ли попросить ИИ написать страницу?

Да, но дайте ему узкое задание: один index.html, без серверной части и без внешних библиотек. Откройте результат сами, проверьте ссылки, адаптивность и то, что агент не добавил формы сбора данных без необходимости.

Можно ли сделать магазин таким же файлом?

Карточки товаров можно показать в HTML, но безопасные заказы, остатки, оплата и личные данные требуют отдельной архитектуры. Не считайте статичный макет работающим магазином.

На воркшопе по сайтам с ИИ вы сможете собрать страницу под свою задачу и проверить её до публикации.

Записаться на воркшоп