CF

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

Related courses

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.