Ultimate Framer Masterclass 2.0
Buy now
Learn more
1. Introduction
Introduction
Meet your teacher
Webflow Vs Framer
Figma Vs Framer
Overview of the Framer dashboard
Creating your first Framer site
Transitioning from Webflow
Join the Framerverse 🚀
2. Fundamentals
Framer Remix link
Key concepts for mastering Framer
Intro to the Framer Editor
Understanding Sizing
Using Layout
Positioning
Common mistakes about absolute positioning
Breakpoints
Property Styles
Reusable Styles
Demo | Building a hero section
Creating A Ticker Effect
Navigation and Links
Scroll Sections
Using video
Working with carousels and slideshows
Adding icons
Understanding site settings
Metatags and SEO
Publishing your site
Transferring site ownership
3. Components
Framer Remix link
Overview of components
Variants
Variables
Hover and Pressed States
Interactions and Events
Creating logic with components
4. CMS
Framer Remix link
Overview of the CMS
Collection Lists
Collection pages
Adding Search
Conditions
Importing content
Dynamic Filtering
5. Animation
Framer Remix link
Introduction to effects
Effects Options
Scroll Effects
Animating components
Create a parrallax effect
Demo | Animated Navbar
Page transitions
6. Advanced use cases
Framer Remix link
Building e-commerce Websites
Building membership sites
Embeds
Forms in Framer
Overrides
Adding custom cursors
7. Making money
Selling Framer to clients
Delivering Framer sites to clients
Client handover checklist
Pricing Framer sites
Pricing calculator
Framer Partner Program
Selling templates
Why & How To Join The Framer Experts Program
Getting your template approved
Template checklist
Building products for Framer
Framer Proposal Template
8. Putting It All Together: Building a Full Site
Framer Masterclass - Full Site Build (Course Module)
Exporting from Figma
Setting up the Framer project
Creating the hero section
Building the navbar
Building the site content
Testimonial section
Building a CTA
Creating the footer
Fixing common site issues
Adding effects
Making the site mobile responsive
Publishing your site
What's Next?
Wrap up
Join the Framerverse
What's Next?
Products
Course
Section
5. Animation
5. Animation
Ultimate Framer Masterclass 2.0
Buy now
Learn more
1. Introduction
Introduction
Meet your teacher
Webflow Vs Framer
Figma Vs Framer
Overview of the Framer dashboard
Creating your first Framer site
Transitioning from Webflow
Join the Framerverse 🚀
2. Fundamentals
Framer Remix link
Key concepts for mastering Framer
Intro to the Framer Editor
Understanding Sizing
Using Layout
Positioning
Common mistakes about absolute positioning
Breakpoints
Property Styles
Reusable Styles
Demo | Building a hero section
Creating A Ticker Effect
Navigation and Links
Scroll Sections
Using video
Working with carousels and slideshows
Adding icons
Understanding site settings
Metatags and SEO
Publishing your site
Transferring site ownership
3. Components
Framer Remix link
Overview of components
Variants
Variables
Hover and Pressed States
Interactions and Events
Creating logic with components
4. CMS
Framer Remix link
Overview of the CMS
Collection Lists
Collection pages
Adding Search
Conditions
Importing content
Dynamic Filtering
5. Animation
Framer Remix link
Introduction to effects
Effects Options
Scroll Effects
Animating components
Create a parrallax effect
Demo | Animated Navbar
Page transitions
6. Advanced use cases
Framer Remix link
Building e-commerce Websites
Building membership sites
Embeds
Forms in Framer
Overrides
Adding custom cursors
7. Making money
Selling Framer to clients
Delivering Framer sites to clients
Client handover checklist
Pricing Framer sites
Pricing calculator
Framer Partner Program
Selling templates
Why & How To Join The Framer Experts Program
Getting your template approved
Template checklist
Building products for Framer
Framer Proposal Template
8. Putting It All Together: Building a Full Site
Framer Masterclass - Full Site Build (Course Module)
Exporting from Figma
Setting up the Framer project
Creating the hero section
Building the navbar
Building the site content
Testimonial section
Building a CTA
Creating the footer
Fixing common site issues
Adding effects
Making the site mobile responsive
Publishing your site
What's Next?
Wrap up
Join the Framerverse
What's Next?
8 Lessons
Framer Remix link
Introduction to effects
Effects Options
Scroll Effects
Animating components
Create a parrallax effect
Demo | Animated Navbar
Page transitions