Курс подходит
- Новичкам в создании сайтов
- Дизайнерам и контент-специалистам, расширяющим навыки
- Разработчикам, которым нужен законченный веб-проект
Веб-разработка
Онлайн-курс «Адаптивная верстка»
Освоить направление «Адаптивная верстка» через последовательность предметных задач и самостоятельную итоговую работу. Обучение построено вокруг практики и завершается проектом, который можно показать в портфолио.
Итоговый результат: Адаптация готового desktop-сайта — законченная работа с инструкцией, проверками и демонстрацией результата.
12 модулейот основ до проекта
36–48 часовв удобном темпе
Автопроверкаобратная связь сразу
Сертификатс проверкой подлинности
О программе
Кому подойдёт курс и чему вы научитесь
Практические навыки
- Применять тему «Mobile-first стратегия» на практике и проверять результат по критериям
- Применять тему «Viewport и относительные единицы» на практике и проверять результат по критериям
- Применять тему «Гибкая типографика clamp» на практике и проверять результат по критериям
- Применять тему «Flexbox при узком экране» на практике и проверять результат по критериям
- Применять тему «Grid, minmax и auto-fit» на практике и проверять результат по критериям
- Применять тему «Медиазапросы по содержимому» на практике и проверять результат по критериям
Программа обученияМодуль 1 Модуль 2 Модуль 3 Модуль 4 Модуль 5 Модуль 6 Модуль 7 Модуль 8 Модуль 9 Модуль 10 Модуль 11 Модуль 12
Что вы изучите
Mobile-first стратегия
Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. На этом этапе важно освоить базовую модель и научиться узнавать её в простых ситуациях. В курсе «Адаптивная верстка» тема «Mobile-first стратегия» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Viewport и относительные единицы
Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. На этом этапе важно освоить базовую модель и научиться узнавать её в простых ситуациях. В курсе «Адаптивная верстка» тема «Viewport и относительные единицы» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Гибкая типографика clamp
Граф моделирует вершины и связи; выбор алгоритма зависит от весов рёбер и требуемого вида пути. На этом этапе важно освоить базовую модель и научиться узнавать её в простых ситуациях. В курсе «Адаптивная верстка» тема «Гибкая типографика clamp» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Flexbox при узком экране
Flexbox распределяет элементы вдоль главной и поперечной оси и удобен для одномерных компонентов. Модуль переводит базовые знания в рабочий сценарий с ограничениями, ошибками и самостоятельным выбором инструмента. В курсе «Адаптивная верстка» тема «Flexbox при узком экране» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Grid, minmax и auto-fit
CSS Grid управляет строками и колонками и подходит для двумерных макетов. Модуль переводит базовые знания в рабочий сценарий с ограничениями, ошибками и самостоятельным выбором инструмента. В курсе «Адаптивная верстка» тема «Grid, minmax и auto-fit» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Медиазапросы по содержимому
Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. Модуль переводит базовые знания в рабочий сценарий с ограничениями, ошибками и самостоятельным выбором инструмента. В курсе «Адаптивная верстка» тема «Медиазапросы по содержимому» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Container queries
Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. Модуль переводит базовые знания в рабочий сценарий с ограничениями, ошибками и самостоятельным выбором инструмента. В курсе «Адаптивная верстка» тема «Container queries» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Адаптивные изображения picture
Адаптивный интерфейс меняет компоновку по доступному пространству, а не по названию устройства. Модуль переводит базовые знания в рабочий сценарий с ограничениями, ошибками и самостоятельным выбором инструмента. В курсе «Адаптивная верстка» тема «Адаптивные изображения picture» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Навигация для телефона
Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. Тема встраивается в итоговый проект и проверяется вместе с ранее созданными частями. В курсе «Адаптивная верстка» тема «Навигация для телефона» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Таблицы и длинный контент
Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. Тема встраивается в итоговый проект и проверяется вместе с ранее созданными частями. В курсе «Адаптивная верстка» тема «Таблицы и длинный контент» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Тестирование устройств
Тест фиксирует вход, ожидаемое поведение и наблюдаемый результат, чтобы изменение кода не ломало контракт. Тема встраивается в итоговый проект и проверяется вместе с ранее созданными частями. В курсе «Адаптивная верстка» тема «Тестирование устройств» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Адаптация готового desktop-сайта
Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. Финальный модуль объединяет программу курса в один воспроизводимый результат. В курсе «Адаптивная верстка» тема «Адаптация готового desktop-сайта» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Результат
Адаптация готового desktop-сайта — законченная работа с инструкцией, проверками и демонстрацией результата
В каждом модуле ученик создаёт часть итоговой работы, проходит самопроверку и получает баллы за практику.
Инструменты курса
HTML, CSS, браузерные инструменты, сервер и Git
Формат
Теория, демонстрация, практика, автопроверка и итоговый проект
Ответы на вопросы
Подойдёт ли курс новичку?
Да. Первый модуль определяет уровень, а материал идёт от базовых действий к самостоятельному проекту.
Как проверяются задания?
Система проверяет полноту ответа, ключевые критерии и тест. Результат и рекомендации появляются сразу.
Когда я получу сертификат?
Именной сертификат автоматически выпускается после успешного завершения всех модулей.