Enroll in Framer Course Below
Example Curriculum
Course Introduction
Available in
days
days
after you enroll
Getting Started
Available in
days
days
after you enroll
Fundamentals
Available in
days
days
after you enroll
- Fundamentals: Introduction (2:08)
- Structure & Layout: Web Box Model (16:46)
- Structure & Layout: Layout Rules (4pt Grid) (7:25)
- Structure & Layout: Layout Basics (18:17)
- Structure & Layout: Grid Layouts (5:51)
- Responsiveness: Breakpoints (12:45)
- Components: Component Basics (5:33)
- Components: Ticker Component (8:41)
- Components: Carousel Component (9:19)
- Components: Slideshow Component (10:07)
- Components: Search Component (10:03)
- Animations: Base Effects (21:10)
- Animations: Scroll Animation (4:02)
- Animations: Scroll Speed (3:50)
- Animations: Scroll Transform (7:12)
- Animations: Scroll Variant (5:23)
- Animations: 3D Transforms (12:26)
- Animations: Custom Cursors (9:49)
- Animations: Relative Overlay (4:07)
- Animations: Fixed Overlay (5:36)
- Animations: Page Transitions (8:40)
- Other: Framer Forms (30:08)
- Module Feedback: Fundamentals 💜
Styleguide
Available in
days
days
after you enroll
- Styleguide: Introduction (3:13)
- Styleguide: Creating Our First Styleguide (22:53)
- Styleguide: Typescale Fundamentals (15:43)
- Styleguide: Responsive Text Styles in Framer (10:09)
- Styleguide: Setup Color Styles in Framer (12:13)
- Styleguide: Setup a Dark & Light Mode in Framer (7:11)
- Styleguide: Hiding Our Styleguide (2:42)
- Styleguide: How SEO Tags Work (4:40)
- Styleguide: Exporting Figma Components to Framer (8:12)
- Styleguide: Collect Figma Styles For Framer Export (9:03)
- Styleguide: Midjourney Tricks For Awesome Framer Assets (7:46)
- Styleguide: Background Removal & Upscaling For Framer Images (5:01)
- Module Feedback: Styleguide 💜
Structure & Layout
Available in
days
days
after you enroll
- Structure & Layout: Introduction (3:27)
- Landing Page: Navigation (24:19)
- Landing Page: Navigation Overlay (10:01)
- Landing Page: Hero (30:48)
- Landing Page: Ticker (3:30)
- Landing Page: Category Cards (22:27)
- Landing Page: Top Sellers Carousel (28:31)
- Landing Page: Scroll Variants (29:05)
- Landing Page: Footer (27:10)
- Landing Page: Loader (11:23)
- Detail Page: Hero (25:53)
- Detail Page: Similar Products (12:25)
- Category Page: Hero (13:55)
- Category Page: Products Filter (21:01)
- Signup Page: Full Page (11:51)
- Cleanup: Fixing Mistakes (19:37)
- Module Feedback: Structure & Layout 💜
Responsiveness
Available in
days
days
after you enroll
- Responsiveness: Introduction (1:36)
- Landing Page: Hero (19:04)
- Landing Page: Ticker (1:10)
- Landing Page: Category Cards (14:13)
- Landing Page: Top Sellers (9:16)
- Landing Page: Scroll Variants (20:12)
- Category Page: Hero (5:26)
- Category Page: Product Filters (3:05)
- Detail Page: Hero (21:58)
- Detail Page: Similar Products (12:10)
- Signup Page: Full Page (11:33)
- Watch This Before The Components Module 🥂 (1:33)
- Module Feedback: Responsiveness 💜
Components
Available in
days
days
after you enroll
- Components: Introduction (2:41)
- Basics: States (8:08)
- Basics: Variants (4:33)
- Basics: Interactions (5:24)
- Basics: Variables (6:33)
- General: Button MD Primary (7:54)
- General: Button MD Secondary (4:35)
- General: Navigation Hamburger (3:58)
- General: Navigation Hamburger Button (7:45)
- General: Navigation Logotype (6:52)
- General: Navigation Dropdown (5:37)
- General: Navigation Overlay Item (7:26)
- General: Navigation Overlay Container (2:19)
- General: Full Navigation (35:22)
- General: Pulse Interaction (6:18)
- General: Button LG Secondary (11:42)
- General: Button XL (7:50)
- Landing Page: Text Ticker (2:13)
- Landing Page: Category Card (14:03)
- Landing Page: Tooltip (1:06)
- Landing Page: Top Sellers Card (10:02)
- Landing Page: Top Sellers Carousel (12:38)
- Landing Page: Scroll Variants (14:01)
- Landing Page: Footer (15:03)
- Landing Page: Loader (11:37)
- Detail Page: Image Picker (12:37)
- Detail Page: Text Ticker (1:36)
- Category Page: Text Ticker (1:30)
- Detail Page: Similar Products Card (11:19)
- Category Page: Filter (13:44)
- Category Page: Search Styling (5:32)
- Cleanup: General Mistakes (20:16)
- Cleanup: Navigation (5:49)
- Cleanup: Footer (3:48)
- Cleanup: Detail Page Button (2:03)
- Cleanup: Product Cards (3:09)
- Cleanup: Buttons (8:24)
- Cleanup: Landing Page Top Seller Cards (3:54)
- Cleanup: Category Page Ticker (3:07)
- Watch This Before The Animations Module 🎉 (2:59)
- Module Feedback: Components 💜
Animations
Available in
days
days
after you enroll
- Animations: Introduction (2:45)
- General: Navigation Appear Effect (9:55)
- General: Navigation Relative Overlay (4:56)
- General: Navigation Scroll Animation (4:05)
- General: Page Transition (1:28)
- General: Footer Loop Effect (3:10)
- Landing Page: Hero Looping Images Effect (2:57)
- Landing Page: Hero Scroll Speed (1:47)
- Landing Page: Hero Scroll Transform (2:29)
- Landing Page: Hero Text Appear Effect (6:08)
- Landing Page: Top Sellers Scroll Animation (9:45)
- Landing Page: Top Sellers Relative Overlay (5:09)
- Landing Page: Top Sellers Looping Images Effect (1:52)
- Landing Page: Scroll Variants (4:36)
- Landing Page: Loader (2:02)
- Detail Page: Hero Appear Effect (5:24)
- Category Page: Hero Appear Effect (3:43)
- Category Page: Hero Looping Images Effect (4:01)
- Category Page: Hero Scroll Transform (3:36)
- Signup Page: Appear Effect (4:47)
- Signup Page: Loop Effect (1:18)
- Module Feedback: Animations 💜
CMS
Available in
days
days
after you enroll
- CMS: Introduction (2:51)
- CMS: CMS Updated UI (1:47)
- CMS: CMS Basics (14:08)
- Basics: Index Page (5:26)
- Basics: Detail Page (4:20)
- Detail Page: Create Detail Page (9:39)
- Detail Page: Hero CMS Connection (7:52)
- Detail Page: Products CMS Connection (17:10)
- Category Page: Create Category Page (3:36)
- General: Duplicate CMS Collections (11:31)
- Category Page: Filter CMS Connection (22:51)
- Landing Page: Category Cards CMS Connection (3:00)
- Landing Page: Top Seller Cards CMS Connection (7:02)
- Landing Page: Footer Form CMS Connection (1:16)
- General: Navigation Links (12:19)
- Landing Page: Hero Links (2:02)
- Signup Page: Full Page Links (1:15)
- Ecommerce: Lemonsqueezy Integration (9:29)
- Cleanup: Category Page Ticker (3:07)
- Cleanup: Landing Page Top Seller Cards (3:54)
- Cleanup: Detail Page Navigation (6:41)
- Module Feedback: CMS 💜
Extra Material
Available in
days
days
after you enroll
- Extra Material: Introduction (2:02)
- Extra Material: General Site Optimization (10:16)
- Extra Material: Page Settings Optimization (28:45)
- Extra Material: Analytics (3:02)
- Extra Material: Custom Domains (6:00)
- Extra Material: Staging (4:50)
- Extra Material: Redirects (3:11)
- The Last Video 👋 (3:13)
- Module Feedback: Extra Material 💜