Для улучшения работы сайта и его взаимодействия с пользователями мы используем файлы cookie. Продолжая работу с сайтом, Вы разрешаете использование cookie-файлов.

Ок

Бредкумбс Taptop

Для редактирования обратитесь в отдел разработки

Главная

> Бесплатный курс

Бесплатный курс
по no-code верстке для новичков

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

Начать обучение бесплатно

Почему Taptop?

Для кого?

Для всех, кто хочет научиться делать сайты по-новому с помощью flex, grid и классов — на фрилансе, для своего работодателя или бизнеса: для дизайнеров, продактов, маркетологов, ноукодеров, владельцев бизнеса.

Сколько длится?

17 коротких уроков + одно бонусное задание. Стартовать и проходить курс, как и сдавать домашние задания, можно в любое время. В среднем обучение занимает неделю.

Как проходит?

Смотришь короткий видео-урок, делаешь домашнее задание, присылаешь нам — и переходишь к следующему уроку. Преподаватель проверит задание в рабочие часы с 10 до 19 по мск, запишет короткое видео-ревью и пришлет тебе.

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

+2 кейса в портфолио

Обучение — бесплатно

Обратная связь от преподавателя

Начать можно в любое время!

Этот урок — твой первый шаг в мир создания сайтов без кода! В нем ты познакомишься с платформой Taptop и ее возможностями. Шаг за шагом мы разберем, как зарегистрироваться, создать проект, добавить на страницу текст и изображения, настроить их расположение и внешний вид.

К концу урока ты научишься создавать простые карточки с контентом, а в качестве закрепления материала тебя ждет домашнее задание, за выполнение которого ты получишь свои первые баллы — в будущем сможешь обменять их на ценные призы!

В этом уроке ты узнаешь всё про отступы в веб-верстке — без них красивый и понятный сайт просто не сделать!

Ты научишься:
- Использовать внутренние отступы (padding), чтобы контент не прилипал к границам блоков
- Применять внешние отступы (margin) для отделения элементов друг от друга
- Работать с gap для создания одинаковых промежутков между элементами
- Использовать margin-auto для выравнивания элементов

Никаких сложных терминов — только практика и понятные объяснения! После этого урока ты будешь уверенно использовать отступы и перестанешь задаваться вопросом: «Какой отступ здесь нужен?».

В этом уроке ты научишься использовать все возможности display flex — одного из самых важных инструментов в верстке. Мы разберем, как управлять расположением элементов внутри карточек и как организовать сами карточки на странице.

Ты узнаешь:
- Что такое родительские и дочерние элементы и почему это важно для flex
- Все основные свойства flex и как они работают
- Как использовать flex wrap для создания адаптивных макетов

В этом уроке ты узнаешь, как использовать классы в Taptop — мощный инструмент, который сделает твою верстку быстрее и профессиональнее.

Мы разберем:
- Что такое локальные стили и когда их использовать
- Как создавать и применять классы к элементам
- Как совмещать локальные стили и классы
- Как использовать несколько классов для одного элемента

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

Ты поймешь:

- Что такое абсолютное позиционирование и когда его использовать
- Как элемент с position: absolute ищет родителя с position: relative
- Как управлять наложением элементов с помощью z-index
- Как выводить изображения за границы блоков с помощью отрицательных значений top, right, bottom, left

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

Научишься:
- Верстать хедер (шапку сайта) с нуля
- Настраивать фиксированное позиционирование элементов
- Правильно располагать хедер на странице

В этом уроке ты научишься правильно использовать px, %, auto, vw/vh, чтобы создавать сайты, которые отлично выглядят на любых устройствах.

Ты узнаешь:
- Когда использовать пиксели, а когда они могут навредить адаптивности
- Почему проценты — твои лучшие друзья в отзывчивой верстке
- Как работает auto и в каких случаях его применять
- Что такое vw/vh и как с их помощью делать элементы, привязанные к размеру экрана
- Как правильно комбинировать разные единицы измерения с min/max значениями

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

В этом уроке ты узнаешь, почему так важно давать правильные названия слоям и классам в твоих проектах.

Мы разберем упрощенную версию методологии БЭМ (блок-элемент-модификатор), которая поможет тебе:
- Легко ориентироваться в своем проекте даже спустя время
- Быстро находить нужные элементы при внесении правок
- Делать проект понятным для других разработчиков

Здесь начинается вторая часть курса, где мы будем верстать лендинг Apple Watch. В этом уроке мы познакомимся с понятием UI Kit и создадим его для нашего проекта.

Ты узнаешь:
- Что такое UI Kit и почему он нужен каждому верстальщику
- Как UI Kit ускоряет работу и упрощает внесение изменений
- Как создать UI Kit в Taptop с нуля
- Как структурировать элементы UI Kit для удобного использования

В этом уроке мы продолжим верстать сайт Apple Watch. Ты сверстаешь первую секцию, соберешь шапку сайта и настроишь меню. Увидишь на практике, за что отвечают авто-лейауты и как использовать классы для ускорения верстки.

В этом уроке мы займемся версткой второй секции и добавим слайдер, чтобы сделать сайт более динамичным и привлекательным. Детально разберем процесс создания слайдера на основе виджета Block List. Ты настроишь ширину слайдера и количество карточек на экране, изучишь параметры скролла и элементы управления слайдером, а также применишь на практике знания об относительном и абсолютном позиционировании.

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

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

В этом уроке мы сверстаем подвал сайта Apple Watch. Ты научишься правильно структурировать и оформлять подвал, чтобы он был информативным и удобным для пользователей. Ты создашь блоки со ссылками, узнаешь, как разместить элементы в углу страницы с помощью внешних отступов.

В этом уроке мы сделаем адаптацию для сайта Apple Watch, чтобы наш сайт был удобным для всех устройств. Мы вспомним принцип Desktop First в Taptop и снова закрепим эти знания на практике.

В этом уроке ты научишься превращать скучные статичные элементы в живые и динамичные с помощью анимаций появления.

Ты узнаешь:
- Как работают анимации появления на экране
- Как настраивать эффекты масштабирования, перемещения, вращения и другие
- Как делать последовательные анимации
- Как адаптировать анимации для разных устройств
- Мы разберем механику работы анимаций появления на простых кубиках, чтобы ты понял основные принципы, а затем применим эти знания на практике и оживим сайт Apple Watch, сделав его по-настоящему привлекательным!

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

Почему тысячи пользователей выбирают Taptop для своих проектов?

Безграничные возможности верстки

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

Быстрая сборка и поддержка сайта

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

Чистый исходный код сайта

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

Выгодная партнерская программа

У нас крутая партнерка, по которой дизайнер не просто зарабатывает, а становится нашим партнером, получая 30% пожизненно от всех оплат приведенных им пользователей.

Примеры обратной связи от преподавателя

Что ты получишь после обучения?

Безграничные возможности верстки

Быстрая сборка и поддержка сайта

Чистый исходный код сайта

Выгодная партнерская программа

Запишись на бесплатный курс по no-code и научись создавать сайты без программирования!

Получи ценные навыки и начни создавать свои проекты уже сейчас

Записаться

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

Тебя будут обучать опытные дизайнеры и кураторы Академии Taptop — Вадим Дорошенко и Геннадий Сидоров, которые проверили более 1000 домашних заданий. Ты получишь обратную связь в формате видео от преподавателей, а если что-то останется непонятным, они всегда готовы помочь разобраться с любыми вопросами.

Вадим
Дорошенко

Геннадий
Сидоров

Этот курс — твоя возможность быстро освоить востребованные навыки создания сайтов без написания кода. Всего за несколько дней ты научишься создавать профессиональные веб-сайты на платформе Taptop, используя простые и удобные инструменты. Это идеальный выбор для тех, кто хочет начать карьеру в веб-дизайне или добавить новые навыки в свое портфолио. После прохождения ты сможешь брать заказы на фрилансе и применять знания для развития собственного бизнеса. Не упусти шанс — начни уже сейчас!

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

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

Для успешного прохождения курса рекомендуем выделять около 1-2 часов в день на изучение материалов и выполнение практических заданий. Но не переживай, если у тебя плотный график — ты можешь учиться в удобном для тебя темпе.