Записывайтесь на бесплатный онлайн-интенсив «Верстка для дизайнеров и фрилансеров» в 19:00 мск
Записаться
Вернуться к продуктам
Кратко о видео
В уроке разобрана полная сборка секции с карточками Apple Watch: создание структуры через секцию и контейнер, добавление карточек товаров, настройка элементов внутри карточки (текст, изображение), выравнивание контента через Flex, дублирование карточек и настройка родительского блока.
Ключевой принцип урока — не выравнивать каждый элемент вручную, а правильно настроить структуру: родительский контейнер управляет дочерними элементами, а Flex помогает сохранять одинаковое расположение контента внутри карточек. Отдельно разобрана настройка фона секции и адаптация блока под разные размеры экранов.
Урок подойдет новичкам, которые изучают базовую вёрстку в Taptop и хотят научиться собирать секции сайтов правильно. Достаточно понимать основные элементы редактора: добавление блоков, работу с панелью настроек и базовые принципы структуры страницы.
Как сверстать карточки Apple Watch в Taptop
Секция с карточками товаров кажется простой: изображение, текст, кнопка. Но при вёрстке сразу появляются вопросы: как правильно построить структуру блока? Как выровнять содержимое внутри карточек, чтобы всё выглядело аккуратно? Как сделать так, чтобы карточки не ломались на разных экранах?
Вместо ручного подгона каждого элемента в Taptop важно понимать правильный подход: создать понятную структуру, настроить родительские контейнеры и использовать выравнивание, чтобы блок автоматически адаптировался под разные устройства.
После урока у тебя будет готовая секция с карточками Apple Watch, а главное — понимание, как собирать подобные блоки для любых коммерческих проектов.
В уроке Вадим показывает, как сверстать секцию с карточками Apple Watch в Taptop с нуля. Разбираем создание структуры блока, добавление карточек товаров, выравнивание элементов внутри них и настройку фона секции.
Также дорабатываем адаптив: проверяем отображение элементов на разных экранах и настраиваем блок так, чтобы он сохранял аккуратный вид на любых устройствах.
После просмотра ты научишься собирать секции с карточками и применять базовые принципы работы со структурой и выравниванием элементов в Taptop.
Тайминги видео
00:00 — Введение
00:40 — Вёрстка структуры блока
03:35 — Создание карточек
10:52 — Выравнивание элементов внутри карточки
14:14 — Создание и выравнивание остальных карточек
16:05 — Добавление фона секции
17:14 — Донастройка элементов для корректного отображения на разных экранах
