Taptop с нуля. Сайт-портфолио

Вернуться к продуктам

9 уроков

Доступ к материалам навсегда

Подойдёт для новичков

Cайт в портфолио

Taptop с нуля: сайт-портфолио

Практический курс для тех, кто хочет освоить интерфейс Taptop и научиться переносить макеты в браузер. Вы разберётесь в базовой логике вёрстки, научитесь работать с сетками Grid и базами данных CMS. После курса вы сможете самостоятельно создавать динамические сайты, которые корректно отображаются на любых устройствах и готовы к запуску.

Изучите интерфейс и базовые инструменты платформы Taptop для уверенного старта в вёрстке

Научитесь настраивать адаптивность под разные экраны по принципу Desktop First

Разберётесь в методологии БЭМ для поддержания порядка в классах и структуре проекта

Освоите работу с CMS-коллекциями для автоматического создания страниц

Соберёте полноценный многостраничный сайт-портфолио с анимацией и SEO-настройкой

Начать обучение

Смотреть программу

Пошаговая сборка проекта: от разбора макета до готового сайта

Короткие пошаговые уроки

Вы проходите все этапы разработки проекта — от разбора макета в Figma до проверки по чек-листу. Короткие видеоуроки разделены на спринты с таймлайнами, чтобы вам было удобно учиться в своём темпе.

Практика прямо в редакторе

Каждое действие закрепляется на практике: вы смотрите видеоинструкцию и параллельно выполняете аналогичные шаги в рабочей области редактора. Такой подход позволяет сразу освоить инструментарий платформы.

Системная логика вёрстки

Вы полностью освоите инструментарий редактора. Научитесь управлять размерами, внешними и внутренними отступами, логикой автолейаутов, а также разберетесь в позиционировании элементов и работе с сетками Flexbox и Grid.

Первый сайт без сложного кода

Главным итогом станет опубликованный многостраничный сайт-портфолио, созданный по правилам веб-разработки. Вы полностью настроите его работу — от мобильных версий и баз данных до ссылок и фавикона.

Автоматизация через CMS

Вы научитесь использовать динамический контент и базы данных для быстрой генерации страниц. Это позволит автоматизировать рутинные процессы и создавать масштабные проекты без ручного дублирования блоков.

С какими задачами поможет разобраться курс

Зависимость от разработчиков

Готовый макет приходится отдавать стороннему программисту, теряя время, контроль над результатом и часть прибыли. Курс решает эту проблему: вы научитесь самостоятельно переносить дизайн в веб и сдавать проекты без посредников.

Макет в Figma

Готовый сайт в сети

Поломки при адаптации

При переходе на мобильную версию блоки съезжают, а элементы перекрывают друг друга. Вы освоите логику работы брейкпоинтов и научитесь адаптировать сайт под любые экраны.

Блоки съезжают

Чёткий мобильный адаптив

Хаос в классах и стилях

Настройка каждого элемента по отдельности отнимает много времени, особенно когда на сайте много страниц. Вы научитесь работать с глобальными стилями и классами, чтобы менять цвета, шрифты и кнопки во всём проекте одновременно за пару кликов.

Долгие правки

Быстрая работа с помощью классов

Рутина при добавлении контента

Публикация новых кейсов или статей вручную занимает часы. Вы научитесь работать с CMS-коллекциями: достаточно настроить один шаблон, чтобы новые страницы генерировались автоматически при добавлении контента.

Долгая вёрстка вручную

Автоматизация через CMS

Для кого этот курс

Начинающим специалистам

Хотите освоить создание сайтов с нуля без программирования. Курс поможет разобраться в базовых стандартах веб-разработки и опубликовать первый проект.

Практикующим дизайнерам

Создаёте макеты в Figma, но хотите сами переносить их в браузер. Вы научитесь верстать сайты в точном соответствии с дизайном и сдавать проекты под ключ.

Маркетологам и предпринимателям

Хотите быстро запускать промо-страницы и тестировать бизнес-идеи. Вы сможете собирать сайты под конкретные задачи и настраивать SEO, не дожидаясь очереди на разработку.

Курс не подойдёт, если:

Вы уверенно работаете в редакторе и хотите углубить навыки, программа покажется слишком простой. Для продвинутого изучения вёрстки и платформы переходите на курс «Визуальная вёрстка».

Вы без проблем верстаете сайты и хотите освоить сложные анимации, этот интенсив вам не подойдёт. Для углублённого изучения сложных визуальных эффектов переходите на курс «Продвинутые анимации».

Вы освоите логику вёрстки и соберёте сайт своими руками

Смотрите видеоуроки от эксперта Taptop

Наш эксперт Вадим наглядно объяснит логику работы в Taptop.

Применяйте всё на практике

Повторяйте действия за автором в редакторе сразу после лекции.

Запустите готовый сайт

Перенесите реальный макет в веб и опубликуйте первый проект.

Учитесь в своём темпе

Проходите уроки в любое время без дедлайнов и ограничений.

Программа курса: пошаговое освоение Taptop на практике

Вы узнаете:

Как устроен интерфейс платформы и по каким правилам строится каркас сайта из блоков Section и Container.
В чём разница между созданием макета в Figma и реальной вёрсткой элементов в Taptop.
Как применять классы и настраивать расположение элементов.

Результат:

Освоите базовую логику веб-разработки и соберёте секцию из трёх адаптивных карточек.

Вы узнаете:

Как настраиваются глобальные стили (Root) для шрифтов и фонового цвета всего сайта.
Как адаптировать навигационное меню, чтобы оно корректно перестраивалось на смартфонах.
Как создавать интерактивные ссылки, меняющие свой вид при наведении курсора.

Результат:

Сверстаете отзывчивый хедер, который корректно перестраивается под любые разрешения экранов.

Вы узнаете:

Как зафиксировать шапку сайта вверху страницы с помощью настроек позиционирования и z-index.
Как устроен виджет «Слайдер» и как настроить автоматическую смену изображений.
Как правильно экспортировать графику из Figma и верстать блоки во всю высоту экрана.

Результат:

Соберёте главную секцию (Hero) со слайдером и опубликуете проект.

Вы узнаете:

Как работают базы данных CMS для автоматического управления контентом.
Как проектировать сложные и гибкие адаптивные сетки с помощью CSS Grid.

Результат:

Создадите динамическое портфолио, которое автоматически обновляется при добавлении новых проектов.

Вы узнаете:

Как работать с автоматической шириной (auto) и максимальной шириной (max-width), чтобы ваша верстка была гибкой и адаптивной.
Как использовать методологию BEM/БЭМ (Блок-Элемент-Модификатор) на реальном примере и научитесь давать понятные имена классам.

Результат:

Закрепите навыки работы с макетом и заложите фундамент для поддержания идеального порядка в больших проектах.

Вы узнаете:

Как собрать многоуровневый подвал сайта и зафиксировать его высоту через min-height: 100svh.
Как системный подход к коду помогает без ошибок вносить правки в большие проекты.

Результат:

Научитесь создавать сложные и аккуратные блоки, которые безупречно выглядят на любом устройстве, и доведёте использование BEM до автоматизма.

Вы узнаете:

Как настроить один универсальный CMS-шаблон для автоматической генерации страниц коллекции.
Как расширить поля коллекции, чтобы выводить подробные описания и галереи для каждого кейса.

Результат:

Вы сможете создавать мощные многостраничные сайты (портфолио, блоги, каталоги), где добавление нового контента будет занимать минуты, а не часы.

Вы узнаете:

Как работают встроенные триггеры анимации и от чего зависят параметры длительности и задержки.
Как настроить поочерёдное появление элементов интерфейса и отключить эффекты на смартфонах.
Как с помощью кастомного кода подключить к сайту бесшовный плавный скролл.

Результат:

Сделаете интерфейс сайта динамичным и современным, настроив плавное появление блоков и прокрутку.

Вы узнаете:

Как настраивается переход по якорным ссылкам.
Как задаются семантические теги SEO.
Как заполняются метаданные Title/Description, favicon и Open Graph.
Алгоритм финальной проверки готового проекта по чек-листу.

Результат:

Проведёте финальный аудит проекта и получите полностью готовый к индексации, оптимизированный веб-сайт.

Ваш проект на курсе: сайт-портфолио

В процессе обучения вы с нуля сверстаете сайт-портфолио с динамическими CMS-страницами, сетками Grid и плавной анимацией. Вы закрепите навыки работы в Taptop, настроите адаптивность под мобильные устройства и опубликуете проект.

Открыть сайт

Начните бесплатно и соберите
первую страницу в Taptop

Пройдите короткий маршрут, изучите базовую логику платформы и разберитесь на практике, как создавать сайты без кода

Начать обучение

Часто задаваемые вопросы

Нет, курс рассчитан на новичков. Мы начинаем с базовой логики вёрстки и разбора интерфейса. Если вы никогда не создавали сайты, вам будет комфортно: программа построена последовательно, без резких скачков сложности.

Платформа подходит для сборки лендингов, многостраничных сайтов, блогов, портфолио и визиток. Если вам нужно быстро создавать аккуратные интерфейсы, настраивать мобильный адаптив и автоматизировать контент через CMS без привлечения программистов — это отличный выбор.

Достаточно уделять 30–40 минут в день, чтобы комфортно двигаться по программе. Уроки короткие и сфокусированные. Если вы будете учиться медленнее, ничего страшного — вы сами управляете своим расписанием.

Курс записал Вадим — практикующий дизайнер и эксперт по вёрстке на платформе Taptop. Он наглядно объясняет технические нюансы на примерах, показывает частые ошибки новичков и делится своими приёмами сборки.

Да, в процессе обучения вы соберёте свой первый сайт по шагам. Это отличная база, чтобы начать уверенно работать в редакторе над собственными проектами.

Вам понадобятся компьютер или ноутбук и стабильный интернет. Устанавливать сторонний софт не нужно — Taptop работает прямо в браузере. Достаточно зарегистрировать аккаунт на платформе и открыть учебный макет в Figma.