О курсе
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
Разбор проектов студентов
Чему вы научитесь
- Правильно готовить макеты к разработке: использовать стили и autolayout, работать с изображениями и анимацией.
- Верстать и анимировать сайты, используя весь функционал Webflow.
- Использовать CMS Webflow для создания редактируемого контента.
- Искать проекты и выстраивать процессы — от получения заказа до верстки и сдачи.
Работы студентов
Необходимые материалы и инструменты
Формат обучения
Вы смотрите видеолекции, участвуете в вебинарах и выполняете домашние задания. Часть заданий — на самостоятельную отработку, часть — проверит преподаватель вместе с экспертами Redis и оставит комментарии для улучшения работы. Каждый вторник и четверг будут публиковаться новые занятия, после середины курса — только каждый вторник, чтобы облегчить нагрузку.
Курс предполагает свободный, но организованный график. На протяжении всей учебы вас поддерживает координатор и помогает добиться образовательных целей, а преподаватель дает обратную связь на задания и делится своей экспертизой.
Программа доступна 6 месяцев после окончания курса.
Уникальность программы
- Redis Agency — профессиональный партнер Webflow. Студия прошла отбор и стала частью Webflow-комьюнити, а несколько работ получили награду Site of the day на Awwwards по результатам голосования жюри.
- Материалы для углубленного изучения. Собрали расширенный курс по Webflow, который позволит делать более сложные проекты. Вы узнаете о Content Management System (CMS), чтобы заказчик смог редактировать контент сайта без дизайнеров и разработчиков.
- Обновляемая база знаний. Кроме материалов о CMS вы получите доступ к видеолекциям и заданиям для отработки новых навыков от преподавателя. База также будет пополняться полезными материалами от студентов, потому что мы верим, что обмен ресурсами обогатит ваш опыт.
- Обратная связь от экспертов студии Redis Agency. Онлайн-встречи для разбора кейсов и консультаций раз в две недели.
Комьюнити
Комьюнити-встречи
Чаты направлений
Random Coffee
Отзывы
Наши ценности
Подарки
Скидка 5% на новые знания
Выбирайте из наших основных курсов по разным направлениям дизайна: от типографики и 3D — до брендинга и дизайн-мышления. Скидкой можно будет воспользоваться в любое время.
Доступ на месяц к «Дизайн-библиотеке»
«Дизайн-библиотека» — это подписка на курсы для изучения в собственном ритме. Развивайтесь в смежных областях, изучайте новые направления и расширяйте границы каждый день.