"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 2y agoB-Sides, Bonuses and Oddities
By: Creative Coding ClubAfter completing the Greensock basics in the "Express" and "Beyond the Basics" courses, we will now apply the acquired knowledge in practice.17h 55m -
Updated 3y agoMerging WebGL and HTML worlds
By: AwwwardsYou learn how to mix WebGL scenes with your HTML page. You use site images and add smooth effects with Three.js to make each part feel linked.2h 30m -
Updated 2mo agoFrontend System Design Essentials
By: Juntao QiuLearn to design scalable frontend systems. Understand architectural trade-offs and key patterns for professional developers.5h 55m5/5 -
Updated 2y ago3D Computer Graphics Programming
By: Gustavo PezziThis course is a complete immersion into the fundamentals of computer graphics !37h 55m -
Updated 2y agoThree.js & WebGL 3D Programming Crash Course (VR, OpenGL)
By: UdemyLearn how to create interactive 3D experiences such as web application and games. A step by step process is used to show everything from setting up to creating1h 32m -
Updated 3y agoCreate a 3D multi-player game using THREE.js and Socket.IO
By: UdemyWith Socket IO it is very easy to create a game where multiple remote players can share data. In this course we start by installing NODE.js, a prerequisite of S2h 39m -
Updated 3y agoImpress everyone with a 3D particle scene with Blender and Three.js
By: AwwwardsWhen you work as a developer you know that the budget for outsourcing and finding the perfect content creator for your project may be a long and unpleasant proc2h 11m -
Updated 11mo agoVanilla Three.js Course
By: JavaScript Mastery, Adrian HajdinUnleash your creative potential with the Vanilla Three.js course from JSMastery.pro - the perfect choice for beginners and developers looking to create.31m
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.