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