Intro: Meet Your Instructor | Tim Gabe Design Academy

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Framer Zero To Hero

Course Introduction

Intro: Watch Before Getting Started (6:40)
Intro: Meet Your Instructor (6:28)
Intro: The Free Community Forum (3:46)

Getting Started

Getting Started: Introduction (4:12)
Getting Started: Setup Framer (2:23)
Getting Started: Dashboard UI (11:06)
Getting Started: Editor UI (32:35)
Getting Started: Page Settings UI (12:53)

Fundamentals

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

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

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

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

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

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

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

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 💜

Teach online with

Intro: Meet Your Instructor

Complete and Continue