HTML и CSS. Верстка с нуля: что учить, где учиться и сколько времени это займет

Введение

HTML (HyperText Markup Language) — это основа любого сайта. С его помощью создается структура страницы: заголовки, параграфы, списки, изображения, ссылки и так далее. Код указывает браузеру: «Вот заголовок», «Вот изображение», «А это — список». Каждая страница в интернете начинается именно с HTML.

Например, так выглядит кусочек HTML-кода на странице «Знакомство с HTML»:

<!DOCTYPE html>
<html class='h-100' data-bs-theme='light' lang='ru' prefix='og: https://ogp.me/ns#'>
<head>
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
<meta content='IE=Edge' http-equiv='X-UA-Compatible'>
<meta charset="utf-8">
<title>Знакомство с HTML | Основы HTML, CSS и веб-дизайна</title>
<link rel="alternate" href="https://ru.hexlet.io/courses/html/lessons/first_step/theory_unit" hreflang="ru-RU">

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

На примере выше CSS делает следующее:

С помощью строки class='h-100' растягивает html (и потом body) на всю высоту экрана.
Задает тему оформления командой data-bs-theme='light'.
Привязывает определенный стиль к определенному языку с помощью lang='ru'.

То есть CSS делает страницу понятной, приятной, читаемой и удобной — для человека. Хотя HTML-код может работать и самостоятельно.

Например, HTML без CSS просто выведет черный текст на белом фоне:

<h1>Привет!</h1>
<p>Это Хекслет — школа программирования для новичков и профессионалов</p>

А вот что нужно сделать, чтобы страница выглядела аккуратнее, фон стал не белоснежным, а мягким светло-серым, шрифт — более современным, сам текст — менее контрастным и приятным для глаз:

body {
  background: #f0f0f0;
  font-family: sans-serif;
  color: #333;
}
h1 {
  color: darkblue;

         }

Начните изучать HTML прямо сейчас

Бесплатный курс по HTML уже ждёт вас!

CSS иногда заменяет JavaScript

Актуальная версия CSS делает сайты адаптивными (подстраивающимися под экран гаджета). А еще добавляет анимации, эффекты наведения, простые интерактивные элементы. И все это без JavaScript, потому что CSS анимирует интерфейс не через логику, а через стили.

Например, вот так можно задать плавное изменение цвета при наведении:

HTML:

<input type="checkbox" id="toggle">
<label for="toggle">Показать блок</label>

<div class="content">Привет!</div>

CSS:

.content {
  display: none;
}

#toggle:checked ~ .content {
  display: block;
}

Больше о тегах, атрибутах и о том, как они работают, можно почитать в статье «Немного формальностей» — коротко, по делу и с примерами.

Так, при нажатии на чекбокс появится скрытый блок. Без скриптов. CSS использует состояние :checked, чтобы применить стиль.

Тем не менее CSS не может сработать, как JavaScript. Он не умеет делать «если... то…» — if (...) { ... }. Хотя может реагировать на события — наведение, нажатие, загрузку. И может к этим событиям привязать стили и анимации.

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

Версии CSS

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

Версия	Год выпуска	Что появилось	Комментарий
CSS1	1996 (откорректирована в 1999)	Цвета, шрифты, отступы, выравнивание	CSS1 был сильно ограничен: без позиционирования, медиазапросов, анимаций, flexbox и grid, почти без интерактивности и с минимальной поддержкой в браузерах, полной багов
CSS2	1998	Таблицы, позиционирование, z-index, медиатипы	В CSS2 не было медиазапросов, flexbox, grid, анимаций, переходов и современных возможностей адаптивной верстки
CSS2.1	2004	Исправления и уточнения CSS2	В CSS2.1 по-прежнему не было анимаций, переходов, flexbox и grid — только уточнения и исправления предыдущей версии, без кардинальных новшеств
CSS3	С 2011	Модули: анимации, переходы, flexbox, тени, градиенты без использования JavaScript	В CSS3 не было полной поддержки логики и динамики, как в JavaScript: он не умел реагировать на сложные пользовательские действия, выполнять условия или работать с данными
CSS4*	С 2011	На начало 2025 года нет полной версии	CSS4 как целостной версии не существует — это скорее маркетинговый ярлык, потому что на самом деле CSS развивается по модулям и единой спецификации нет

** — В CSS4 как версии нет ничего нового — все нововведения, например :is(), clamp(), container queries, появились в отдельных модулях.*

Также интересно: Как выучить PHP: руководство для начинающих

Дорожная карта верстальщика

Дорожная карта верстальщика (markup developer) может выглядеть следующим образом (зависит от методологии курса — иногда верстку отделяют от JS и логики).

Этап 1: Базовая верстка

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

Этап 2: Макеты и адаптация

Flexbox: выравнивание, позиционирование, вложенные структуры.
Grid: сетки, макеты, комбинации с Flexbox.
Медиазапросы: адаптивность под разные экраны.
Ретина-изображения и векторная графика (SVG).
Работа с Figma, Zeplin или аналогами: чтение макетов, экспорт ассетов.
Мобильная верстка.

Этап 3: Инструменты и практика

DevTools: отладка CSS, инспекция элементов.
Методологии: БЭМ, Atomic CSS.
Стилизация UI-компонентов (карточки, модалки, формы, табы, меню).
Поддержка кроссбраузерности: проверка и фиксы.
Подключение внешнего контента: iframe, видео, карты.
Основы анимации в CSS (transition, transform, keyframes).

Этап 4: Работа в команде и поддержка кода

Git (базово): clone, commit, push, ветки.
Работа с препроцессорами: Sass или Less (опционально).
Стандарты кода и читаемость: линтеры, форматирование.
Документация компонентов и блоков.
Верстка под CMS: понимание ограничений и требований к шаблонам.
Работа по ТЗ: декомпозиция, оценка времени, ведение задач.

Сколько нужно учить HTML, чтобы начать верстать сайты?

Чтобы начать верстать простые сайты на базовом уровне, например личные страницы, лендинги или портфолио, — достаточно бесплатного курса для начинающих на платформе Code Basic «Основы HTML».

Чтобы начать работать по профессии и претендовать на руководящие должности, нужно глубже освоить HTML, CSS и современные подходы к верстке. Обычно такая программа обучения построена от простого к сложному: вы сначала научитесь делать адаптивные сайты, разбираться в архитектуре CSS, использовать фреймворки и работать в команде. Дальше все зависит от ваших целей: можно продолжить развиваться до уровня Middle или перейти к изучению JavaScript и стать frontend-разработчиками. При этом у большинства новичков в верстке путь складывается примерно по одному подходу.

Junior — начинающий верстальщик

Что нужно уметь:

Строить базовую HTML-структуру (теги html, head, body, заголовки, абзацы, списки и т. д.).
Использовать основные теги и классы, например p, a, img, div, span, h1-h6, ul/li, form, input.
Применять базовые CSS-свойства: цвета, шрифты, отступы, границы, выравнивание (margin, padding, text-align, color, font-size).
Подключать стили (внутренние и внешние), использовать классы.
Делать простую адаптивность с медиазапросами (@media, изменение расположения блоков на мобильных).
Работать с Flexbox.
Пользоваться Google Chrome DevTools для проверки и отладки верстки.

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

Middle — уверенный верстальщик, работает по макетам, знает тонкости

Что нужно уметь:

Писать чистый семантический HTML (<section>, <article>, <main>, <nav> и т. д.).
Владеть Flexbox и CSS Grid.
Делать адаптивную верстку «пиксель в пиксель» по макетам, например из Figma.
Использовать SCSS или другие препроцессоры (переменные, вложенность, миксины).
Структурировать код и придерживаться методологий, например БЭМ.
Использовать псевдоклассы (:hover, :focus, :nth-child) и псевдоэлементы (::before, ::after).
Делать простые анимации (transition, @keyframes, animation).
Писать адаптивные компоненты и переиспользуемые блоки (фрагменты, которые можно использовать в разных частях).

Пример задачи: сверстать карточку товара по макету из Figma. Реализовать переключение вида (список/плитка) через классы. Добавить анимации появления и адаптацию под планшеты и мобильные.

Начните изучать CSS прямо сейчас

Бесплатный курс по CSS уже ждёт вас!

Senior — инженер по стилям, думает о поддержке и масштабировании

Что нужно уметь:

Продумывать структуру CSS-кода заранее.
Использовать современные CSS-фичи: :is(), clamp(), custom properties, контейнерные запросы.
Работать с доступностью, кросс-браузерностью и производительностью.
Делать сложные UI-компоненты без JS (например, раскрывающиеся блоки, фильтры).
Настраивать сборку (PostCSS, Vite/Webpack).
Менторить, делать код-ревью, улучшать процессы в команде.

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

Пример задачи: разработать адаптивную компонентную библиотеку для внутренних сервисов с поддержкой светлой и темной темы через CSS custom properties, с документацией, поддержкой на нескольких языках и динамикой без JavaScript.

Что не нужно учить, если вы новичок

Если вы только начали интересоваться программированием и по какой-то причине решили сами разобраться в HTML, не спешите гуглить все подряд. Вот несколько советов, которые помогут не запутаться в начале пути:

CSS-препроцессоры (SASS, LESS) не для старта. Они полезны, но только после того, как вы освоите чистый CSS, то есть без препроцессоров, фреймворков и лишних надстроек.
BEM, методологии и архитектура CSS — это для продвинутых пользователей. Научиться сначала писать понятно и аккуратно важнее, чем следовать сложной системе.
Сложные движения, фоны и @keyframes (описание анимации по кадрам) лучше отложить до уверенного уровня. А вот сложные эффекты типа transition и hover — то, что нужно новичку.
Grid — это нужное, но вначале стоит уверенно освоить Flexbox. Он проще и покрывает 80% задач.
Фреймворки и библиотеки (Bootstrap, Tailwind). Они ускоряют работу, но только когда ты понимаешь, что они делают под капотом (внутри технологии).

Присоединяйтесь к сообществу Хекслет

Обсуждайте, помогайте и делитесь опытом

Перейти в сообщество

Валерия Белякова

2 месяца назад

~5 минут

Что такое Haskell и для чего он используется?

Как используется язык программирования Haskell: компиляторы, тестирование, веб-фреймворки и другое. Примеры и особенности.

5 месяцев назад

~5 минут

Что такое .NET и для чего используется?

Платформа .NET от Microsoft для создания веб-приложений, игр, облачных решений и IoT. Преимущества, поддерживаемые языки программирования, примеры использования.

5 месяцев назад

~5 минут