Stepik О курсе
Подробнее
В этом курсе мы изучим всё об HTML и CSS и сверстаем несколько посадочных страниц и отдельных компонент сайта. Он подойдёт тем, кто только хочет погрузиться в веб разработку и создавать свои сайты или полноценные приложения. HTML и CSS является базой перед переходом к JavaScript и фреймворкам типа React, Angular или Vue, поэтому от вас не потребуется вообще никаких знаний. Так же он подойдёт тем, кто уже пишет веб приложения, но хочет структурировать свои знания по вёрстке и почерпнуть техники работы с flex и grid. Все эти знания мы применим на вёрстке реальной страницы сайта PurpleSchool, сравнивая различные подходы к вёрстке.
В курсе мы детально изучим:
Основы HTML5 и семантическую вёрстку
Доступность и работу Screen Reader
Работу с формами и таблицами
Основы CSS и работу в Figma
Псевдоклассы и элементы
Каскад и специфичность стилей
Работу потока документа и блочную модель
Различные единицы измерения и особенности работы с цветом
Анимацию
Адаптивную вёрстку
CSS Flexbox
CSS Grid
Лекции содержат как теоретическую часть, так и live-code, где мы вместе будем писать код, разбираю особенности работы HTML и CSS. В конце каждого модуля вас ожидает тест, который позволит укрепить ваши знания. Этот курс направлен на практику, потому в курсе сделан упор на большое число упражнений, которые позволит закрепить знания.
В результате курса вы получите знания и навыки для вёрстки страниц практически любой сложности.
Требования
Что нужно для старта
- Только наличие компьютера на любой ОС
- Не требуются ни какие знания по программированию
Результат
Что вы получите
- Верстать адаптивные сайты на HTML и CSS
- Знать сематическую вёрстку и особенности HTML5
- Проверять доступность и работать со Screen Reader
- Верстать формы и таблицы
- Работать с Figma макетами
- Понимать каскад и специфичность стилей
- Понимать работу потока документа и блочную модель
- Создавать анимацию
- Работать с различными layout
- Верстать на CSS Flexbox
- Верстать на CSS Grid
Аудитория
Для кого этот курс
- Новички, которые хотят погрузиться в web разработку. Опытные разработчики, которые хотят структурировать свои знания и улучшить вёрстку
Содержание
23 занятияПрограмма курса
№ТемаЧто внутри
01Введение
- HTML и CSS
- Как устроен курс
- Обзор проектов
- Обзор курсов
- Перенос курса
02Настройка окружения
- Настройка окружения
- Настройки VSCode
- Создание первой страницы
03Знакомство с HTML
- Структура HTML
- Параграфы и переносы
- Заголовки
- Инспектор Chrome
- Структура документа
- Списки
- Упражнение - Вёрстка статьи
- Ссылки
- Изображения
- Комментарии
- Упражнение - Вёрстка статьи 2
- Тест - Знакомство с HTML
04Семантика и HTML5
- Что такое HTML5?
- Блочные и строчные элементы
- Sup и sub
- Сущности HTML
- Семантическая разметка
- Упражнение - Разметка сайта
- Screen Readers
- Тест - Семантика и HTML5
05Таблицы
- Создание таблиц
- Доступность таблиц
- Colspan, rowspan
- Упражнение - Вёрстка таблицы
- Тест - Таблицы
06Формы
- Form
- Input
- Label
- Кнопки
- Name
- Упражнение - Поиск YouTube
- Radio, Checkbox, Select
- Range
- Textarea
- Валидация форм
- Упражнение - Форма контактов
- Тест - Формы
07Основы CSS
- Для чего нужен CSS
- Способы стилизации
- Цвет и фон
- Работа с цветами
- Упражнение - Цвета формы
- Стилизация текста
- Font family
- Тест - Основы CSS
08Работа с Figma
- Разбор интерфейса
- Компоненты и свойства
- Экспорт графики
- Измерение расстояний
09CSS Selectors
- Выбор элементов
- ID элемента
- Выбор по классу
- Выбор по атрибуту
- Упражнение - Стиль страницы
- Дочерние элементы
- Соседние элементы
- Тест - CSS Selectors
10Псевдоклассы и элементы
- Псевдоклассы
- Псевдоклассы с параметрами
- Псевдоэлементы
- Стили списков
- Упражнение - Дизайн списка
- Тест - Псевдоклассы и элементы
11Каскад
- Каскад CSS
- Специфичность стилей
- Important
- Наследование в CSS
- Тест - Каскад
12Блочная модель
- О блочной модели
- Ширина и высота
- Границы
- Padding
- Margin
- Упражнение - Добавление отступов
- Тест - Блочная модель
13Поток документа
- Поток документа
- Float
- Display
- Position
- Text-align
- Упражнение - Label формы
- Тест - Поток документа
14Единицы измерения
- Проценты
- Em
- Rem
- Vh и vw
- Тест - Единицы измерения
15Анимация
- Transition
- Transition timing functions
- Анализ анимации
- Transform
- Animation
- Тест - Анимация
16Адаптивная вёрстка
- Что такое адаптивная вёрстка
- Media выражения
- Max и min width
- Шрифты и vmin
- Calc
- Min и max
- Clamp
- Тест - Адаптивная вёрстка
17CSS Flexbox
- О flexbox
- Введение во Flexbox
- Работа с flex-direction
- Flex-wrap
- Порядок элементов
- Flex-flow
- Justify-content
- Align-items
- Align-content
- Align-self
- Размеры и flex
- Flex-grow, flex-shrink и flex-basis
- Flex-wrap с flex-basis
- Gap row-gap column-gap
- Auto margin
- Тест - CSS Flexbox
18Практика flexbox
- Подключение шрифтов
- Google Fonts
- Упражнение - Вёрстка hero
- Упражнение - финал вёрстки
19Методологии и практики
- Зачем методологии
- БЭМ
- SMACSS
- Custom Properties
20Проект - Вёрстка страницы школы
- Подготовка проекта
- Вёрстка шапки
- Шрифты и адаптив шапки
- Упражнение - Hero
- Адаптив Hero
- Aria атрибуты
- Вёрстка футера
- Стилизация футера
- Адаптив футера
- Упражнение - Блог
- Упражнение - Адаптив блога
21CSS Grid
- Подготовка проекта
- Template и gap
- Grid-auto-flow
- Ширина колонок
- Ширина элементов
- Положение элементов
- Именованные линии
- Auto-fit и auto-fill
- Адаптивный grid
- Order
- Justify и align
- Заполнение grid
- Template-areas
- Лучшие практики
- Тест - CSS Grid
22Проект - Практика Grid
- Разбор макета
- Упражнение - Вёрстка сетки
- Overflow и white-space
- Scrollbar
- Упражнение - Вёрстка карточки
- Адаптив списка курсов
- Упражнение - Нам доверяют
- Финальный адаптив
23Финал курса
- Куда дальше?
01Введение
- HTML и CSS
- Как устроен курс
- Обзор проектов
- Обзор курсов
- Перенос курса
02Настройка окружения
- Настройка окружения
- Настройки VSCode
- Создание первой страницы
03Знакомство с HTML
- Структура HTML
- Параграфы и переносы
- Заголовки
- Инспектор Chrome
- Структура документа
- Списки
- Упражнение - Вёрстка статьи
- Ссылки
- Изображения
- Комментарии
- Упражнение - Вёрстка статьи 2
- Тест - Знакомство с HTML
04Семантика и HTML5
- Что такое HTML5?
- Блочные и строчные элементы
- Sup и sub
- Сущности HTML
- Семантическая разметка
- Упражнение - Разметка сайта
- Screen Readers
- Тест - Семантика и HTML5
05Таблицы
- Создание таблиц
- Доступность таблиц
- Colspan, rowspan
- Упражнение - Вёрстка таблицы
- Тест - Таблицы
06Формы
- Form
- Input
- Label
- Кнопки
- Name
- Упражнение - Поиск YouTube
- Radio, Checkbox, Select
- Range
- Textarea
- Валидация форм
- Упражнение - Форма контактов
- Тест - Формы
07Основы CSS
- Для чего нужен CSS
- Способы стилизации
- Цвет и фон
- Работа с цветами
- Упражнение - Цвета формы
- Стилизация текста
- Font family
- Тест - Основы CSS
08Работа с Figma
- Разбор интерфейса
- Компоненты и свойства
- Экспорт графики
- Измерение расстояний
09CSS Selectors
- Выбор элементов
- ID элемента
- Выбор по классу
- Выбор по атрибуту
- Упражнение - Стиль страницы
- Дочерние элементы
- Соседние элементы
- Тест - CSS Selectors
10Псевдоклассы и элементы
- Псевдоклассы
- Псевдоклассы с параметрами
- Псевдоэлементы
- Стили списков
- Упражнение - Дизайн списка
- Тест - Псевдоклассы и элементы
11Каскад
- Каскад CSS
- Специфичность стилей
- Important
- Наследование в CSS
- Тест - Каскад
12Блочная модель
- О блочной модели
- Ширина и высота
- Границы
- Padding
- Margin
- Упражнение - Добавление отступов
- Тест - Блочная модель
13Поток документа
- Поток документа
- Float
- Display
- Position
- Text-align
- Упражнение - Label формы
- Тест - Поток документа
14Единицы измерения
- Проценты
- Em
- Rem
- Vh и vw
- Тест - Единицы измерения
15Анимация
- Transition
- Transition timing functions
- Анализ анимации
- Transform
- Animation
- Тест - Анимация
16Адаптивная вёрстка
- Что такое адаптивная вёрстка
- Media выражения
- Max и min width
- Шрифты и vmin
- Calc
- Min и max
- Clamp
- Тест - Адаптивная вёрстка
17CSS Flexbox
- О flexbox
- Введение во Flexbox
- Работа с flex-direction
- Flex-wrap
- Порядок элементов
- Flex-flow
- Justify-content
- Align-items
- Align-content
- Align-self
- Размеры и flex
- Flex-grow, flex-shrink и flex-basis
- Flex-wrap с flex-basis
- Gap row-gap column-gap
- Auto margin
- Тест - CSS Flexbox
18Практика flexbox
- Подключение шрифтов
- Google Fonts
- Упражнение - Вёрстка hero
- Упражнение - финал вёрстки
19Методологии и практики
- Зачем методологии
- БЭМ
- SMACSS
- Custom Properties
20Проект - Вёрстка страницы школы
- Подготовка проекта
- Вёрстка шапки
- Шрифты и адаптив шапки
- Упражнение - Hero
- Адаптив Hero
- Aria атрибуты
- Вёрстка футера
- Стилизация футера
- Адаптив футера
- Упражнение - Блог
- Упражнение - Адаптив блога
21CSS Grid
- Подготовка проекта
- Template и gap
- Grid-auto-flow
- Ширина колонок
- Ширина элементов
- Положение элементов
- Именованные линии
- Auto-fit и auto-fill
- Адаптивный grid
- Order
- Justify и align
- Заполнение grid
- Template-areas
- Лучшие практики
- Тест - CSS Grid
22Проект - Практика Grid
- Разбор макета
- Упражнение - Вёрстка сетки
- Overflow и white-space
- Scrollbar
- Упражнение - Вёрстка карточки
- Адаптив списка курсов
- Упражнение - Нам доверяют
- Финальный адаптив
23Финал курса
- Куда дальше?
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «HTML и CSS — полный курс по вёрстке с нуля» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
