Основы HTML и CSS для новичка: с чего начать

Приветствую вас, друзья! Сегодня поговорим о фундаменте, на котором стоит любой сайт в интернете, — о HTML и CSS. Даже если вы делаете сайты на конструкторе или WordPress и не собираетесь становиться программистом, базовое понимание этих языков очень полезно. Вы сможете поправить отступ, который «никак не настраивается» в визуальном редакторе, разобраться, почему поехала вёрстка, и спокойно разговаривать с разработчиками на одном языке.

А если вы задумываетесь о профессии верстальщика или веб-разработчика, то HTML и CSS — это первая ступенька. В этой статье я расскажу, что это за языки, какие основы изучить в первую очередь и как выстроить обучение, чтобы не бросить через неделю.

Что такое HTML и CSS простыми словами

HTML — это язык разметки. Он описывает структуру страницы: где заголовок, где абзац, где список, где картинка и ссылка. HTML отвечает на вопрос «что находится на странице».

CSS — это язык стилей. Он отвечает на вопрос «как это выглядит»: цвета, шрифты, размеры, отступы, расположение блоков, адаптация под разные экраны.

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

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

Что понадобится для старта

Хорошая новость — никаких дорогих программ и мощных компьютеров не нужно. Для начала хватит:

• Редактор кода. Самый популярный бесплатный вариант — Visual Studio Code. Он подсвечивает синтаксис, подсказывает теги и свойства, у него множество полезных расширений.
• Браузер с инструментами разработчика — например, Chrome или Firefox. Открываются клавишей F12 и позволяют смотреть код любой страницы и менять стили «на лету».
• Расширение для живого просмотра. Например, Live Server для VS Code: страница автоматически обновляется при сохранении файла.
• Справочник. Удобно держать под рукой документацию MDN — там есть описания всех тегов и свойств с примерами, в том числе на русском языке.

Создайте на компьютере папку для учебных проектов, внутри — файл index.html и файл style.css. Всё, рабочее место готово.

Базовый HTML: что выучить в первую очередь

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

Структура документа

Любая страница начинается с объявления типа документа и содержит корневой тег html, внутри которого два раздела: head (служебная информация — кодировка, заголовок вкладки, подключение стилей) и body (всё, что видит пользователь). Эту заготовку редактор создаст за вас по короткой команде.

Основные теги контента

• Заголовки h1–h6 — иерархия заголовков. На странице один h1, дальше вложенные подзаголовки.
• p — абзац текста.
• a — ссылка, адрес указывается в атрибуте href.
• img — изображение с обязательным атрибутом alt для описания картинки.
• ul, ol, li — маркированные и нумерованные списки.
• strong, em — смысловое выделение текста.
• div и span — универсальные контейнеры для группировки.
• form, input, button — формы и элементы ввода.

Семантическая разметка

Обязательно познакомьтесь с семантическими тегами: header, nav, main, section, article, aside, footer. Они подсказывают браузеру, поисковикам и программам экранного доступа, какую роль играет каждая часть страницы. Семантика — признак грамотной вёрстки и небольшой плюс для SEO.

Базовый CSS: ключевые понятия

CSS-правило состоит из селектора (к чему применяем) и набора свойств со значениями (что меняем). Например, можно сказать: «у всех абзацев размер шрифта 18 пикселей и тёмно-серый цвет». Разберём самое важное.

Селекторы

Начните с трёх основных: по тегу (все абзацы), по классу (элементы с определённым классом, записывается через точку) и по идентификатору (уникальный элемент, через решётку). На практике чаще всего используются классы — они гибкие и переиспользуемые.

Блочная модель

Это, пожалуй, самое важное понятие CSS. Каждый элемент на странице — прямоугольник, состоящий из содержимого, внутреннего отступа (padding), рамки (border) и внешнего отступа (margin). Когда вы поймёте блочную модель, 80% проблем с «поехавшими» отступами исчезнет. Совет: сразу задавайте всем элементам свойство box-sizing со значением border-box — так размеры будут считаться предсказуемо.

Расположение блоков: Flexbox и Grid

Раньше разместить блоки в ряд было настоящим испытанием. Сегодня для этого есть Flexbox — инструмент для выстраивания элементов в строку или столбец с удобным выравниванием. Для сложных сеток есть CSS Grid. Начните с Flexbox: он решает большинство повседневных задач, от меню до карточек товаров.

Адаптивность

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

План обучения: от нуля до первой свёрстанной страницы

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

1. Неделя первая. Структура HTML-документа, основные теги, ссылки, списки, изображения. Сверстайте простую страницу «о себе» без стилей.
2. Неделя вторая. Подключение CSS, селекторы, цвета, шрифты, блочная модель. Оформите свою страницу «о себе».
3. Неделя третья. Flexbox. Сделайте шапку с логотипом и меню, блок из трёх карточек в ряд.
4. Неделя четвёртая. Медиазапросы и адаптивность. Сделайте так, чтобы карточки на телефоне выстраивались в столбик.
5. Дальше. Верстайте готовые макеты. Возьмите простой бесплатный макет лендинга и повторите его максимально точно. Затем — сложнее.

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

Не менее важно учиться регулярно. Лучше по 40 минут каждый день, чем по пять часов раз в неделю. Если вам сложно доводить обучение до конца, загляните в статью о том, как учиться онлайн эффективно — там много приёмов, которые помогают не бросить на полпути.

Частые ошибки новичков

• Вёрстка таблицами или бесконечными div. Используйте семантические теги там, где это уместно.
• Стили прямо в HTML. Выносите всё оформление в отдельный CSS-файл — так код проще поддерживать.
• Фиксированные размеры в пикселях везде. Для адаптивности используйте проценты, относительные единицы и гибкие контейнеры.
• Непонятные названия классов. Класс «block1» ничего не говорит, а «card-title» — сразу понятен.
• Страх ошибок. Сломать что-то в учебном проекте невозможно. Экспериментируйте смело.

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

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

А ещё базовая вёрстка — это вполне реальный навык для первых заказов. Небольшие правки на сайтах, вёрстка писем и простых лендингов востребованы постоянно. Как превратить навыки в доход, я рассказываю в статье о заработке на создании сайтов. Начните с простой страницы о себе уже сегодня — первый свёрстанный своими руками блок дарит удивительно приятное чувство. Удачи вам в обучении!