Webflow: как создать сайт без кода
Дизайн цифрового продукта
Для начинающих
Освоите zero-code конструктор Webflow, чтобы верстать сайты без разработчиков и работать с зарубежным рынком.
Вячеслав Шейкин
Лид-разработчик Webflow отдела в студии Redis Agency.
О курсе
Программа курса движется от простого к сложному: от базовой верстки до создания анимации. Вы освоите готовые инструменты в Webflow, а если их не хватит для ваших идей — реализуете самостоятельно с помощью кода по материалам из базы знаний.
Всего сделаете два проекта в портфолио разного уровня сложности. Сначала примените новые знания о конструкторе, а в выпускной работе попробуете выйти за рамки шаблонов Webflow. Преподаватель поделится процессами работы в студии Redis и вместе с вами сделает кейс как для своих заказчиков.
В конце вы научитесь самостоятельно делать проекты любой сложности и получите вечный доступ к базе знаний в Notion для продвинутого изучения.
Кому подойдет
Уникальность программы
Кто будет преподавать
Вячеслав Шейкин
Лид-разработчик Webflow отдела в студии Redis Agency.
Преподаватель рассказывает о курсе
Программа
курса
Вводное занятие: знакомство и дорожная карта курса
- знакомство со студией 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
Разбор проектов студентов
Необходимые материалы и инструменты
Чему научитесь
Оставьте
заявку
на консультацию
заявку
на консультацию
База знаний
Комьюнити
Почувствуете себя частью сообщества, разделяющего единые ценности, найдете друзей и партнеров для проектов и получите поддержку — профессиональную и личную.
Чаты направлений
Телеграм-чаты всех тематических сообществ школы — чтобы поддерживать связь со студентами и экспертами индустрии, участвовать в творческих конкурсах и опен-коллах, получать обратную связь по своим проектам и работам.
Комьюнити встречи
Очные встречи студентов и совместные посещения выставок, воркшопов, лекций и других мероприятий.
Random Coffee
Новые знакомства с ребятами из комьюнити BBE (в том числе с командой школы) — каждую неделю в специальном канале с ботом.
Как мы учим
Специалисты из индустрии
Студентам важно перенять опыт тех, кто в профессии уже состоялся, поэтому наши курсы разрабатывают и ведут практикующие специалисты.
( 1 )
Насмотренность и открытость
Мы ценим свободную образовательную среду, где студенты питают друг друга идеями и развиваются вместе — поэтому открываем доступ ко всем работам внутри курсов. А выпускные проекты показываем всем желающим на финальных просмотрах.
( 2 )
Обратная связь от экспертов
Все практические задания проверяют преподаватели или наставники — они отвечают на вопросы в чатах и комментируют работу каждого студента. Обратиться за советом или фидбэком лично можно на вебинарах.
( 3 )
Удобная учебная платформа
Смотрите лекции, получайте обратную связь, общайтесь и изучайте работы других студентов. Платформа доступна в десктопной и мобильной версиях.
( 4 )
Подарки
Скидка 15% на другие курсы
Выбирайте из наших основных курсов по разным направлениям дизайна: от типографики и 3D — до брендинга и дизайн-мышления. Скидкой можно будет воспользоваться в любое время.
Доступ на месяц к «Дизайн-библиотеке»
«Дизайн-библиотека» — это коллекция знаний по подписке. Изучайте новые направления в свободном ритме, развивайтесь в смежных областях и расширяйте границы каждый день.
Запишитесь или получите консультацию