👨‍💻DEV [Pixel Perfect] Николай Алексеев → Webflow + Upwork: старт на зарубежном рынке (2025)

[Odyvanchik]

[Pixel Perfect] Николай Алексеев → Webflow + Upwork: старт на зарубежном рынке (2025)
Освой верстку и no-code разработку сайтов, забирай лучшие заказы на Upwork и зарабатывай от $1000 на старте
Программа обучения:
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
Тариф С нуля до Pro
120+ видео-уроков c базой Webflow + дз
15 видео-уроков по Upwork + дз
90 видео-уроков с продвинутым Webflow + дз
От 6 проектов в портфолио


🌍 Продажник:
Нажмите для перехода

📥 СКАЧАТЬ:

Для просмотра содержимого вам необходимо Войти или Зарегистрироваться.

🔐 Хотите получить доступ?

Чтобы увидеть скрытые ссылки и ставить лайки, активируйте VIP-статус.

💎 ПОЛУЧИТЬ ДОСТУП Наш Telegram канал