Roll over image to zoom in
Linton Ye – Prototyping with React-Framer. Space Shuttle
$30.00$149.00 (-80%)
Create prototypes, while building a solid foundation in JS and React along the way. Learn from the. Learn the foundation of JavaScript, React and Framer X.
Linton Ye – Prototyping with React+Framer: Space Shuttle
Check it out: Linton Ye – Prototyping with React+Framer: Space Shuttle
Create prototypes, while building a solid foundation in JS and React along the way
Learn from the .
Learn the foundation of JavaScript, React and Framer X.
Learn everything in 4 weeks in your spare time.
Course Curriculum
Week 1: Getting Started
- 1.1 Introduction (1:03)
- 1.1.0.1 Course Interface (0:43)
- 1.1.0.2 Assignments And Course Project (1:58)
- Assignment 0 – Prepare For The Course Project
- 1.1.0.3 Framer X Prototyping Workflow (12:11)
- 1.1.1 Why CodeSandbox (1:33)
- 1.3 A Tour of CodeSandbox (5:43)
- 1.4 Code first impression (2:25)
- 1.5 JSX (4:11)
- 1.6 JSX vs. HTML (4:39)
- Assignment 1.1 – Fix the bugs
Week 1: Toggle
- Source Code List
- 2.1 Boxes Of Legos (5:24)
- 2.2 Draw A Picture Of Toggle (5:29)
- 2.3 Objects (5:35)
- 2.4 Too Many Styling Options (7:01)
- Assignment 2.1 – Style the toggle
- 2.5 Functions (5:57)
- 2.6 Calling Functions, Variables (8:14)
- 2.6.1 Let, Const, Var (3:17)
- 2.7 onTap (8:27)
- 2.8 Array (9:02)
- 2.9 Animate Attribute (7:06)
- Assignment 2.2: Checkbox
- 2.10 Variants (8:27)
- Assignment 2.3: Fancier checkbox
- 2.11 The True Face Of JSX Tags (5:36)
- 2.12 Convert JSX Tags With Children Into JS (6:20)
- Assignment 2.4 Convert JSX to JS
- Course Project Checkpoint
Week 2: Framer Overrides
- fo.1 Framer Overview (2:04)
- fo.2 Use Magic Move To Build A Toggle (6:28)
- fo.3 Make Card Expand Prototype (4:02)
- fo.4 Overrides (4:53)
- fo.5 Card Expand In Overrides (5:06)
- fo.6 Communicate Between Overrides (4:59)
- Assignment fo.1: Fix status bar animation
- Assignment fo.2: Flashcard Transition
- Course Project Checkpoint
Week 3: Slider
- 3.1 Sliders Are Frames Too (5:00)
- 3.2 Style The Slider (5:30)
- 3.3 Make The Slider Draggable (3:03)
- 3.4 onDrag (5:14)
- 3.5 Get Slider Position (4:15)
- 3.6 Make Skinny Happy – useAnimation (6:14)
- 3.6.1 Scope Of Variables (4:05)
- 3.7 Fix A Bug (5:14)
- 3.8 Create React Components (5:08)
- 3.9 Communicate Between Two Components (4:15)
- 3.10 Pass onDrag To Slider Component (4:27)
- Assignment 3.1: Help Mr. Skinny pose
- 3.11 Skinny Has An Attitude – If Else (6:36)
- Assignment 3.2: iOS Task Switcher
- Assignment 3.3: More drag and drop
- Course Project Checkpoint
Week 4: Tinder Swipe
- 5.1 One Card Swipe (5:29)
- 5.2 Rotate Card While Dragging (5:58)
- Assignment 5.1: Revisit slider
- 5.5 useMotionValue vs. useAnimation (5:51)
- 5.6 Finish One Card Swipe (6:56)
- 5.7 A Deck Of Cards (5:20)
- 5.8 Array.map (5:57)
- Assignment 5.2: Bottom Sheet
- Course Project Checkpoint
