Освой верстку и 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 проектов в портфолио
ИСТОЧНИК
СКАЧАТЬ
Вы находитесь на странице товара «Pixel Perfect - Николай Алексеев → Webflow + Upwork: старт на зарубежном рынке», это материал 2025 года, который, мы надеемся, принесет вам пользу. Все курсы доступны по очень низкой цене, в отличии от оригинальной цены автора в размере рублей. Вы же получаете этот курс, купив в нашем магазине Coursx.net, с огромной скидкой, всего 179 рублей. На каждый курс Вы можете посмотреть оригинальный продажник, после чего принять решение о покупке. Обучающий курс входит в рубрику «Программирование», спросом которой пользуется множество покупателей. В нашем магазине Вы найдёте ещё много курсов от автора «Pixel Perfect», достаточно ввести в поиск имя автора.
