Stepik Требования
Что нужно для старта
- Уверенный пользователь ПК
- Практически любой современный ПК
- Основы логического мышления
Результат
Что вы получите
- Использовать GitHub для управлением версиями исходного кода
- Работать с макетами в Figma
- Работать в VSCode
- Применять все основные HTML теги
- Применять CSS-стили
- Переносить макет на вёрстку в коде
- Работать с формами, отступами, поведением, позиционированием
Аудитория
Для кого этот курс
- Курс предназначен для всех кто хочет освоить основы технологий HTML и CSS в целях приобрести навыки вёрстки web-страниц на практике. Такой курс как правило необходим и тем, кто хочет больше заниматься back-end разработкой, нежели front-end разработкой, поскольку бэкендеры так или иначе довольно часто сталкиваются с необходимостью понимать HTML-код с CSS-стилями.
Содержание
8 занятийПрограмма курса
№ТемаЧто внутри
01GitHub, Figma, Макет
- Знакомство с GitHub
- Создание и клонирование репозитория
- Изменения, commit, push
- Макет и знакомство с Figma
- Картинки и их экспорт
- Расширения VSCode
- Форматы картинок, иконки. Знакомство с index.html
- Исходники первого модуля. Домашнее задание
02Теги и начало вёрстки макета
- Базовые теги. Консоль devtools
- Разновидности тегов. Табличные теги.
- Заголовки и списки
- Разметка блока Header
- Разметка секций услуг. Тег section.
- Разметка секции "Отзывы"
- Разметка подвала (footer). Тег div.
- Подведение итога
- Исходники модуля и Домашнее задание
03Знакомство с CSS
- Введение в стили CSS
- Практика: добавляем и применяем CSS
- Перенос с макета ссылок и цветов
- Перенос шрифтов
- Исходники и Домашнее задание
04Отступы, devtools, блочные элементы
- Разбор ДЗ
- Стили и devtools. Вкладки styles & computed
- Блочные и строчные элементы
- Padding
- Margin
- Практика: перенос отступов в различных блоках с макета
- Исходники и Домашнее Задание
05Флексбоксы
- Разбор ДЗ - Вёрстка блока About
- Разбор ДЗ - Блоки Clients, Advantages
- Разбор ДЗ - Блок Footer
- Флексбокс. Концепция и зачем применяется
- Флексбокс. Управление по осям
- Флексбокс. order, flex-direction, flex-wrap
- Делаем кнопку и блок About на флексах. Часть 1
- Делаем кнопку и блок About на флексах. Часть 2
- Исходники и Домашнее Задание
06Формы, группировки, селекторы
- Разбор ДЗ Блоки services и clients
- Разбор ДЗ - Блок Преимущества
- Разбор ДЗ - Блок футера
- Формы. Поля ввода и их типы
- Формы. Checkbox, Label
- Группировка. Fieldset, legend, radiobutton
- Атрибуты value, checked, placeholder. Отправка формы
- Селекторы и их вес
- Форма с элементами ввода
- placeholder и кнопки
- Пояснение к ДЗ
- Исходники и Домашнее Задание
07Позиционирование и поведение
- Разбор ДЗ: Оформляем popup
- Позиционирование, position absolute
- Псевдоэлементы. position fixed. Позиционирование popup
- Поведение элементов. Кнопки и ссылки
- Практика. Кнопки и ссылки.
- Делаем поведение в блоке service
- Исходники и Домашнее Задание
08Завершение проекта
- Блок About
- Блок Clients
- Футер
- Ревью
- Popup
- Inputs
- Radio Buttons
- JS Popup
- Исходники и ссылки
01GitHub, Figma, Макет
- Знакомство с GitHub
- Создание и клонирование репозитория
- Изменения, commit, push
- Макет и знакомство с Figma
- Картинки и их экспорт
- Расширения VSCode
- Форматы картинок, иконки. Знакомство с index.html
- Исходники первого модуля. Домашнее задание
02Теги и начало вёрстки макета
- Базовые теги. Консоль devtools
- Разновидности тегов. Табличные теги.
- Заголовки и списки
- Разметка блока Header
- Разметка секций услуг. Тег section.
- Разметка секции "Отзывы"
- Разметка подвала (footer). Тег div.
- Подведение итога
- Исходники модуля и Домашнее задание
03Знакомство с CSS
- Введение в стили CSS
- Практика: добавляем и применяем CSS
- Перенос с макета ссылок и цветов
- Перенос шрифтов
- Исходники и Домашнее задание
04Отступы, devtools, блочные элементы
- Разбор ДЗ
- Стили и devtools. Вкладки styles & computed
- Блочные и строчные элементы
- Padding
- Margin
- Практика: перенос отступов в различных блоках с макета
- Исходники и Домашнее Задание
05Флексбоксы
- Разбор ДЗ - Вёрстка блока About
- Разбор ДЗ - Блоки Clients, Advantages
- Разбор ДЗ - Блок Footer
- Флексбокс. Концепция и зачем применяется
- Флексбокс. Управление по осям
- Флексбокс. order, flex-direction, flex-wrap
- Делаем кнопку и блок About на флексах. Часть 1
- Делаем кнопку и блок About на флексах. Часть 2
- Исходники и Домашнее Задание
06Формы, группировки, селекторы
- Разбор ДЗ Блоки services и clients
- Разбор ДЗ - Блок Преимущества
- Разбор ДЗ - Блок футера
- Формы. Поля ввода и их типы
- Формы. Checkbox, Label
- Группировка. Fieldset, legend, radiobutton
- Атрибуты value, checked, placeholder. Отправка формы
- Селекторы и их вес
- Форма с элементами ввода
- placeholder и кнопки
- Пояснение к ДЗ
- Исходники и Домашнее Задание
07Позиционирование и поведение
- Разбор ДЗ: Оформляем popup
- Позиционирование, position absolute
- Псевдоэлементы. position fixed. Позиционирование popup
- Поведение элементов. Кнопки и ссылки
- Практика. Кнопки и ссылки.
- Делаем поведение в блоке service
- Исходники и Домашнее Задание
08Завершение проекта
- Блок About
- Блок Clients
- Футер
- Ревью
- Popup
- Inputs
- Radio Buttons
- JS Popup
- Исходники и ссылки
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Основы вёрстки с HTML и CSS» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
