ПопулярныйПуть
Изучайте HTML
Бесплатный интерактивный онлайн-курс по HTML. Вы пишете HTML на каждом уроке — теги, атрибуты, формы, ссылки, изображения и структуру настоящей веб-страницы — с живым предпросмотром прямо во время набора и бесплатным сертификатом по завершении.
256,507+ codders записались
- Для начинающих
Помощь ИИ при написании кода
Практические интерактивные уроки
Аудио-озвучка к каждому уроку
Тесты для проверки знаний
Бесплатный сертификат о прохождении
Программа
Раздел 1
Fundamentals
Начать разделНачатьРазвернутьСвернутьLearn the core structure and syntax to create web pages from scratchОсновы HTML
5 уроков531- 01Что такое HTML?Задача
- 02Базовая структура HTMLЗадачаКвиз
- 03Теги и элементыЗадачаКвиз
- 04Вложенность и закрывающие тегиЗадачаКвиз
- 05Комментарии в HTMLЗадачаКвиз
Текст и форматирование
6 уроков1135- 01ЗаголовкиЗадачаМастерствоКвиз
- 02АбзацыЗадачаМастерствоКвиз
- 03Переносы строкЗадачаМастерствоКвиз
- 04Жирный и курсивный текстЗадачаМастерствоКвиз
- 05Снова жирный и курсивныйЗадачаМастерствоКвиз
- 06Повторение — форматированиеЗадача
Работа со списками
4 уроков721- 01Маркированный списокЗадачаМастерствоКвиз
- 02Нумерованный списокЗадачаМастерствоКвиз
- 03Вложенные спискиЗадачаМастерствоКвиз
- 04Повторение — СпискиЗадача
Карточка рецепта
Проект4 уроков1- 01Обзор проектаЗадача
- 02Название и описание рецептаПроект
- 03ИнгредиентыПроект
- 04ШагиПроект
Добавление контента
5 уроков837- 01Атрибуты HTMLКвиз
- 02СсылкиЗадачаМастерствоКвиз
- 03Ссылки на новую страницуЗадачаМастерствоКвиз
- 04ИзображенияЗадачаМастерствоКвиз
- 05Атрибуты изображенийЗадачаМастерствоКвиз
Макет страницы
5 уроков930- 01Элементы DivЗадачаМастерствоКвиз
- 02Строчные элементы SpanЗадачаМастерствоКвиз
- 03Семантические тегиЗадачаМастерствоКвиз
- 04Секции и статьиЗадачаМастерствоКвиз
- 05Повторение: МакетЗадача
Страница личного профиля
Проект5 уроков1- 01Обзор проектаЗадача
- 02Секция HeaderПроект
- 03Фото профиляПроект
- 04Секция «Обо мне»Проект
- 05Ссылки на социальные сетиПроект
Формы и поля ввода, часть 1
6 уроков936- 01Основы формКвиз
- 02Текстовые поля вводаЗадачаМастерствоКвиз
- 03Атрибуты полей вводаЗадачаМастерствоКвиз
- 04Поле для пароляЗадачаМастерствоКвиз
- 05Метки для полей вводаЗадачаМастерствоКвиз
- 06Повторение — основы формЗадача
Формы и элементы ввода. Часть 2
7 уроков1239- 01РадиокнопкиЗадачаМастерствоКвиз
- 02ЧекбоксыЗадачаМастерствоКвиз
- 03Выпадающие спискиЗадачаМастерствоКвиз
- 04КнопкиЗадачаМастерствоКвиз
- 05Кнопки в формахЗадачаМастерствоКвиз
- 06Повторение — Формы №1Задача
- 07Повторение — Формы №2Задача
Таблицы
4 уроков723- 01Основы таблицЗадачаМастерствоКвиз
- 02Добавление заголовковЗадачаМастерствоКвиз
- 03Объединение строк и столбцовЗадачаМастерствоКвиз
- 04Итоги: ТаблицыЗадача
Страница регистрации на мероприятие
Проект5 уроков1- 01Обзор проектаЗадача
- 02Секция HeaderПроект
- 03Секция деталей мероприятияПроект
- 04Форма регистрацииПроект
- 05Секция FooterПроект
Финальные испытания
4 уроков4- 01Простая карточка профиляЗадача
- 02Карточка приглашения на мероприятиеЗадача
- 03Простая страница статьиЗадача
- 04Список любимых книгЗадача
Раздел 2
Styling with CSS
Начать разделНачатьРазвернутьСвернутьBring your web pages to life with colors, layouts, and stylesВведение
5 уроков540- 01Что такое CSS?ЗадачаКвиз
- 02Синтаксис CSSЗадачаКвиз
- 03Комментарии CSSКвиз
- 04Тег HeadЗадачаКвиз
- 05Тег TitleЗадачаМастерствоКвиз
Добавление CSS
4 уроков725- 01Встроенный CSSЗадачаМастерствоКвиз
- 02Внутренний CSSЗадачаМастерствоКвиз
- 03Внешний CSSЗадачаМастерствоКвиз
- 04Задание по базовой стилизацииЗадача
Базовые селекторы
7 уроков1247- 01Введение в селекторыЗадачаКвиз
- 02Селектор типаЗадачаМастерствоКвиз
- 03Селектор классаЗадачаМастерствоКвиз
- 04Селектор IDЗадачаМастерствоКвиз
- 05Групповые селекторыЗадачаМастерствоКвиз
- 06Универсальный селекторЗадачаМастерствоКвиз
- 07Испытание по селекторамЗадача
Основы работы с текстом
8 уроков1450- 01Цвет текстаЗадачаМастерствоКвиз
- 02Семейство шрифтовЗадачаМастерствоКвиз
- 03Размер шрифтаЗадачаМастерствоКвиз
- 04Насыщенность шрифтаЗадачаМастерствоКвиз
- 05Выравнивание текстаЗадачаМастерствоКвиз
- 06Оформление текстаЗадачаМастерствоКвиз
- 07Повторение: Задача №1Задача
- 08Повторение: Задача №2Задача
Цвета и фоны
5 уроков834- 01Цвет фонаЗадачаМастерствоКвиз
- 02HEX-цветаЗадачаМастерствоКвиз
- 03RGB-цветаЗадачаМастерствоКвиз
- 04Прозрачность с RGBAЗадачаКвиз
- 05Итоговое задание №1Задача
Меню кафе
Проект3 уроков1- 01Основы типографикиЗадача
- 02Стилизация текстаПроект
- 03Цвет и фонПроект
Блочная модель. Часть 1
6 уроков943- 01Что такое блочная модель?Квиз
- 02Внутренние отступыЗадачаМастерствоКвиз
- 03Внешние отступыЗадачаМастерствоКвиз
- 04ГраницыЗадачаМастерствоКвиз
- 05Ширина и высотаЗадачаМастерствоКвиз
- 06Контрольное заданиеЗадача
Блочная модель. Часть 2
5 уроков834- 01Box SizingЗадачаКвиз
- 02Border RadiusЗадачаМастерствоКвиз
- 03OverflowЗадачаМастерствоКвиз
- 04Box ShadowЗадачаМастерствоКвиз
- 05Задание на повторениеЗадача
Flex Box
6 уроков943- 01Что такое Flex Box?ЗадачаКвиз
- 02Flex DirectionЗадачаМастерствоКвиз
- 03Justify ContentЗадачаМастерствоКвиз
- 04Align ItemsЗадачаМастерствоКвиз
- 05Идеальное центрированиеЗадачаКвиз
- 06Flex Box: ИспытаниеЗадача
Форма входа
Проект4 уроков1- 01ТелоЗадача
- 02Контейнер формыПроект
- 03Поле вводаПроект
- 04КнопкаПроект
Методы верстки
7 уроков1152- 01Блочные и строчные элементыЗадачаКвиз
- 02Основы позиционированияЗадачаМастерствоКвиз
- 03Относительное позиционированиеЗадачаМастерствоКвиз
- 04Абсолютное позиционированиеЗадачаМастерствоКвиз
- 05Фиксированное позиционированиеЗадачаМастерствоКвиз
- 06Основы Z-IndexЗадачаКвиз
- 07Итоговое испытаниеЗадача
Основы адаптивного дизайна
6 уроков1052- 01Что такое адаптивный дизайн?ЗадачаКвиз
- 02Метатег ViewportЗадачаКвиз
- 03Гибкие макетыЗадачаМастерствоКвиз
- 04Единицы измерения ViewportЗадачаМастерствоКвиз
- 05Основы Media QueriesЗадачаМастерствоКвиз
- 06Гибкие изображенияЗадачаМастерствоКвиз
Веб-страница Tonga
Проект6 уроков1- 01Меню навигацииЗадача
- 02Приветственный заголовокПроект
- 03Раздел «О нас»Проект
- 04Раздел контактовПроект
- 05Тег ViewportПроект
- 06Media QueryПроект
Финальные испытания
4 уроков4- 01Расположение элементовЗадача
- 02Список фильмовЗадача
- 03Свадебное приглашениеЗадача
- 04Всплывающее уведомлениеЗадача
Раздел 3
CSS Mastery
Начать разделНачатьРазвернутьСвернутьTake you css skills to the next level!Мастерство селекторов — Комбинации
6 уроков539- 01ВведениеКвиз
- 02Селектор потомковЗадачаКвиз
- 03Дочерний селекторЗадачаКвиз
- 04Смежный селекторЗадачаКвиз
- 05Общий родственный селекторЗадачаКвиз
- 06Итоговое испытаниеЗадача
Интерактивные псевдоклассы
5 уроков431- 01ПсевдоклассыКвиз
- 02Эффекты наведенияЗадачаКвиз
- 03Эффекты фокусаЗадачаКвиз
- 04Активные стилиЗадачаКвиз
- 05Итоговое испытаниеЗадача
Структурные псевдоклассы
5 уроков432- 01Структурные псевдоклассыКвиз
- 02Выбор первого дочернего элементаЗадачаКвиз
- 03Выбор последнего дочернего элементаЗадачаКвиз
- 04Сила шаблонов: использование nth-childЗадачаКвиз
- 05Задание на повторениеЗадача
Проект: Выпадающее меню
4 уроков4- 01Добавление подменюЗадача
- 02Отображение подменюЗадача
- 03Дополнительная стилизацияЗадача
- 04Поле ввода и кнопкаЗадача
Визуальные эффекты
5 уроков536- 01ГрадиентыЗадачаКвиз
- 02CSS-фильтрыЗадачаКвиз
- 03ТрансформацииЗадачаКвиз
- 04Переходы и эффекты наведенияЗадачаКвиз
- 05Итоговое испытаниеЗадача
Лендинг
5 уроков5- 01Стилизация секции HeaderЗадача
- 02Стилизация кнопкиЗадача
- 03Разметка секцииЗадача
- 04Разметка карточекЗадача
- 05Финальные штрихиЗадача
Верстка с CSS Grid
4 уроков426- 01Основы GridЗадачаКвиз
- 02Размещение элементов в Grid-rowЗадачаКвиз
- 03Именованные областиЗадачаКвиз
- 04Итоговое испытаниеЗадача
Сайт Flavor Fiesta
4 уроков4- 01Настройка сеткиЗадача
- 02ХедерЗадача
- 03Основная частьЗадача
- 04ФутерЗадача
Финальные испытания
5 уроков5- 01Подсветка активного пункта менюЗадача
- 02Чередование строк таблицыЗадача
- 03Эффект наведения на кнопкуЗадача
- 04Сетка карточекЗадача
- 05Размытое Hero-изображениеЗадача
Раздел 4
Practical Frontend
Начать разделНачатьРазвернутьСвернутьCombine structure and style to design complete, responsive web pagesПеременные
5 уроков432- 01ПеременныеКвиз
- 02Использование CSS-переменныхЗадачаКвиз
- 03Переменные для дизайн-токеновЗадачаКвиз
- 04Локальные переменныеЗадачаКвиз
- 05Задание на повторениеЗадача
Стратегия Mobile-First
6 уроков643- 01Что означает «mobile-first»ЗадачаКвиз
- 02Типографика Mobile-FirstЗадачаКвиз
- 03Навигация Mobile-FirstЗадачаКвиз
- 04Изображения Mobile-FirstЗадачаКвиз
- 05Формы Mobile-FirstЗадачаКвиз
- 06Задание на повторениеЗадача
Темизация и визуальные стили
5 уроков535- 01Темизация в CSSЗадачаКвиз
- 02Основы темного и светлого режимовЗадачаКвиз
- 03Акцентные цвета и выделениеЗадачаКвиз
- 04Темизация типографикиЗадачаКвиз
- 05Итоговое испытаниеЗадача
Экстремальный спорт
3 уроков3- 01ПеременныеЗадача
- 02Mobile-FirstЗадача
- 03ТематизацияЗадача
UI-компоненты
6 уроков642- 01Выпадающее менюЗадачаКвиз
- 02ВкладкиЗадачаКвиз
- 03БейджиЗадачаКвиз
- 04Всплывающие подсказкиЗадачаКвиз
- 05Баннеры уведомленийЗадачаКвиз
- 06Итоговое заданиеЗадача
Адаптивные паттерны
6 уроков645- 01Макет «Святой Грааль»ЗадачаКвиз
- 02Сетка карточекЗадачаКвиз
- 03Макет Sidebar + КонтентЗадачаКвиз
- 04Разделенный экранЗадачаКвиз
- 05Sticky Header / FooterЗадачаКвиз
- 06Итоговое испытаниеЗадача
Финальные испытания
4 уроков4- 01Карточка профиляЗадача
- 02Сетка шоколадной галереиЗадача
- 03Семь чудесЗадача
- 04Новые семь чудесЗадача
Раздел 5
JavaScript in Action
Начать разделНачатьРазвернутьСвернутьExplore how javascript is used with html and cssИнтерактивность / UI-компоненты
4 уроков433- 01ВкладкиЗадачаКвиз
- 02Аккордеон (развернуть/свернуть)ЗадачаКвиз
- 03Модальное окно (открыть/закрыть)ЗадачаКвиз
- 04Выпадающий списокЗадачаКвиз
Формы и валидация
3 уроков325- 01Валидация вводаЗадачаКвиз
- 02Пользовательские сообщения об ошибкахЗадачаКвиз
- 03Кнопки отправкиЗадачаКвиз
Уведомления и обратная связь
3 уроков327- 01Toast-сообщенияЗадачаКвиз
- 02Закрываемые баннерыЗадачаКвиз
- 03Индикаторы загрузкиЗадачаКвиз
Форма с Toast-уведомлением
2 уроков2- 01Показать Toast-сообщениеЗадача
- 02Скрыть Toast-сообщениеЗадача
Навигация
3 уроков329- 01Переключатель мобильного бургер-менюЗадачаКвиз
- 02Сворачиваемая боковая навигацияЗадачаКвиз
- 03Выпадающие менюЗадачаКвиз
Темы и персонализация
2 уроков217- 01Тёмная и светлая темыЗадачаКвиз
- 02Сохранение выбора темыЗадачаКвиз
Анимации и эффекты
3 уроков327- 01CSS-переходыЗадачаКвиз
- 02Анимация элементов при прокруткеЗадачаКвиз
- 03Анимации при клике на кнопкуЗадачаКвиз
Анимированная навигация
3 уроков36- 01ПеременныеЗадачаКвиз
- 02Слушатели событийЗадача
- 03CSS transitionЗадача
Финальные испытания
4 уроков4- 01Интерактивный FAQ-аккордеонЗадача
- 02Форма входаЗадача
- 03Адаптивная панель навигацииЗадача
- 04Страница блога с темойЗадача
Почему стоит изучать HTML на Coddy
- Пишите HTML прямо в браузере и сразу видите готовую страницу рядом. Никаких установок редактора, никакой настройки. Любое изменение в HTML-коде отображается мгновенно — обратная связь короткая.
- Современный, семантический HTML: заголовки, списки, ссылки, изображения, таблицы, формы и семантические теги вроде
<header>,<nav>,<main>,<section>,<footer>. Тот самый HTML, на котором реально делают сайты. - AI-подсказки помогают исправлять ошибки в HTML — незакрытые теги, кривой синтаксис атрибутов, промахи с доступностью — не выдавая готового ответа, так что навыки работы с HTML закрепляются.
- Бесплатный сертификат HTML по окончании курса. Уверенный первый шаг в веб-разработке, который естественно дополняется курсами CSS и JavaScript.
Частые вопросы об изучении HTML
Легко ли изучать HTML?
HTML — одна из самых простых вещей в IT. Это язык разметки, а не программирования: вы размечаете части контента (заголовки, абзацы, ссылки, картинки), а не пишете логику. Большинство новичков создают свою первую настоящую веб-страницу уже в первый час.
Сколько времени нужно, чтобы изучить HTML?
Основы HTML обычно можно освоить за одну-две недели ежедневной практики. Чтобы уверенно делать реальные проекты, чаще всего нужен один-три месяца регулярной работы.
Стоит ли учить HTML раньше CSS и JavaScript?
Да. HTML задаёт структуру страницы, CSS отвечает за её внешний вид, а JavaScript делает её интерактивной. Если сначала выучить HTML, то будет что стилизовать и анимировать дальше. Курс по HTML намеренно короткий — чтобы вы быстрее перешли к CSS и JS.
HTML — это язык программирования?
Строго говоря, нет. HTML — это язык разметки, описывающий структуру веб-контента. В нём самом нет ни переменных, ни условий, ни циклов. За реальное программирование на веб-странице отвечает JavaScript, которому посвящён отдельный курс.
Можно ли выучить HTML онлайн бесплатно?
Да. Интерактивный курс HTML бесплатный — уроки, практические задания, живой предпросмотр HTML и сертификат. Всё работает прямо в браузере, так что не нужно ничего устанавливать, чтобы начать.
Выдаётся ли сертификат после курса HTML?
Да. После завершения курса по HTML вы получаете бесплатный сертификат. Это проверяемое подтверждение, которое можно добавить в резюме или показать в LinkedIn — обычно как шаг к более полному портфолио по HTML, CSS и JavaScript.
