arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобрана стратегия адаптива: два подхода — fluid (контент сжимается автоматически, правки минимальны) и пиксельный (каждый элемент правится вручную на каждом брейкпоинте). Поэлементная настройка брейкпоинтов для готовых блоков Яндекс.Станции, типичные проблемы и их решения. Fluid-вёрстка даёт огромное преимущество на адаптиве: большинство блоков сжимаются сами, ручные правки нужны только для крупных структурных изменений (колонки → стопка, хедер → бургер). Пиксельная вёрстка требует правок почти на каждом элементе — это в 3-5 раз больше работы. Часть 2 серии про вёрстку сайта Яндекс.Станции на готовых блоках. Смотри после части 1, где разобрана декомпозиция и базовая вёрстка. Урок для тех, кто уже уверенно работает с брейкпоинтами в Taptop.

Верстаем адаптив сайта Яндекс.Станции в Taptop: часть 2

Десктоп сверстан — и пора делать адаптив. Сколько брейкпоинтов нужно? Как не переделывать вручную каждый элемент? Что даёт fluid-вёрстка в реальном проекте?
Два подхода на практике: в fluid-вёрстке большинство блоков сжимаются автоматически, ручные правки минимальны. В пиксельной — каждый элемент переопределяется на мобильном вручную. Разница по трудозатратам в несколько раз. Для всех, кто делает адаптив. После просмотра выбираешь правильный подход и делаешь адаптив быстрее.
Тайминги видео
00:00 — Recap: что сделали в части 1 10:00 — Два подхода к адаптиву: fluid vs пиксельный 30:00 — Адаптив хедера и hero-секции 55:00 — Адаптив блоков с характеристиками и карточками 1:20:00 — Финальная проверка на устройствах 1:35:00 — Ответы на вопросы

Другие продукты академии

Как выйти на фриланс
Разберётесь, как брать первые проекты, называть цену и общаться с клиентами
Для кого
Специалистов
Направление
Фриланс
Формат
Мини-курс
Длительность
13 уроков
Taptop с нуля: сайт-портфолио
Осваиваете базу Taptop и собираете сайт-портфолио, который можно оставить себе
Для кого
Новичков
Направление
Вёрстка
Формат
Мини-курс
Длительность
9 уроков
Как дизайнеру понять вёрстку
Разберётесь, как устроены сайты, чтобы увереннее работать с ними дальше
Для кого
Новичков
Направление
Вёрстка
Формат
Интенсив
Длительность
2 урока
Как собрать сложную анимацию
Собираете сложную анимацию и плавный переход между страницами
Для кого
Для тех, кто в теме
Направление
Анимации
Формат
Интенсив
Длительность
2 урока