Программирование и IT

Как изучить HTML и CSS с нуля

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

Обновлено
В этой статье

Инструменты: браузер и редактор#

Ничего, кроме браузера и редактора кода, не понадобится. VS Code с
расширением для живого просмотра подойдёт. Главный инструмент отладки —
панель разработчика в браузере (F12): в ней видно дерево элементов,
применённые стили и размеры каждого блока. Привыкай открывать её при
любой странной картинке на экране.

Минимальный документ выглядит так:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Моя первая страница</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Привет</h1>
  <p>Это абзац со <a href="https://developer.mozilla.org/">ссылкой</a>.</p>
</body>
</html>

Шаг 1: семантический HTML (2–3 недели)#

Заголовки h1–h6, абзацы, списки, ссылки, изображения с атрибутом
alt, таблицы, формы с label для каждого поля. Затем — смысловые
контейнеры: header, nav, main, article, section, footer.
Правило: тег выбирают по смыслу содержимого, а не по тому, как он выглядит
по умолчанию. Кнопка — это button, а не div с обработчиком: её можно
нажать с клавиатуры, и её понимают программы экранного чтения.

Проверяй разметку валидатором W3C — он показывает незакрытые теги и
ошибки вложенности.

Шаг 2: основы CSS (3–4 недели)#

Селекторы (по тегу, классу, идентификатору, атрибуту, псевдоклассы вроде
:hover), каскад и специфичность, наследование. Блочная модель: content,
padding, border, margin, свойство box-sizing. Единицы px, rem,
%, vw. Цвета, шрифты, фон. Большая часть «почему блок не туда
уехал» объясняется блочной моделью — разбери её до конца.

Шаг 3: раскладка — Flexbox и Grid (3–4 недели)#

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

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

Шаг 4: адаптивность и доступность#

Медиазапросы @media, подход «сначала мобильная версия», гибкие
изображения. Проверь страницу на ширине 320 пикселей: ничего не должно
вылезать за край. Доступность — контраст текста, видимый фокус, порядок
заголовков, подписи к полям форм. Встроенный в браузер аудит (например,
Lighthouse в Chrome) подскажет основные проблемы.

Портфолио верстальщика#

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

Как понять, что вёрстка получилась#

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

План по этапам

  1. Недели 1–3 — HTMLСтруктура документа, текст, ссылки, изображения, таблицы, формы, семантические теги.
  2. Недели 4–7 — основы CSSСелекторы, специфичность, блочная модель, единицы, шрифты и цвета.
  3. Недели 8–11 — Flexbox и GridПовторить раскладку знакомых интерфейсов: меню, карточки, подвал.
  4. Недели 12–13 — адаптивность и доступностьМедиазапросы, мобильная версия, контраст, фокус, аудит страницы.
  5. ПортфолиоТри-четыре страницы по макетам в репозиториях с опубликованной версией.

Начать изучать эту тему у себя

План ляжет в твой репозиторий: отмечай этапы, веди конспект — история изменений покажет, как ты продвинулся.

Начать план

Проверь себя

1.Какой тег HTML создаёт ссылку?

2.У блока width: 100px, padding: 10px и border: 2px со всех сторон, box-sizing по умолчанию (content-box). Какова его полная ширина на экране в пикселях без учёта margin?

3.Какой из селекторов имеет наибольшую специфичность?

Источники

  • MDN Web DocsСправочник и учебные материалы по HTML и CSS, есть русский перевод
    бесплатно
  • Валидатор W3CПроверка HTML-разметки на ошибки
    бесплатно
  • HTML AcademyИнтерактивные тренажёры по вёрстке; часть бесплатно, программы платные
    бесплатно

Было полезно?

Ещё темы

Программирование и IT Как изучить Python с нуля Python хорош для первого знакомства с программированием: код читается почти как текст, а стандартная библиотека закрывает большинство бытовых задач. Этот план ведёт от установки интерпретатора до собственных скриптов, покрытых тестами, — примерно за четыре месяца при занятиях около часа в день. Программирование и IT Как изучить SQL с нуля SQL — язык запросов к реляционным базам данных. Он нужен разработчикам, аналитикам, тестировщикам и менеджерам, которые хотят сами доставать цифры. Базовые запросы осваиваются за несколько недель, уверенная работа со сложными отчётами — за два-три месяца практики. Ниже — порядок тем и способы тренироваться на настоящей базе. Программирование и IT Как изучить Linux с нуля Linux работает на большинстве серверов, в контейнерах и на множестве устройств, поэтому командная строка нужна разработчику, тестировщику, аналитику и системному администратору. Осваивать систему удобнее всего не чтением списков команд, а ежедневной работой в терминале и решением небольших практических задач. Ниже — последовательность тем на два-три месяца. Программирование и IT Как изучить JavaScript с нуля JavaScript — язык, который исполняется в каждом браузере, а через Node.js ещё и на сервере. У него низкий порог входа — код можно запустить прямо в консоли браузера, — но много неочевидных мест, от приведения типов до асинхронности. План ниже рассчитан на три-четыре месяца и предполагает, что ты уже знаешь основы HTML и CSS или изучаешь их параллельно. Программирование и IT Как изучить Java с нуля Java — строго типизированный язык, на котором написаны банковские системы, серверы крупных сервисов и Android-приложения. Строгость поначалу замедляет, зато компилятор ловит многие ошибки до запуска. Этот план рассчитан примерно на полгода занятий по часу в день и ведёт от первой программы до небольшого серверного приложения. Программирование и IT Как изучить машинное обучение с нуля Машинное обучение — это построение моделей, которые находят закономерности в данных и делают по ним прогнозы. Начинать с нейросетей соблазнительно, но надёжнее идти снизу — от Python и математики к классическим алгоритмам, честной оценке качества и только потом к глубокому обучению. Ориентир для человека без технической базы — от полугода до года регулярных занятий.

Ещё сценарии

Личная база знаний Личная база знаний — это не архив всего прочитанного, а набор твоих собственных записей, связанных между собой, к которым ты возвращаешься. Разберём, как её устроить, чтобы она работала, а не превратилась в свалку ссылок. СДО для сотрудников Классическая СДО — это курсы, назначения, отчёты и сертификаты. Skillok закрывает часть этих задач иначе — через репозиторий материалов, задачи-назначения и курсы с автопроверкой. Если тебе нужны отчёты по каждому сотруднику и совместимость со SCORM — честно скажем сразу, этого нет. Приложение для конспектов Хороший конспект нужно не только написать, но и перечитывать, дополнять и находить через год. Для этого подходят обычные markdown-файлы с формулами и схемами, разложенные по предметам и хранящие историю правок. Вот как вести конспекты у нас.