Курс адаптивной вёрстки
Научитесь верстать страницы, которые удобно читать и использовать на телефоне, планшете и компьютере.
О курсе
На маленьком экране длинное меню, широкая таблица и крупное изображение ведут себя иначе, чем на компьютере. Вы научитесь перестраивать интерфейс осознанно и проверять его на разных ширинах.
Чему научитесь
- Планирование структуры страницы от небольшого экрана к широкому.
- Flexbox, CSS Grid и относительные размеры элементов.
- Точки переключения, адаптивная типографика и изображения.
- Тестирование в браузере, исправление переполнений и доступность управления.
Программа обучения
Для каждого раздела указан ориентировочный объём в парах. Одна пара — два академических часа. Состав и темп занятий можно уточнить под вашу цель и подготовку.
Подход mobile first1 пара
- Планирование структуры страницы от небольшого экрана к широкому.
- Приоритеты контента и порядок блоков на узком экране
- Базовая сетка без фиксированной ширины
- Планирование перестройки меню и карточек
Гибкие сетки2 пары
- Flexbox, CSS Grid и относительные размеры элементов.
- Flexbox для навигации и небольших групп элементов
- CSS Grid для карточек и сложных областей страницы
- Ограничение ширины контента и работа с отступами
Медиа-запросы2 пары
- Точки переключения, адаптивная типографика и изображения.
- Медиа-запросы по содержимому, а не по модели устройства
- Масштабируемые размеры текста и межстрочные интервалы
- Изображения, которые не ломают ширину страницы
Проверка результата2 пары
- Тестирование в браузере, исправление переполнений и доступность управления.
- Поиск горизонтального скролла и переполненных блоков
- Проверка элементов управления на сенсорном экране
- Сравнение вёрстки с макетом на ключевых ширинах
Практическая работа и результат
Верстаете адаптивную страницу по макету и проверяете её на разных ширинах экрана.
В процессе вы применяете темы программы к одной задаче, проверяете результат и исправляете ошибки вместе с преподавателем. Так после занятий у вас остаётся законченная учебная работа, а не только записи с объяснениями.
С чего начать
Нужны начальные знания HTML и CSS. Если часть тем уже знакома, программу можно сместить в сторону более сложной практики.
Продолжить обучение
Эта тема входит в программу «Frontend-разработчик». Если вам нужно освоить направление целиком, обсудите с менеджером полную программу или отдельные занятия по этой теме.
Как проходят занятия
Аудитории, оборудование и практика — как это выглядит изнутри.
