Веб-разработка

Онлайн-курс «Адаптивная верстка»

Освоить направление «Адаптивная верстка» через последовательность предметных задач и самостоятельную итоговую работу. Обучение построено вокруг практики и завершается проектом, который можно показать в портфолио.

Автор и преподаватель

Дамир Шарифьянов

Senior Full-stack Developer / Web Engineer

Практикующий разработчик с 10+ годами коммерческого опыта и 100+ реализованными веб-проектами. В курсе он разбирает рабочие подходы, типичные ошибки и задачи, с которыми специалисты сталкиваются в реальных проектах.

Об авторе →

Итоговый результат: Адаптация готового desktop-сайта — законченная работа с инструкцией, проверками и демонстрацией результата.

Визуальная карта курса «Адаптивная верстка»Путь от изучения темы к практике и готовому проектуВЕБ-РАЗРАБОТКААдаптивная версткаСтруктура → интерфейс → публикация1Разобратьсяс понятиями2Применитьна практикеСоздать проектдля портфолио
12 модулейот основ до проекта
36–48 часовв удобном темпе
Автопроверкаобратная связь сразу
Сертификатс проверкой подлинности
Программа обучения

Что вы изучите

Модуль 1

Mobile-first стратегия

Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. На этом этапе важно освоить базовую модель и научиться узнавать её в простых ситуациях. В курсе «Адаптивная верстка» тема «Mobile-first стратегия» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.

Модуль 2

Viewport и относительные единицы

Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. На этом этапе важно освоить базовую модель и научиться узнавать её в простых ситуациях. В курсе «Адаптивная верстка» тема «Viewport и относительные единицы» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.

Модуль 3

Гибкая типографика clamp

Граф моделирует вершины и связи; выбор алгоритма зависит от весов рёбер и требуемого вида пути. На этом этапе важно освоить базовую модель и научиться узнавать её в простых ситуациях. В курсе «Адаптивная верстка» тема «Гибкая типографика clamp» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.

Модуль 4

Flexbox при узком экране

Flexbox распределяет элементы вдоль главной и поперечной оси и удобен для одномерных компонентов. Модуль переводит базовые знания в рабочий сценарий с ограничениями, ошибками и самостоятельным выбором инструмента. В курсе «Адаптивная верстка» тема «Flexbox при узком экране» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.

Модуль 5

Grid, minmax и auto-fit

CSS Grid управляет строками и колонками и подходит для двумерных макетов. Модуль переводит базовые знания в рабочий сценарий с ограничениями, ошибками и самостоятельным выбором инструмента. В курсе «Адаптивная верстка» тема «Grid, minmax и auto-fit» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.

Модуль 6

Медиазапросы по содержимому

Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. Модуль переводит базовые знания в рабочий сценарий с ограничениями, ошибками и самостоятельным выбором инструмента. В курсе «Адаптивная верстка» тема «Медиазапросы по содержимому» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.

Модуль 7

Container queries

Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. Модуль переводит базовые знания в рабочий сценарий с ограничениями, ошибками и самостоятельным выбором инструмента. В курсе «Адаптивная верстка» тема «Container queries» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.

Модуль 8

Адаптивные изображения picture

Адаптивный интерфейс меняет компоновку по доступному пространству, а не по названию устройства. Модуль переводит базовые знания в рабочий сценарий с ограничениями, ошибками и самостоятельным выбором инструмента. В курсе «Адаптивная верстка» тема «Адаптивные изображения picture» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.

Модуль 9

Навигация для телефона

Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. Тема встраивается в итоговый проект и проверяется вместе с ранее созданными частями. В курсе «Адаптивная верстка» тема «Навигация для телефона» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.

Модуль 10

Таблицы и длинный контент

Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. Тема встраивается в итоговый проект и проверяется вместе с ранее созданными частями. В курсе «Адаптивная верстка» тема «Таблицы и длинный контент» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.

Модуль 11

Тестирование устройств

Тест фиксирует вход, ожидаемое поведение и наблюдаемый результат, чтобы изменение кода не ломало контракт. Тема встраивается в итоговый проект и проверяется вместе с ранее созданными частями. В курсе «Адаптивная верстка» тема «Тестирование устройств» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.

Модуль 12

Адаптация готового desktop-сайта

Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. Финальный модуль объединяет программу курса в один воспроизводимый результат. В курсе «Адаптивная верстка» тема «Адаптация готового desktop-сайта» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.

Результат

Адаптация готового desktop-сайта — законченная работа с инструкцией, проверками и демонстрацией результата

В каждом модуле ученик создаёт часть итоговой работы, проходит самопроверку и получает баллы за практику.

Инструменты курса

HTML, CSS, браузерные инструменты, сервер и Git

Формат

Теория, демонстрация, практика, автопроверка и итоговый проект

Ответы на вопросы

Подойдёт ли курс новичку?

Да. Первый модуль определяет уровень, а материал идёт от базовых действий к самостоятельному проекту.

Как проверяются задания?

Система проверяет полноту ответа, ключевые критерии и тест. Результат и рекомендации появляются сразу.

Когда я получу сертификат?

Именной сертификат автоматически выпускается после успешного завершения всех модулей.

Купить за 7 900 ₽