CourseFlix

Advanced FrontEnds

8h 58m 38s
English
Paid

"Advanced FrontEnds" is a comprehensive course by Gary Simon, focusing on creating highly animated, interactive landing pages. It covers JavaScript, GSAP, and Three.js, with a progression from simple animations to intricate projects. The course includes practical challenges and a final project, aiming to enhance front end development skills for 2024.

Additional

https://github.com/designcourse/af-project-files

About the Author: Gary Simon

Gary Simon thumbnail

Gary Simon is a US designer-developer behind the DesignCourse YouTube channel and the Coursetro teaching platform. His distinctive contribution is bridging the design and front-end engineering disciplines — covering Figma and Adobe XD alongside Three.js, advanced CSS, and the more visual end of front-end work.

His CourseFlix listing carries two Gary Simon courses: Kickstart your UI/UX Design Career — DesignCourse UI/UX and Advanced FrontEnds (Three.js / advanced front-end). Material is paid and aimed at developers wanting to extend their craft into design or designers wanting to ship code.

Watch Online 50 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 50 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Project Files & Intro
All Course Lessons (50)
#Lesson TitleDurationAccess
1
Project Files & Intro Demo
03:44
2
JavaScript Fundamentals Course
01:21
3
From and To Method
14:27
4
FOUC & Controlling Tweens
11:45
5
Set, Stagger & fromTo
11:46
6
Challenge Sports Loader
03:08
7
Sports Loader Solution
04:24
8
Timeline
14:50
9
Sidebar Navigation Interaction
07:21
10
Challenge Portfolio Navigation
03:17
11
Portfolio Navigation Solved
13:57
12
ScrollTrigger Basics
18:52
13
toggleActions
09:14
14
Scrub & Pin
15:38
15
Challenge: Art Gallery
05:24
16
Art Gallery Solution
18:10
17
splitType
09:35
18
Scrolling splitType Reveal
08:37
19
SVG Text Masks
09:46
20
Simple Scroller
16:04
21
Lifting Shoes Scroller
26:16
22
Lifting Shoes Scroller (Timeline)
09:15
23
Deep Sea Creatures
03:01
24
Deep Sea Creatures Solution
17:35
25
CandyVerse Parallax
09:53
26
Cyberspace
16:56
27
Challenge: Bonkers Challenge
01:49
28
Bonkers Challenge Solution
07:26
29
Flip Plugin Basics
11:08
30
Emoticon Flip
13:24
31
Challenge: Shoe Sorting Challenge
02:16
32
Shoe Sorting Solved
10:23
33
matchMedia Basics
09:43
34
Event Handling
05:56
35
Prefers Reduced Motion
07:11
36
Overview & Boilerplate
18:09
37
Dat.gui & GSAP
18:28
38
Importing Models & Scroll Animations
25:35
39
Challenge: Coffee Table Challenge
03:57
40
Coffee Table Challenge Solved
23:48
41
Project Preview
03:05
42
Installing Dependencies
05:35
43
HTML
10:51
44
CSS
17:31
45
JavaScript Setup
05:52
46
ThreeJS Setup
12:48
47
Hero Section
08:44
48
Inspection Section
05:07
49
Slider Section
07:25
50
Wrapping Up
18:11
Unlock unlimited learning

Get instant access to all 49 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

50 lessons · 8h 58m 38s
Show all 50 lessons
  1. 1 Project Files & Intro 03:44
  2. 2 JavaScript Fundamentals Course 01:21
  3. 3 From and To Method 14:27
  4. 4 FOUC & Controlling Tweens 11:45
  5. 5 Set, Stagger & fromTo 11:46
  6. 6 Challenge Sports Loader 03:08
  7. 7 Sports Loader Solution 04:24
  8. 8 Timeline 14:50
  9. 9 Sidebar Navigation Interaction 07:21
  10. 10 Challenge Portfolio Navigation 03:17
  11. 11 Portfolio Navigation Solved 13:57
  12. 12 ScrollTrigger Basics 18:52
  13. 13 toggleActions 09:14
  14. 14 Scrub & Pin 15:38
  15. 15 Challenge: Art Gallery 05:24
  16. 16 Art Gallery Solution 18:10
  17. 17 splitType 09:35
  18. 18 Scrolling splitType Reveal 08:37
  19. 19 SVG Text Masks 09:46
  20. 20 Simple Scroller 16:04
  21. 21 Lifting Shoes Scroller 26:16
  22. 22 Lifting Shoes Scroller (Timeline) 09:15
  23. 23 Deep Sea Creatures 03:01
  24. 24 Deep Sea Creatures Solution 17:35
  25. 25 CandyVerse Parallax 09:53
  26. 26 Cyberspace 16:56
  27. 27 Challenge: Bonkers Challenge 01:49
  28. 28 Bonkers Challenge Solution 07:26
  29. 29 Flip Plugin Basics 11:08
  30. 30 Emoticon Flip 13:24
  31. 31 Challenge: Shoe Sorting Challenge 02:16
  32. 32 Shoe Sorting Solved 10:23
  33. 33 matchMedia Basics 09:43
  34. 34 Event Handling 05:56
  35. 35 Prefers Reduced Motion 07:11
  36. 36 Overview & Boilerplate 18:09
  37. 37 Dat.gui & GSAP 18:28
  38. 38 Importing Models & Scroll Animations 25:35
  39. 39 Challenge: Coffee Table Challenge 03:57
  40. 40 Coffee Table Challenge Solved 23:48
  41. 41 Project Preview 03:05
  42. 42 Installing Dependencies 05:35
  43. 43 HTML 10:51
  44. 44 CSS 17:31
  45. 45 JavaScript Setup 05:52
  46. 46 ThreeJS Setup 12:48
  47. 47 Hero Section 08:44
  48. 48 Inspection Section 05:07
  49. 49 Slider Section 07:25
  50. 50 Wrapping Up 18:11

Related courses

  • B-Sides, Bonuses and Oddities thumbnail

    B-Sides, Bonuses and Oddities

    By: Creative Coding Club
    After completing the Greensock basics in the "Express" and "Beyond the Basics" courses, we will now apply the acquired knowledge in practice.
    17 hours 55 minutes 38 seconds
  • Code With Antonio Workshops thumbnail

    Code With Antonio Workshops

    By: Antonio Erdeljac (Code With Antonio)
    These workshops show you how to build real apps with modern tools. You follow clear steps in each task. You learn by doing and test ideas as you go.
    17 hours 3 minutes 7 seconds
  • 3D Computer Graphics Programming thumbnail

    3D Computer Graphics Programming

    By: Gustavo Pezzi
    This course is a complete immersion into the fundamentals of computer graphics !
    37 hours 55 minutes 2 seconds

Frequently asked questions

What is Advanced FrontEnds about?
"Advanced FrontEnds" is a comprehensive course by Gary Simon, focusing on creating highly animated, interactive landing pages. It covers JavaScript, GSAP, and Three.js, with a progression from simple animations to intricate projects. The…
Who teaches Advanced FrontEnds?
Advanced FrontEnds is taught by Gary Simon. You can find more courses by this instructor on the corresponding source page.
How long is Advanced FrontEnds?
Advanced FrontEnds contains 50 lessons with a total runtime of 8 hours 58 minutes. All lessons are available to watch online at your own pace.
Is Advanced FrontEnds free to watch?
Advanced FrontEnds is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Advanced FrontEnds online?
Advanced FrontEnds is available to watch online on CourseFlix at https://courseflix.net/course/advanced-frontends. The page hosts every lesson with the integrated video player; no download is required.