arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобрана пиксельная вёрстка на реальном проекте в стиле Balenciaga: логика выбора между pixel и fluid подходами, настройка Root и базовых параметров, хедер с меню и контейнером, Grid-сетка для карточек товаров, адаптив через брейкпоинты для разных устройств. Пиксельная вёрстка — осознанный выбор, а не ошибка. Для сайтов с мелкой декоративной типографикой (как у люксовых брендов) fluid делает текст нечитаемым при уменьшении. Пиксели дают точный контроль: каждый размер строго зафиксирован. Адаптив требует больше ручных правок, но результат точнее воспроизводит макет. Урок для тех, кто верстает в Taptop и хочет разобраться, когда выбирать pixel вместо fluid. Понимание базовых принципов вёрстки (Grid, адаптив, Root) нужно как предварительная база.

Пиксельная верстка сайта Balenciaga по макету Figma в Taptop

Макет с мелкой типографикой — как у Balenciaga. Fluid-вёрстка делает такой текст нечитаемым при уменьшении экрана. Можно ли верстать в пикселях и при этом сохранить адаптивность?
Пиксельная вёрстка — осознанный выбор для сайтов с мелкой типографикой. Главное правило: ширина блоков в процентах, шрифты в пикселях, адаптивность через брейкпоинты. На практике верстаем промо-страницу в стиле Balenciaga. Для тех, кто уже верстает в Taptop. После просмотра понимаешь, когда выбирать пиксели вместо fluid и как это делать правильно.
Тайминги видео
00:00 — Когда выбирать пиксельную вёрстку и почему 08:00 — Root: шрифт и базовые настройки 15:00 — Хедер: меню, логотип, контейнер 25:00 — Grid-сетка для карточек товаров 35:00 — Адаптив на мобильном брейкпоинте 40:00 — Итоги и акция для дизайнеров

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

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