Создание сайта с нуля: как сделать и запустить свой сайт

Тип сайта определяет не мода, а действие, которого вы ждёте от посетителя: написать вам, оставить заявку, купить. От этого действия зависят объём работы, способ создания и бюджет.

Личная страница, портфолио и сайт-визитка

Самый простой сайт — одна страница. Личная страница рассказывает о человеке, портфолио показывает работы, сайт-визитка даёт контакты и короткий рассказ о деле. Лендинг устроен так же, но подчинён одной цели: человек читает экран за экраном и приходит к кнопке.

Такому сайту хватает статической страницы — набора файлов, которые сервер отдаёт как есть. Её можно собрать в конструкторе, попросить у нейросети или написать самому. Именно такую страницу вы соберёте в этом руководстве.

Сайт компании, каталог и интернет-магазин

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

Каталог добавляет карточки товаров, фильтры и поиск. Интернет-магазин — ещё корзину, оплату, доставку и учёт заказов. За этим стоят сервер и база данных (о них — в главе 11), и одной статической страницей такой сайт не заменить.

С чего начать создание сайта

С трёх ответов: для кого сайт, что человек должен на нём сделать и чем вы подтвердите свои слова. Запишите это одной фразой: «Сайт для владельцев кофеен, чтобы они оставили заявку на ремонт кофемашины». Пока фраза не складывается, рисовать рано.

Затем соберите содержание: тексты, фотографии, цены, отзывы. Содержание определяет размеры и порядок блоков, а не наоборот. Сайт, нарисованный под выдуманный текст, придётся переделывать, когда появится настоящий.

План разработки сайта и техническое задание

План любого сайта — одни и те же семь шагов:

1. Задача. Кому адресован сайт и какое действие нужно.
2. Содержание. Тексты, изображения, цены, доказательства.
3. Структура. Какие будут страницы и что на каждой.
4. Дизайн. Шрифты, цвета, порядок внимания, вид на телефоне.
5. Сборка. Конструктор, CMS, нейросеть или код.
6. Проверка. Ссылки, формы, скорость, разные экраны.
7. Публикация. Хостинг, домен, HTTPS, поисковые системы.

Техническое задание — документ, где это записано так, чтобы вы и исполнитель понимали одно и то же. Оно полезно, даже если сайт вы делаете сами. Для небольшого сайта хватает одной страницы:

• Цель: заявки на ремонт кофемашин в Казани.
• Страницы: главная, услуги и цены, контакты.
• Должно работать: кнопка звонка, форма заявки с письмом на почту.
• Как проверим: заявка с телефона доходит за минуту.

Подробный разбор с примерами — в статье «Техническое задание на сайт».

Кто участвует в разработке сайта

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

Как эти же этапы выглядят в работе с подрядчиком, показано на странице «Этапы разработки сайта от ТЗ до запуска».

Где создать сайт и как выбрать платформу

Способов четыре, и они отличаются тем, кто отвечает за сайт после запуска — сервис или вы.

Выбрать помогают четыре вопроса:

• Как часто вы будете менять содержание и кто будет это делать?
• Нужны ли оплата, личный кабинет, расчёты — то, чего нет в готовых блоках?
• Что останется у вас, если сервис подорожает или закроется?
• Сколько вы готовы платить каждый месяц, а не только на старте?

Программы и инструменты для создания сайта

Отдельная программа на компьютере сегодня почти не нужна: конструкторы и панели CMS работают в браузере. Понадобятся:

• Браузер — в нём же проверяют результат. В любом современном браузере есть инструменты разработчика (в Windows — клавиша F12): они показывают код страницы и её вид на экране телефона.
• Редактор кода, если пишете сами. Подойдёт любой, вплоть до «Блокнота».
• Графический редактор для макета и картинок.
• Нейросеть-помощник для текстов, идей и кода.

Как создать сайт без программирования

Выберите конструктор или CMS с готовой темой: страницы собираются из блоков, а текст и картинки меняются прямо в редакторе. Нейросеть сделает черновик по описанию. Код не нужен, пока сайту хватает готовых блоков. Он понадобится, когда появится задача, для которой блока нет: расчёт стоимости по вашим правилам, обмен с учётной системой, нестандартная анимация.

Конструктор — это редактор, шаблоны и хостинг в одном сервисе. Вы выбираете шаблон, меняете тексты и картинки, нажимаете «Опубликовать» — сайт в интернете.

Бесплатные конструкторы сайтов: что входит и за что платят

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

Условия на 9 октября 2026 года по страницам сервисов: Tilda, Craftum, Рег.ру, Flexbe, Яндекс Бизнес.

Wix, который советуют старые инструкции, с 12 сентября 2024 года закрыл доступ пользователям из России.

Создание сайта на Тильде: основные шаги

1. Зарегистрируйтесь и создайте сайт в личном кабинете.
2. Добавьте страницу: выберите шаблон или начните с пустой.
3. Соберите страницу из блоков библиотеки: обложка, текст, преимущества, форма, контакты.
4. Замените тексты и изображения шаблона своими.
5. В настройках страницы укажите заголовок, описание и адрес — их увидят в поиске и при пересылке ссылки.
6. Опубликуйте страницу и откройте её с телефона.
7. Подключите свой домен в настройках сайта. На бесплатном тарифе это недоступно: нужен Personal.

Как сравнить конструкторы на одной задаче

Не сравнивайте списки возможностей — соберите в двух-трёх сервисах одну и ту же страницу. За час станет понятно, где удобнее редактор. Затем проверьте пять пунктов:

• есть ли нужные блоки: форма, оплата, запись, каталог;
• как страница выглядит на телефоне и можно ли править этот вид;
• сколько стоит тариф со своим доменом за год;
• куда приходят заявки и есть ли ограничение на их число;
• можно ли выгрузить сайт и что именно попадёт в выгрузку.

Что такое CMS и чем она отличается от конструктора

CMS — система управления содержимым: программа, в которой вы добавляете страницы, статьи и товары через панель, а она сама собирает из них сайт. От конструктора её отличает место жительства. Конструктор — чужой сервис с подпиской. CMS вы ставите на свой хостинг: файлы и база данных лежат у вас, и сайт можно перенести к другому хостеру.

Плата за эту свободу — уход. Систему, тему и расширения нужно обновлять, делать резервные копии и следить за доступами. Необновлённые система и расширения делают сайт уязвимым для взлома.

Как создать сайт на WordPress

WordPress — самая распространённая CMS: по данным W3Techs на 9 октября 2026 года на ней работают 40,1% всех сайтов в мире. Сама система бесплатна. Платить придётся за хостинг и домен, а по желанию — за платные темы и расширения.

1. Купите хостинг и домен.
2. Установите WordPress. У большинства хостеров это одна кнопка в панели управления.
3. Выберите тему — она задаёт внешний вид.
4. Создайте страницы и соберите из них меню.
5. Поставьте расширения (плагины) под задачи: формы, резервные копии, настройки для поиска.
6. Удалите всё лишнее: каждое расширение замедляет сайт.
7. Включите обновления и проверьте, что копии действительно создаются.

Когда нужна 1С-Битрикс или другая CMS

«1С-Битрикс» выбирают, когда сайт должен обмениваться товарами, ценами и заказами с «1С» и компании важна поддержка от вендора; это платная система с лицензией. Для блога или сайта услуг она избыточна. Есть и другой путь — headless CMS: панель управления отдельно, сайт отдельно. Редактор меняет тексты в панели, а страницы остаются быстрыми, потому что собраны заранее. Так мы делаем сайты в спецайти.

Создание сайта онлайн без регистрации

Редактор ниже работает прямо на этой странице: без аккаунта, почты и оплаты. Всё, что вы меняете, сразу видно в предпросмотре и хранится в вашем браузере. Мы не получаем ни текст, ни файл.

Как сделать простую работающую страницу

У работающей страницы шесть обязательных частей:

• Заголовок — одной фразой: кто вы или что предлагаете.
• Описание — два-три предложения о пользе для посетителя.
• Изображение — оно задаёт характер.
• Разделы — о себе, работы или услуги, контакты.
• Меню — ссылки, которые ведут к разделам.
• Способ связи — без него страница никуда не ведёт.

В редакторе это уже собрано. Поменяйте заголовок и описание, выберите палитру, переставьте разделы в главе 04 — и скачайте файл. В нём один HTML-документ со стилями внутри: он открывается без интернета и готов к размещению на хостинге.

Можно ли создать сайт на телефоне

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

Как составить структуру сайта

Структура — это список страниц и связи между ними. Выпишите вопросы, с которыми к вам приходят: «сколько стоит», «как вы работаете», «где вы находитесь», «есть ли примеры». Каждый большой вопрос — страница или раздел. Правило одно: одна страница отвечает на один вопрос. Страница «обо всём» не отвечает ни на что и плохо ищется.

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

Как сделать ссылки и навигацию

Ссылка — это текст или кнопка с адресом. Внутренняя ведёт на другую страницу вашего сайта, внешняя — на чужой сайт, якорная — к разделу той же страницы. Якорь работает так: у раздела есть имя, например id="contact", а у ссылки — адрес #contact.

В меню оставьте только главное и назовите пункты словами посетителя: «Цены», а не «Тарифная политика». Текст ссылки должен говорить, куда она ведёт: «Посмотреть работы» понятнее, чем «Подробнее».

Что написать на первой странице

Первый экран отвечает на четыре вопроса, пока человек не ушёл:

• Куда я попал?
• Что здесь можно получить?
• Почему это стоит внимания?
• Что делать дальше?

Пишите предметно: «Ремонт кофемашин в Казани за один день» вместо «Добро пожаловать на наш сайт». Важное держите текстом, а не внутри картинки: текст читают поисковые системы и программы для незрячих.

Как выбрать шрифты, цвета и изображения

Дизайн управляет вниманием: что человек заметит первым, вторым и третьим. Поэтому начинают не с украшений, а с порядка.

• Шрифты. Один для заголовков и один для текста — этого достаточно. Проверьте, что в шрифте есть кириллица.
• Цвета. Фон, текст и один акцент для кнопок и ссылок. Чем меньше акцентов, тем заметнее главный.
• Изображения. Свои фотографии убеждают лучше стоковых. Перед загрузкой уменьшите картинку до размера, в котором она показана: тяжёлые изображения — частая причина медленных страниц.

Как сделать адаптивный сайт

Адаптивный сайт перестраивается под ширину экрана: три колонки становятся одной, меню сворачивается, кнопки растягиваются. В конструкторах это включено в шаблоны, но проверить всё равно нужно. В своём коде для этого служат гибкие ширины вместо жёстких и медиазапросы — правила CSS, которые включаются на узких экранах.

Проверяйте на настоящем содержании. Длинное слово в заголовке, таблица, номер телефона в одну строку — именно они ломают вёрстку на телефоне.

Как проверить читаемость и понятность действий

• Контраст. Серый текст на светло-сером фоне не читается на улице. Стандарт доступности WCAG требует для обычного текста контраст не меньше 4,5:1, для крупного — 3:1.
• Размер. Ориентир для основного текста — от 16 пикселей; строку держите не шире 70–75 знаков.
• Кнопки. Достаточно крупные, чтобы попасть пальцем, и с глаголом: «Записаться», «Получить расчёт».
• Проверка на человеке. Дайте страницу знакомому и попросите найти цену и оставить заявку. Где он запнётся, там и правьте.

HTML задаёт структуру, CSS — оформление

Любая страница в интернете — это текстовый файл с разметкой. HTML размечает смысл: вот заголовок, вот абзац, вот ссылка. CSS описывает вид: цвет, размер, расположение. Браузер читает оба и рисует страницу. Вот она целиком:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Моя первая страница</title>
    <style>
      h1 { color: #1559e6; font-size: 48px; }
    </style>
  </head>
  <body>
    <h1>Привет, интернет.</h1>
    <p>Это моя первая страница.</p>
    <a href="#contact">Связаться</a>
  </body>
</html>

Сохраните этот текст в файл index.html, откройте его в браузере — и сайт готов. Теги h1, p и a — заголовок, абзац и ссылка. Правило в блоке style красит заголовок и задаёт его размер.

Для чего нужен JavaScript

JavaScript отвечает за поведение: открыть меню, проверить поле формы, пересчитать сумму в корзине, подгрузить товары без перезагрузки. Простой странице он не нужен совсем. Чем его меньше, тем быстрее сайт открывается на телефоне.

Языки и программы для разработки сайта

В браузере работают три языка: HTML, CSS и JavaScript. На сервере — любой из серверных: PHP, Python, JavaScript, Go, Java, C#. Он принимает заявки, работает с базой данных и собирает страницы. Данные хранят в базах, запросы к ним пишут на SQL.

Из программ нужны редактор кода и браузер. Позже пригодится Git — система, которая хранит историю изменений и позволяет вернуться к любой версии.

Как создать сайт с помощью нейросети

Нейросети помогают тремя способами. Первый — ИИ-конструктор: вы описываете сайт, он собирает страницу в своём редакторе и размещает её у себя. Второй — помощник в чате: по описанию он пишет HTML и CSS, которые вы сохраняете в файл. Третий — ИИ внутри обычного конструктора или CMS: он пишет тексты и предлагает блоки.

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

Тарифы на 9 октября 2026 года по страницам сервисов: Craftum AI, Lovable, Bolt, v0, Cursor. Работают ли зарубежные сервисы и их оплата из России, проверьте до начала работы.

Как составить промпт для создания сайта

Промпт — это техническое задание в миниатюре. Чем меньше в нём угадывать, тем ближе результат. Хороший промпт называет:

• кто вы и для кого сайт;
• цель страницы и главное действие;
• разделы по порядку и что в каждом;
• настоящие тексты, цены и контакты — иначе их придумают;
• требования: вид на телефоне, один файл, без внешних библиотек;
• формат ответа и просьбу перечислить, что не сделано.

Сделай одностраничный сайт для фотографа Анны из Казани.
Цель — заявки на семейные съёмки.
Разделы: обложка с именем и кнопкой «Записаться», три серии работ,
цены (текст ниже), контакты.
Тексты и цены не придумывай: используй только те, что я даю.
Один HTML-файл со стилями внутри, без внешних библиотек.
На телефоне — одна колонка, без горизонтальной прокрутки.
В конце перечисли, что на странице не работает.

Что проверить в сайте, который сделал ИИ

• Факты. Нейросеть уверенно выдумывает цены, адреса, отзывы и «10 лет на рынке». Прочитайте каждую строку.
• Кнопки и формы. Нажмите всё. Форма часто только выглядит рабочей и никуда ничего не отправляет.
• Телефон. Откройте страницу на настоящем телефоне.
• Картинки. Уточните, откуда они и можно ли их использовать.
• Выгрузка. Узнайте, можно ли забрать код и перенести сайт.
• Заголовок и описание страницы для поиска — их часто забывают.

Статический и динамический сайт: в чём разница

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

Динамический сайт собирает страницу в момент запроса: сервер смотрит, кто пришёл, берёт данные из базы и отвечает именно ему. Так работают корзина, личный кабинет, поиск по каталогу. Сегодня эти подходы совмещают: страницы готовят заранее, а «живые» части — корзину или форму — обслуживает сервер.

Куда отправляется заявка с сайта

Сама по себе форма ничего не отправляет: это поля и кнопка. Чтобы заявка дошла, нужен обработчик — программа на сервере, которая принимает данные, проверяет их и пересылает дальше: на почту, в мессенджер или в CRM. В конструкторах обработчик встроен, в своём коде его пишут отдельно или подключают сервис приёма форм.

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

Что нужно для регистрации и личного кабинета

Регистрация кажется простой, пока не выпишешь всё, что за ней стоит:

• база данных с пользователями;
• пароли, которые хранятся в зашифрованном виде, а не текстом;
• вход, выход и восстановление пароля по почте или телефону;
• права: кто что видит и может менять;
• защита от подбора паролей и чужих запросов.

Это уже не страница, а программа. Её пишут и проверяют отдельно, и цена ошибки здесь — чужие данные.

Что можно получить без оплаты

Бесплатно можно сделать сам сайт: собрать страницу в конструкторе на бесплатном тарифе, написать её кодом или попросить у нейросети. Страницу из этого руководства вы тоже скачиваете бесплатно. Платными обычно оказываются три вещи вокруг сайта: свой адрес, место в интернете без чужой подписи и работающие заявки.

Бесплатный домен, хостинг и поддомен

Домен вида vashe-imya.ru стоит денег: его регистрируют на год и продлевают. Бесплатным бывает поддомен — адрес внутри чужого домена, например vashe-imya.servis.ru. Его дают конструкторы и сервисы бесплатного размещения. Работает он так же, но запоминается хуже и останется у сервиса, если вы уйдёте.

Бесплатный хостинг существует для статических сайтов — таких, как ваша страница. Его ограничения — объём и скорость, а домен подключается ваш собственный.

Условия на 9 октября 2026 года: Tilda, Яндекс Бизнес, GitHub Pages, Netlify.

Домен иногда дарят: Tilda и Timeweb дают его при оплате тарифа на год. Подарок привязан к оплате: перестанете платить за год вперёд — продлевать домен будете сами.

Можно ли создать сайт бесплатно навсегда

Да, если вам хватает поддомена и статической страницы. Личная страница, портфолио или учебный проект могут годами жить бесплатно. Сайту бизнеса бесплатного тарифа обычно не хватает: клиенту нужен нормальный адрес, вам — заявки без ограничений, а подпись чужого сервиса внизу страницы доверия не добавляет.

Из чего складывается стоимость сайта

У любого сайта три статьи расходов:

• Работа — ваше время или оплата исполнителю. Самая большая и самая незаметная часть: тексты, фотографии и правки отнимают больше времени, чем сборка.
• Разовые покупки — шаблон, шрифты, фотографии, платные расширения.
• Регулярные платежи — домен раз в год, хостинг или тариф конструктора каждый месяц.

Вот одна и та же страница в четырёх вариантах — расходы первого года:

Расчёт по ценам на 9 октября 2026 года: Рег.ру, Tilda, Beget.

Заказная разработка стоит по-разному. По обзору площадки Workspace (март 2026 года) лендинг в России обходится от 5 000 до 150 000 ₽, корпоративный сайт — от 150 000 до 800 000 ₽, интернет-магазин — от 400 000 до 1,5 млн ₽ и выше. Разброс объясняется составом работ: шаблон или свой дизайн, готовые тексты или их пишет студия, нужны ли оплата и обмен с учётной системой. В спецайти лендинг стоит от 50 000 ₽, сайт компании — от 150 000 ₽, интернет-магазин — от 300 000 ₽.

Расходы после запуска

Сайт не заканчивается публикацией. Каждый год нужно продлевать домен и хостинг, обновлять систему и расширения, менять цены и тексты, чинить то, что сломалось. Если сайт приводит клиентов, к этому добавляются реклама и продвижение в поиске — это отдельный бюджет. Закладывайте содержание в бюджет сразу; подробный расчёт — в статье «Сколько стоит сделать сайт».

От чего зависят сроки разработки

Сборка редко бывает самым долгим этапом. Сроки растягивают три вещи: неготовое содержание, долгие согласования и функции, которых нет в готовом виде, — оплата, кабинет, обмен с учётной системой. Когда тексты и фотографии собраны заранее, страница делается за дни.

Как выбрать доменное имя

• Короткое и произносимое. Имя должно диктоваться по телефону с первого раза.
• Без дефисов и цифр, если без них можно обойтись.
• Зона по аудитории. Для России привычны .ru и .рф; международная .com — если работаете не только здесь.
• Не чужое. Имя, похожее на известный бренд, могут отобрать.

Как зарегистрировать домен

1. Выберите регистратора — компанию, которая оформляет домены.
2. Проверьте, свободно ли имя.
3. Укажите данные владельца. Домен принадлежит тому, на кого он оформлен: оформляйте на себя или свою компанию, а не на подрядчика.
4. Оплатите регистрацию — обычно на год.
5. Включите автопродление и привяжите действующую почту.

Домен, оформленный на постороннего человека, — частая причина потерянных сайтов. Как проверить, чей он на самом деле, написано в статье «Чей сайт на самом деле: домен, хостинг и доступы».

Смотрите на цену продления, а не первого года: она как минимум вдвое выше.

Цены на 9 октября 2026 года: Beget, Timeweb, Рег.ру (цена продления — по сообщению компании о тарифах с 1 апреля 2026 года), Руцентр.

Как связаны домен, DNS и HTTPS

Домен — имя. Сервер, где лежит сайт, имеет числовой адрес. DNS — справочник, который связывает одно с другим: вы вводите имя, браузер узнаёт адрес сервера и идёт к нему. Чтобы связать домен с хостингом, в настройках домена указывают адреса, которые выдаёт хостер.

HTTPS шифрует соединение между браузером и сервером. Для него на сервер ставят сертификат. Без HTTPS браузер помечает сайт как небезопасный, а формы на таком сайте отпугивают посетителей.

Как выбрать хостинг для сайта

Хостинг — компьютер, который всегда включён и отдаёт ваш сайт. Какой нужен, зависит от сайта:

• Статической странице хватает самого простого тарифа или бесплатного размещения для статических сайтов.
• Сайту на CMS нужен виртуальный хостинг с базой данных.
• Магазину и сервису — виртуальный сервер, где ресурсы выделены только вам.

Сравнивайте не только цену: есть ли бесплатный сертификат для HTTPS, делаются ли резервные копии, отвечает ли поддержка ночью.

Цены на 9 октября 2026 года: Beget, Timeweb, Рег.ру, Спринтхост.

Статическую страницу можно разместить и бесплатно — например, на GitHub Pages: до 1 ГБ на сайт, свой домен и HTTPS без оплаты. Вести там интернет-магазин или платный сервис правила GitHub запрещают.

Как опубликовать HTML-сайт

1. Скачайте страницу из главы 17 и переименуйте файл в index.html — так называют главную страницу.
2. Откройте файл на компьютере и убедитесь, что всё на месте.
3. Загрузите файл в папку сайта на хостинге через файловый менеджер в панели управления. Папку назовёт инструкция хостера.
4. Откройте адрес, который выдал хостинг.
5. Подключите домен и включите HTTPS.

Как открыть сайт после публикации

Введите адрес в браузере — с другого устройства и через мобильный интернет, а не домашний Wi-Fi. Если домен подключён только что, подождите: новые настройки расходятся по интернету не мгновенно. Затем пройдите все ссылки меню и проверьте, что перед адресом стоит замок — значит, HTTPS работает.

Ссылки, формы, скорость и мобильная версия

• Ссылки. Нажмите каждый пункт меню и каждую кнопку.
• Формы. Отправьте заявку и убедитесь, что она пришла. Проверьте, что человек видит после отправки и при ошибке.
• Телефон. Нет ли горизонтальной прокрутки, читается ли текст, попадает ли палец по кнопкам.
• Скорость. Проверьте адрес в бесплатном сервисе Google PageSpeed Insights: он покажет, что замедляет страницу. Ориентиры Google: главное содержимое появляется за 2,5 секунды, страница отвечает на нажатие за 200 миллисекунд, элементы не прыгают при загрузке.
• Заголовок и описание. У каждой страницы свои title и description — их видят в поиске.
• Документы. Если на сайте есть форма, нужны политика конфиденциальности, отдельное согласие на обработку данных и уведомление в Роскомнадзор. Штраф за неопубликованную политику для ИП — 10–20 тысяч рублей, за неподанное уведомление — 100–300 тысяч. Разбор — в статье «Персональные данные на сайте».

Как добавить сайт в Яндекс и Google

Опубликовать сайт и попасть в поиск — разные события. Поисковый робот должен найти страницу, прочитать её и добавить в базу. Ускорить это помогают бесплатные кабинеты поисковых систем:

1. Добавьте сайт в Яндекс Вебмастер и Google Search Console и подтвердите, что он ваш.
2. Отправьте главную страницу на обход.
3. Проверьте, что страница не закрыта от индексации: в конструкторах это галочка в настройках.
4. Если страниц много, добавьте карту сайта — файл со списком всех адресов.

Сроков никто не гарантирует. Яндекс пишет, что после добавления в Вебмастер сайты, как правило, появляются в поиске в течение двух недель; Google — что обход занимает от нескольких дней до нескольких недель. В Яндекс Вебмастер можно добавить только сайт с собственным доменом. Сначала сайт находится по своему названию и лишь со временем — по общим запросам.

Что делать после запуска

• Поставьте счётчик Яндекс Метрики: без него не видно, приходят ли люди и что они делают.
• Настройте цель «заявка отправлена» и смотрите на неё раз в неделю.
• Добавьте компанию в Яндекс Бизнес и на карты.
• Обновляйте содержание: цены, примеры работ, ответы на вопросы.
• Следите за продлением домена и хостинга — сайт пропадает именно из-за этого.

Как открыть HTML-файл на компьютере

Дважды щёлкните по скачанному файлу — он откроется в браузере как обычная страница. Чтобы увидеть код, откройте тот же файл в текстовом редакторе: «Блокноте» в Windows или TextEdit в macOS. Измените слово в заголовке, сохраните файл и обновите вкладку браузера — так выглядит вся работа с кодом.

Как сохранить изменения и вернуться к проекту

Ваша страница хранится в этом браузере на этом устройстве: закройте вкладку, вернитесь завтра — она будет на месте. На другом устройстве её нет, а очистка данных браузера её сотрёт. Надёжная копия — сам файл: скачайте его и положите туда, где храните документы.

Перед публикацией замените учебные тексты своими и добавьте способ связи. А дальше — размещение в интернете и проверка перед запуском.