Webflow: как создать сайт без кода

Дизайн цифрового продукта

Для начинающих

Освоите zero-code конструктор Webflow, чтобы верстать сайты без разработчиков и работать с зарубежным рынком.
Запись закрыта
Вячеслав Шейкин

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

Webflow: как создать сайт без кода
О курсе

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

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

В конце вы научитесь самостоятельно делать проекты любой сложности и получите вечный доступ к базе знаний в Notion для продвинутого изучения.

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

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

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

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

    Преподаватель рассказывает о курсе

    Программа
    курса

    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
    Разбор проектов студентов

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

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

        Оставьте
        заявку
        на консультацию

        База знаний

          Комьюнити

          Почувствуете себя частью сообщества, разделяющего единые ценности, найдете друзей и партнеров для проектов и получите поддержку — профессиональную и личную.
          Чаты направлений
          Телеграм-чаты всех тематических сообществ школы — чтобы поддерживать связь со студентами и экспертами индустрии, участвовать в творческих конкурсах и опен-коллах, получать обратную связь по своим проектам и работам.
          Комьюнити встречи
          Очные встречи студентов и совместные посещения выставок, воркшопов, лекций и других мероприятий.
          Random Coffee
          Новые знакомства с ребятами из комьюнити BBE (в том числе с командой школы) — каждую неделю в специальном канале с ботом.

          Как мы учим

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

          Подарки

          Скидка 15% на другие курсы
          Выбирайте из наших основных курсов по разным направлениям дизайна: от типографики и 3D — до брендинга и дизайн-мышления. Скидкой можно будет воспользоваться в любое время.
          Доступ на месяц к «Дизайн-библиотеке»
          «Дизайн-библиотека» — это коллекция знаний по подписке. Изучайте новые направления в свободном ритме, развивайтесь в смежных областях и расширяйте границы каждый день.
          Запишитесь или получите консультацию
          Заполните форму и наш гид свяжется с вами
          Как с вами связаться?