Визуальная верстка

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

60 уроков

2 месяца обучения

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

Кастомный сайт в портфолио

Визуальная вёрстка: полный цикл разработки сайтов в Taptop

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

Изучите логику HTML/CSS, иерархию элементов и принципы построения чистой структуры проекта

Научитесь верстать под любые экраны быстро и точно по методологии Pixel Perfect

Изучите создание масштабируемой вёрстки по стандартам системного подхода БЭМ

Освоите проектирование динамических страниц с помощью CMS-коллекций

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

Посмотреть тарифы Программа курса

Пошаговый процесс разработки: от разбора макета до сайта студийного уровня

Последовательное обучение

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

База HTML/CSS и БЭМ

Вы разберётесь, как устроена веб-страница. Научитесь понимать иерархию, логику родительских и дочерних элементов, а также внедрите методологию БЭМ для создания чистой и понятной структуры.

Продвинутая вёрстка

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

Динамические CMS-коллекции

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

Итоговый многостраничный сайт

Вы самостоятельно сверстаете полноценный сайт со всеми ключевыми элементами: от адаптивного бургер-меню до форм обратной связи, страницы Thank You и базового SEO. Этот проект станет главным подтверждением ваших навыков.

Сопровождение до результата

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

Как изменится ваш подход к вёрстке после курса

Работа с макетом

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

Смотрю на макет и теряюсь

Чётко вижу структуру

Точность реализации

Различия в пикселях, шрифтах и межстрочных расстояниях лишают проект схожести с макетом в Figma. Вы освоите систему Pixel Perfect и научитесь сдавать проекты со 100% совпадением с дизайном.

Сайт отличается от макета

Pixel Perfect совпадение

Интерактивность

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

Анимации получаются странными

Движение выглядит аккуратно

Профессиональный уровень

Жёсткая привязка к пикселям не даёт создавать современные гибкие интерфейсы. Вы полностью освоите адаптив и флюидную вёрстку (rem/vw), что поднимет качество проектов и ваш чек.

Верстаю только в пикселях

Создаю дорогой флюидный веб

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

Новичкам без опыта в вебе и коде

Вы никогда не создавали сайты и не знаете, что такое HTML/CSS. Мы пошагово обучим вас всему инструментарию с нуля: от интерфейса редактора до сборки и запуска вашего первого работающего проекта.

Графическим и веб-дизайнерам

Вы умеете рисовать красивые макеты в Figma, но устали отдавать заказы на вёрстку сторонним разработчикам и терять деньги. Вы научитесь самостоятельно переносить свои идеи в веб без компромиссов в дизайне и забирать 100% оплаты.

Опытным дизайнерам-верстальщикам

Вы расширите свой стек и освоите новую перспективную платформу. Вы научитесь работать с динамическими CMS-коллекциями, флюидной вёрсткой в vw/rem и подключением сторонних сервисов по API.

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

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

Вы освоите принципы вёрстки, чтобы собирать сайты самостоятельно

Смотрите уроки от Александра Гудаева

Практикующий эксперт объяснит логику работы в Taptop.

Применяете каждую технику в Taptop

Небольшие практические задания помогут закрепить материал.

Разбираете через систему

Главный акцент курса — научиться думать, как верстальщик, а не просто повторять действия из урока.

Получаете обратную связь

Кураторы смотрят домашние задания и помогают разбирать ошибки — на тарифах с поддержкой.

Программа курса: от базовой вёрстки до уникального готового проекта

Вы узнаете:

Как устроен курс и что вас ждёт в каждом блоке
Где находятся материалы и как получить доступ
Как сдавать домашние задания и получать обратную связь
Как настроить рабочее пространство в Taptop

Результат:

Понимаете структуру курса и спокойно включаетесь в обучение без хаоса

Вы узнаете:

Как устроена блочная вёрстка, HTML-теги, CSS-стили и иерархия элементов.
Как работает адаптив по принципу Desktop First на разных брейкпоинтах.
Как называть слои и классы по методологии БЭМ, чтобы не путаться в проекте.
Как правильно анализировать макет, читать UI-kit и готовить дизайн к сборке.

Результат:

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

Вы узнаете:

Как настроить рабочее пространство в Taptop.
Как оптимизировать изображения, экспортировать их из Figma и работать с файловым хранилищем.
Как собрать Style Guide и настроить глобальные текстовые стили и модификаторы.
Как спроектировать базовый каркас главной страницы через секции и контейнеры.

Результат:

Создадите проект в редакторе, полностью подготовите медиаконтент и соберете UI-kit, который сохранит единый стиль сайта и упростит дальнейший адаптив.

Вы узнаете:

Как работать с компонентами.
Как проверять вёрстку на соответствие макету Figma с помощью расширения Pixel Perfect.
Как сверстать обложку сайта (Hero Section) со встроенным слайдером.
Как работать с интерактивными вкладками (Tabs) и настраивать их состояния.
Как подключать и кастомизировать продвинутые слайдеры с помощью сторонней библиотеки Swiper.js.

Результат:

Сверстаете половину многостраничного сайта, освоите Pixel Perfect, работу с компонентами и виджетами Taptop и научитесь интегрировать Swiper.js для создания нестандартных слайдеров.

Вы узнаете:

Как управлять расположением колонок с помощью продвинутых сеток CSS Grid.
Как работать с виджетом Accordion для создания удобных раскрывающихся списков.
Как трансформировать статичную Grid-сетку десктопа в мобильный слайдер с помощью Swiper.js.
Как устроены встроенные базы данных (CMS-коллекции) в Taptop и как выводить динамический контент на страницу.
Как интегрировать интерактивную карту через виджет Map.

Результат:

Завершите сборку всех основных контентных блоков сайта и освоите логику работы с базами данных (CMS).

Вы узнаете:

Как спроектировать адаптивное меню для планшетов и смартфонов.
Как создавать всплывающие окна с помощью виджета Pop-up.
Как интегрировать и кастомизировать формы для сбора заявок.

Результат:

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

Вы узнаете:

Как работает псевдокласс hover и свойство transition для настройки плавного наведения на элементы.
Что такое контекстные селекторы и как через настройку родительского элемента менять свойства вложенных объектов.
Как использовать эти инструменты для создания аккуратных визуальных эффектов на сайте.

Результат:

Поймёте, как оживить интерфейс базовыми средствами CSS, и научитесь настраивать сложные эффекты при наведении курсора на блоки сайта.

Вы узнаете:

Как создавать новые страницы внутри одного проекта и настраивать редирект (перенаправление) после успешной отправки формы.
Как правильно переиспользовать уже созданные глобальные компоненты (Header и Footer) на новых страницах.

Результат:

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

Вы узнаете:

Как устроены технические настройки SEO в Taptop и как верстать сайты так, чтобы они хорошо индексировались поисковиками.
Как подключать к сайту сторонние сервисы с помощью встроенных интеграций платформы и через Albato.
Как настроить интерактивные Яндекс.Карты через API-ключ, задать точные координаты и установить маркер на карте.

Результат:

Подготовите сайт к продвижению в поисковых системах и подключите необходимые внешние сервисы и интерактивные карты.

Вы узнаете:

Как создавать страницы списков и динамические страницы, которые автоматически наполняются контентом из базы данных.
Как настраивать условную видимость блоков (Condition Visibility), чтобы автоматически скрывать пустые элементы, если для них нет текста или картинок.
Как связывать разные базы данных между собой с помощью полей Reference и Multi Reference для корректного отображения связанных данных.
Как настраивать SEO-теги (Title, Description, Open Graph) для динамических страниц.

Результат:

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

Вы узнаете:

Как настраивать якорные ссылки для навигации по странице, а также ссылки для номеров телефонов и электронной почты.
Как проводить финальный аудит сайта по чек-листу перед передачей клиенту и добавлять Alt-тексты к изображениям.
Как работают тарифы Taptop, клиентский режим и какие существуют способы передачи готового проекта заказчику.
Как привязать собственный домен к сайту через настройки NS- и DNS-записей.

Результат:

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

Вы узнаете:

Как работают кастомные атрибуты, зачем они нужны и как с их помощью подключать сторонние библиотеки (на примере галереи Fancybox).
Как использовать CSS-селекторы и медиазапросы для кастомной стилизации элементов RichText под разные экраны.
В чём разница между относительными единицами измерения vw и rem и как они заменяют пиксели.
Как устроен флюидный подход, при котором сайт плавно и пропорционально масштабируется на любых мониторах.

Результат:

Перейдёте на продвинутый технический уровень: освоите флюидную вёрстку на vw и rem, научитесь кастомизировать сложные текстовые блоки через CSS и расширять возможности платформы внешними скриптами.

Вы узнаете:

Что такое триггеры, свойства и тайминг, а также как устроена иерархия анимаций и плавность движений.
Как настраивать эффекты появления элементов через параметры прозрачности (Opacity) и смещения (Move).
Как создавать динамичные эффекты при скролле страницы, управляя масштабом (Scale) и позицией объектов.
Как оживить интерактивные элементы с помощью анимаций по клику и наведению, меняя радиус скругления углов (Corner radius) и размер.

Результат:

Освоите базовую логику анимации на платформе и настроите плавное движение элементов, скролл-эффекты и реакцию на клики для всех основных и динамических страниц сайта.

Вы узнаете:

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

Результат:

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

Ваш проект на курсе: многостраничный сайт

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

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