Course Introduction
Getting Started
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 (13:31)
-
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 (22:25)
-
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)
-
Module Feedback: Fundamentals 💜
Styleguide
-
Styleguide: Introduction (3:13)
-
Styleguide: Creating Our First Styleguide (22:53)
-
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: Setup Figma Styles in Framer (9:04)
-
Styleguide: Midjourney Tricks For Awesome Framer Assets (7:46)
-
Styleguide: Background Removal & Upscaling For Framer Images (5:04)
-
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 (28:31)
-
Landing Page: Scroll Variants (29:05)
-
Landing Page: Footer (27:10)
-
Landing Page: Loader (11:23)
-
Category Page: Hero (13:55)
-
Category Page: Products Filter (21:01)
-
Detail Page: Hero (25:53)
-
Detail Page: Similar Products (12:25)
-
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:28)
-
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:07)
-
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)
-
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 💜
