HTML и CSS с нуля — с чего начать обучение в 2026
В 2026 году научиться вёрстке может любой человек с компьютером и интернетом. HTML и CSS — не программирование в классическом смысле, это разметка и оформление. Порог входа минимален, результат виден сразу: вы пишете код — и через секунду видите, как меняется страница. По данным hh.ru, средняя зарплата верстальщика в России в 2026 — 80-120 тыс. рублей, а middle-специалисты получают до 180-250 тыс. Вот полный план обучения с нуля.
Неделя 1-2: HTML — фундамент веб-страницы
HTML (HyperText Markup Language) — язык разметки, на котором строится любая веб-страница. Это просто набор тегов, описывающих структуру документа.
Основные теги
| Тег | Назначение |
|---|---|
| <h1> — <h6> | Заголовки (только один h1 на странице) |
| <p> | Абзац текста |
| <a> | Ссылка (href — куда ведёт, target="_blank" — в новом окне) |
| <img> | Изображение (src — путь, alt — описание) |
| <ul> / <ol> / <li> | Маркированные и нумерованные списки |
| <div> / <span> | Блочный и строчный контейнеры |
| <table> / <tr> / <td> / <th> | Таблицы (только для данных) |
| <form> / <input> / <button> | Формы |
Семантическая разметка
Современный HTML — не только <div>. Семантические теги нужны для доступности (screen readers) и SEO:
<header> — шапка сайта <nav> — навигация <main> — основной контент (один на странице) <section> — логическая секция <article> — самодостаточный контент (пост, новость, карточка) <aside> — боковая панель <footer> — подвал
Формы
Полный разбор: input (text, email, tel, number, password, date, file, checkbox, radio), select + option, textarea, label, fieldset + legend, button (type: submit/reset/button). Формы — способ взаимодействия с пользователем, их обязательно нужно уметь верстать.
Доступность (a11y)
alt — обязательно для всех img. role — уточняет роль элемента. aria-label — подпись для интерактивных элементов. Это не опция, а требование современного веба. Google штрафует сайты с плохой доступностью.
Практика за 2 недели
— Страница «О себе»: хедер, фото, биография, навыки, ссылки, форма обратной связи
— Визитка компании: логотип, описание, услуги, контакты
— Простой блог: список статей с заголовками, датами, превью
Неделя 3-4: CSS — превращаем скелет в дизайн
CSS (Cascading Style Sheets) отвечает за внешний вид: цвета, шрифты, отступы, расположение, анимации.
Ключевые концепты
1. Селекторы:
.class — по классу #id — по id (используйте редко) element — по тегу (div, p, a) div > p — прямой ребёнок div p — вложенный любой глубины :hover — при наведении :nth-child(2) — второй по счёту
2. Специфичность и каскад. Приоритет: inline-стили > #id > .class > тег. Понимание специфичности спасает от проблем «стиль не применяется». specificity.keegan.st — калькулятор.
3. Box Model. Каждый элемент — прямоугольник: content > padding > border > margin. Используйте box-sizing: border-box — тогда padding не увеличивает общий размер.
4. Позиционирование: static, relative, absolute (привязка к relative-родителю), fixed (относительно окна), sticky (прилипание при скролле).
5. Flexbox — база. display: flex, flex-direction, justify-content, align-items, flex-wrap, gap. Сделайте 10 макетов на Flexbox.
6. Типографика: font-family, font-size, font-weight, line-height (межстрочный интервал), letter-spacing, text-decoration, text-align. Подключение шрифтов через Google Fonts и @font-face.
Практика за 2 недели
— Оформить страницу «О себе»: шрифты, цвета, шапка, карточки навыков, адаптивная форма
— Повторить дизайн любой секции известного сайта (например, карточки Netflix)
Неделя 5-6: Продвинутый CSS
1. CSS Grid. Двумерная раскладка. grid-template-columns, grid-area, auto-fit, minmax. Сверстайте галерею, страницу с сайдбаром.
2. Анимации и transitions. transition — плавное изменение (0.3s ease — золотой стандарт). @keyframes — сложные анимации:
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
3. Custom Properties (CSS-переменные):
:root {
--primary: #2563eb;
--text: #1e293b;
--bg: #ffffff;
--radius: 12px;
}
[data-theme="dark"] {
--primary: #60a5fa;
--text: #f1f5f9;
--bg: #0f172a;
}
4. Clamp, min, max — резиновая типографика без медиа-запросов.
5. Псевдоэлементы ::before, ::after — для иконок, градиентных границ, кастомных элементов. filter (blur, brightness), clip-path.
Практика за 2 недели
— Карточка товара с анимацией при наведении
— Тёмная тема через data-атрибут
— Секция «Преимущества» с анимацией при скролле
— Адаптивная навигация с бургер-меню
Неделя 7-8: Первый проект + публикация
Теперь у вас есть все знания для полноценного проекта. Сверстайте лендинг из 4-6 блоков:
— Шапка с логотипом, навигацией, кнопкой CTA
— Hero-секция с заголовком, подзаголовком и фоновым изображением
— Блок преимуществ (3-6 карточек с иконками)
— Портфолио / работы (сетка изображений)
— Форма захвата (имя, email, телефон, сообщение)
— Подвал (контакты, соцсети, копирайт)
Публикация на GitHub Pages:
git init git add . git commit -m "Первый сайт" git remote add origin https://github.com/username/username.github.io.git git push -u origin main
Через 5 минут сайт будет доступен по адресу username.github.io. Ссылку можно отправить заказчику или добавить в портфолио.
Ресурсы для обучения
| Ресурс | Что даёт | Язык |
|---|---|---|
| HTML Academy | Интерактивные тренажёры, курс "Профессия верстальщик" | Русский |
| learn.javascript.ru | Бесплатный учебник по CSS и JS | Русский |
| freeCodeCamp.org | 300 часов бесплатных упражнений, сертификат | Английский |
| MDN Web Docs | Полная документация, справочник по всем свойствам | Русский/Английский |
| YouTube: Владилен Минин | Курсы по HTML/CSS/JS, понятным языком | Русский |
| YouTube: WebDev Simplified | Короткие ролики по конкретным темам | Английский |
| Codepen | Песочница, миллионы примеров кода | — |
Инструменты, которые нужно освоить
VS Code. Установите расширения: Live Server (автообновление при сохранении), Prettier (форматирование), ESLint, CSS Peek, Auto Rename Tag.
Chrome DevTools. F12 → Elements (стили в реальном времени), Console (ошибки), Network (скорость загрузки), Lighthouse (аудит). DevTools — второй дом верстальщика.
Figma. Научитесь смотреть макеты, выгружать размеры, цвета, отступы, экспортировать изображения. Figma — стандарт для дизайн-макетов.
Git и GitHub. Базовые команды: init, add, commit, push, pull. Git — обязательно для любой работы в команде.
Как AI ускоряет обучение
В 2026 AI-помощники (DeepSeek, Claude, GPT-5) стали незаменимыми в обучении:
— «Напиши CSS для карточки товара с тенью и скруглениями» — AI сгенерирует код за секунду
— «Почему не работает этот flex?» — AI объяснит ошибку
— «Оптимизируй этот CSS» — AI предложит лучшую версию
— «Сделай из этого HTML адаптивную версию» — AI перепишет код
Но важно: не копируйте код AI слепо. Разбирайте каждую строчку, меняйте параметры, смотрите на результат. AI — тренажёр, а не замена обучению.
Первые заказы: где искать и сколько брать
Где искать:
— fl.ru, freelance.habr.com, freelance.ru, kwork.ru — классические биржи
— Телеграм-каналы: «Верстальщики», «Freelance HTML/CSS», «Веб-фриланс»
— Сарафанное радио: расскажите друзьям, знакомым, в соцсетях
— Авито: разместите объявление «Верстаю сайты от 5000 ₽»
Сколько брать:
| Тип работы | Новичок | После 3-6 мес |
|---|---|---|
| Лендинг (1 страница) | 5 000-10 000 ₽ | 15 000-30 000 ₽ |
| Многостраничный сайт (3-5 стр) | 10 000-20 000 ₽ | 30 000-60 000 ₽ |
| Правки в вёрстке | 1 000-3 000 ₽ | 3 000-5 000 ₽ |
| Вёрстка страницы по Figma | 3 000-5 000 ₽ | 5 000-10 000 ₽ |
Как общаться с заказчиком:
— Всегда запрашивайте ТЗ и референсы (ссылки на сайты, которые нравятся)
— Обсуждайте сроки реально: лендинг 3-5 дней, многостраничник 1-2 недели
— Делайте этапы: сначала 1-2 страницы на утверждение, потом остальные
— Используйте договор (хотя бы в переписке) — фиксируйте объём и цену
Типичные ошибки новичков
— Пропуск семантики: весь сайт в <div> без header/main/footer. Исправляется знанием HTML5.
— Фиксированная ширина в px: контейнер 1200px не вмещается на 1024px экране. Используйте max-width + padding.
— Нет адаптива: сайт разваливается на мобильных. Делайте mobile-first.
— Слишком много медиа-запросов: 20 брейкпоинтов на страницу. Используйте flex/grid + clamp.
— Копирование кода без понимания: взяли готовый код, не работает — не знаете почему. Разбирайте каждую строчку.
— Игнорирование DevTools: не умеете смотреть стили, не видите, почему элемент не там. DevTools — главный инструмент.
Сколько зарабатывают верстальщики в 2026
| Уровень | Стаж | Зарплата (₽/мес) | Проекты |
|---|---|---|---|
| Новичок (Junior) | 0-6 мес | 30 000-60 000 | Простые лендинги, правки |
| Средний (Middle) | 6 мес — 2 года | 80 000-150 000 | Адаптивные сайты, интернет-магазины |
| Продвинутый (Senior) | 2+ года | 150 000-250 000 | Сложные проекты, анимации, фреймворки |
| Team Lead / Арт-директор | 4+ года | 250 000-400 000 | Управление командой, архитектура |
Фрилансеры обычно зарабатывают на 20-30% больше, но без соцпакета и с нестабильной загрузкой.
Roadmap: от новичка до middle
Месяц 1-2: HTML (+ семантика, формы, доступность), CSS (селекторы, box model, flexbox, типографика, цвета). Проект: страница «О себе».
Месяц 3-4: CSS Grid, адаптив (clamp, media queries), позиционирование, custom properties, Figma, Git. Проект: лендинг компании.
Месяц 5-6: Анимации (transitions, keyframes), препроцессоры (SCSS), сборка (Vite), оптимизация (Core Web Vitals), базовый JS (для бургер-меню, табов, аккордеона). Проект: интернет-магазин на Grid/Flex.
Месяц 7-12: JavaScript (основы: DOM, fetch, события), React или Vue, TypeScript (база), работа с API, тестирование. Проект: SPA-приложение (каталог товаров, TODO-list).
После года: Углубление в JS/TS, Next.js/Nuxt, бэкенд (Node.js, базы данных), DevOps (Docker, CI/CD), архитектура проектов.
В 2026 старт в вёрстке — это 2 недели до первой страницы, месяц до первого лендинга, 3 месяца до первого заказа. Бесплатные ресурсы + AI-помощники покрывают всё, что нужно для начала. Главное — не читать, а делать. Открывайте редактор прямо сейчас и пишите первую HTML-страницу.