HTML и CSS: пошаговое руководство по верстке сайта для начинающих

Пройдите тест, узнайте какой профессии подходите

Сколько вам лет

До 18

От 18 до 24

От 25 до 34

От 35 до 44

От 45 до 49

От 50 до 54

Больше 55

Для кого эта статья:

Новички в веб-разработке, желающие научиться верстке
Люди, интересующиеся карьерой в сфере IT и веб-дизайна
Студенты, проходящие курсы по программированию и программной разработке
В руках у вас — не кисти и краски, а код. Именно так начинается путь верстальщика, способного превратить абстрактный дизайн в функциональный сайт. HTML и CSS — это те два языка, которые позволяют воплотить любую визуальную идею в цифровую реальность. В этом руководстве мы пройдем полный путь от первых строк кода до готового проекта, развеивая мифы о сложности верстки и демонстрируя, как систематический подход превращает процесс создания сайта в увлекательное приключение. 🚀

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

Подготовка к верстке сайта: необходимые инструменты

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

Начнем с базовых требований:

Текстовый редактор — это ваше главное оружие. Visual Studio Code, Sublime Text или Atom предоставляют подсветку синтаксиса, автодополнение и множество плагинов для расширения функциональности.
Веб-браузер — Chrome, Firefox или Edge с инструментами разработчика для тестирования и отладки.
Система контроля версий — Git поможет отслеживать изменения в коде и безопасно экспериментировать.
Графический редактор — Figma, Adobe XD или Photoshop для работы с макетами дизайна.

Для более продвинутой разработки рекомендую установить:

Node.js и npm — для установки пакетов и запуска локального сервера.
Препроцессоры CSS — SASS или LESS для более структурированной работы со стилями.
Автоматизация сборки — Gulp, Webpack или Vite для оптимизации рабочего процесса.

Инструмент	Для новичков	Для продвинутых
Текстовый редактор	VS Code с базовыми расширениями	VS Code + Emmet, Live Server, ESLint
Браузер	Chrome DevTools	Chrome DevTools + Lighthouse, ReactDevTools
Организация кода	Базовая структура папок	BEM-методология, компонентный подход

Помимо технических инструментов, важно подготовить и вспомогательные ресурсы:

Документация — MDN Web Docs является золотым стандартом для справки по HTML, CSS и JavaScript.
Валидаторы — W3C HTML Validator и CSS Validator для проверки корректности кода.
Библиотеки изображений — Unsplash, Pexels для бесплатных качественных изображений.
Сервисы шрифтов — Google Fonts для добавления красивой типографики.

Александр Петров, ведущий фронтенд-разработчик
Когда я начинал свой путь верстальщика, я совершил классическую ошибку — пытался запомнить все теги HTML и свойства CSS наизусть. Я часами штудировал справочники, но на практике не мог создать даже простую страницу. Всё изменилось, когда я начал использовать принцип "нужно — нашёл — применил".
Я установил VS Code, создал первый HTML-файл и, когда столкнулся с непонятным моментом, искал решение в документации. Так, шаг за шагом, я создал свой первый сайт-портфолио. Он был простым, но полностью рабочим. Именно практика и правильные инструменты сделали меня профессионалом, а не зубрежка теории.

Основы HTML: создание структуры веб-страницы

HTML (HyperText Markup Language) — это фундамент любой веб-страницы. Он определяет структуру и смысловое содержание контента. Представьте HTML как скелет человека — без него невозможно существование организма. 🦴

Начнем с базовой структуры HTML-документа:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Название страницы</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Содержимое страницы -->
</body>
</html>

Это базовый шаблон, с которого начинается любая веб-страница. Теперь разберемся с основными структурными элементами HTML:

Семантические теги — header, nav, main, section, article, footer помогают определить смысловые блоки страницы.
Теги заголовков — h1-h6 устанавливают иерархию содержимого.
Параграфы и списки — p, ul, ol, li для текстового контента.
Ссылки и изображения — a, img для интерактивных элементов и медиаконтента.
Формы — form, input, button для взаимодействия с пользователем.

Вот пример базовой структуры типичной страницы:

<body>
<header>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</header>

<main>
<section>
<h1>Заголовок страницы</h1>
<p>Основной контент...</p>
</section>

<section>
<h2>Дополнительная информация</h2>
<article>
<h3>Статья 1</h3>
<p>Текст статьи...</p>
</article>
</section>
</main>

<footer>
<p>© 2023 Все права защищены</p>
</footer>
</body>

При создании HTML-структуры важно соблюдать несколько принципов:

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

CSS-стилизация: превращаем разметку в красивый сайт

CSS (Cascading Style Sheets) — это язык, который превращает скелет HTML в полноценный визуальный интерфейс. Если HTML отвечает за структуру, то CSS — за внешний вид. 🎨

Существует три основных способа подключения CSS к HTML:

Внешний файл — наиболее предпочтительный метод для больших проектов:

<link rel="stylesheet" href="styles.css">

Внутренний стиль — размещается в теге <style> внутри <head>.
Инлайновый стиль — через атрибут style="..." непосредственно в HTML-элементе.

Основные концепции CSS, которые нужно освоить:

Селекторы — определяют, к каким элементам применять стили (теги, классы, идентификаторы).
Свойства и значения — указывают, какие именно стили применить (цвет, размер, позиционирование).
Блочная модель — margin, border, padding, content определяют размеры и пространство элементов.
Позиционирование — static, relative, absolute, fixed, sticky управляют расположением элементов.

Рассмотрим базовый пример стилизации:

/* Сброс стандартных стилей браузера */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
}

header {
background-color: #f8f9fa;
padding: 20px 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

nav ul {
display: flex;
justify-content: center;
list-style: none;
}

nav li {
margin: 0 15px;
}

nav a {
text-decoration: none;
color: #007bff;
font-weight: bold;
transition: color 0.3s ease;
}

nav a:hover {
color: #0056b3;
}

section {
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
}

h1 {
font-size: 2.5rem;
margin-bottom: 20px;
color: #212529;
}

p {
margin-bottom: 15px;
}

footer {
background-color: #343a40;
color: white;
text-align: center;
padding: 20px 0;
margin-top: 50px;
}

Современный CSS предлагает мощные возможности для создания сложных макетов:

Flexbox — одномерная система для организации элементов в ряд или столбец.
Grid — двумерная система для создания сеток и сложных макетов.
Переменные — для управления повторяющимися значениями.
Анимации и переходы — для создания интерактивных эффектов.

Технология	Применение	Уровень сложности
Flexbox	Навигация, карточки, простые однонаправленные макеты	Средний
Grid	Сложные двумерные макеты, галереи, дэшборды	Высокий
Переменные	Темизация, управление цветовой схемой	Низкий
Анимации	Интерактивные элементы, микровзаимодействия	Высокий

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

BEM (Block, Element, Modifier) — четкая структура именования классов.
SMACSS (Scalable and Modular Architecture for CSS) — категоризация CSS-правил.
OOCSS (Object-Oriented CSS) — разделение структуры и оформления.

Адаптивная верстка: настройка сайта под разные устройства

Адаптивная верстка обеспечивает корректное отображение сайта на устройствах с разными размерами экранов — от смартфонов до широкоформатных мониторов. 📱 💻 🖥️

Ключевые компоненты адаптивной верстки:

Метатег viewport — контролирует отображение страницы на мобильных устройствах:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Относительные единицы измерения — %, em, rem, vh, vw вместо фиксированных пикселей.
Медиа-запросы — применяют стили в зависимости от характеристик устройства.
Гибкие изображения — масштабируются в зависимости от размера контейнера.

Медиа-запросы — основной механизм создания адаптивных макетов:

/* Базовые стили для всех устройств */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

/* Стили для планшетов */
@media (max-width: 768px) {
.container {
width: 95%;
}

.navigation {
flex-direction: column;
}
}

/* Стили для мобильных телефонов */
@media (max-width: 480px) {
h1 {
font-size: 1.8rem;
}

.card {
width: 100%;
}
}

Существует два основных подхода к адаптивной верстке:

Mobile-First — сначала создаются стили для мобильных устройств, затем для более крупных.
Desktop-First — начинают с версии для настольных компьютеров, затем адаптируют под мобильные.

Преимущества Mobile-First подхода:

Приоритизация контента для мобильных пользователей.
Улучшенная производительность (загружаются только необходимые ресурсы).
Лучшая совместимость со старыми браузерами.
Соответствие стратегии Google по индексации мобильного контента.

Мария Иванова, верстальщик интерфейсов
В 2019 году ко мне обратился клиент с проблемой — его интернет-магазин терял мобильный трафик, хотя дизайн был "современным". При анализе сайта я обнаружила, что верстка была выполнена старым методом с фиксированной шириной в 1024px.
Вместо того чтобы добавлять медиа-запросы к существующему коду, я предложила полностью переработать верстку по принципу Mobile-First. Мы начали с проектирования мобильного интерфейса, убрали всё лишнее, оставив только ключевой функционал. Затем постепенно расширяли возможности для планшетов и десктопов.
Результат превзошел ожидания: конверсия с мобильных устройств выросла на 67%, а скорость загрузки увеличилась в 2,5 раза. Этот опыт научил меня, что адаптивность — это не дополнительная "фича", а фундаментальный принцип современной верстки.

Практический проект: верстка лендинга с нуля

Теперь применим полученные знания на практике, создав простой, но функциональный лендинг. Мы пройдем весь путь от планирования до готового результата. 🏗️

Шаг 1: Планирование и подготовка

Начнем с создания структуры проекта:

project/
├── index.html
├── styles/
│ └── main.css
├── scripts/
│ └── main.js
└── images/

Шаг 2: Создание базовой HTML-структуры

В файле index.html определим основные блоки лендинга:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой лендинг</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<header class="header">
<div class="container">
<nav class="nav">
<div class="logo">МойБренд</div>
<ul class="menu">
<li><a href="#features">Возможности</a></li>
<li><a href="#pricing">Цены</a></li>
<li><a href="#testimonials">Отзывы</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
<button class="menu-toggle">☰</button>
</nav>

<div class="hero">
<div class="hero-content">
<h1>Инновационное решение для вашего бизнеса</h1>
<p>Оптимизируйте процессы и увеличивайте прибыль с нашим продуктом</p>
<button class="btn btn-primary">Начать бесплатно</button>
</div>
<div class="hero-image">
<img src="images/hero.jpg" alt="Продукт в действии">
</div>
</div>
</div>
</header>

<section id="features" class="features">
<div class="container">
<h2>Ключевые возможности</h2>
<div class="features-grid">
<div class="feature">
<div class="feature-icon">🚀</div>
<h3>Быстрый старт</h3>
<p>Начните использовать продукт в течение 5 минут после регистрации</p>
</div>
<div class="feature">
<div class="feature-icon">💰</div>
<h3>Экономия бюджета</h3>
<p>Сократите расходы на 30% с нашим эффективным решением</p>
</div>
<div class="feature">
<div class="feature-icon">📊</div>
<h3>Аналитика</h3>
<p>Получайте подробные отчеты о результатах работы</p>
</div>
</div>
</div>
</section>

<!-- Другие секции... -->

<footer class="footer">
<div class="container">
<p>© 2023 МойБренд. Все права защищены.</p>
</div>
</footer>

<script src="scripts/main.js"></script>
</body>
</html>

Шаг 3: Стилизация с помощью CSS

В файле main.css создадим базовые стили и адаптивный макет:

/* Сброс стилей и базовые настройки */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Roboto', sans-serif;
line-height: 1.6;
color: #333;
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

/* Стили для шапки */
.header {
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: white;
padding: 20px 0;
}

.nav {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
font-size: 1.5rem;
font-weight: bold;
}

.menu {
display: flex;
list-style: none;
}

.menu li {
margin-left: 20px;
}

.menu a {
color: white;
text-decoration: none;
transition: opacity 0.3s;
}

.menu a:hover {
opacity: 0.8;
}

.menu-toggle {
display: none;
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
}

/* Стили для героя */
.hero {
display: flex;
align-items: center;
padding: 60px 0;
}

.hero-content {
flex: 1;
padding-right: 40px;
}

.hero h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}

.hero p {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
}

.btn {
display: inline-block;
padding: 12px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
transition: all 0.3s;
}

.btn-primary {
background-color: #fff;
color: #6e8efb;
font-weight: bold;
}

.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.hero-image {
flex: 1;
}

.hero-image img {
max-width: 100%;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Стили для секции возможностей */
.features {
padding: 80px 0;
background-color: #f9f9f9;
}

.features h2 {
text-align: center;
margin-bottom: 50px;
font-size: 2rem;
}

.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.feature {
background: white;
padding: 30px;
border-radius: 8px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: transform 0.3s;
}

.feature:hover {
transform: translateY(-10px);
}

.feature-icon {
font-size: 3rem;
margin-bottom: 20px;
}

.feature h3 {
margin-bottom: 15px;
color: #6e8efb;
}

/* Адаптивные стили */
@media (max-width: 768px) {
.hero {
flex-direction: column;
}

.hero-content {
padding-right: 0;
text-align: center;
margin-bottom: 40px;
}

.features-grid {
grid-template-columns: 1fr;
}

.menu {
display: none;
}

.menu-toggle {
display: block;
}

/* Мобильное меню */
.menu.active {
display: flex;
flex-direction: column;
position: absolute;
top: 70px;
left: 0;
right: 0;
background: #6e8efb;
padding: 20px;
}

.menu.active li {
margin: 10px 0;
}
}

Шаг 4: Добавление интерактивности с JavaScript

В файле main.js реализуем мобильное меню и простую анимацию:

document.addEventListener('DOMContentLoaded', function() {
// Мобильное меню
const menuToggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.menu');

menuToggle.addEventListener('click', function() {
menu.classList.toggle('active');
});

// Плавная прокрутка к якорям
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();

const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);

if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop – 70,
behavior: 'smooth'
});

// Закрыть мобильное меню после клика
menu.classList.remove('active');
}
});
});
});

Шаг 5: Тестирование и оптимизация

После создания лендинга необходимо провести тестирование:

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

Для дальнейшего совершенствования лендинга можно добавить:

Анимации появления элементов при прокрутке.
Функциональную форму обратной связи.
Галерею с примерами работ.
Интеграцию с аналитическими сервисами.

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

Читайте также

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

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

1 / 5

Свежие материалы

Как настроить HTTPS на вашем сайте

6 сентября 2024

Проверка юзабилити сайта: пошаговое руководство

6 сентября 2024

Инструменты для тестирования сайтов: обзор и сравнение

6 сентября 2024

HTML и CSS: пошаговое руководство по верстке сайта для начинающих

Подготовка к верстке сайта: необходимые инструменты

Основы HTML: создание структуры веб-страницы

CSS-стилизация: превращаем разметку в красивый сайт

Адаптивная верстка: настройка сайта под разные устройства

Практический проект: верстка лендинга с нуля

Загрузка...