"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.
Advanced FrontEnds
8h 58m 38s
English
Paid
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
- Level
- All levels
- Language
- English
- Updated
- Instructor
- Gary Simon
- Price
- Premium
Additional
Who teaches Advanced FrontEnds? Gary Simon
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?
0:00
/ #1: Project Files & Intro
All Course Lessons (50)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionWhat courses are similar to Advanced FrontEnds?
Updated 1y agoThree.js & GameDev
By: SimonDevStart with the basics of Three.js and gradually move on to advanced topics such as streaming infinite worlds, GPU memory optimization.47h 38m
Updated 10mo agoWhimsical Animations
By: Josh ComeauWhimsical Animations helps you build smooth and fun web effects. You will learn how to make small touches and clear moments that guide the user.5h 7m
UpdatedSVG Animation with GreenSock
By: Creative Coding ClubLearn to draw, edit, and animate SVG graphics with GreenSock, focused on the tags and techniques that matter for real animation projects.12h 34m
Updated 2y agoReact Three Fiber: The Ultimate Guide to 3D Web Developmen
By: Wawa Sensei3D development is a vast field with many different techniques. This comprehensive guide will give you the necessary tools to get started and resources to.9h 18m5/5
UpdatedMerging WebGL and HTML worlds
By: AwwwardsLearn to blend WebGL and Three.js effects directly into a plain HTML page, step by step, until both layers feel like one design.2h 30m
Updated 3y agoCreating a simple portfolio website with WebGL and Barba.js
By: AwwwardsNothing beats smooth user experience. That is the reason we love WebGL, because we can do crazy effects with amazing performance. But if you combine that with s3h 41m
UpdatedThree.js Journey - The ultimate Three.js course
By: Bruno SimonBruno Simon's beginner-friendly path into WebGL and Three.js, covering particles, physics, shaders, and Blender modeling for 3D web projects.90h 46m5/5
More courses by Gary Simon
Updated 3y agoKickstart your UI/UX Design Career / DesignCourse UI/UX
Join the most interactive course for learning UI/UX Design with Gary Simon. The DesignCourse UI/UX Curriculum is taught entirely with Figma. You will go from ab16h 33m
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.