О чём курс

Школа Таптоп обучает созданию сайтов с помощью визуальной верстки на платформе Taptop. Программа охватывает полный цикл работы над веб-страницей: от изучения базовых правил HTML и CSS до настройки интеграций, поисковой оптимизации и передачи готового проекта клиенту.

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

Для кого

Материал структурирован для последовательного изучения и подойдет следующей аудитории:

  • начинающим специалистам, которые хотят освоить визуальную верстку с нуля;
  • разработчикам и дизайнерам, планирующим создавать сайты на платформе Taptop;
  • тем, кому требуется системная программа с разбором настройки форм, интеграций, SEO и передачи проекта заказчику.

Что внутри

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

В теоретической части рассматриваются основы HTML и CSS, родительские и дочерние элементы, контекстные селекторы, псевдоклассы и правила именования классов. Практический блок начинается с подготовки медиаматериалов и верстки UI-kit проекта. Затем вы пошагово собираете основные блоки: хедер, первый экран Hero Section, табы, слайдеры на Swiper, аккордеоны, мобильное меню, всплывающие окна pop-up, формы и футер со встроенной картой. Отдельное внимание уделено созданию компонентов и проверке верстки по макету с помощью подхода Pixel Perfect.

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

Формат обучения

Обучение рассчитано на два месяца и проходит непосредственно на платформе Taptop. Программа включает 14 тематических блоков и 60 уроков, содержащих свыше 50 часов теоретического и практического видеоматериала.

Программа обучения

  1. Вступительный блок. Регламент:
  • вступительный блок
  • план работы на курсе
  • регламент прохождения курса
  1. Базовые основы верстки:
  • основы HTML и CSS
  • иерархия элементов сайта
  • родительские и дочерние элементы
  • изучение макета
  • работа с БЭМ системой
  • как называть слои и классы
  1. Подготовка к разработке:
  • подготовка медиа-материалов
  • создание и настройки проекта
  • верстка UI-kit проекта, части 1-2
  • верстка UI-kit проекта, части 3-4
  • верстка UI-kit проекта, части 5-6
  • создание структуры страницы
  1. Верстка. Разработка первых 5 блоков:
  • верстаем первый блок - хедер
  • создаем из хедер компонент
  • общие принципы работы с компонентами
  • проверка по подходу Pixel Perfect
  • верстаем второй блок - Hero Section
  • верстаем третий блок (Tabs)
  • верстаем четвертый блок
  • верстаем пятый блок (Swiper)
  1. Верстка. Разработка следующих 5 блоков:
  • верстаем шестой блок
  • верстаем седьмой блок (Accordion)
  • верстаем восьмой блок (Swiper)
  • девятый блок (Collection)
  • футер (виджет Map)
  • создаем из футер компонент
  1. Верстка. Разработка дополнительных блоков:
  • верстаем мобильное меню
  • создание всплывающего окна pop-up
  • настройка формы
  1. Псевдоклассы и селекторы:
  • дополнительный модуль - псевдоклассы
  • дополнительный модуль - контекстные селекторы
  1. Верстка. Разработка страницы Thank You:
  • создание страницы Thank You
  • настройка виджета Form
  • дополнительный модуль - проверка Pixel Perfect
  1. Интеграции, SEO:
  • интеграции
  • SEO настройка
  1. CMS-коллекции:
  • общие принципы
  • создание и настройка коллекций
  • создание и настройка индексируемой страницы
  • создание и настройка динамической страницы
  • настройка мультиреференс
  • условное отображение элементов
  • настройка и подключение референс для двух коллекций
  • настройка SEO для коллекций
  1. Завершение и передача проекта:
  • настройка якорных ссылок в меню
  • финальная проверка, чек-лист
  • добавление Alt-текстов
  • подключение домена
  • передача проекта
  • клиентский режим
Складчина создана 14 апреля 2026 г. · описание обновлено 25 октября 2026 г.

Теги курса

Инструменты
25 000 ₽