Код найма-5
Код найма-5
Код найма-5
Написать пост

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

Аватарка пользователя Вадим Егорцев
Вадим Егорцев
для
Логотип компании Tproger
Tproger

Первый сайт за 10 минут — стек HTML/CSS, без конструктора, JS и фреймворков. Вместе мы создадим простой сайт-визитку и опубликуем вашу работу в интернете.

2К открытий6К показов
Как сделать свой первый сайт на HTML и CSS: пошаговая инструкция
Верстали сайты?
Конечно
Не приходилось

Tilda, Wix, WordPress — конструкторы сайтов кажутся простым решением. Согласны, на готовых блоках можно сделать интернет-магазин за 1 час. Но учтите, что в конструкторе непонятно, как всё работает изнутри. Вы не поймёте, почему сайт долго грузится, как увеличить кнопку для смартфонов и т. д.

Выбрали путь программиста? Значит навсегда запомните, когда опубликовали первый самописный сайт. Откосить не получится: мы сразу перейдём к практике — к концу статьи у вас будет ссылка на сайт-визитку.

Мало времени? Выделите 10 минут — мы используем только HTML и CSS.

Вы узнаете:

  • как подключать стили,
  • как верстать блоки,
  • как опубликовать сайт.

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

Шаг 1. Подготовим инструменты и папку проекта

Сайт можно писать и в блокноте. Это как забивать гвозди камнем – работает, но зачем мучиться? Редактор кода подсвечивает синтаксис, подсказывает команды и сразу указывает на ошибки.

Как платформа SD-WAN Reasonance от Manticore помогла сети из 400 ресторанов быстрого питания
tproger.ru

Новичкам рекомендуем ставить Visual Studio Code (VS Code). Он бесплатный, не тормозит и понимает любой код. Плюс у него огромное сообщество — если нужно установить плагин или увеличить шрифт, ответ на вопрос уже есть в интернете.

Скачайте VS Code с официального сайта.

Как устроен веб-проект

Сайт — это папка с файлами для браузера.

HTML-файл содержит текст и разметку страницы, CSS-файл — правила оформления. Браузер берёт эти два файла и показывает веб-страницу.

Основной файл сайта обычно называют index.html. Стили хранятся в style.css.

Кроме файлов HTML и CSS, в нашем проекте будут папки:

  • img — для картинок.
  • fonts — для шрифтов.

Создайте на рабочем столе папку с названием сайта, например first-site, и соберите начальную структуру — это займёт 1 минуту.

Как сделать свой первый сайт на HTML и CSS: пошаговая инструкция 1
Типичная структура веб-проекта

Шаг 2. Создадим базовую HTML-страницу

В VS Code есть удобная фишка: наберите символ «!» и нажмите Tab. Редактор автоматически создаст базовую структуру HTML-документа.

Как сделать свой первый сайт на HTML и CSS: пошаговая инструкция 2
Структура HTML-документа в VS Code

Как читать структуру:

  • <!DOCTYPE html> — сообщает браузеру, что это HTML-документ.
  • <html> — корневой элемент, внутри которого живёт страница.
  • <head> — служебная информация, которую не видно на странице.
  • <body> — то, что увидят пользователи на странице.

Измените Document на название вашего сайта — это текст, который появится во вкладке браузера.

Добавим контент в <body>:

			<body>
  <div class="card">
    <!-- Аватарка -->
    <img src="img/riddick.jpg" alt="Аватар" class="avatar">
    <!-- Имя -->
    <div class="name">Ричард Риддик</div>
    <!-- Описание -->
    <div class="description">Привет! Я научу вас выживать там, где цивилизация заканчивается. Опыт – лучший учитель.</div>
    <!-- Кнопка для связи -->
    <a href="https://t.me/egortsevv" class="contact-button">Написать мне</a>
  </div>
</body>
Мы не комментируем каждый тег и атрибут, потому что это тема для отдельной статьи. Наша задача — показать, как быстро собрать сайт и выложить его в интернет.

Сохраните HTML-файл и откройте его в браузере. Поздравляем, ваша первая веб-страница готова! Она недоступна другим пользователям, но мы это исправим.

Как сделать свой первый сайт на HTML и CSS: пошаговая инструкция 3
HTML-страница без стилей

Шаг 3. Подключим стили CSS

Сейчас сайт выглядит странно — чёрный текст на белом фоне. Так не пойдёт, добавим стилей в файле style.css.

CSS можно писать внутри HTML или в отдельном файле. Мы выберем второй вариант, потому что это удобнее.

Подключим CSS к HTML. В секции вашего index.html добавьте строчку:

Тег говорит браузеру: «Возьми файл style.css из той же папки и примени все стили к этой странице».

Добавьте в style.css первое правило:

			body {
    background-color: #2aa29f;
}

Сохраните оба файла — HTML и CSS. Обновите страницу в браузере.

Брать или не брать заказ у зарубежного клиента в 2025? Подводные камни санкций, SWIFT и налогов
tproger.ru

Фон поменял цвет? Значит, CSS подключён правильно. Можете вернуть белый фон или оставить голубой — далее мы добавим более интересные стили.

Как сделать свой первый сайт на HTML и CSS: пошаговая инструкция 4
Применили стиль к фону страницы

Шаг 4. Подключим шрифты

Есть три способа избавиться от дефолтного Times New Roman:

  • Google Fonts — бесплатная библиотека шрифтов от Google.
  • Локальные файлы — загружаете шрифт на свой сервер.
  • Системные шрифты — используете то, что уже есть на компьютере пользователя.

Для первого сайта на HTML и CSS рекомендуем Google Fonts — это просто, быстро и надёжно.

Перейдите на fonts.google.com и выберите шрифт. Популярные варианты: Roboto, Open Sans, Lato, Montserrat. Нажмите на понравившийся шрифт, выберите начертания (тонкий, обычный или жирный), скопируйте код подключения и вставьте в head.

Как сделать свой первый сайт на HTML и CSS: пошаговая инструкция 5
Подключение всех начертаний Montserrat в Google Fonts

На Google Font собраны популярные шрифты. Если этого мало, нужно скачать шрифт (.woff, .woff2, .ttf) и поместить в папку fonts.

Путь к файлу указывается относительно CSS-файла. Подключаем начертания через @font-face:

			@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat.woff2') format('woff2'),
         url('fonts/Montserrat.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

Теперь используйте шрифт в CSS:

			body {
    font-family: 'Montserrat', Arial, sans-serif;
}

Для каждого начертания (обычный, жирный, курсив) нужно отдельное правило @font-face.

Шаг 5. Сверстаем блоки

Замените содержимое вашего style.css на этот код:

			body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  background-color: #e8f0fe;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.card {
  background-color: #ffffff;
  width: 320px;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  text-align: center;
  border: 3px solid #4a90e2;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 15px;
  border: 3px solid #4a90e2;
  object-fit: cover;
}

.name {
  font-size: 1.8em;
  font-weight: 700;
  margin-bottom: 10px;
  color: #333333;
}

.description {
  font-size: 1em;
  color: #555555;
  margin-bottom: 20px;
}

.contact-button {
  display: inline-block;
  padding: 12px 25px;
  font-size: 1em;
  color: #ffffff;
  background-color: #4a90e2;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-button:hover {
  background-color: #357ab8;
  transform: scale(1.1);
}

Что мы делаем:

  • Убираем стандартные отступы браузера и задаём голубой фон.
  • Центрируем карточку по всей странице с помощью flexbox.
  • Создаём белую карточку с тенью и скруглёнными углами.
  • Делаем круглый аватар с рамкой.
  • Стилизуем текст и кнопку.
  • Добавляем эффект при наведении на кнопку.
Как сделать свой первый сайт на HTML и CSS: пошаговая инструкция 6
Простая визитка на HTML и CSS с анимированной кнопкой и ссылкой на Телеграм

Шаг 6. Загрузим сайт на хостинг

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

Заходим на сайт хостинга (Beget, Hostiman, InfinityFree) и регистрируемся. После подтверждения email вы попадёте в панель управления. Система предложит выбрать домен — берите бесплатный типа название.fwh.is.

Как сделать свой первый сайт на HTML и CSS: пошаговая инструкция 7
Выбор бесплатного поддомена на InfinityFree

Загружаем файлы на сервер

После создания аккаунта появится доступ к файловому менеджеру. Через веб-интерфейс можно управлять файлами на сервере прямо из браузера. Перейдите в папку htdocs — это корневая директория вашего сайта, куда нужно загружать структуру.

Удалите лишние файлы по типу default.php и загрузите ваши файлы: index.html, style.css, папки img и fonts. Основной index.html должен лежать прямо в htdocs, а не во вложенной папке — иначе сайт не откроется.

Как сделать свой первый сайт на HTML и CSS: пошаговая инструкция 8
Менеджер файлов InfinityFree

Более продвинутый способ — использовать FTP-клиент FileZilla. В панели хостинга найдите FTP-данные и подключитесь через программу. Это удобнее для больших проектов, но для первого сайта веб-менеджера будет достаточно.

Проверяем результат

Через несколько минут после загрузки ваш сайт будет доступен по адресу. Откройте его в браузере — если всё сделано правильно, увидите свою страницу. Если что-то не работает, проверьте, что index.html лежит в корне htdocs, а style.css загружен в ту же папку.

Как сделать свой первый сайт на HTML и CSS: пошаговая инструкция 9
Опубликованная визитка на HTML и CSS

Реальность бесплатного хостинга

Для изучения основ и создания первых проектов на HTML и CSS это отличный вариант. Регистрация занимает 1 минуту, никаких настроек, можно сразу экспериментировать и видеть результат.

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

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

Скрытые ограничения:

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

Когда стоит переходить на платный хостинг

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

Самый простой домен стоит 200-1000 рублей/год, а базовый хостинг — 100-300 рублей/месяц. Плюс получите доступ к технологиям (PHP, MySQL), более стабильную работу и нормальную техподдержку. Начните с минимального тарифа — его хватит на тренировочные проекты, а потом можно масштабироваться.

Куда двигаться дальше?

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

  • как работает HTML,
  • зачем нужен CSS,
  • что такое хостинг и домен.

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

Подробнее про адаптив рассказал старший фронтенд-разработчик Никита Кушнарёв: Если вы умеете покрасить кнопочку, но хотите узнать больше о вёрстке веб-приложений.

Попробуйте переделать карточку так, чтобы она нормально выглядела на телефоне. Уменьшите размеры, измените отступы, сделайте кнопку на всю ширину. Потом изучите Flexbox и CSS Grid — современные способы вёрстки макетов.

Когда почувствуете уверенность в CSS, пора знакомиться с JavaScript. Это язык программирования, который делает сайты интерактивными. Сложные анимации, всплывающие окна, динамическое изменение контента — это JS. Предупреждаем, он сложнее HTML и CSS. В нём есть функции, условия, циклы — всё то, что пугает новичков.

Подробнее про JavaScript: Разработка на JavaScript с нуля: дорожная карта.

Изучайте инструменты разработчика в браузере. Нажмите F12 на любом сайте — откроется интерфейс для просмотра структуры сайта, отладки JS, тестирования адаптива. Смотрите, как устроены другие сайты, изучайте чужой код.

Самое время узнать о большем количестве инструментов программиста. Читайте в нашем тг-канале!

Следите за новыми постами
Следите за новыми постами по любимым темам
2К открытий6К показов
Также рекомендуем
Почему хороший код — это не главное
Почему хороший код — это не главное
Почему чистый код не всегда ведёт к успеху? В статье — реальные кейсы, конфликт интересов между разработкой и бизнесом, и советы, как найти баланс ради пользователя.
Чем заменить Google Docs? Обзор лучших альтернатив
Чем заменить Google Docs? Обзор лучших альтернатив
Статья предлагает обзор лучших альтернатив Google Docs для команд, которым нужно больше, чем просто редактирование документов. В статье рассматриваются инструменты для управления проектами, создания баз знаний и совместной работы, такие как Notion, Dropbox Paper, WorkDrive, Slite, OnlyOffice и TEAMLY.
Google Play Integrity API заблокирует установку пиратских Android-приложений
Google Play Integrity API заблокирует установку пиратских Android-приложений
Новый Play Integrity API от Google может ограничить установку приложений из сторонних источников, усиливая контроль над экосистемой Android.
Релиз «убийцы» Node.js — Deno 2.0 RC: улучшенная совместимость с npm и новая система разрешений
Релиз «убийцы» Node.js — Deno 2.0 RC: улучшенная совместимость с npm и новая система разрешений
Релиз-кандидат Deno 2.0 предлагает полную совместимость с npm-модулями и новую систему разрешений, упрощающую разработку и повышающую безопасность