Освоить навык

С нуля

4 месяца

Webflow: веб-дизайн без кода и границ

• Освоите востребованный на западном рынке ноу-код конструктор и создадите два сайта для портфолио

• Сможете брать заказы на дизайн и верстку за рубежом

• Получите вечный доступ к базе знаний и обратную связь от эксперта Redis Agency, профессионального партнера Webflow

Записаться на курс
Вячеслав Шейкин

Лид-разработчик Webflow-отдела в студии Redis Agency.

О курсе

Webflow — конструктор, который позволяет создавать сайты без участия разработчика. Его активно используют многие зарубежные компании (от DHL до Netflix) из-за гибкой верстки и возможности бизнесу решать задачи быстрее и проще. Программа курса движется от простого к сложному: от базовой верстки до создания анимации. Вы освоите готовые инструменты, которых хватит для работы веб-дизайнером. И даже если вы только начинаете, сможете найти международных заказчиков.

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

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

Кто будет преподавать

Больше о курсе — в коротком видео

Программа

  • 19 занятий
  • 14 заданий
  • 2 кейса в портфолио
  • 1 база знаний

Вводное занятие: знакомство и дорожная карта курса

  • знакомство со студией Redis Agency и преподавателем
  • дорожная карта курса: как мы будем учиться
  • концепция курса

Основообразующий вопрос: подготовка в верстку

  • брейкпоинты и выбор устройств: десктоп, планшет, смартфон
  • использование сетки
  • дополнительные состояния элементов (UI kit и стайлгайд)
  • использование autolayout в Figma
  • контейнеры для изображений
  • подход к анимации и подготовка

Файлы и публикация тестовой странички

  • структура папок и файлов
  • форматы файлов: в чем сохранять, как сжимать и какие размеры подходят
  • как загружать материалы в Webflow
  • подключение шрифтов

Структура страницы

  • что такое HTML
  • что такое div и как его использовать
  • текстовые элементы
  • изображения
  • кнопки и ссылки

Стилизация элементов #1

  • что такое CSS
  • как создать класс для элемента
  • как создать модификатор
  • как создать комбокласс
  • как менять стили тегов
  • размеры элемента
  • стили текста

Стилизация элементов #2

  • что такое margin, padding и background и как их использовать
  • обводка
  • вставка изображения

Flexbox

  • как работает flexbox
  • примеры использования: учимся собирать простые конструкции из элементов

Резиновая адаптация

  • vw: что это и как это считать
  • примеры использования
  • сборка элементов относительно ширины окна браузера

Разбор проектов студентов

Учимся располагать элементы: position

  • relative, absolute, fixed, sticky
  • примеры использования

Адаптивы

  • выбор устройств
  • как работают брейкпоинты

Резиновая верстка

  • как готовить макет под резиновую верстку
  • как сделать стайлгайд под резиновую верстку
  • как использовать размеры текстовых стилей в em.

Верстка при помощи сетки

  • как работает grid
  • примеры использования

Стилизация элементов

  • форма ввода и элементы ввода
  • кастомизация элементов ввода

Анимации

  • как это работает
  • примеры использования
  • анимация при появлении на экране
  • анимация при наведении мыши
  • анимация во время прокрутки
  • lottie-анимация
  • как сделать горизонтальный скролл в Webflow без кода
  • mouse move over element: анимация при наведении курсора на элемент

CMS collections

  • CMS list и подключение на странице
  • Template CMS collections
  • переиспользование CMS collections
  • схема в Miro

Разбор проектов студентов

Оставьте заявку на консультацию
+7
Как с вами связаться?
Запись на курс закрыта

Чему вы научитесь

  1. Правильно готовить макеты к разработке: использовать стили и autolayout, работать с изображениями и анимацией.
  2. Верстать и анимировать сайты, используя весь функционал Webflow.
  3. Использовать CMS Webflow для создания редактируемого контента.
  4. Искать проекты и выстраивать процессы — от получения заказа до верстки и сдачи.

Необходимые материалы и инструменты

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

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

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

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

Уникальность программы

Фидбэк от преподавателя и два готовых кейса в портфолио. Вместо статичных картинок на Behance — реальные сайты, которые можно показать будущим заказчикам.
  1. Redis Agency — профессиональный партнер Webflow. Студия прошла отбор и стала частью Webflow-комьюнити, а несколько работ получили награду Site of the day на Awwwards по результатам голосования жюри.
  2. Материалы для углубленного изучения. Собрали расширенный курс по Webflow, который позволит делать более сложные проекты. Вы узнаете о Content Management System (CMS), чтобы заказчик смог редактировать контент сайта без дизайнеров и разработчиков.
  3. Обновляемая база знаний. Кроме материалов о CMS вы получите доступ к видеолекциям и заданиям для отработки новых навыков от преподавателя. База также будет пополняться полезными материалами от студентов, потому что мы верим, что обмен ресурсами обогатит ваш опыт.
  4. Обратная связь от экспертов студии Redis Agency. Онлайн-встречи для разбора кейсов и консультаций раз в две недели.

Комьюнити

Почувствуете себя частью сообщества, разделяющего единые ценности, найдёте друзей и партнёров для проектов и получите поддержку — профессиональную и личную.

Комьюнити-встречи

Очные и онлайн-встречи студентов, совместные посещения выставок, воркшопов, лекций и других мероприятий.
room

Чаты направлений

Телеграм-чаты всех тематических сообществ школы — чтобы поддерживать связь со студентами и экспертами индустрии, участвовать в творческих конкурсах и опен-коллах, получать обратную связь по своим проектам и работам.
chat

Random Coffee

Новые знакомства с ребятами из комьюнити BBE (в том числе с командой школы) — каждую неделю в специальном канале с ботом.
coffee

Отзывы

Валерия Шабанова

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

Курс ведет очень позитивный преподаватель, всегда готовый поделиться лучшими методами. Видно, как он увлечен своим делом, может говорить про Webflow часами. Было много практики, чтобы максимально отработать навыки. Преподаватель направлял в нужное русло, помогал искать решения и мотивировал («Ребята, дожимайте!»).

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

Дмитрий Ермаков

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

Было несколько попыток учиться самостоятельно, но быстро пропадала мотивация. На курсе BBE такой проблемы не испытывал, вероятно, из-за хороших домашних заданий. Даже если решение было неочевидным, я понимал, что его можно выполнить, используя мои накопленные знания, — надо лишь немного подумать. И чем дальше по программе курса — тем больше таких заданий. Сами задачи интересные и красивые — вы не будете верстать топорные бабушкины макеты. После выполнения я частенько отправлял ссылку друзьям с сообщением: «Привет! Смотри, а это я сам сделал!». А они мне в ответ: «Ого!».

Вторым приятным бонусом стало комьюнити: студенты активно общались друг с другом, давали советы, вместе искали решения задач, другими словами — переопылялись :) Потом приходил преподаватель и рассказывал, как надо.

А минус только один — жалко, что курс закончился :)

Никита Широков

Курс советую! Мне удалось довольно быстро освоить программу, разобраться в основах верстки и анимации. Задавать вопросы по ходу учебы можно любые, даже не по теме :) Вячеслав всегда всё доходчиво объясняет, спасибо!

Маша Хвостунова

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

Олег Кузьменко

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

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

Наши ценности

  • Специалисты из индустрии
    Студентам важно перенять опыт тех, кто в профессии уже состоялся, поэтому наши курсы разрабатывают и ведут практикующие специалисты.
  • Насмотренность и открытость
    Мы ценим свободную образовательную среду, где студенты питают друг друга идеями и развиваются вместе — поэтому открываем доступ ко всем работам внутри курсов. А выпускные проекты показываем всем желающим на финальных просмотрах.
  • Обратная связь от экспертов
    Все практические задания проверяют преподаватели или наставники — они отвечают на вопросы в чатах и комментируют работу каждого студента. Обратиться за советом или фидбэком лично можно на вебинарах.
  • Удобная учебная платформа
    Смотрите лекции, получайте обратную связь, общайтесь и изучайте работы других студентов. Платформа доступна в десктопной и мобильной версиях.

Подарки

  • Скидка 5% на новые знания

    Выбирайте из наших основных курсов по разным направлениям дизайна: от типографики и 3D — до брендинга и дизайн-мышления. Скидкой можно будет воспользоваться в любое время.

  • Доступ на месяц к «Дизайн-библиотеке»

    «Дизайн-библиотека» — это подписка на курсы для изучения в собственном ритме. Развивайтесь в смежных областях, изучайте новые направления и расширяйте границы каждый день.

Запишитесь или получите консультацию
7 245 ₽ / мес
В рассрочку на 10 мес
Полная стоимость
Заполните форму и наш гид свяжется с вами
+7
Как с вами связаться?
Запись на курс закрыта