"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
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
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 |
Watch the other 49 lessons
One payment unlocks this course and every other premium course. No auto-renew.
See plansWhat courses are similar to Advanced FrontEnds?
Updated 2y agoGSAP3: Beyond the Basics
By: Creative Coding ClubReady to take your GSAP3 skills to the next level? In this course, I'll show you my favorite GSAP3 features that you absolutely need to know to discover new.8h 25m
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 1mo agoThree.js & WebGL 3D Programming Crash Course (VR, OpenGL)
By: UdemyFast, step-by-step Three.js and WebGL crash course: build interactive 3D scenes for the web, with full source code included.1h 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 1mo agoBuild fancy landing pages with React and Threejs
By: Paul Henschel (0xca0a)Learn to build striking Three.js scenes inside React, from Blender assets to lighting and post-processing, with little code.38m
ClassicAnimating the web with Framer Motion
By: Jeroen ReumkensMaking smooth, performant and beautiful animations is hard. Framer Motion helps you overcome a lot of these struggles. In this course, I'll guide you through ev6h 3m5/5
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
Updated 1mo agoCreate Interactive 3D Experiences with TresJS
By: egghead.ioLearn TresJS to build interactive 3D scenes in Vue: objects, lighting, animation, model loading, and reactive, user-driven controls.52m
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.