Визуальная верстка 2.0
О чём курс
Школа Таптоп обучает созданию сайтов с помощью визуальной верстки на платформе Taptop. Программа охватывает полный цикл работы над веб-страницей: от изучения базовых правил HTML и CSS до настройки интеграций, поисковой оптимизации и передачи готового проекта клиенту.
Вы научитесь разбирать макеты, выстраивать иерархию элементов, использовать методологию БЭМ и собирать интерактивные блоки. Обучение ориентировано на практическое освоение инструментов сервиса без погружения в ручное написание сложного программного кода.
Для кого
Материал структурирован для последовательного изучения и подойдет следующей аудитории:
- начинающим специалистам, которые хотят освоить визуальную верстку с нуля;
- разработчикам и дизайнерам, планирующим создавать сайты на платформе Taptop;
- тем, кому требуется системная программа с разбором настройки форм, интеграций, SEO и передачи проекта заказчику.
Что внутри
Учебный план объединяет базовые принципы веб-разработки, верстку ключевых компонентов интерфейса и финальную техническую подготовку сайта.
В теоретической части рассматриваются основы HTML и CSS, родительские и дочерние элементы, контекстные селекторы, псевдоклассы и правила именования классов. Практический блок начинается с подготовки медиаматериалов и верстки UI-kit проекта. Затем вы пошагово собираете основные блоки: хедер, первый экран Hero Section, табы, слайдеры на Swiper, аккордеоны, мобильное меню, всплывающие окна pop-up, формы и футер со встроенной картой. Отдельное внимание уделено созданию компонентов и проверке верстки по макету с помощью подхода Pixel Perfect.
В продвинутых блоках разбирается настройка страницы благодарности, поисковая оптимизация и работа с CMS-коллекциями. Вы научитесь настраивать динамические и индексируемые страницы, связывать коллекции через референсы и мультиреференсы, задавать условное отображение элементов. Завершается обучение подключением собственного домена, заполнением Alt-текстов для изображений и переводом сайта в клиентский режим.
Формат обучения
Обучение рассчитано на два месяца и проходит непосредственно на платформе Taptop. Программа включает 14 тематических блоков и 60 уроков, содержащих свыше 50 часов теоретического и практического видеоматериала.
Программа обучения
- Вступительный блок. Регламент:
- вступительный блок
- план работы на курсе
- регламент прохождения курса
- Базовые основы верстки:
- основы HTML и CSS
- иерархия элементов сайта
- родительские и дочерние элементы
- изучение макета
- работа с БЭМ системой
- как называть слои и классы
- Подготовка к разработке:
- подготовка медиа-материалов
- создание и настройки проекта
- верстка UI-kit проекта, части 1-2
- верстка UI-kit проекта, части 3-4
- верстка UI-kit проекта, части 5-6
- создание структуры страницы
- Верстка. Разработка первых 5 блоков:
- верстаем первый блок - хедер
- создаем из хедер компонент
- общие принципы работы с компонентами
- проверка по подходу Pixel Perfect
- верстаем второй блок - Hero Section
- верстаем третий блок (Tabs)
- верстаем четвертый блок
- верстаем пятый блок (Swiper)
- Верстка. Разработка следующих 5 блоков:
- верстаем шестой блок
- верстаем седьмой блок (Accordion)
- верстаем восьмой блок (Swiper)
- девятый блок (Collection)
- футер (виджет Map)
- создаем из футер компонент
- Верстка. Разработка дополнительных блоков:
- верстаем мобильное меню
- создание всплывающего окна pop-up
- настройка формы
- Псевдоклассы и селекторы:
- дополнительный модуль - псевдоклассы
- дополнительный модуль - контекстные селекторы
- Верстка. Разработка страницы Thank You:
- создание страницы Thank You
- настройка виджета Form
- дополнительный модуль - проверка Pixel Perfect
- Интеграции, SEO:
- интеграции
- SEO настройка
- CMS-коллекции:
- общие принципы
- создание и настройка коллекций
- создание и настройка индексируемой страницы
- создание и настройка динамической страницы
- настройка мультиреференс
- условное отображение элементов
- настройка и подключение референс для двух коллекций
- настройка SEO для коллекций
- Завершение и передача проекта:
- настройка якорных ссылок в меню
- финальная проверка, чек-лист
- добавление Alt-текстов
- подключение домена
- передача проекта
- клиентский режим
Теги курса
Отзывов пока нет. Будьте первым!
Этот курс сейчас в процессе организации складчины. Нажмите кнопку «Записаться» и ожидайте старта — вам придёт уведомление. Когда складчина стартует, в карточке курса будет указан актуальный взнос. Текущая цена пока в процессе формирования и может отличаться от финальной.
Да, мы стремимся, чтобы финальный взнос был не больше ≈10% от оригинальной цены курса. Чем больше участников записывается в складчину, тем ниже выходит взнос для каждого.
Нажмите кнопку «Записаться» и авторизуйтесь на сайте через email (через ту же почту, которую будете использовать для входа). В личном кабинете вас будут ждать инструкции, как пригласить других участников — чем больше людей записалось, тем быстрее стартует складчина и тем ниже взнос. Как только складчина готова к приобретению, вам придёт уведомление.