Основы HTML и CSS — курс от Stepik
Бесплатный курс на Stepik для начинающих верстальщиков, получивший рейтинг 4.9 от учеников. Программа включает более 190 заданий, из которых 150 — практическая работа в интерактивном тренажёре. Вы изучите HTML5 и CSS3 на примере реального Photoshop-макета квартирного бюро: главная страница, список квартир, карточка бронирования. Курс охватывает 10 тематических модулей — от базовых тегов и селекторов до блочной модели, сеток, форм и таблиц. Выдаётся сертификат Stepik при достижении порогового балла. Подходит программистам, дизайнерам, контент-менеджерам и всем, кому нужен навык вёрстки.
Как мы оцениваем курсы
Рейтинг ToolFox формируется по 5 критериям, каждый оценивается от 1 до 10:
- Качество программы — полнота материала, актуальность технологий
- Практика — реальные проекты, код-ревью, тренажёры
- Поддержка — наставники, обратная связь, сообщество
- Трудоустройство — карьерный центр, помощь с резюме
- Цена/качество — соотношение стоимости и получаемых навыков
Итоговый балл — среднее арифметическое 5 критериев. Обновляется при каждом пересмотре курса.
- Платформа
- Stepik
- Длительность
- 1 мес, 8 ч/нед
- Формат
- Онлайн, видеоуроки, интерактивный тренажёр, автопроверка
- Уровень
- Новичок
- Язык
- Русский
- Сертификат
- Сертификат Stepik
- Обновлено
- март 2026 г.
Программа и содержание
Модули и темы
Познакомитесь с инструментами веб-разработки, узнаете как устроены сайты и подготовите рабочее окружение для прохождения курса.
- Инструменты разработчика
- Редакторы кода
- Структура веб-страницы
Введение
Знакомство с курсом, инструментами разработчика и базовыми понятиями
Познакомитесь с инструментами веб-разработки, узнаете как устроены сайты и подготовите рабочее окружение для прохождения курса.
- Инструменты разработчика
- Редакторы кода
- Структура веб-страницы
Базовые понятия интернета
Принципы работы сети, браузеров и протоколов
Изучите основы работы интернета: как браузер общается с сервером, что такое DNS и как устроены URL-адреса.
- Протоколы HTTP/HTTPS
- Доменные имена
- DNS
- Клиент-серверная модель
HTML-теги
Основные теги для разметки контента страницы
Освоите ключевые HTML-теги для структурирования контента: заголовки, текстовые блоки, списки, ссылки и семантические элементы HTML5.
- Заголовки и параграфы
- Списки
- Ссылки
- Семантическая разметка
- Атрибуты тегов
Основы CSS
Селекторы, свойства, каскадность и наследование
Самый объёмный модуль курса — освоите CSS-селекторы, свойства форматирования текста, блочную модель, работу с отступами, границами и фонами.
- CSS-селекторы
- Цвета и шрифты
- Каскадность и специфичность
- Блочная модель
- Отступы и границы
Работа с изображениями
Форматы, оптимизация и вставка изображений
Научитесь работать с изображениями на веб-страницах: выбор формата, оптимизация размера, позиционирование и фоновые картинки через CSS.
- Форматы изображений
- Тег img
- Фоновые изображения
- Оптимизация для веба
- Адаптивные изображения
Структура документа и блоки
Семантическая структура, блочная модель и сетки
Изучите принципы построения структуры HTML-документа, разницу между блочными и строчными элементами, способы создания сеток и макетов.
- Семантическая структура
- Header, main, footer
- Блочные и строчные элементы
- Float и позиционирование
- CSS-сетки
Формы и таблицы
Создание форм ввода данных и табличное представление
Освоите создание интерактивных форм — текстовые поля, чекбоксы, радиокнопки, выпадающие списки. Научитесь создавать и стилизовать таблицы.
- Элементы формы
- Типы полей ввода
- Валидация форм
- HTML-таблицы
- Стилизация таблиц
Чему научитесь
Для кого подходит
- →Начинающие веб-разработчики
- →Дизайнеры, осваивающие вёрстку
- →Контент-менеджеры
- →Копирайтеры и маркетологи
- →Системные администраторы
Требования
- →Компьютер с установленным браузером
- →Желание учиться
Плюсы и минусы курса Основы HTML и CSS
Обзор подготовлен редакцией ToolFox · Обновлено: март 2026 г.
Плюсы
- Полностью бесплатный курс
- Высокий рейтинг — 4.9 из 5
- 190+ заданий с интерактивным тренажёром
- Вёрстка реального макета
- Сертификат по окончании
Минусы
- Нет обратной связи от преподавателя
- Материал ограничен базовым уровнем — нет Flexbox и Grid
- Макет курса основан на Photoshop, а не на Figma
Отзывы (1)
Загрузка комментариев...
Часто задаваемые вопросы
Курс действительно бесплатный?
Выдаётся ли сертификат?
Нужны ли предварительные знания?
Сколько времени занимает прохождение?
Подойдёт ли курс для дизайнеров?
Курс действительно бесплатный?
Да, курс полностью бесплатный. Для прохождения достаточно зарегистрироваться на Stepik.
Выдаётся ли сертификат?
Да, при достижении порогового балла (160 из максимума) выдаётся сертификат Stepik, а при 195 баллах — сертификат с отличием.
Нужны ли предварительные знания?
Нет. Курс рассчитан на полных новичков — достаточно иметь компьютер с браузером и желание учиться.
Сколько времени занимает прохождение?
В среднем 3-4 недели при занятиях по 8 часов в неделю. Доступ к материалам не ограничен по времени.
Подойдёт ли курс для дизайнеров?
Да, навык вёрстки полезен дизайнерам для понимания возможностей и ограничений веб-технологий при создании макетов.