Модуль 1Разбор макета Figma
Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. На этом этапе важно освоить базовую модель и научиться узнавать её в простых ситуациях. В курсе «Верстка современных сайтов» тема «Разбор макета Figma» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Практика: Создайте страницу или компонент в браузере по теме «Разбор макета Figma». Покажите исходные данные, ход работы, обычный и граничный сценарии, затем исправьте найденную ошибку.
Модуль 2Семантический каркас страницы
Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. На этом этапе важно освоить базовую модель и научиться узнавать её в простых ситуациях. В курсе «Верстка современных сайтов» тема «Семантический каркас страницы» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Практика: Создайте страницу или компонент в браузере по теме «Семантический каркас страницы». Покажите исходные данные, ход работы, обычный и граничный сценарии, затем исправьте найденную ошибку.
Модуль 3CSS-токены и типографика
CSS применяет каскад правил к структуре документа и отвечает за сетку, состояния и адаптивность. Граф моделирует вершины и связи; выбор алгоритма зависит от весов рёбер и требуемого вида пути. На этом этапе важно освоить базовую модель и научиться узнавать её в простых ситуациях. В курсе «Верстка современных сайтов» тема «CSS-токены и типографика» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Практика: Создайте страницу или компонент в браузере по теме «CSS-токены и типографика». Покажите исходные данные, ход работы, обычный и граничный сценарии, затем исправьте найденную ошибку.
Модуль 4Flexbox-компоненты
Flexbox распределяет элементы вдоль главной и поперечной оси и удобен для одномерных компонентов. Модуль переводит базовые знания в рабочий сценарий с ограничениями, ошибками и самостоятельным выбором инструмента. В курсе «Верстка современных сайтов» тема «Flexbox-компоненты» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Практика: Создайте страницу или компонент в браузере по теме «Flexbox-компоненты». Покажите исходные данные, ход работы, обычный и граничный сценарии, затем исправьте найденную ошибку.
Модуль 5Сложные сетки CSS Grid
CSS применяет каскад правил к структуре документа и отвечает за сетку, состояния и адаптивность. CSS Grid управляет строками и колонками и подходит для двумерных макетов. Модуль переводит базовые знания в рабочий сценарий с ограничениями, ошибками и самостоятельным выбором инструмента. В курсе «Верстка современных сайтов» тема «Сложные сетки CSS Grid» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Практика: Создайте страницу или компонент в браузере по теме «Сложные сетки CSS Grid». Покажите исходные данные, ход работы, обычный и граничный сценарии, затем исправьте найденную ошибку.
Модуль 6Адаптивные изображения
Адаптивный интерфейс меняет компоновку по доступному пространству, а не по названию устройства. Модуль переводит базовые знания в рабочий сценарий с ограничениями, ошибками и самостоятельным выбором инструмента. В курсе «Верстка современных сайтов» тема «Адаптивные изображения» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Практика: Создайте страницу или компонент в браузере по теме «Адаптивные изображения». Покажите исходные данные, ход работы, обычный и граничный сценарии, затем исправьте найденную ошибку.
Модуль 7Компонентный подход БЭМ
Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. Модуль переводит базовые знания в рабочий сценарий с ограничениями, ошибками и самостоятельным выбором инструмента. В курсе «Верстка современных сайтов» тема «Компонентный подход БЭМ» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Практика: Создайте страницу или компонент в браузере по теме «Компонентный подход БЭМ». Покажите исходные данные, ход работы, обычный и граничный сценарии, затем исправьте найденную ошибку.
Модуль 8Формы и состояния
Форма должна иметь подписи, серверную проверку, понятные ошибки и защиту изменяющего запроса. Модуль переводит базовые знания в рабочий сценарий с ограничениями, ошибками и самостоятельным выбором инструмента. В курсе «Верстка современных сайтов» тема «Формы и состояния» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Практика: Создайте страницу или компонент в браузере по теме «Формы и состояния». Покажите исходные данные, ход работы, обычный и граничный сценарии, затем исправьте найденную ошибку.
Модуль 9Анимация и микровзаимодействия
Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. Тема встраивается в итоговый проект и проверяется вместе с ранее созданными частями. В курсе «Верстка современных сайтов» тема «Анимация и микровзаимодействия» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Практика: Создайте страницу или компонент в браузере по теме «Анимация и микровзаимодействия». Покажите исходные данные, ход работы, обычный и граничный сценарии, затем исправьте найденную ошибку.
Модуль 10Pixel perfect без хрупкости
Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. Тема встраивается в итоговый проект и проверяется вместе с ранее созданными частями. В курсе «Верстка современных сайтов» тема «Pixel perfect без хрупкости» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Практика: Создайте страницу или компонент в браузере по теме «Pixel perfect без хрупкости». Покажите исходные данные, ход работы, обычный и граничный сценарии, затем исправьте найденную ошибку.
Модуль 11Кроссбраузерное тестирование
Тест фиксирует вход, ожидаемое поведение и наблюдаемый результат, чтобы изменение кода не ломало контракт. Тема встраивается в итоговый проект и проверяется вместе с ранее созданными частями. В курсе «Верстка современных сайтов» тема «Кроссбраузерное тестирование» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Практика: Подготовьте матрицу проверок по теме «Кроссбраузерное тестирование» и выполните обычный, граничный и ошибочный сценарии с фиксацией фактического результата.
Модуль 12Вёрстка многостраничного макета
Материал оценивается одновременно по семантике, адаптивности, доступности, производительности и поведению в браузере. Финальный модуль объединяет программу курса в один воспроизводимый результат. В курсе «Верстка современных сайтов» тема «Вёрстка многостраничного макета» считается освоенной только после создания предметного результата и его независимой проверки. Качество определяется работающим пользовательским сценарием на телефоне и компьютере, клавиатурной доступностью и отсутствием ошибок интерфейса.
Практика: Соберите итоговую работу курса, применив тему «Вёрстка многостраничного макета». Представьте страницу или компонент в браузере, инструкцию воспроизведения и отчёт проверки.