Как сделать сайт с нуля: первая страница на HTML и CSS

Первую HTML/CSS-страницу лучше начинать не с дизайна, а с цели. Кто откроет страницу, что он должен понять и какое действие сделать дальше? Если ответа нет, сайт легко превращается в набор красивых блоков без смысла

Для аудитории «новичок HTML/CSS» особенно важно говорить конкретно. Человек не должен угадывать, куда попал и что ему предлагают. Первый экран, структура, тексты, изображения и форма должны вести к одному понятному результату: заявке, просмотру информации, скачиванию файла, подтверждению участия или сохранению контакта

Перед сборкой запишите одну фразу:

Этот сайт нужен, чтобы человек понял ... и сделал ...

Если фраза получается слишком длинной, задачу стоит сузить

Минимальный рабочий сайт

Создайте папку проекта:

my-site/
  index.html
  style.css
  images/

В index.html добавьте базовую страницу:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Первая страница сайта</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <h1>Сайт специалиста по ремонту ноутбуков</h1>
    <p>Диагностика, чистка, замена деталей и понятные сроки ремонта</p>
    <a class="button" href="#contacts">Оставить заявку</a>
  </header>

  <main>
    <section>
      <h2>Что можно сделать</h2>
      <ul>
        <li>заменить клавиатуру или экран</li>
        <li>почистить ноутбук от пыли</li>
        <li>восстановить работу после залития</li>
      </ul>
    </section>

    <section id="contacts">
      <h2>Контакты</h2>
      <p>Напишите в Telegram или позвоните для диагностики</p>
      <a href="tel:+79991234567">+7 999 123-45-67</a>
    </section>
  </main>
</body>
</html>

В style.css добавьте простое оформление:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  color: #1f2933;
}

.hero {
  padding: 64px 24px;
  background: #eef4ff;
}

section {
  max-width: 760px;
  padding: 32px 24px;
}

.button {
  display: inline-block;
  padding: 12px 18px;
  background: #2457ff;
  color: white;
  text-decoration: none;
}

Откройте index.html в браузере. Если стили не подключились, проверьте, что index.html и style.css лежат в одной папке и имя файла написано без ошибок

По этой теме полезно отдельно посмотреть CSS ::before и ::after — псевдоэлементы, чтобы расширить контекст и сравнить подходы

По этой теме полезно отдельно посмотреть CSS box-shadow — тени для элементов, чтобы расширить контекст и сравнить подходы

Профессиональная основа первой страницы

Даже первая HTML-страница должна быть собрана так, чтобы ее потом не пришлось полностью переделывать. Минимальный профессиональный набор: семантическая разметка, адаптивная сетка, понятный title, метаописание, один H1, рабочие ссылки, сжатые изображения и проверка формы

В head добавьте базу:

<meta name="description" content="Сайт специалиста по ремонту ноутбуков: услуги, сроки, диагностика и контакты для заявки">
<meta property="og:title" content="Ремонт ноутбуков - диагностика и заявка">
<meta property="og:description" content="Коротко о ремонте, сроках и контактах">
<meta property="og:type" content="website">

Структуру лучше держать такой:

<header>первый экран и главное действие</header>
<main>
  <section>услуги или предложение</section>
  <section>доказательства и доверие</section>
  <section>процесс работы</section>
  <section>форма или контакты</section>
</main>
<footer>юридическая информация, контакты, ссылки</footer>

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

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

img {
  max-width: 100%;
  height: auto;
}

Перед публикацией проверьте страницу как продукт: открывается ли она по прямой ссылке, понятен ли первый экран за 5 секунд, видна ли кнопка действия, работает ли телефонная ссылка, нет ли горизонтальной прокрутки на телефоне, не весят ли изображения по несколько мегабайт

Как опубликовать первую версию

Для простой HTML-страницы есть три спокойных варианта:

Если публикуете на хостинге, загрузите index.html, style.css и папку images в корень сайта или нужную папку. После загрузки откройте сайт в приватном окне. Так видно, что страница доступна не только вам как автору

Финальная проверка перед отправкой ссылки:

открывается главная страница
CSS подключен
изображения видны
кнопки и ссылки работают
форма или контакт работают
страница читается с телефона
в title не осталось черновика
нет текстов "раздел 1" и "кнопка"

Структура страницы

Для первой версии подойдут такие блоки:

• папка проекта
• index.html
• style.css
• заголовок
• текст
• кнопка или ссылка
• проверка в браузере

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

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

Первый экран

Первый экран должен дать ясность за несколько секунд. Нужны заголовок, короткое пояснение и действие. Заголовок не должен быть общим вроде «Добро пожаловать». Он должен описывать предложение или смысл страницы

Пример:

Понятная страница для важного события
Дата, место, программа и форма подтверждения в одном месте

Или для услуги:

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

Кнопка должна вести туда, где человек продолжает путь: к форме, контактам, программе, материалам или заявке

Тексты

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

Мы предлагаем качественные решения с индивидуальным подходом.

Лучше написать, что именно человек получит, как это работает и что нужно сделать:

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

Для первой HTML/CSS-страницы полезно писать короткими блоками. Один блок — одна мысль. Если абзац приходится перечитывать, сократите его или разделите на два

Изображения и файлы

Изображения должны помогать понять страницу. Если это приглашение, покажите атмосферу и важные детали события. Если это услуга, покажите специалиста, процесс или результат. Если это инструкция, используйте понятные скриншоты и подписи

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

Если на странице есть документы, подпишите их понятно. Человек должен понимать, что он скачивает и зачем

Форма и контакты

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

Возле формы напишите, что произойдет дальше:

Оставьте контакт, я отвечу и уточню детали.

После настройки формы отправьте тестовую заявку. Проверьте письмо, поля, уведомление и сообщение после отправки. Красивый сайт без рабочей формы не решает задачу

Мобильная версия

Большая часть посетителей может открыть страницу с телефона. Проверьте:

• страница открывается локально
• CSS подключен
• текст читается
• на телефоне нет горизонтальной прокрутки

Если на телефоне первый экран занимает слишком много места, кнопка ушла вниз, форма неудобна или текст мелкий, правьте до публикации. Мобильная проверка не должна быть последним формальным шагом

Публикация

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

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

Частые ошибки

Первая ошибка — начинать с шаблона, не понимая цель. Шаблон может быть красивым, но структура должна подходить задаче

Вторая ошибка — писать слишком общо. Посетитель должен увидеть конкретику: кто, что, для кого, как получить результат

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

Четвертая ошибка — не проверять телефон. На компьютере все может выглядеть хорошо, а на мобильном экране развалиться

Пятая ошибка — оставлять временные тексты, пустые блоки и старые ссылки

Чек-лист

• Цель страницы сформулирована.
• Первый экран понятен.
• Блоки идут в логичном порядке.
• Тексты конкретные.
• Изображения не случайные.
• Форма работает.
• Контакты актуальны.
• Мобильная версия проверена.
• Ссылки и файлы открываются.
• Нет временных заглушек.

Часто задаваемые вопросы

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

Да, если задача простая: одностраничник, приглашение, страница услуги, портфолио или форма заявки. Главное — продумать структуру и проверить результат

Что важнее: дизайн или текст?

Сначала смысл и текст, потом дизайн. Красивый блок не спасет страницу, если посетитель не понимает предложение

Сколько блоков нужно в первой версии?

Обычно достаточно 6-10 смысловых блоков. Лучше меньше, но понятнее

Нужно ли подключать домен сразу?

Для теста можно использовать технический адрес. Для серьезного проекта лучше подключить свой домен

Как понять, что страница готова?

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