Login
Insert Frame/Ultimate Framer Masterclass 2.0
Enrollment is closed

  • $199

Ultimate Framer Masterclass 2.0

  • Closed
  • Course
  • 87 Lessons

The new and improved end-to-end ultimate Framer masterclass course. Level up and get paid more for becoming an expert at building beautiful websites with no-code. The 2.0 Masterclass course has been updated with improved video quality, more content, and expanded teaching.
Buy now

Contents

1. Introduction

Hey there! In this section, I'll teach you everything you need to know before heading into building your first site. You'll get to know what the dashboard looks like and how Framer works. If you're coming from another platform or Figma, I'll give you some tips to make the transition smoother. Plus, don't forget to join the private community so we can keep in touch!

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
Preview
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?