ПопулярныйПуть
Изучайте HTML
Изучайте HTML с нуля в бесплатном интерактивном онлайн-курсе. Освойте структуру документа, семантические теги, ссылки, формы, изображения и основы доступности через практические задания, реальные проекты, подсказки ИИ и сертификат по завершении.
249,002+ codders записались
Этот путь включает
Помощь ИИ при написании кода
Практические интерактивные уроки
Аудио-озвучка к каждому уроку
Тесты для проверки знаний
Бесплатный сертификат о прохождении
Программа
5 разделов241 уроков212 задачи1,203 вопросов квиза01Раздел 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 уроков1137- 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 уроков931- 01Элементы DivЗадачаМастерствоКвизАудио
- 02Строчные элементы SpanЗадачаМастерствоКвизАудио
- 03Семантические тегиЗадачаМастерствоКвизАудио
- 04Секции и статьиЗадачаМастерствоКвизАудио
- 05Повторение: МакетЗадача
Страница личного профиля
Проект5 уроков1- 01Обзор проектаЗадача
- 02Секция HeaderПроект
- 03Фото профиляПроект
- 04Секция «Обо мне»Проект
- 05Ссылки на социальные сетиПроект
Формы и поля ввода, часть 1
6 уроков937- 01Основы формКвизАудио
- 02Текстовые поля вводаЗадачаМастерствоКвизАудио
- 03Атрибуты полей вводаЗадачаМастерствоКвизАудио
- 04Поле для пароляЗадачаМастерствоКвизАудио
- 05Метки для полей вводаЗадачаМастерствоКвизАудио
- 06Повторение — основы формЗадача
Формы и элементы ввода. Часть 2
7 уроков1239- 01РадиокнопкиЗадачаМастерствоКвизАудио
- 02ЧекбоксыЗадачаМастерствоКвизАудио
- 03Выпадающие спискиЗадачаМастерствоКвизАудио
- 04КнопкиЗадачаМастерствоКвизАудио
- 05Кнопки в формахЗадачаМастерствоКвизАудио
- 06Повторение — Формы №1Задача
- 07Повторение — Формы №2Задача
Таблицы
4 уроков725- 01Основы таблицЗадачаМастерствоКвизАудио
- 02Добавление заголовковЗадачаМастерствоКвизАудио
- 03Объединение строк и столбцовЗадачаМастерствоКвизАудио
- 04Итоги: ТаблицыЗадача
Страница регистрации на мероприятие
Проект5 уроков1- 01Обзор проектаЗадача
- 02Секция HeaderПроект
- 03Секция деталей мероприятияПроект
- 04Форма регистрацииПроект
- 05Секция FooterПроект
Финальные испытания
4 уроков4- 01Простая карточка профиляЗадача
- 02Карточка приглашения на мероприятиеЗадача
- 03Простая страница статьиЗадача
- 04Список любимых книгЗадача
02Раздел 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Всплывающее уведомлениеЗадача
03Раздел 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-изображениеЗадача
04Раздел 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Новые семь чудесЗадача
05Раздел 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: они объясняют следующий шаг, но не выдают решение целиком.
- Бесплатный сертификат о завершении курса HTML, который можно добавить в LinkedIn или резюме.
Частые вопросы об изучении HTML
Легко ли изучать HTML?
Да, начать изучать HTML можно даже без опыта. Coddy разбивает темы на короткие упражнения, чтобы вы поняли синтаксис, потренировали структуру документа, семантические теги, ссылки, формы, изображения и основы доступности и постепенно набрали уверенность.
Сколько времени нужно, чтобы изучить HTML?
Основы HTML обычно можно освоить за одну-две недели ежедневной практики. Чтобы уверенно делать реальные проекты, чаще всего нужен один-три месяца регулярной работы.
Где изучать HTML онлайн бесплатно?
На Coddy есть бесплатный онлайн-курс HTML с уроками, задачами, квизами и проектами. Устанавливать ничего не нужно: все работает в браузере.
Как быстро изучить HTML?
Самый быстрый путь — писать код каждый день. В Coddy короткие объяснения сразу переходят в практику, а подсказки ИИ помогают двигаться дальше без долгих видео.
Дают ли сертификат по HTML после курса?
Да. После завершения курса HTML на Coddy вы получите бесплатный сертификат, который можно добавить в LinkedIn или резюме.
Что можно создать после изучения HTML?
После курса вы сможете создавать веб-страницы, формы, простые лендинги и прочную основу для проектов с CSS и JavaScript. Также у вас будет база для перехода к более сложным темам.
