FUNDAMENTALS

Section 1

00: INTRODUCTION

(NEW) Accessibility

How to Optimise Your Framer Site for SEO

Welcome to the program!

Meet Your Mentor

01: BUILDING BLOCKS

Key concepts & terminology

Terminology Cheat Sheet

(NEW) Intro to the Framer Editor

Sizing

Layout

Positioning

(NEW) Overflow

(NEW) Scale Tool

Properties Panel

Assets & Styles

Building Sections

Building Your First Hero

(NEW) Design Pages

Breakpoints

Build Your Own Hero Section

Check-in: How did you go?

02: COMPONENTS

Overview of components

Variants

Variables

Create your own button component

(NEW) Building a Responsive Navbar Component

Build a Responsive Navbar

Page Templates

Components Quiz

03: CMS

Introduction to the CMS

Conditions & Transforms

CMS Terms Glossary

Importing Content into the CMS

References & Multi-References

Collection Detail Pages

Collection Lists

Build a Collection Detail Page

Adding Search

(NEW) Dynamic Filters

CMS Mastery Quiz

04: EFFECTS

Intro to Effects

Intro to Basic Effects

Scroll Effects

Text Effects

Demo – Creating a Parallax Effect in Framer

From Static to Animated: Animating a Landing Page

(NEW) Lightbox Effects

Effects Library

05: UTILITY

Forms

(NEW) Ticker effects

Carousels & Slideshows

Using Video in Framer

Icons

Vectors

Utilizing Plugins

Database of Plugins

Utilizing AI

Lottie Animations

Spline Animations

3D Transforms

Exports

Wireframer

3D Hover Effects

06: SEO & SITE SETTINGS

Understanding site settings

Metatags & SEO

Framer SEO Setup Checklist

Transferring Site Ownership

Analytics

Publishing your site

07: LIVE BUILD

First site: Part 1

First site: Part 2

First site: Part 3

First site: Part 4

First site: Part 5

First site: Part 6

First site: Part 7

08: WHAT'S NEXT

Assessment 01: Your First Site

Fundamentals Quiz

INTERMEDIATE

Section 2

09: ADVANCED COMPONENTS

Interactions & Events

Animating Components

Creating logic with components

Intermediate Components Quiz

Demo: Interactive Pricing Cards

Exercise: Interactive Pricing Cards

10: ADVANCED ANIMATION

Demo: Animated Navbar on Load

Scroll Sections

Page Transitions

Horizontal Scroll Animations

11: ADVANCED UTILITY

How to Add Custom Cursors in Framer

CMS Tables

Overlays

Bento Grids

Code Components & Overrides

Localization

12: INTERMEDIATE SITE BUILD

Assessment 2: Intermediate Live Build

Intermediate Site: Part 1

Intermediate Site: Part 2

Intermediate Site: Part 3

13: WHAT'S NEXT?

Intermediate Quiz

ADVANCED

Section 3

14: WORKING WITH CLIENTS

Review Your Framer Intermediate Build

Client Workflow

Client Handoff & Scope

15: MAKING MONEY WITH FRAMER

Selling Framer to Clients

Finding Framer Clients

Pricing Framer Sites

Framer Project Retainers

Creator Program

Framer Expert Program

16: ECOMMERCE

Ecommerce Site | Syncing Shopify & Framer

Ecommerce Site | Home Page

Ecommerce Site | Detail Page

Final Exercise: Debug a Framer Project

17: WHAT'S NEXT

Final Reflection & Certificate Unlock

LIVE WORKSHOPS

From Framer Experts

PAST WORKSHOPS

Portfolio Workshop

Micro interactions in Framer

Framer Breakpoints & Navbars Workshop

Fixing Bad Responsive Design in Framer

UPCOMING WORKSHOPS

10 Must‑Know Framer Secrets for a Faster Workflow

DEFAULT | Active:connected
DEFAULT | Active:connected