В прошлом уроке мы разобрали, из чего браузер собирает страницу — HTML, CSS, JS и запросы за данными. Сегодня — про то, КАК эта страница выглядит. Страница собрана из HTML и CSS не абстрактно, а в конкретную картинку на экране: расположение блоков, отступы, размеры шрифта. Реализация визуального дизайна страницы через HTML и CSS — это и есть вёрстка. А адаптивность — это способность одной и той же вёрстки корректно выглядеть на разных размерах экрана.
Чему научишься за этот урок:
— находить дефекты вёрстки на трёх типичных ширинах экрана;
— различать основные типы дефектов вёрстки по описанию;
— проверять адаптивность практически, не имея под рукой десяток разных устройств.
Типичные дефекты вёрстки
Дефект вёрстки — это когда элементы страницы визуально ведут себя неправильно при конкретной ширине экрана. Вот пять типов, которые встречаются чаще всего:
+----------------------------------------------------------------+ | ТИПИЧНЫЕ ДЕФЕКТЫ ВЁРСТКИ | +----------------------------------------------------------------+ | 1. Наложение элементов -- элементы наезжают друг на друга | | 2. Обрезание текста -- текст обрезан / вылезает за края | | 3. Поломка при breakpoint -- расположение ломается при | | определённой ширине | | 4. Непропорциональность -- элементы слишком мелкие / крупные| | 5. Горизонтальная прокрутка -- скролл вбок там, где его не ждали| +----------------------------------------------------------------+
Три ширины для проверки
Проверить вёрстку на всех возможных ширинах экрана нереально — их бесконечно много. На практике достаточно проверить три типичные категории экранов:
- Десктоп — широкий экран, ноутбук или монитор.
- Планшет — средняя ширина.
- Мобильный — узкий экран телефона, самая узкая из трёх категорий.
На каждой из трёх ширин смотрят одно и то же: не наезжают ли элементы друг на друга, помещается ли текст, не появилась ли лишняя горизонтальная прокрутка. Именно между такими категориями обычно и находится точка перелома (breakpoint) — конкретная ширина экрана, при пересечении которой вёрстка меняет расположение элементов. Если вёрстка не подготовлена к переходу через неё, расположение ломается именно в этой точке.
Практический способ проверки: не нужен склад из разных телефонов и планшетов. В DevTools (уже знакомых по главе 3) есть режим адаптивного дизайна — он переключает ширину экрана прямо в браузере, и на одной и той же странице можно быстро пройтись по десктопу, планшету и мобильному.
Пример на полигоне
На нашем полигоне открыли страницу каталога курсов на трёх ширинах экрана. На широком (десктопном) экране всё в порядке: карточки курсов ровно стоят в сетке, текст помещается, кнопки на местах, лишней прокрутки нет. На средней ширине (планшет) картина другая: карточки курсов начинают наезжать друг на друга, частично перекрывая заголовки соседних карточек. А на узкой ширине (мобильный) появляется ещё один дефект: кнопка «Записаться» на карточке уезжает за правый край экрана, и часть кнопки не видна и, возможно, не нажимается.
Контрольный вопрос. Что такое вёрстка веб-страницы?
Подсказка: Вспомни, из чего собирается видимая часть страницы — материал про HTML/CSS из главы 7.1.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Что такое адаптивность вёрстки?
Подсказка: Обрати внимание на слово «разных» — речь про ширину экрана, а не про скорость или нагрузку.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Что называют «точкой перелома» (breakpoint)?
Подсказка: Подумай про смысл слова «точка» — это не про сервер и не про глобальную поломку сайта.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Какие из перечисленных ситуаций — типичные дефекты вёрстки (выбери все подходящие)?
Выберите все верные варианты.
Подсказка: Дефект вёрстки — это про визуальное расположение элементов, а не про код ответа сервера.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. В каком инструменте браузера удобно проверять вёрстку сразу на нескольких ширинах экрана, без реальных устройств под рукой? Ответь одним словом — инструмент уже знаком из главы 3.
Подсказка: Вспомни инструмент с вкладками Elements/Console/Network/Application из главы 3.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Какая из трёх типичных категорий ширины экрана обычно самая узкая?
Подсказка: Подумай про размер экрана телефона по сравнению с ноутбуком и планшетом.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. На полигоне открыли страницу каталога курсов на широком (десктопном) экране: все карточки курсов ровно выстроены в сетку, текст помещается, кнопки на местах, без горизонтальной прокрутки. Сверяясь со списком из пяти типичных дефектов вёрстки из урока, сколько из них присутствует в этом описании? Ответь числом.
Подсказка: Пройдись по каждому из пяти пунктов списка типичных дефектов и сверь с описанием — присутствует он здесь или нет.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. На средней ширине экрана (планшет) карточки курсов в каталоге начинают наезжать друг на друга, частично перекрывая текст соседних карточек. Как называется этот тип дефекта вёрстки — ответь точной формулировкой из списка урока?
Подсказка: Посмотри на список типичных дефектов вёрстки — там точно назван похожий случай, найди его формулировку.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. На узком (мобильном) экране кнопка «Записаться» на карточке курса уезжает за правый край экрана — часть кнопки не видна. Объясни в 2-3 предложениях, к какому типу дефекта вёрстки это относится и почему такой дефект особенно критичен именно для мобильных пользователей.
Критерий приёмки: назван дефект «горизонтальная прокрутка» или «элемент уезжает за край экрана» применительно к кнопке; объяснено, что кнопка «Записаться» — ключевое действие для конверсии, и если её не видно целиком или не получается нажать, пользователь не может завершить целевое действие (записаться на курс).
Подсказка: Подумай, к какому пункту списка типичных дефектов урока относится «элемент уехал за край экрана», и что произойдёт, если пользователь не сможет дотянуться до кнопки.
✅ Готово, если: ответ раскрывает то, что просит критерий приёмки в задании выше.
Онлайн-проверка ответа появится позже
Задание. Тестировщик проверил вёрстку каталога курсов только на самом широком (десктоп) и самом узком (мобильный) экранах — дефектов не нашёл, посчитал вёрстку полностью адаптивной. Какую из трёх типичных категорий ширины экрана из урока он пропустил проверить? Ответь одним словом.
Подсказка: Вспомни список из трёх типичных категорий ширины экрана и сопоставь их с тем, что тестировщик уже проверил.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Что стоит сделать тестировщику, если на всех трёх типичных ширинах (десктоп, планшет, мобильный) вёрстка выглядит нормально, но между этими ширинами есть узкий промежуток, где элементы всё же наезжают друг на друга?
Подсказка: В уроке написано слово «типичные» — подумай, что это значит для списка всего из трёх категорий.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Итог:
— вёрстка — это реализация визуального дизайна страницы через HTML и CSS, адаптивность — работоспособность этой вёрстки на разных ширинах экрана;
— типичные дефекты вёрстки: наложение элементов, обрезание текста, поломка при переходе через точку перелома (breakpoint), непропорциональность, горизонтальная прокрутка;
— проверять адаптивность удобно на трёх типичных категориях ширины — десктоп, планшет, мобильный — используя режим адаптивного дизайна в DevTools.
Что дальше
Мы разобрали вёрстку и адаптивность — как страница выглядит. Дальше поговорим про то, как страница ведёт себя, когда пользователь вводит данные в форму: разберём, почему проверки в браузере недостаточно и как убедиться, что сервер тоже не пропустит невалидные данные.
