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

С нуля

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
Как с вами связаться?
Запись на курс закрыта

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

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

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

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

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

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

Комьюнити

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

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

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

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

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

Random Coffee

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

Отзывы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подарки

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

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

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

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

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