Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Webflow Masterclass 3.0
Introduction
Welcome: How to make the best of this course & community (6:23)
Your Instructors (1:36)
Course Projects & Certification (2:57)
What Webflow plan do you need? (1:59)
Mastering The Fundamentals
7 Key Concepts for mastering Webflow (and Web Development) (21:53)
Demo: Building the website’s hero section (27:39)
Layout tools: Display Settings (10:10)
Layout tools: Grid (9:07)
Layout tools: Flex (13:41)
Layout tools: Positioning (14:05)
Demo: Building custom layout sections of the website (96:05)
Making the website responsive (16:48)
Basic interactions: Hover & Dropdowns (10:12)
When elements go “out” of the page (Overflow hidden) (8:38)
Sliders & Carousels (6:30)
Using Tabs & Lightboxes (8:26)
Using Forms (7:40)
Using Components (7:35)
Challenge: Try it yourself! (1:08)
Working with Webflow’s CMS
Understanding the CMS & content editing (7:55)
Planning & creating your collections (15:47)
Building a CMS team section (6:23)
Building a CMS template listing page (14:16)
Sorting & filtering items (13:59)
Adding a search function (5:14)
Importing & Exporting content with Webflow (4:59)
Creating E-commerce Websites (8:50)
Mastering Animations & Interactions
Animation & Interactions principles (17:50)
The Slide-in Effect (6:44)
Horizontal Scrolling (5:12)
Parallax Effect (3:36)
Mouse hover animations (12:27)
Lottie Animations (9:18)
Creating Popups (8:47)
Creating a Pre-loader & Intro animations (21:34)
The Website Building Process
The Complete Webflow Website Process Overview (5:16)
How to Export & Import Images Properly (7:50)
Working With a Style Guide (4:24)
Privacy Considerations (6:27)
Accessibility Considerations (15:01)
The Pre-Launch Checklist: QA, SEO & Final Setups (11:09)
Client CMS Training (5:01)
Going Live (6:38)
Working With Clients
How To Sell Webflow To Clients (14:44)
Should Clients Host With Webflow? (3:38)
How To Deliver Websites To Clients (6:12)
Managing Comments From Clients (2:52)
Pricing Webflow Websites (5:50)
Advanced Topics
Integrating with other no code tools (16:37)
Multi Lingual Websites (5:56)
Using Custom code for styling (6:27)
Advanced Image Consideration (10:56)
Responsive Typography (11:16)
Variable Fonts (4:45)
Membership sites (2:21)
Exporting to WordPress or Shopify (Udesly + WP plugin) (5:22)
Extending Webflow using Community projects (33:01)
Learn and Build with Cloneables (4:32)
Useful Chrome Extensions (9:56)
Advanced SEO Resources (2:25)
Figma To Webflow Plugin (4:19)
Advanced Build - Fitness coach
Overview (1:53)
Cool Button interaction (hero) (4:43)
Gradient outline (Multi-Color border) (6:55)
Magnetic play button (5:28)
Hero animation (7:53)
Custom slider (20:05)
Infinite scroll animation (6:40)
Nav Interaction (Custom Mega Nav) (14:34)
Advance CMS animations (6:44)
Custom Filtering (16:52)
Page Transitions (15:40)
Get your certification
Final project submission & certification process (1:50)
Closing Thoughts
Conclusion - What's Next? (1:18)
Figma To Webflow Plugin
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock