CF

Advanced FrontEnds

8h 58m 38s
English
Paid
Added to CourseFlix

Advanced FrontEnds is a 50-lesson 8 hours 58 minutes self-paced course by Gary Simon. "Advanced FrontEnds" is a comprehensive course by Gary Simon, focusing on creating highly animated, interactive landing pages.

Course facts

Lessons
50
Duration
8 hours 58 minutes
Language
English
Added to CourseFlix
January 2024
Instructor
Gary Simon
Price
Premium

Before you start

Is it still current?

No recording date is listed. It teaches GSAP: tweens and timelines (lessons 3–8), ScrollTrigger with scrub and pin (12–16), the Flip plugin (29–32), and matchMedia with prefers-reduced-motion (33–35). That is all current GSAP 3 API. One update: lessons 17–18 split text with the splitType library. Since GSAP 3.13, GSAP's own SplitText plugin ships in the public gsap package, so you can use that instead.

What you end up with

Mostly exercises: each block ends with a challenge and its solution, such as a sports loader (6–7), a portfolio navigation (10–11), a scrolling art gallery (15–16) and shoe sorting with Flip (31–32). Lessons 36–40 combine GSAP with Three.js and imported models. Lessons 41–50 build one Three.js landing page with a hero, an inspection section and a slider.

Pick this or…

"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

Who teaches Advanced FrontEnds? 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.

What lessons are included in Advanced FrontEnds?

This is a demo lesson (10:00 remaining)

Watch the first 10 minutes free. One payment unlocks all 50 lessons here and every other premium course. No auto-renew.

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
Watch the other 49 lessons

One payment unlocks this course and every other premium course. No auto-renew.

See plans

Recommended next

What courses are similar to Advanced FrontEnds?

More courses by Gary Simon

Frequently asked questions

What prerequisites should I have before taking this course?
Before enrolling, you should possess a solid understanding of HTML, CSS, and basic JavaScript. Familiarity with fundamental JavaScript concepts is essential as the course builds on these skills with advanced topics like GSAP and Three.js. Prior experience with creating web animations or interactive web pages will be beneficial, but not strictly necessary.
What projects will I build during the course?
Throughout the course, you'll work on several projects, including creating a sports loader animation, a portfolio navigation interface, and a lifting shoes scroller. The final project involves building a highly animated, interactive landing page using the skills acquired. Challenges such as the 'Bonkers Challenge' and 'Shoe Sorting Challenge' provide practical experience in applying animation techniques.
Who is the target audience for this course?
This course is aimed at front-end developers who want to enhance their skills in creating interactive and animated web pages. It is suitable for those looking to specialize in advanced animations and 3D effects using JavaScript, GSAP, and Three.js, and who are interested in building visually engaging user interfaces.
How does the depth of this course compare to other front-end development courses?
The course provides a deep dive into creating animations and interactive elements using GSAP and Three.js. It goes beyond basic front-end courses by focusing on complex animations and transitions, offering detailed lessons such as 'FOUC & Controlling Tweens' and 'ScrollTrigger Basics'. It is more specialized than general front-end courses, targeting developers interested in high-level animation techniques.
Which specific tools and libraries are covered in this course?
The course extensively covers GSAP for animations and Three.js for 3D modeling. Lessons include 'GSAP Fundamentals', 'ScrollTrigger Basics', and 'ThreeJS Setup'. These tools are used to create complex animations and interactive elements, providing a robust skill set for developing advanced front-end projects.
What topics are not covered in this course?
The course does not cover server-side programming, databases, or back-end development. It focuses solely on front-end development, particularly animations and interactive design. Topics like full-stack development, server management, or APIs are outside the scope of this course.
How much time should I expect to commit to this course?
Although the total runtime of the course hasn't been specified, it consists of 50 lessons with practical challenges and projects. You should expect to dedicate several hours per week to watch the lessons, complete exercises like the 'Art Gallery' and 'Coffee Table Challenge', and work on the final animated landing page project, allowing for a thorough grasp of the material.