Stepik О курсе
Подробнее
Курс для начинающих верстальщиков сайтов на HTML и CSS. Разбираем реальные макеты, изучаем семантику языка, отрабатываем навыки в тренажере.
В курсе более 190 заданий.
Из них 150 – работа в тренажере.
✅ Образовательная лицензия: Л035-01236-39/01006802
💪 Присоединяйтесь к нашему официальному телегарам-каналу – месту вашей силы и развития.
Что такое HTML и CSS
HTML и CSS – две ключевые технологии, с помощью которых делают интернет-сайты. Именно с этих языков начинают свою карьеру многие программисты.
О программе
Интенсивная программа с короткими видео-уроками и большим количеством практики. Изучаем HTML5 и CSS3 на примере реального Photoshop-макета.
Дизайн-макет
Разбираем реальные Фотошоп-макеты квартирного бюро.
Главная страница, список квартир, о компании, карточка бронирования, отзывы. Все макеты доступны для скачивания.
Требования
Что нужно для старта
- Наличие компьютера с установленным браузером. Желание учиться.
Навыки
Чему вы научитесь
- Курс для начинающих верстальщиков сайтов на HTML и CSS. Разбираем реальные макеты, изучаем семантику языка, отрабатываем навыки в тренажере. В курсе более 190 заданий. Из них 150 – решение практических задач.
Аудитория
Для кого этот курс
- Для широкого круга слушателей.
- Умение верстать — навык, который нужен не только программистам, но и контент-менеджерам, дизайнерам,
- верстальщикам, системным администраторам, копирайтерам, маркетологам, аналитикам.
Содержание
10 занятийПрограмма курса
№ТемаЧто внутри
01Введение
- Введение в HTML и CSS
- Синтаксис HTML
- Структура документа
- Структура проекта
- Инструменты верстальщика
- Задачи верстки и верстальщика
02Базовые понятия интернета
- IP-адрес, домен, DNS
- HTTP, HTTP2 и HTTPS
- Структура HTTP запросов и ответов
- Фронтенд и бэкенд
- Хостинг
- URL-адреса
03HTML-теги
- Контентная модель документа
- Правила вложенности тегов
- Заголовки и параграфы
- Разметка текста
- Вставка изображений
- Списки
- Ссылки
- HTML мнемоники
- Комментарии
- Таблицы
- Теги pre и code
04Основы CSS
- Каскадирование
- Подключение стилей
- Сброс стилей
- Селекторы тегов
- Селекторы классов
- Селекторы идентификаторов
- Контекстные селекторы
- Дополнительные селекторы
- Оформление текста
- Выбор цвета
- px, em, rem и проценты
- Подключение внешних шрифтов
- Внутренние отступы
- Внешние отступы
- Внешние отступы и зона контента
- Рамки и границы
- Селекторы псевдоклассов
- Селекторы псевдоклассов, часть 2
- Селекторы атрибутов
05Работа с изображениями
- Растровая и векторная графика
- Графические редакторы
- Базовые настройки фотошопа
- Получение параметров текста
- Параметры блоков
- Экспорт растровых изображений
- Экспорт векторных изображений
- hover для изображений
- Фоновые изображения
- Спрайты
06Структура документа
- Обзор структуры
- Навигация и тег nav
- Теги section и article
- Теги header и footer
- Тег aside
07Блоки и сетка документа
- Введение в блочные и строчные элементы
- Отступы блочных элементов
- Выпадание внешних отступов
- Схлопывание внешних отступов
- Поток документа
- Свойство float
- Построение сеток
- Построение сеток, часть 2
- Колонки
- Относительное позиционирование
- Абсолютное позиционирование
- Фиксированное позиционирование
- Блочно-строчные элементы
- Сетки на блочно-строчных элементах
- Скрытие блоков
08Погружение в формы
- Простая HTML-форма
- Текстовые поля
- Другие типы полей
- Подписи полей
- Чекбоксы и галочки
- Переключатели
- Раскрывающийся список
- Загрузка файлов
- GET или POST
- Кнопки
- Дополнительные возможности форм
09Таблицы
- Объединение ячеек
- Расширенная структура таблицы
- Стилизация таблиц
10Завершение курса
- Инструменты верстальщика
01Введение
- Введение в HTML и CSS
- Синтаксис HTML
- Структура документа
- Структура проекта
- Инструменты верстальщика
- Задачи верстки и верстальщика
02Базовые понятия интернета
- IP-адрес, домен, DNS
- HTTP, HTTP2 и HTTPS
- Структура HTTP запросов и ответов
- Фронтенд и бэкенд
- Хостинг
- URL-адреса
03HTML-теги
- Контентная модель документа
- Правила вложенности тегов
- Заголовки и параграфы
- Разметка текста
- Вставка изображений
- Списки
- Ссылки
- HTML мнемоники
- Комментарии
- Таблицы
- Теги pre и code
04Основы CSS
- Каскадирование
- Подключение стилей
- Сброс стилей
- Селекторы тегов
- Селекторы классов
- Селекторы идентификаторов
- Контекстные селекторы
- Дополнительные селекторы
- Оформление текста
- Выбор цвета
- px, em, rem и проценты
- Подключение внешних шрифтов
- Внутренние отступы
- Внешние отступы
- Внешние отступы и зона контента
- Рамки и границы
- Селекторы псевдоклассов
- Селекторы псевдоклассов, часть 2
- Селекторы атрибутов
05Работа с изображениями
- Растровая и векторная графика
- Графические редакторы
- Базовые настройки фотошопа
- Получение параметров текста
- Параметры блоков
- Экспорт растровых изображений
- Экспорт векторных изображений
- hover для изображений
- Фоновые изображения
- Спрайты
06Структура документа
- Обзор структуры
- Навигация и тег nav
- Теги section и article
- Теги header и footer
- Тег aside
07Блоки и сетка документа
- Введение в блочные и строчные элементы
- Отступы блочных элементов
- Выпадание внешних отступов
- Схлопывание внешних отступов
- Поток документа
- Свойство float
- Построение сеток
- Построение сеток, часть 2
- Колонки
- Относительное позиционирование
- Абсолютное позиционирование
- Фиксированное позиционирование
- Блочно-строчные элементы
- Сетки на блочно-строчных элементах
- Скрытие блоков
08Погружение в формы
- Простая HTML-форма
- Текстовые поля
- Другие типы полей
- Подписи полей
- Чекбоксы и галочки
- Переключатели
- Раскрывающийся список
- Загрузка файлов
- GET или POST
- Кнопки
- Дополнительные возможности форм
09Таблицы
- Объединение ячеек
- Расширенная структура таблицы
- Стилизация таблиц
10Завершение курса
- Инструменты верстальщика
Документ после выпуска
Сертификат Stepik
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Основы HTML и CSS» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Направления:HTML/CSS
Информация обновлена 28 июля 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
