Курс подходит
- Новичкам, которые хотят научиться писать и понимать код
- Специалистам, которым нужна системная практика
- Самоучкам, желающим собрать проект для портфолио
Программирование
Онлайн-курс «HTML + CSS»
Уверенно верстать семантичные и адаптивные страницы. Обучение построено вокруг практики и завершается самостоятельной итоговой работой.
Итоговый результат: многостраничный адаптивный сайт по макету.
14 модулейот основ до проекта
39–53 часовв удобном темпе
Автопроверкаобратная связь сразу
Сертификатс проверкой подлинности
О программе
Кому подойдёт курс и чему вы научитесь
Практические навыки
- Разбирать «Семантический HTML-документ» на практическом примере
- Проектировать «Текст, ссылки и изображения» на практическом примере
- Применять «Формы и доступность» на практическом примере
- Проверять «Каскад и специфичность CSS» на практическом примере
- Сравнивать решения для «Блочная модель и размеры» на практическом примере
- Объяснять результат по теме «Flexbox» на практическом примере
Программа обученияМодуль 1 · Основа Модуль 2 · Основа Модуль 3 · Основа Модуль 4 · Основа Модуль 5 · Сборка Модуль 6 · Сборка Модуль 7 · Сборка Модуль 8 · Сборка Модуль 9 · Сборка Модуль 10 · Сборка Модуль 11 · Проверка и усиление Модуль 12 · Проверка и усиление Модуль 13 · Проверка и усиление Модуль 14 · Защита
Что вы изучите и создадите
Каждый модуль объясняет отдельную тему простыми словами и закрепляет её практикой.
Семантический HTML-документ
«Семантический HTML-документ» простыми словами — это умение собрать основной пользовательский сценарий и проверить его на узком экране, с клавиатуры и при ошибке.
Текст, ссылки и изображения
«Текст, ссылки и изображения» простыми словами — это умение подготовить маленький набор изображений, выполнить одно преобразование или предсказание и вручную разобрать ошибки.
Формы и доступность
«Формы и доступность» простыми словами — это умение собрать основной пользовательский сценарий и проверить его на узком экране, с клавиатуры и при ошибке. Мы берём входные данные, применяем к ним понятные правила и получаем результат, который можно проверить.
Каскад и специфичность CSS
«Каскад и специфичность CSS» простыми словами — это умение собрать основной пользовательский сценарий и проверить его на узком экране, с клавиатуры и при ошибке.
Блочная модель и размеры
«Блочная модель и размеры» простыми словами — это умение выделить сущности, границы и связи, затем проверить схему на основном и аварийном сценариях. Мы берём входные данные, применяем к ним понятные правила и получаем результат, который можно проверить.
Flexbox
«Flexbox» простыми словами — это умение определить контракт, реализовать минимальное решение и доказать корректность на новых входных данных. Мы берём входные данные, применяем к ним понятные правила и получаем результат, который можно проверить.
CSS Grid
«CSS Grid» простыми словами — это умение собрать основной пользовательский сценарий и проверить его на узком экране, с клавиатуры и при ошибке. Мы берём входные данные, применяем к ним понятные правила и получаем результат, который можно проверить.
Адаптивная вёрстка
«Адаптивная вёрстка» простыми словами — это умение определить контракт, реализовать минимальное решение и доказать корректность на новых входных данных. Мы берём входные данные, применяем к ним понятные правила и получаем результат, который можно проверить.
Компоненты и состояния
«Компоненты и состояния» простыми словами — это умение определить контракт, реализовать минимальное решение и доказать корректность на новых входных данных.
Анимация без вреда
«Анимация без вреда» простыми словами — это умение определить контракт, реализовать минимальное решение и доказать корректность на новых входных данных. Мы берём входные данные, применяем к ним понятные правила и получаем результат, который можно проверить.
Производительность и проверка
«Производительность и проверка» простыми словами — это умение задать наблюдаемое поведение, подготовить репрезентативные случаи и сравнить ожидаемый результат с фактическим.
Итоговый адаптивный сайт
«Итоговый адаптивный сайт» простыми словами — это умение определить контракт, реализовать минимальное решение и доказать корректность на новых входных данных.
Design tokens и масштабируемый UI-kit
«Design tokens и масштабируемый UI-kit» простыми словами — это умение собрать основной пользовательский сценарий и проверить его на узком экране, с клавиатуры и при ошибке.
Подготовка вёрстки к интеграции с backend
«Подготовка вёрстки к интеграции с backend» простыми словами — это умение зафиксировать контракт, реализовать успешный обмен и обработать таймаут, повтор и некорректный ответ.
Результат
многостраничный адаптивный сайт по макету
По ходу курса ученик выполняет практические задания, проверяет себя и постепенно готовит итоговую работу.
Что нужно знать до начала
Уметь пользоваться компьютером, устанавливать программы и работать с файлами. Для курсов «с нуля» опыт разработки не требуется.
Инструменты курса
HTML5, CSS3, DevTools, Figma
Формат
Теория простыми словами, разобранный пример, практика, автопроверка и итоговый проект
Можно начать сразу
Начать обучение →Перейдите от программы к практике
Доступ ко всем модулям, автопроверке и сертификату — 9 900 ₽.
Ответы на вопросы
Подойдёт ли курс новичку?
Да. Материал идёт от простых действий к самостоятельной работе, а новые термины объясняются по ходу курса.
Как проверяются задания?
Система проверяет текст ответа по критериям урока и короткий тест. Код, сайт или другой результат ученик прикладывает как доказательство: система оценивает объяснение, но не запускает проект автоматически.
Когда я получу сертификат?
Именной сертификат освоения основной части программы автоматически выпускается после зачёта 80% модулей. В нём указано, сколько модулей пройдено; обучение можно продолжить до 100%.