HTML с нуля до профи

30 уроков · Вёрстка сайтов на HTML и CSS с нуля до профессии — 30 уроков

1
Что такое HTML и как работает веб-страница
Как браузер показывает страницу, теги и первый HTML-файл.
2
Структура HTML-документа
doctype, html, head, body и базовый каркас страницы.
3
Текст: заголовки, абзацы и форматирование
Заголовки h1-h6, абзацы, перенос, выделение текста.
4
Списки: маркированные, нумерованные и описаний
Теги ul, ol, dl и вложенные списки.
5
Ссылки и навигация по сайту
Тег a, абсолютные и относительные ссылки, якоря.
6
Изображения и медиа
Тег img, атрибуты alt, аудио и видео.
7
Таблицы
table, tr, td, th, объединение ячеек.
8
Формы и элементы ввода
form, input, label, button и типы полей.
9
Что такое CSS и как его подключить
Зачем нужен CSS и три способа его подключить.
10
Селекторы CSS
Селекторы по тегу, классу, id и комбинации.
11
Цвет, фон и единицы измерения
Цвета, фон, px, em, rem, проценты.
12
Текст и шрифты в CSS
Шрифты, размер, выравнивание и оформление текста.
13
Блочная модель (box model)
content, padding, border, margin — из чего состоит блок.
14
Отступы, границы и размеры
Управление отступами, рамками и размерами элементов.
15
Display и поток документа
block, inline, inline-block и нормальный поток.
16
Position: позиционирование элементов
static, relative, absolute, fixed, sticky и z-index.
17
Псевдоклассы и псевдоэлементы
hover, focus, nth-child, ::before и ::after.
18
Flexbox: гибкие контейнеры
Выравнивание и распределение элементов через flex.
19
CSS Grid: сеточная вёрстка
Двумерные сетки: строки, колонки и области.
20
Адаптивность и медиазапросы
Медиазапросы и резиновая вёрстка под любой экран.
21
Mobile-first: сначала телефон
Подход «сначала мобильные» и почему он удобнее.
22
Переходы и анимации
Плавные переходы, transform и keyframes-анимации.
23
CSS-переменные и организация стилей
Переменные --var, повторное использование стилей.
24
Семантика и доступность
Семантические теги и базовая доступность сайта.
25
Иконки, шрифты и внешние ресурсы
Подключение иконок, веб-шрифтов и сторонних ресурсов.
26
Собираем лендинг с нуля
Собираем одностраничный сайт от шапки до подвала.
27
Формы: валидация и стилизация
Проверка форм, состояния полей и красивое оформление.
28
БЭМ и поддерживаемый CSS
Методология БЭМ и масштабируемые стили.
29
Препроцессоры и инструменты (обзор Sass)
Что дают препроцессоры, обзор Sass и инструментов.
30
Финальный проект: многостраничный сайт
Многостраничный сайт от макета до публикации и рост.
Зарегистрируйтесь, чтобы покупать уроки и отслеживать прогресс.

Об онлайн-курсе «HTML и CSS: вёрстка сайтов с нуля до профессионала»

HTML и CSS: вёрстка сайтов с нуля до профессионала — это практический онлайн-курс из 30 уроков с нуля до профессионального уровня. Вёрстка сайтов на HTML и CSS с нуля до профессии — 30 уроков. Обучение построено на практике: каждый урок включает чёткую цель, краткую теорию, пошаговую практику, домашнее задание и проверяемый результат. Формат — текстовый, без воды: только то, что нужно для результата, без многочасовых видео и лишних разговоров. Учитесь в своём темпе, с компьютера или телефона, с доступом к материалам навсегда и оплатой по урокам — всего 500₽ за урок или 13500₽ за весь курс.

Преимущества курса — информация без воды

Только суть, без воды
Каждый урок: цель → теория → практика → домашка → результат. Ничего лишнего и затянутого — экономим ваше время.
Мгновенный поиск нужного
Текст листается глазами и ищется по Ctrl+F за секунды. В видео ради одной мысли пришлось бы перематывать часами.
Код и промпты можно скопировать
Команды, код и промпты копируются одним кликом — не нужно ставить на паузу и перепечатывать с экрана.
Домашка в каждом уроке
Вы получаете навык и результат, а не просто просмотр. Учитесь, делая, — а не глядя.
Оплата по урокам
Платите только за нужное — 500₽ за урок, без «пакета» с лишними часами. Весь курс — со скидкой.
Актуально на 2026 год
Современные нейросети и инструменты. Текст легко обновлять — материал всегда свежий, без устаревших экранов.
В своём темпе и с любого устройства
Доступ навсегда, с компьютера и телефона, без привязки к видеоплееру, звуку и наушникам.
С нуля до профессии
Понятно новичку без опыта: сложное объясняется простыми словами, шаг за шагом до уверенного уровня.

Минусы обычных онлайн-видеокурсов

Почему мы сделали курс текстовым, а не видео — и что вы теряете на видеокурсах:

Вода и затянутость
В часе видео часто 10 минут пользы. «Пролистать глазами» нельзя — приходится слушать всё подряд.
Трудно искать нужное
Чтобы найти один момент, перематываешь всё видео. Нет поиска по тексту и быстрого возврата к нужному месту.
Нельзя скопировать с экрана
Код, команды и настройки приходится ставить на паузу и перепечатывать вручную — с опечатками и ошибками.
Быстро устаревают
Переснять видео дорого, поэтому интерфейсы и инструменты на экране часто уже не те, что в реальности.
Чужой темп
Диктор тянет то, что вам понятно, и проскакивает сложное. Подстроиться под себя почти невозможно.
Требуют времени и внимания целиком
Нужны звук, наушники и сосредоточенность — не позанимаешься урывками в дороге или в тишине.
Пакетная оплата за лишнее
Платишь за десятки часов, из которых реально смотришь треть. Нельзя купить только нужный урок.
Пассивный просмотр ≠ умение
Посмотреть видео легко, но без практики и домашних заданий навык не формируется.

Поэтому курс «HTML с нуля до профи» сделан в текстовом формате — быстро, по делу и без воды.