Webflow Masterclass 3.0

Layout tools: Display Settings

Layout tools: Grid

Layout tools: Flex

Layout tools: Positioning

Demo: Building custom layout sections of the website

Making the website responsive

Basic interactions: Hover & Dropdowns

When elements go “out” of the page (Overflow hidden)

Sliders & Carousels

Using Tabs & Lightboxes

Using Forms

Using Components

Challenge: Try it yourself!

Understanding the CMS & content editing

Planning & creating your collections

Building a CMS team section

Building a CMS template listing page

Sorting & filtering items

Adding a search function

Importing & Exporting content with Webflow

Creating E-commerce Websites

Animation & Interactions principles

The Slide-in Effect

Horizontal Scrolling

Parallax Effect

Mouse hover animations

Lottie Animations

Creating Popups

Creating a Pre-loader & Intro animations

The Complete Webflow Website Process Overview

How to Export & Import Images Properly

Working With a Style Guide

Privacy Considerations

Accessibility Considerations

The Pre-Launch Checklist: QA, SEO & Final Setups

Client CMS Training

Going Live

How To Sell Webflow To Clients

Should Clients Host With Webflow?

How To Deliver Websites To Clients

Pricing Webflow Websites

Integrating with other no code tools

Multi Lingual Websites

Using Custom code for styling

Advanced Image Consideration

Responsive Typography

Variable Fonts

Membership sites

Exporting to WordPress or Shopify (Udesly + WP plugin)

Extending Webflow using Community projects

Learn and Build with Cloneables

Useful Chrome Extensions

Advanced SEO Resources

Figma to Webflow Plugin

Overview

Cool Button interaction (hero

Gradient outline (Multi-Color border)

Nav Interaction (Custom Mega Nav)

Magnetic play button

Hero animation

Custom slider

Infinite scroll animation

Advance CMS animations

Custom Filtering

Page Transitions

Final project submission & certification process

Conclusion - What's Next?