НТМL и CSS - полный курс по вёрстке с нуля (2025) [Тариф Самостоятельный] [Purpleschool] [Антон Ларичев]
Изучите все особенности HTML5 и CSS3, чтобы создавать современные адаптивные сайты на flexbox и CSS Grid
В этом курсе мы изучим всё об HTML и CSS и сверстаем несколько посадочных страниц и отдельных компонент сайта. Он подойдёт тем, кто только хочет погрузиться в веб разработку и создавать свои сайты или полноценные приложения. HTML и CSS является базой перед переходом к JavaScript и фреймворкам типа React, Angular или Vue, поэтому от вас не потребуется вообще никаких знаний.
Так же он подойдёт тем, кто уже пишет веб приложения, но хочет структурировать свои знания по вёрстке и почерпнуть техники работы с flex и grid. Все эти знания мы применим на вёрстке реальной страницы сайта PurpleSchool, сравнивая различные подходы к вёрстке.
Лекции содержат как теоретическую часть, так и live-code, где мы вместе будем писать код, разбираю особенности работы HTML и CSS. В конце каждого модуля вас ожидает тест. Этот курс направлен на практику, потому в курсе сделан упор на большое число упражнений, которые позволит закрепить знания.
После прохождения курса вы сможете:
Курс построен таким образом, чтобы доносить материал от простого к сложному. Ниже вы можете ознакомиться с планом курса и посмотреть часть открытых лекций по кнопке проигрывателя.
Обновление в 2025 году
Тариф Самостоятельный
Цена: 3999 рублей
Изучите все особенности HTML5 и CSS3, чтобы создавать современные адаптивные сайты на flexbox и CSS Grid
В этом курсе мы изучим всё об HTML и CSS и сверстаем несколько посадочных страниц и отдельных компонент сайта. Он подойдёт тем, кто только хочет погрузиться в веб разработку и создавать свои сайты или полноценные приложения. HTML и CSS является базой перед переходом к JavaScript и фреймворкам типа React, Angular или Vue, поэтому от вас не потребуется вообще никаких знаний.
Так же он подойдёт тем, кто уже пишет веб приложения, но хочет структурировать свои знания по вёрстке и почерпнуть техники работы с flex и grid. Все эти знания мы применим на вёрстке реальной страницы сайта PurpleSchool, сравнивая различные подходы к вёрстке.
Лекции содержат как теоретическую часть, так и live-code, где мы вместе будем писать код, разбираю особенности работы HTML и CSS. В конце каждого модуля вас ожидает тест. Этот курс направлен на практику, потому в курсе сделан упор на большое число упражнений, которые позволит закрепить знания.
После прохождения курса вы сможете:
- Верстать адаптивные сайты на HTML и CSS
- Знать сематическую вёрстку и особенности HTML5
- Проверять доступность и работать со Screen Reader
- Верстать формы и таблицы
- Работать с Figma макетами
- Понимать каскад и специфичность стилей
- Понимать работу потока документа и блочную модель
- Создавать анимацию
- Работать с различными layout
- Верстать на CSS Flexbox
- Верстать на CSS Grid
- Custom property и расчёты в CSS
Курс построен таким образом, чтобы доносить материал от простого к сложному. Ниже вы можете ознакомиться с планом курса и посмотреть часть открытых лекций по кнопке проигрывателя.
- Введение
- Настройка окружения
- Знакомство с HTML
- Семантика и HTML5
- Таблица
- Формы
- Основы CSS
- Работа с Figma
- CSS Selectors
- Псевдоклассы и элементы
- Каскад
- Блочная модель
- Поток документов
- Единицы измерения
- Анимация
- Адаптивная вёрстка
- CSS Flexbox
- Практика flexbox
- Методологии и практики
- Проект - Вёрстка страницы школы
- CSS Grid
- Проект - Практика Grid
- Финал курса
1. Введение
- HTML и CSS
- Как устроен курс
- Обзор проектов
- Обзор курсов
- Работа на платформе
- Настройка окружения
- Настройки VSCode
- Создание первой страницы
- Структура HTML
- Параграфы и переносы
- Заголовки
- Инспектор Chrome
- Структура документа
- Списки
- Упражнение - Вёрстка статьи
- Ссылки
- Изображения
- Комментарии
- Упражнение - Вёрстка статьи 2
- Тест - Знакомство с HTML
- Занятие - Знакомство с HTML
- Что такое HTML5?
- Блочные и строчные элементы
- Sup и sub
- Сущности HTML
- Семантическая разметка
- Упражнение - Разметка сайта
- Screen Readers
- Тест - Семантика и HTML5
- Занятие - Семантика и HTML5
- Домашнее задание - Семантика и HTML5
- Создание таблиц
- Доступность таблиц
- Colspan, rowspan
- Упражнение - Вёрстка таблицы
- Тест - Таблицы
- Занятие - Таблицы
- Form
- Input
- Label
- Кнопки
- Name
- Упражнение - Поиск YouTube
- Radio, Checkbox, Select
- Range
- Textarea
- Валидация форм
- Упражнение - Форма контактов
- Занятие - Формы
- Для чего нужен CSS
- Способы стилизации
- Цвет и фон
- Работа с цветами
- Упражнение - Цвета формы
- Стилизация текста
- Font family
- Тест - Основы CSS
- Занятие - Основы CSS
- Разбор интерфейса
- Компоненты и свойства
- Экспорт графики
- Измерение расстояний
- Выбор элементов
- ID элемента
- Выбор по классу
- Выбор по атрибуту
- Упражнение - Стиль страницы
- Дочерние элементы
- Соседние элементы
- Тест - CSS Selectors
- Занятие - CSS Selectors
- Псевдоклассы
- Псевдоклассы с параметрами
- Псевдоэлементы
- Стили списков
- Упражнение - Дизайн списка
- Тест - Псевдоклассы и элементы
- Занятие - Псевдоклассы и элементы
- Каскад CSS
- Специфичность стилей
- Important
- Наследование в CSS
- Тест - Каскад
- Занятие - Каскад
- О блочной модели
- Ширина и высота
- Границы
- Padding
- Margin
- Упражнение - Добавление отступов
- Тест - Блочная модель
- Занятие - Блочная модель
- Поток документа
- Float
- Display
- Position
- Text-align
- Упражнение - Label формы
- Тест - Поток документа
- Занятие - Поток документа
- Проценты
- Em
- Rem
- Vh и vw
- Тест - Единицы измерения
- Занятие - Единицы измерения
- Transition
- Transition timing functions
- Анализ анимации
- Transform
- Animation
- Тест - Анимация
- Занятие - Анимация
- Что такое адаптивная вёрстка
- Media выражения
- Max и min width
- Шрифты и vmin
- Calc
- Min и max
- Clamp
- Pow
- Sqrt log exp
- Тест - Адаптивная вёрстка
- Занятие - Адаптивная вёрстка
- О 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
- Занятие - CSS Flexbox
- Подключение шрифтов
- Google Fonts
- Упражнение - Вёрстка hero
- Упражнение - финал вёрстки
- Зачем методологии
- БЭМ
- SMACSS
- Custom Properties
- Анимация с custom property
- Занятие - Методологии и практики
- Подготовка проекта
- Вёрстка шапки
- Шрифты и адаптив шапки
- Упражнение - Hero
- Адаптив Hero
- Aria атрибуты
- Вёрстка футера
- Стилизация футера
- Адаптив футера
- Упражнение - Блог
- Упражнение - Адаптив блога
- Подготовка проекта
- Template и gap
- Grid-auto-flow
- Ширина колонок
- Ширина элементов
- Положение элементов
- Именованные линии
- Auto-fit и auto-fill
- Адаптивный grid
- Order
- Justify и align
- Заполнение grid
- Template-areas
- Лучшие практики
- Тест - CSS Grid
- Занятие - CSS Grid
- Разбор макета
- Упражнение - Вёрстка сетки
- Overflow и white-space
- Scrollbar
- Упражнение - Вёрстка карточки
- Адаптив списка курсов
- Упражнение - Нам доверяют
- Финальный адаптив
- Куда дальше?
- Рекомендуемый курс
- Финальное тестирование
Тариф Самостоятельный
Цена: 3999 рублей
https://purpleschool.ru/course/html-css