Курс
HTML и CSS с нуля
Двадцать пять уроков от «что такое тег» до готового лендинга. Каждый урок — теория простым языком, живой пример, разбор ошибок, тест и практика с автопроверкой.
25 уроков · 370 минут чтения · С нуля, без опыта
Первая страница
За пять уроков ты сделаешь настоящую страницу и откроешь её в браузере: текст, ссылки, картинки — всё своими руками.
Как устроен веб и что такое HTML
Откуда берётся страница в браузере, почему она — обычный файл на диске и как написать свою первую строчку…
Скелет документа: что должно быть в каждом файле
Пять строк, которые пишут в начале любой страницы: зачем нужен doctype, откуда берутся «кракозябры» и что…
Текст: заголовки, абзацы и списки
Как разложить текст по полочкам: иерархия заголовков, смысловые выделения, нумерованные и маркированные…
Ссылки: как связать страницы между собой
Тег a, абсолютные и относительные пути, якоря внутри страницы, ссылки на почту и телефон — и первое настоящее…
Картинки и медиа
Тег img и обязательный alt, подписи через figure, форматы и вес файлов, адаптивные картинки, видео и звук.
Смысл и структура
Разметка перестаёт быть набором тегов и становится осмысленным документом: семантика, таблицы, формы, доступность.
Семантические теги: разметка со смыслом
header, nav, main, section, article, aside, footer — и почему div стоит держать на последнем месте.
Таблицы: когда они уместны
Как устроена таблица, зачем нужны thead, caption и scope, как объединять ячейки — и почему вёрстку таблицами…
Формы: как сайт спрашивает
Поля всех типов, подписи через label, встроенная проверка, группировка через fieldset — и почему placeholder…
Атрибуты, id и class: наводим порядок
Как устроены атрибуты, чем id отличается от class, зачем нужны data-атрибуты и как проверить разметку…
Доступность: сайт для всех
Навигация с клавиатуры, видимый фокус, контраст, alt и порядок заголовков, skip-link и первые aria-атрибуты.
Знакомство с CSS
Подключаем стили, учимся выбирать элементы, разбираемся, почему «стиль не работает», и наводим порядок в цветах и шрифтах.
Что такое CSS и как его подключить
Три способа подключения и почему выбирают внешний файл, из чего состоит правило, и как смотреть стили в…
Селекторы: как выбрать нужный элемент
По тегу, классу и id, комбинации, потомки и соседи, атрибуты, псевдоклассы и псевдоэлементы.
Каскад: почему стиль «не работает»
Как браузер выбирает между спорящими правилами: важность, вес селектора, порядок. Плюс наследование и честное…
Цвета, единицы и переменные
HEX, RGB и HSL, прозрачность, чем rem отличается от px и em, и как собрать палитру на переменных, чтобы тема…
Шрифты и типографика
Стек фолбэков, подключение Google Fonts с кириллицей, размеры и насыщенность, межстрочный интервал и длина…
Коробки и раскладка
Главная часть CSS: из чего сделан любой элемент, как он занимает место и как расставить блоки там, где нужно.
Блочная модель: из чего сделана каждая коробка
Почему элемент занимает больше места, чем ты задал, и как починить это одной строкой box-sizing.
Поток документа и display
Почему одни элементы занимают всю строку, а другие стоят рядом, что делает inline-block и чем display: none…
Позиционирование: выходим из потока
static, relative, absolute, fixed и sticky: от чего считаются координаты, как работает z-index и что такое…
Фоны, рамки, тени и градиенты
Как из плоских прямоугольников сделать что-то приятное глазу: background целиком, скругления, мягкие тени…
Flexbox: раскладка вдоль оси
Одна строка превращает контейнер в гибкий ряд: выравнивание, распределение места, переносы и знаменитое flex…
Живой современный сайт
Сетки, адаптивность, анимации и 3D. В конце — полноценный лендинг, собранный с нуля и выложенный в интернет.
CSS Grid: настоящая сетка
Колонки и строки сразу, единица fr, repeat и minmax, именованные области — и раскладка страницы, которую…
Адаптивность: один сайт для всех экранов
Мета-viewport, подход mobile-first, медиазапросы по ширине и по предпочтениям человека, clamp() и container…
Переходы и анимации
transition и transform, кривые ускорения, @keyframes — и главное правило: анимировать дёшево можно только две…
3D и эффекты
perspective и preserve-3d, повороты по осям, filter и backdrop-filter, режимы наложения и появление блоков…
Финальный проект: лендинг с нуля
От макета к коду: порядок работы, структура файлов, именование классов, проверка по чек-листу и публикация на…