Для улучшения работы сайта и его взаимодействия с пользователями мы используем файлы cookie. Продолжая работу с сайтом, Вы разрешаете использование cookie-файлов.
Запись Интенсива
Скидка действует еще
00
дней
00
часов
00
минут
00
секунд
Полная программа обучения
«Визуальная верстка 2.0»
«Визуальная верстка 2.0»
– 13 блоков, 51 урок,
– более 50 часов качественного теоретического и практического видео-контента,
– программа рассчитана на 2 месяца обучения.
– более 50 часов качественного теоретического и практического видео-контента,
– программа рассчитана на 2 месяца обучения.
Самостоятельный
Стоимость
25 000 ₽
Ваша стоимость
(скидка 10%)
(скидка 10%)
22 500 ₽
Стандартный
Стоимость
40 000 ₽
Ваша стоимость
(скидка 10%)
(скидка 10%)
36 000 ₽
Максимальный
Стоимость
50 000 ₽
Ваша стоимость
(скидка 13%)
(скидка 13%)
43 500 ₽
Скидка действует еще
00
дней
00
часов
00
минут
00
секунд
1. Вступительный блок. Регламент
Вступительный блок. План работы на курсе. Регламент прохождения курса.
2. Базовые основы верстки
Основы HTML и CSS. Иерархия элементов сайта. Родительские и дочерние элементы.
Изучение макета.
Работа с БЭМ системой. Как называть слои и классы.
Изучение макета.
Работа с БЭМ системой. Как называть слои и классы.
3. Подготовка к разработке
Подготовка медиа-материалов.
Создание и настройки проекта.
Верстка UI-kit проекта. Часть 1-2
Верстка UI-kit проекта. Часть 3-4
Создание и настройки проекта.
Верстка UI-kit проекта. Часть 1-2
Верстка UI-kit проекта. Часть 3-4
4. Верстка. Разработка первых 5 блоков
Верстка UI-kit проекта. Часть 5-6
Создание структуры страницы.
Верстаем Первый блок - Хедер. Создаем из Хедер компонент. Общие принципы работы с компонентами.
Верстаем Второй блок - Hero Section.
Верстаем Третий блок (Tabs).
Верстаем Четвертый блок.
Создание структуры страницы.
Верстаем Первый блок - Хедер. Создаем из Хедер компонент. Общие принципы работы с компонентами.
Верстаем Второй блок - Hero Section.
Верстаем Третий блок (Tabs).
Верстаем Четвертый блок.
5. Верстка. Разработка следующих 5 блоков
Верстаем Шестой блок.
Верстаем Седьмой (Accordion).
Восьмой блок (Карточки и Swiper).
Верстаем секцию и делаем адаптацию с помощью Swiper.
Девятый блок (Collection).
Футер (виджет Map)
Верстаем секцию и адаптируем ее вместе.
Создаем компонент.
Проверка Pixel Perfect.
Верстаем Седьмой (Accordion).
Восьмой блок (Карточки и Swiper).
Верстаем секцию и делаем адаптацию с помощью Swiper.
Девятый блок (Collection).
Футер (виджет Map)
Верстаем секцию и адаптируем ее вместе.
Создаем компонент.
Проверка Pixel Perfect.
6. Верстка. Разработка дополнительных блоков
Форма и Поп-ап.
Меню в адаптивах.
Дополнительный модуль - проверка Pixel Perfect.
Меню в адаптивах.
Дополнительный модуль - проверка Pixel Perfect.
7. Верстка. Разработка динамической страницы
Создание динамической страницы.
Третий блок Динамической страницы.
Четвертый блок Динамической страницы.
Дополнительный модуль - проверка Pixel Perfect.
Третий блок Динамической страницы.
Четвертый блок Динамической страницы.
Дополнительный модуль - проверка Pixel Perfect.
8. Верстка. Разработка страницы Thank You
Создание страницы Thank You.
Настройка Виджета Form.
Дополнительный модуль - проверка Pixel Perfect.
Настройка Виджета Form.
Дополнительный модуль - проверка Pixel Perfect.
9. Псевдоклассы и селекторы
Дополнительный модуль - Псевдоклассы.
Дополнительный модуль - Контекстные селекторы.
Дополнительный модуль - Контекстные селекторы.
10. Завершение и передача проекта
Финальная проверка, чек-лист.
Подключение домена.
Передача проекта, клиентский режим, тарифы.
Подключение домена.
Передача проекта, клиентский режим, тарифы.
11. CMS-коллекции
Общие принципы. Создание и настройки коллекций.
Референс Мультиреференс (страница Автора).
Настройка SEO для коллекций
Продвинутая настройка Rich Text.
Настройка SEO для коллекций
Продвинутая настройка Rich Text.
Референс Мультиреференс (страница Автора).
Настройка SEO для коллекций
Продвинутая настройка Rich Text.
Настройка SEO для коллекций
Продвинутая настройка Rich Text.
12. Интеграции, SEO
Интеграции.
SEO, Настройка.
SEO, Настройка.
Интеграции.
SEO, Настройка.
SEO, Настройка.
13. Продвинутый блок
Флюидная верстка VW.
Верстка REM.
Custom Properties.
Custom Attributes.
Верстка REM.
Custom Properties.
Custom Attributes.
Дополнительные бонусы
Обратная связь
Обратная связь, видео-разбор и поддержка практикующих преподавателей, проверка каждого домашнего задания.
Курс фриланс
Уникальный курс от Александра Гудаева как зарабатывать на фрилансе.
Тариф Team
Команда 2 месяца в подарок.
Команда 2 месяца в подарок.
Команда 5 месяцев в подарок.
Тариф Business на 2 года
Скидка 30% на тариф Business для своего сайта-портфолио.
Скидка 50% на тариф Business для своего сайта-портфолио.
Домен в подарок.
Скидка 60% на тариф Business для своего сайта-портфолио.
Домен в подарок.
Стажировка
Возможность получить коммерческий проект или работу.
Возможность получить коммерческий проект или работу.
Телеграм-сообщество
Закрытый чат учеников, Задавать вопросы
по материалу.
по материалу.
Закрытый чат учеников, Задавать вопросы
по материалу.
по материалу.
Сопровождение коммерческих проектов
Коммерческое сопровождение.
5 консультаций по своему коммерческому проекту.
5 консультаций по своему коммерческому проекту.
Полная программа обучения
«Визуальная верстка 2.0»
«Визуальная верстка 2.0»
– 13 блоков, 51 урок,
– более 50 часов качественного теоретического и практического видео-контента,
– программа рассчитана на 2 месяца обучения.
– более 50 часов качественного теоретического и практического видео-контента,
– программа рассчитана на 2 месяца обучения.
+
Полная программа обучения «Продвинутые анимации»
– 7 блоков учебного материала, 23 урока,
– программа рассчитана на 2 месяца обучения с проверками от кураторов,
– на выходе 2 кейса в портфолио.
– программа рассчитана на 2 месяца обучения с проверками от кураторов,
– на выходе 2 кейса в портфолио.
Самостоятельный
Стоимость
55 000 ₽
Ваша стоимость
(скидка 15%)
(скидка 15%)
47 000 ₽
Стандартный
Стоимость
90 000 ₽
Ваша стоимость
(скидка 15%)
(скидка 15%)
76 500 ₽
Максимальный
Стоимость
110 000 ₽
Ваша стоимость
(скидка 19%)
(скидка 19%)
89 200 ₽
1. Введение в курс
Вступительный блок и регламент прохождения курса
2. Флюидная верстка
Механика флюидной верстки
3. Введение в анимации
Зачем интерфейсам анимация?
Какие свойства можно анимировать?
Тайминг — душа анимации
Хореография анимаций
Какие свойства можно анимировать?
Тайминг — душа анимации
Хореография анимаций
4. Разбираем анимации в Taptop + механики сложных анимаций
Анимация появление на экране
Анимации по клику и ховеру
Анимации по скроллу
Анимация по скроллу со стики
Как сделать горизонтальный скролл
Лотти анимации
Анимации по клику и ховеру
Анимации по скроллу
Анимация по скроллу со стики
Как сделать горизонтальный скролл
Лотти анимации
5. Верстаем сайт с наушниками
Знакомство с макетом, верстка ui kit
Декомпозиция
Верстаем 1 сцену
Верстаем 2 сцену (допом разбираем сложные анимации появления)
Верстаем 3 сцену
Верстаем 4 сцену
Верстаем 5 сцену
Верстаем 6 сцену
Верстаем 7 сцену
Разбор 8 сцены (верстают самостоятельно)
Декомпозиция
Верстаем 1 сцену
Верстаем 2 сцену (допом разбираем сложные анимации появления)
Верстаем 3 сцену
Верстаем 4 сцену
Верстаем 5 сцену
Верстаем 6 сцену
Верстаем 7 сцену
Разбор 8 сцены (верстают самостоятельно)
6. Как придумывать анимации
Вы получите:
- Простую систему: как придумать анимацию ещё на этапе структуры страницы, а не после дизайна.
- Правило выбора: как понять, какой блок требует вау-эффекта, а какой — только лёгкой поддержки.
- Принцип работы с референсами: что смотреть, как анализировать и какие идеи забирать
- Разбор моего проекта: подробно расскажу, как я с нуля создавал сложный анимационный сайт.
Результат:
- Вы поймёте весь процесс придумывания анимаций и почувствуете, что это вам по силам.
- После урока у вас будет ясная схема действий, по которой вы сможете пойти и придумать анимацию любой сложности.
- Простую систему: как придумать анимацию ещё на этапе структуры страницы, а не после дизайна.
- Правило выбора: как понять, какой блок требует вау-эффекта, а какой — только лёгкой поддержки.
- Принцип работы с референсами: что смотреть, как анализировать и какие идеи забирать
- Разбор моего проекта: подробно расскажу, как я с нуля создавал сложный анимационный сайт.
Результат:
- Вы поймёте весь процесс придумывания анимаций и почувствуете, что это вам по силам.
- После урока у вас будет ясная схема действий, по которой вы сможете пойти и придумать анимацию любой сложности.
Вы получите:
- Простую систему: как придумать анимацию ещё на этапе структуры страницы, а не после дизайна.
- Правило выбора: как понять, какой блок требует вау-эффекта, а какой — только лёгкой поддержки.
- Принцип работы с референсами: что смотреть, как анализировать и какие идеи забирать
- Разбор моего проекта: подробно расскажу, как я с нуля создавал сложный анимационный сайт.
Результат:
- Вы поймёте весь процесс придумывания анимаций и почувствуете, что это вам по силам.
- После урока у вас будет ясная схема действий, по которой вы сможете пойти и придумать анимацию любой сложности.
- Простую систему: как придумать анимацию ещё на этапе структуры страницы, а не после дизайна.
- Правило выбора: как понять, какой блок требует вау-эффекта, а какой — только лёгкой поддержки.
- Принцип работы с референсами: что смотреть, как анализировать и какие идеи забирать
- Разбор моего проекта: подробно расскажу, как я с нуля создавал сложный анимационный сайт.
Результат:
- Вы поймёте весь процесс придумывания анимаций и почувствуете, что это вам по силам.
- После урока у вас будет ясная схема действий, по которой вы сможете пойти и придумать анимацию любой сложности.
7. Анимации на готовом дизайне
(как улучшить то, что уже есть)
(как улучшить то, что уже есть)
Вы получите:
- Понятный алгоритм: как оживлять дизайн, который вы не создавали сами
- Понимание, какие типы эффектов вообще применимы в таких условиях: появления, микроанимации, простые скролл-движения, параллакс
- Принцип «точечных улучшений»: как найти места, где анимации реально усиливают сайт
- Пример на реальном шаблоне: покажу, как я превращал статичный сайт в живой и аккуратный.
Результат:
- Вы научитесь улучшать любой готовый дизайн — клиентский макет или шаблон — и делать его живым
- Понятный алгоритм: как оживлять дизайн, который вы не создавали сами
- Понимание, какие типы эффектов вообще применимы в таких условиях: появления, микроанимации, простые скролл-движения, параллакс
- Принцип «точечных улучшений»: как найти места, где анимации реально усиливают сайт
- Пример на реальном шаблоне: покажу, как я превращал статичный сайт в живой и аккуратный.
Результат:
- Вы научитесь улучшать любой готовый дизайн — клиентский макет или шаблон — и делать его живым
Вы получите:
- Понятный алгоритм: как оживлять дизайн, который вы не создавали сами
- Понимание, какие типы эффектов вообще применимы в таких условиях: появления, микроанимации, простые скролл-движения, параллакс
- Принцип «точечных улучшений»: как найти места, где анимации реально усиливают сайт
- Пример на реальном шаблоне: покажу, как я превращал статичный сайт в живой и аккуратный.
Результат:
- Вы научитесь улучшать любой готовый дизайн — клиентский макет или шаблон — и делать его живым
- Понятный алгоритм: как оживлять дизайн, который вы не создавали сами
- Понимание, какие типы эффектов вообще применимы в таких условиях: появления, микроанимации, простые скролл-движения, параллакс
- Принцип «точечных улучшений»: как найти места, где анимации реально усиливают сайт
- Пример на реальном шаблоне: покажу, как я превращал статичный сайт в живой и аккуратный.
Результат:
- Вы научитесь улучшать любой готовый дизайн — клиентский макет или шаблон — и делать его живым
Дополнительные бонусы
Обратная связь
Обратная связь, видео-разбор и поддержка практикующих преподавателей, проверка каждого домашнего задания.
Самостоятельное изучение
Дополнительные бонусные уроки
7 шт дополнительных бонусных уроков:
- Path-анимации (Движение по пути)
- Морфинг-анимации (Morphing)
- Прелоудер
- Галлерея
- Перетаскивание элементов (drag & drop)
- Сложный кастомный курсор, который меняет поведение
- Как сделать кастомное многоуровневое меню
- Path-анимации (Движение по пути)
- Морфинг-анимации (Morphing)
- Прелоудер
- Галлерея
- Перетаскивание элементов (drag & drop)
- Сложный кастомный курсор, который меняет поведение
- Как сделать кастомное многоуровневое меню
7 шт дополнительных бонусных уроков:
- Path-анимации (Движение по пути)
- Морфинг-анимации (Morphing)
- Прелоудер
- Галлерея
- Перетаскивание элементов (drag & drop)
- Сложный кастомный курсор, который меняет поведение
- Как сделать кастомное многоуровневое меню
- Path-анимации (Движение по пути)
- Морфинг-анимации (Morphing)
- Прелоудер
- Галлерея
- Перетаскивание элементов (drag & drop)
- Сложный кастомный курсор, который меняет поведение
- Как сделать кастомное многоуровневое меню
7 шт дополнительных бонусных уроков:
- Path-анимации (Движение по пути)
- Морфинг-анимации (Morphing)
- Прелоудер
- Галлерея
- Перетаскивание элементов (drag & drop)
- Сложный кастомный курсор, который меняет поведение
- Как сделать кастомное многоуровневое меню
- Path-анимации (Движение по пути)
- Морфинг-анимации (Morphing)
- Прелоудер
- Галлерея
- Перетаскивание элементов (drag & drop)
- Сложный кастомный курсор, который меняет поведение
- Как сделать кастомное многоуровневое меню
Версус
Введение в версус, прохождение соревнования, отправка сайтов на конкурс
Сообщество
Доступ к Телеграм-сообществу, где можно задавать вопросы по материалу и общатся и вдохновляться
Гарантированно попадаешь в эксперты Taptop (бейдж для каждого кандидата)
Гарантированно попадаешь в эксперты Taptop (бейдж для каждого кандидата)
Стажировка
Возможность получить коммерческий проект или работу
Возможность получить коммерческий проект или работу
Сопровождение коммерческих проектов
Коммерческое сопровождение.
5 консультаций по своему коммерческому проекту
5 консультаций по своему коммерческому проекту
Реквизиты школы
Сокращённое наименование:
ООО «Школа Таптоп»
Полное наименование:
Общество с ограниченной ответственностью «Школа Таптоп»
Адрес:
196247, г. Санкт-Петербург, вн. тер. г. Муниципальный округ Новоизмайловское, пр-кт Ленинский, д. 151, лит. А, помещ. 30-Н, офис 712Б
ИНН:
9810002411
КПП:
781001001
ОГРН:
1257800074828
Номер счёта:
40702810732440004296
Валюта:
RUB
Банк:
Филиал «Санкт-Петербургский» АО «Альфа-Банк»
ИНН банка:
7728168971
БИК:
044030786
Корреспондентский счёт:
30101810600000000786
Адрес банка:
195256, г. Санкт-Петербург, пр-т Науки, Д. 14, К. 1
Остались вопросы?
поможем разобраться!
Заполни форму для обратной связи
Спасибо ! Мы скоро свяжемся с вами
Что-то пошло не так! Попробуй еще
Поддержка
Сравнение
Сотрудничество