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. Ниже собрали таблицу с основными отличиями и комментариями.

ВерсияГод выпускаЧто появилосьКомментарий
CSS11996 (откорректирована в 1999)Цвета, шрифты, отступы, выравниваниеCSS1 был сильно ограничен: без позиционирования, медиазапросов, анимаций, flexbox и grid, почти без интерактивности и с минимальной поддержкой в браузерах, полной багов
CSS21998Таблицы, позиционирование, z-index, медиатипыВ CSS2 не было медиазапросов, flexbox, grid, анимаций, переходов и современных возможностей адаптивной верстки
CSS2.12004Исправления и уточнения 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). Они ускоряют работу, но только когда ты понимаешь, что они делают под капотом (внутри технологии).
Присоединяйтесь к сообществу Хекслет

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

Перейти в сообщество
Валерия Белякова
23 дня назад
2
~5 минут
Cover for Что такое Haskell и для чего он используется?
Что такое Haskell и для чего он используется?

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

4 месяца назад
7
~5 минут
Cover for Что такое .NET и для чего используется?
Что такое .NET и для чего используется?

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

4 месяца назад
4
~5 минут