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

Лид-разработчик Webflow-отдела в студии Redis Agency.
О курсе
Webflow — конструктор, который позволяет создавать сайты без участия разработчика. Его активно используют многие зарубежные компании (от DHL до Netflix) из-за гибкой верстки и возможности бизнесу решать задачи быстрее и проще. Программа курса движется от простого к сложному: от базовой верстки до создания анимации. Вы освоите готовые инструменты, которых хватит для работы веб-дизайнером. И даже если вы только начинаете, сможете найти международных заказчиков.
К концу обучения добавите два проекта в портфолио разного уровня сложности. Преподаватель расскажет, как выстроены рабочие процессы в студии Redis, и вместе с вами сделает кейс как для своих клиентов.
Кому подойдет
Кто будет преподавать
Больше о курсе — в коротком видео
Программа
Вводное занятие: знакомство и дорожная карта курса
- знакомство со студией 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
Разбор проектов студентов
Чему вы научитесь
Работы студентов
Необходимые материалы и инструменты
Формат обучения
Вы смотрите видеолекции, участвуете в вебинарах и выполняете домашние задания. Часть заданий — на самостоятельную отработку, часть — проверит преподаватель вместе с экспертами Redis и оставит комментарии для улучшения работы. Каждый вторник и четверг будут публиковаться новые занятия, после середины курса — только каждый вторник, чтобы облегчить нагрузку.
Курс предполагает свободный, но организованный график. На протяжении всей учебы вас поддерживает координатор и помогает добиться образовательных целей, а преподаватель дает обратную связь на задания и делится своей экспертизой.
Программа доступна 6 месяцев после окончания курса.
Уникальность программы
Комьюнити
Комьюнити-встречи

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

Random Coffee

Отзывы
Наши ценности
- Специалисты из индустрииСтудентам важно перенять опыт тех, кто в профессии уже состоялся, поэтому наши курсы разрабатывают и ведут практикующие специалисты.
- Насмотренность и открытостьМы ценим свободную образовательную среду, где студенты питают друг друга идеями и развиваются вместе — поэтому открываем доступ ко всем работам внутри курсов. А выпускные проекты показываем всем желающим на финальных просмотрах.
- Обратная связь от экспертовВсе практические задания проверяют преподаватели или наставники — они отвечают на вопросы в чатах и комментируют работу каждого студента. Обратиться за советом или фидбэком лично можно на вебинарах.
- Удобная учебная платформаСмотрите лекции, получайте обратную связь, общайтесь и изучайте работы других студентов. Платформа доступна в десктопной и мобильной версиях.
Подарки
Скидка 15% на новые знания
Выбирайте из наших основных курсов по разным направлениям дизайна: от типографики и 3D — до брендинга и дизайн-мышления. Скидкой можно будет воспользоваться в любое время.
Доступ на месяц к «Дизайн-библиотеке»
«Дизайн-библиотека» — это подписка на курсы для изучения в собственном ритме. Развивайтесь в смежных областях, изучайте новые направления и расширяйте границы каждый день.