Webflow-разработчик: создание сайтов
без кода

Станьте высокооплачиваемым разработчиком на Webflow, создавайте сайты международного уровня и трудоустраивайтесь в лучшие компании

записаться на курс

Плюсы профессии верстальщика на Webflow

Вы научитесь делать современные сайты для российских и международных клиентов.
Webflow — это облачный сервис, позволяющий создавать любые типы сайтов: от простых лендингов до сложных промосайтов международного уровня без знания кода.
Предусмотрена возможность интегрировать анимации прямо из After Effects, а также создавать, плавные последовательные анимации.
В отличие от других конструкторов Webflow не ограничен шаблонными блоками. Сервис позволяет сверстать любое дизайн‑решение, а также вставить сторонний код и подключить CMS.
На Webflow разработка происходит гораздо быстрее и дешевле. Дизайнер может сам сверстать сайт без привлечения программиста.

Кому
подойдет

Начинающим верстальщикам и дизайнерам, которые хотят разрабатывать сайты под ключ и продавать свои услуги по более высокой цене. Опытным верстальщикам, которые хотят ускорить разработку своих проектов.
Дизайнерам
Верстальщикам
Фрилансерам
Студиям и агентствам
Автор курса
Евгений Кузьмин
Обладатель более 50 международных дизайн‑наград, в том числе в номинации "Лучший сайт года". В качестве арт‑директора и продюсера реализовал более 500 интернет‑проектов. Является евангелистом стиля минимализм. Делал проекты для таких брендов как AXE, Beeline, Coca‑cola, Lipton, Yota, СДЭК.
За 9 лет существования студии мы делали проекты для наших клиентов с помощью разных инструментов. Но последние несколько лет разрабатываем сайты на Webflow. Наши клиентские проекты получают награды международного уровня. Мы собрали базу основных ошибок, досконально разобрались в работе этого сервиса, отслеживаем обновления и тренды, поэтому имеем право считать себя экспертами в Webflow.

Наше главное преимущество — успех наших студентов

Webflow позволяет создавать любые типы сайтов, поэтому мы используем его в разработке проектов для наших клиентов.
Ксения Зубкова
Опыт до курса:
без опыта
Фриланс
смотреть
Людмила Колотилина
Опыт до курса:
без опыта
Работает в Zephyrlab
смотреть
Лина Чехова
Опыт до курса:
без опыта
Фриланс
смотреть
Анна Прожижко
Опыт до курса:
без опыта
Фриланс
смотреть
Смотреть больше проектов
Наталья Шиллер
Опыт до курса:
без опыта
Работает в Mains Lab
смотреть
Мария Сергеева
Опыт до курса:
без опыта
Работает в Uprock
смотреть
Ольга Потлова
Опыт до курса:
без опыта
Работает в Uprock
смотреть
Андрей Ткаченко
Опыт до курса:
без опыта
Работает в Pinkman
смотреть
Смотреть больше проектов на awwwards
Ксения Зубкова
Опыт до курса:
без опыта
Фриланс
смотреть
Людмила Колотилина
Опыт до курса:
без опыта
Работает в Zephyrlab
смотреть
Лина Чехова
Опыт до курса:
без опыта
Фриланс
смотреть
Анна Прожижко
Опыт до курса:
без опыта
Фриланс
смотреть
Наталья Шиллер
Опыт до курса:
без опыта
Работает в Mains Lab
смотреть
Мария Сергеева
Опыт до курса:
без опыта
Работает в Uprock
смотреть
Ольга Потлова
Опыт до курса:
без опыта
Работает в Uprock
смотреть
Андрей Ткаченко
Опыт до курса:
без опыта
Работает в Pinkman
смотреть
Смотреть больше проектов на awwwards

Награды

Наши студенты делают качественную верстку, поэтому завоевывают множество наград.
Awwwards
10 наград
CSSDA
13 наград
CSS Winner
13 наград
Mindsparkle Mag
8 наград
Web Guru
13 наград
Посмотрите истории успеха наших выпускников.
Всем привет! Выражаю огромную благодарность всей команде UPROCK и отдельное спасибо Евгению, который собрал вместе таких классных людей!
Стас Дякин
,
работает в Embacy
Стас Дякин
Возраст:
работает в Embacy
Город:
Опыт до курса:
Всем привет! Выражаю огромную благодарность всей команде UPROCK и отдельное спасибо Евгению, который собрал вместе таких классных людей!
Спасибо Uprock за возможность принять участие в разработке сайта Marshmello. Основная цель проекта — показать, что дизайнер может верстать.
Михаил Наер
,
работает в MAX
Михаил Наер
Возраст:
работает в MAX
Город:
Опыт до курса:
Спасибо Uprock за возможность принять участие в разработке сайта Marshmello. Основная цель проекта — показать, что дизайнер может верстать.
Привет) Курс меня заинтересовал возможностью не только сделать дизайн, но и bring it to life.
Наталья Шиллер
,
работает в Mains Lab
Наталья Шиллер
Возраст:
работает в Mains Lab
Город:
Опыт до курса:
Привет) Курс меня заинтересовал возможностью не только сделать дизайн, но и bring it to life.

Было очень интересно и познавательно, узнала новое и о дизайне, и о Webflow. Каба - хороший и очень терпеливый ментор, выдержал 10 месяцев, что мы делали проект)

Отзывы

Наши студенты трудоустраиваются в лучшие компании

SETTERS
LANDAU
CREATIVE PEOPLE
ZEPHYR LAB
EVEREST
СИБИРИКС
M-A-X
2GIS
OZON
OBYS
UPLAB
WRIKE
СБЕР
CLAY
Мы обучаем максимально эффективным решениям, чтобы наши выпускники стали одними из лучших дизайнеров на рынке, а работодатели ценили их и стремились к взаимному сотрудничеству.
Посмотрите отзывы работодателей о наших студентах.
Узнать подробнее о курсе Webflow-разработчик: создание сайтов без кода
1 661 ₽/
мес
Без первого взноса
?

Вы можете воспользоваться беспроцентной рассрочкой, без первого взноса с возможностью досрочного погашения, от наших партнеров: Яндекс.Касса, Халва и Тинькофф Банк.

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

31 900 ₽/
40 000 ₽
Одним платежом
Пожалуйста, заполните правильно все обязательные поля

Как построен процесс обучения

Вы получаете ответ на любой организационный вопрос в течение 10 минут и ответ куратора в течение суток. Это четко контролируется.
Система подачи информации

Курс разбит на последовательные и логические этапы реальной разработки проекта. Таким образом вы легко усвоите материал и научитесь систематизировать свои рабочие процессы.

Упор на практику

Процесс подготовки на 80% состоит из практической работы, что позволяет максимально оттачивать навыки и наработать опыт.

Ориентирование на результат

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

Качественная обратная связь

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

Умение объяснять

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

Успех школы заключается в уникальной
методике обучения

Вы совместно с кураторами пройдете все этапы верстки сайта от начала и до конца.
/01
После окончания курса вы научитесь создавать полноценные, адаптированные под разные устройства, сайты с эффектной анимацией без знания кода.
/02
Вы узнаете, как спланировать и систематизировать весь процесс разработки от подготовки до запуска по методике, которую мы используем в студии Uprock.
/03
В процессе обучения вы пройдете все этапы разработки и по итогу создадите полноценный сайт (лендинг). Этапы – это спринты. Они выстроены по таким же принципам, которые мы используем при разработке своих проектов в студии Uprock.

Что вы получите

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

Последовательные и логические этапы реальной разработки проекта. Систематизация рабочих процессов.

Вы сверстаете один проект

Обратная связь куратора раз в сутки с видеоразбором вашего домашнего задания

Вас ждут максимально подробные консультации от наших специалистов.

Техподдержка

Наша техподдержка отвечает в течение 5 минут по всем организационным вопросам.

Получение рассрочки

Вы можете оплатить полную сумму или воспользоваться беспроцентной рассрочкой

Бонусы

Мы постоянно ищем новые возможности для повышения уровня качества обучения.
Скидки
У вас будут специальные скидки до 50% на последующие продукты от UPROCK.
Работа в Uprock
Привлекаем студентов на свои проекты в качестве фрилансеров, а также нанимаем в Uprock, как штатных сотрудников.
Пиар наших студентов
Регулярно публикуем проекты сообщества на наших страницах в Instagram, Facebook и Вконтакте. Охват более 40 тыс. подписчиков.
Бесплатные места
У нас есть ежемесячная квота на бесплатные консультации для людей с 1‑2 группой инвалидности.

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

Самая объемная и насыщенная программа, которая раскрывает
все темы. Все уроки даются последовательно и насыщенно,
емко и без воды
Теория
Введение

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

О чем этот курс
 
Как проходит курс

Планы и тарифы
 
Site Plans (Сайт планы)
 
Account Plans (Аккаунт Планы)
 
Обзор и Анализ макета
 
Чек-лист приемки макета
 
План работы
 
Подготовка макета к верстке
 
Экспорт и оптимизация изображений
 
Подготовка других файлов

Веб‑структура

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

Блочная верстка и основы HTML и CSS

Иерархия элементов сайта

Панель Навигатор

Практика: Планирование структуры сайта

Создание проекта и публикация

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

Регистрация и создание проекта

Публикация сайта

Поделиться проектом (Share project)

Клонирование проекта

Клонирование специального шаблона

Основные настройки

Вы познакомитесь с основными настройками проекта в режиме Project Settings.В результате настроите проект, загрузите изображения по папкам и сверстаете UI Kit.

Настройки проекта

Подключение своего домена

Файлы сайта

Общие настройки проекта

Настройка основных стилей

Загрузка изображений

UI Kit основных элементов

Практика
Элементы

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

Добавление элементов

Обзор основных элементов

Обзор функциональных элементов

Персональные настройки элементов

Практика: Создание основной структуры сайта

Практика: Добавляем элементы и классы

Стили элементов

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

Общие принципы

Обзор простых разделов панели Style (Стиль)

Обзор панели Style Manager (Управление стилями)

Состояния элементов

Практика: Добавление контента элементам

Настройки стилей. 1 часть

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

Панель Style: Раздел Layout

Практика: Детальная верстка 1 и 2 секций

Настройки стилей. 2 часть

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

Панель Style: Элемент Grid

Практика: Детальная верстка 3 и 4 секций

Настройки стилей. 3 часть

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

Панель Style: Раздел Size

Практика: Детальная верстка 5 и 6 секций

Страницы сайта

Мы рассмотрим панель Pages (Страницы). Узнаем, какие типы страниц существуют и как их настраивать. В результате вы сверстаете 7-8 секции сайта.

Страницы сайта

Практика: Детальная верстка 7 и 8 секций

Вспомогательные функции

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

Вспомогательные функции в режиме Designer

Практика. Детальная верстка 9 и 10 секций

Символы и Шаблоны

Узнаете, как в Webflow создавать Символы из элементов или группы элементов для управления повторяющимися блоками и контентом. По итогу сверстаете меню навигации, Navbar, настроите якорные ссылки и создадите символы для Меню и Footer.

Обзор панели Symbols

Обзор готовых макетов Layouts

Создание Символов

Практика

Адаптивная верстка

В этом уроке вы изучите основы адаптивной верстки, познакомитесь с понятием «Брейкпоинты». В результате создадите адаптив планшетной и мобильной версии, адаптив для больших экранов и адаптив меню.

Основы адаптивной верстки

Брейкпоинты

Проверка адаптивности

Адаптация сайта под мобильные экраны

Адаптация сайта под большие экраны

Тестируем адаптивность

Расширенные возможности
Анимация. 1 часть

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

Общие принципы анимации

Триггеры

Настройка триггеров

Анимируем элементы при наведении

Якорные ссылки

Анимация. 2 часть

Вы узнаете, что такое глобальная анимация. В результате научитесь ее создавать.

Глобальная анимация

Анимация компонентов

Анимация при загрузке и прокрутке страницы

Вставка стороннего кода

Вы поймете, зачем нужно вставлять сторонний код. Познакомитесь с компонентом Embed. Узнаете, как можно интегрировать сторонний код, например, подключить сервисы комментариев или виджет карты. На практике научитесь вставлять код карты.

Компонент Embed

Вставка кода в настройках страницы

Вставка кода в настройках проекта

Вставка кода в настройках элемента (Custom Attributes)

Вставляем карту на сайт

Аналитика и SEO

Узнаете, что такое веб‑аналитика и SEO и для чего они нужны.  Поймете, как подключить Аналитику и настроить SEO страницы.

Подключение Аналитики

Подключаем Яндекс Метрику и Google Analytics

Настройка SEO в настройках страницы

Завершение проекта

Еще раз пройдетесь по всем этапам создания сайта. Разберетесь, как утверждать и передавать сайт клиенту. Научитесь подключать сайт к домену на хостинге Webflow, выгружать сайт и устанавливать его на своем хостинге.

Чек‑лист проверки сайта

Утверждение и Передача проекта клиенту

Подключение сайта к домену на хостинге Webflow

Выгрузка сайта и установка на своем хостинге

Бонус

Дипломный проект

Условия

4 месяца
Онлайн‑стажировка под руководством наших арт‑директоров, с видеоуроками и обратной связью.
1 проект
Вы сделаете один лендинг, но с максимальным количеством разнообразных компонентов.
Для кого
Подходит как для начинающих, так и для опытных дизайнеров, которые хотят повысить свой профессиональный уровень.
Доступ навсегда
Набор актуальных инструкций, которые всегда будут доступны вам.
Узнать подробнее о курсе Webflow-разработчик: создание сайтов без кода
1 661 ₽/
мес
Без первого взноса
?

Вы можете воспользоваться беспроцентной рассрочкой, без первого взноса с возможностью досрочного погашения, от наших партнеров: Яндекс.Касса, Халва и Тинькофф Банк.

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

31 900 ₽/
40 000 ₽
Одним платежом
Пожалуйста, заполните правильно все обязательные поля

Стоимость

Покупка курса сейчас — это отличная возможность сэкономить.
Webflow-разработчик: создание сайтов без кода
Включает:
— 1 проект в портфолио
— Бессрочный доступ к материалу
— 4 месяца обучения
31 900
вместо
40 000

Частые вопросы

Можно ли вернуть деньги?

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

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

Какие есть варианты оплаты, есть ли рассрочка?

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

Вы рисуете в Figma? Я её не знаю.

Да, мы рисуем проекты в Figma. Это наиболее удобный на сегодняшний день инструмент, который используют большинство студий.

Как помогаете с трудоустройством?

Помогаем правильно составить резюме и оформить портфолио. Консультируем при прохождении собеседования и выполнении тестового задания. Регулярно получаем заявки от работодателей и напрямую трудоустраиваем в компании. Также предлагаем проекты на фриланс и берем на работу в UPROCK.

Как проходит консультация?

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

Наши партнеры

Записаться на курс