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