[Pixel Perfect] Webflow + Upwork: старт на зарубежном рынке. Тариф С нуля до PRO (Николай Алексеев)

​

Программа:
01. База Webflow

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

• Модуль 1. Введение
  • Этот модуль поможет вам понять, чего ожидать от курса и как эффективно изучать материал.
• Модуль 2. Основы классической верстки
  • Перед тем как углубляться в Webflow, важно понять базовые принципы работы HTML и CSS. В этом модуле мы изучим, как устроены блоки, что такое Box Model, как работает структура HTML-документа и каким образом CSS отвечает за стилизацию страниц.
• Модуль 3. Интро Webflow
  • Этот модуль поможет вам сделать первые шаги в Webflow. Вы узнаете, как зарегистрироваться в системе, познакомитесь с интерфейсом платформы и её основными инструментами. Мы разберём процесс создания первого проекта, рассмотрим ключевые настройки, а также изучим основные возможности Webflow Designer. В конце модуля вы получите доступ к шаблону, который поможет вам ускорить процесс обучения.
• Модуль 4. Элементы в Webflow
  • Этот модуль поможет вам разобраться с основными строительными блоками Webflow. Вы изучите, какие элементы существуют, как они работают и для чего используются. Мы разберём основные группы элементов, такие как Structure, Basic, Typography, Media, Forms и Advanced, а также научимся добавлять их в проект и управлять ими.
• Модуль 5. Стилизация элементов
  • Знание того, как стилизовать элементы, делает ваш сайт визуально привлекательным и удобным. В этом модуле вы изучите базовые принципы работы с классами, единицами измерения, настройками отображения (Display: Block, Flex, Grid, Inline), свойствами размеров (Size), настройками типографики (Typography), фоновыми изображениями (Backgrounds), границами (Borders) и эффектами (Effects). Это фундаментальные знания, которые позволят вам уверенно управлять внешним видом вашего сайта.
• Модуль 6. Верстка первого макета
  • Пришло время применить знания на практике! В этом модуле вы поэтапно соберёте свой первый макет, начиная с базовой структуры и заканчивая детальной версткой всех блоков. Мы разберём пошаговую верстку каждого элемента, чтобы у вас получился полноценный сайт.
• Модуль 7. Адаптивность в Webflow
  • Сайт должен отлично смотреться на любых устройствах. В этом модуле вы научитесь настраивать адаптивность, работать с breakpoints и создавать мобильную версию вашего проекта. Мы разберём основные принципы адаптивного дизайна и научимся подстраивать элементы для разных экранов.
• Модуль 8. Анимации в Webflow
  • В этом модуле вы разберётесь, как создавать анимации в Webflow: от простых эффектов до сложных интерактивов. Вы узнаете, из чего состоят анимации, какие бывают триггеры и как правильно работать с таймингом. Мы рассмотрим реальные примеры для всех типов взаимодействий — от кликов и ховеров до скролла и загрузки страницы. Также вы научитесь переиспользовать анимации, делать их адаптивными и управлять через переменные.
• Модуль 9. CMS коллекции
  • Этот модуль про практическую работу с динамическим контентом. Вы научитесь создавать блоги, портфолио, страницы команды, кейсы и другие повторяющиеся разделы сайта. Разберём, как один раз настроить шаблон и дальше только наполнять его контентом. Также вы научитесь связывать коллекции между собой, настраивать фильтры, сортировку и пагинацию, чтобы реализовывать более сложные сценарии.
• Модуль 10. Базовое SEO и настройка аналитики
  • Вы научитесь готовить сайт к публикации: настроите favicon, метатеги, Open Graph и аналитику. Разберётесь с правильной структурой заголовков H1–H3, тегами main и section, чтобы сайт индексировался корректно. Разберётесь, как работает SEO в Webflow и как подключить аналитику, чтобы отслеживать эффективность сайта после запуска.
• Модуль 11. Тестирование проекта
  • Научитесь проверять сайт перед сдачей: протестируете адаптивность, анимации и интерактивы на разных устройствах и в разных браузерах. Узнаете, как находить и быстро исправлять ошибки, чтобы проект выглядел идеально у клиента.
• Модуль 12. Сдача проекта
  • Разберём финальные этапы: проверку структуры, подключение домена, публикацию и передачу проекта клиенту. Вы закрепите навыки полного цикла разработки — от идеи до готового сайта в сети.
• Модуль 13. Битва верстальщиков
  • Учебное соревнование на реальных проектах. Студенты делятся на команды, каждая из которых получает дизайн в Figma. Выигрывает тот, кто заверстает сайт на Webflow быстрее. Эта битва отлично прокачивает уровень владения Webflow, дает дополнительный кейс в портфолио и улучшает навыки коммуникации.

02. Upwork

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

• Модуль 1. Intro Upwork
  • Познакомимся с платформой, сделаем краткий обзор ее возможностей и расскажем, почему Upwork — самая подходящая биржа для ноу-код разработчиков.
• Модуль 2. Обход блокировки
  • В 2022 году Upwork запретил пользователям из России и Беларуси пользоваться сервисом. В этом модуле мы поделимся всеми возможными способами, как можно обойти это ограничение.
• Модуль 3. Регистрация на Upwork
  • При регистрации алгоритмы платформы автоматически подтверждают профиль каждого фрилансера. Если автоматической верификации не произошло, то профиль попадает на дополнительную ручную верификацию личности. К сожалению, она достаточно долгая и работает случайным образом. В итоге, ручная верификация может приводить к вечному бану. Чтобы этого не произошло, проходим регистрацию вместе.
• Модуль 4. Упаковка профиля
  • Правильная презентация аккаунта — must-have при знакомстве с потенциальным клиентом. На Upwork все просто: чем лучше и профессиональнее выглядит профиль, тем выше вероятность получить предложение о работе. Цель этого модуля — сделать анкету привлекательной и наполненной.
• Модуль 5. Отбор проектов
  • Важный и кропотливый этап поиска предложений по работе (job offers). Наша цель — получить контакт с потенциальным клиентом. Чтобы ее достичь, сформируем критерии, по которым будем подавать заявки. Они помогут нам четко определить, к кому и на какие предложения откликаться.
• Модуль 6. Cover letter
  • Сопроводительное письмо — первое, что видит потенциальный клиент при вашем отклике на его предложение. Разработаем несколько шаблонов с ключевыми словами, чтобы у клиента не осталось шансов выбрать не тебя.
• Модуль 7. Первый контакт
  • Разберем основы коммуникации с заказчиком. Обсудим, как правильно общаться, отвечать на возражения и что делать, если клиент хочет созвониться, а твой разговорный английский не позволяет этого сделать.
• Модуль 8. Ретаргетинг на Upwork
  • Этап повторного контакта с потенциальным заказчиком. Сообщения с напоминанием клиентам о вас и ваших навыках — отличная возможность увеличить продажи с уже наработанных контактов. Научимся их составлять и разработаем стратегию отправки.
• Модуль 9. Спринт по Upwork
  • Самый насыщенный и продуктивный модуль, который длится 3 недели. Каждого студента курируют лично менторы курса. Они же проводят консультации, обращают внимание, на какие заказы стоит откликаться, и дают советы по написанию Cover letter. Все отклики отправляются совместно, а коммуникация проходит в Telegram. Активность на данном этапе гарантирует первый заказ!

03. Блок Webflow Pro

• Модуль 1. База JavaScript
  • Этот модуль посвящен изучению основ языка программирования. Рассмотрим циклы, взаимодействие с DOM, функции, условия и еще несколько базовых тем
• Модуль 2. Gsap-анимации
  • Познакомимся с библиотекой GSAP, ее основными плагинами и научимся их применять. Создадим анимации разного вида: по скроллу, клику, для текстов и реализуем функционал Drag and Drop. Финализируем версткой первого проекта с применением JS и GSAP-анимаций
• Модуль 3. Оптимизация сайта
  • В этом модуле познакомимся с продвинутыми SEO-настройками, мультиязычностью и оптимизацией видеоконтента.
    - узнаем, что такое FFmpeg и CDN-платформы, а также интегрируем фоновое видео и встроим готовый плеер на сайт
    - научимся формировать Alt Text для изображений, robots.txt, sitemap.xml и canonical link element link
    - реализуем мультиязычность вручную, а также через Weglot и Webflow Localization
• Модуль 4. E-commerce
  • Заверстаем полноценный интернет-магазин с использованием Webflow Ecommerce. Разберем функционал, создадим товары с карточками, а затем разработаем страницы корзины и оплаты
• Модуль 5. Конвертеры
  • Знакомство с веб-приложением Udesly, которое позволяет адаптировать макеты Webflow для использования с такими CMS, как Shopify и WordPress. Рассмотрим альтернативу Udesly — Web-steps, сервис который особенно актуален для клиентов из СНГ. Перенесем макеты с Webflow на Wordpress и Shopify
• Модуль 6. Интеграции
  • С помощью интеграторов Zapier и Webjack настроим интеграцию Webflow с самыми популярными сервисами. Битрикс24, amoCRM, Google Таблицы, Telegram, GetCourse и Notion
• Модуль 7. Spline
  • Создадим 3D контент для сайта с использованием инструмента Spline. Разберем базовый функционал, спроектируем простую 3D модель и научимся использовать Spline в Webflow. В конце создадим интерактивный элемент с 3D