Семантический HTML-документ
Разберите структуру документа, landmark-элементы, заголовки и смысловую разметку.
Практика: Сверстайте каркас страницы онлайн-школы с header, nav, main, секциями и footer.Программирование
HTML + CSS
Уверенно верстать семантичные и адаптивные страницы. Полная программа, практические задания с автопроверкой, сохранение прогресса и именной сертификат.
9 900 ₽
- 14 тематических модулей
- 14 модулей · 42–56 часов
- Итоговый проект: многостраничный адаптивный сайт по макету
- Практика и автоматическая проверка
- Именной сертификат с проверкой подлинности
При покупке 2 курсов скидка 10%, от 3 курсов — 15%.
Результат обучения
многостраничный адаптивный сайт по макету
Инструменты: HTML5, CSS3, DevTools, Figma
Программа курса
Текст, ссылки и изображения
Используйте списки, ссылки, picture, alt, figure и адаптивные изображения.
Практика: Оформите статью с оглавлением, иллюстрациями, подписями и внешними ссылками.Формы и доступность
Свяжите label и input, выберите типы полей, добавьте fieldset, autocomplete и понятные ошибки.
Практика: Создайте форму записи на курс, полностью управляемую клавиатурой.Каскад и специфичность CSS
Разберите наследование, порядок правил, specificity, custom properties и DevTools.
Практика: Создайте набор токенов цвета и типографики, устраните конфликтующие селекторы.Блочная модель и размеры
Изучите content, padding, border, margin, box-sizing, min/max и переполнение.
Практика: Соберите карточки одинаковой визуальной высоты с разным объёмом текста.Flexbox
Освойте главную и поперечную оси, перенос, gap, grow/shrink и auto margin.
Практика: Сверстайте шапку, список преимуществ и панель кнопок без позиционирования.CSS Grid
Создавайте явные и автоматические сетки, используйте minmax, repeat и auto-fit.
Практика: Сверстайте каталог курсов, который сам меняет число колонок по доступной ширине.Адаптивная вёрстка
Применяйте mobile-first, относительные единицы, медиазапросы и контейнерные ограничения.
Практика: Адаптируйте страницу для 360, 768 и 1440 px без горизонтальной прокрутки.Компоненты и состояния
Спроектируйте кнопки, поля, карточки и уведомления с hover, focus-visible, disabled и error.
Практика: Создайте UI-kit страницы и продемонстрируйте все состояния каждого компонента.Анимация без вреда
Используйте transition и transform, учитывайте prefers-reduced-motion и избегайте дорогих свойств.
Практика: Добавьте мягкие состояния карточек и меню с режимом уменьшения движения.Производительность и проверка
Оптимизируйте шрифты и изображения, проверяйте валидность, контраст и переполнение.
Практика: Проведите аудит страницы и исправьте не менее десяти найденных проблем.Итоговый адаптивный сайт
Соберите многостраничный проект из компонентов, добавьте форму и опубликуйте.
Практика: Сверстайте сайт по макету с доступностью, адаптивностью, метаданными и отчётом проверок.Design tokens и масштабируемый UI-kit
Материал разбирается через входные данные, алгоритм, состояние программы, наблюдаемый результат и оценку ограничений. Тема встраивается в итоговый проект и проверяется вместе с ранее созданными частями. В курсе «HTML + CSS» тема «Design tokens и масштабируемый UI-kit» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется корректностью алгоритма, читаемостью решения и тестами на граничных данных.
Практика: Создайте рабочий код и набор тестовых данных по теме «Design tokens и масштабируемый UI-kit». Покажите исходные данные, ход работы, обычный и граничный сценарии, затем исправьте найденную ошибку.Подготовка вёрстки к интеграции с backend
Материал разбирается через входные данные, алгоритм, состояние программы, наблюдаемый результат и оценку ограничений. Финальный модуль объединяет программу курса в один воспроизводимый результат. В курсе «HTML + CSS» тема «Подготовка вёрстки к интеграции с backend» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется корректностью алгоритма, читаемостью решения и тестами на граничных данных.
Практика: Соберите итоговую работу курса, применив тему «Подготовка вёрстки к интеграции с backend». Представьте рабочий код и набор тестовых данных, инструкцию воспроизведения и отчёт проверки.