Advanced FrontEnds
8h 58m 38s
English
Paid
Course description
"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.
Watch Online
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 subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Full-Stack Fundamentals 2 - Backend
Sources: Mckay Wrigley (takeoff)
In the first project, we focused on the frontend, creating a personal portfolio website. Now we will take the next step towards full-stack development...
1 hour 45 minutes 49 seconds
Build Responsive Real World Websites with HTML5 and CSS3
Sources: udemy
The easiest way to learn modern web design, HTML5 and CSS3 step-by-step from scratch. Design AND code a huge project.
37 hours 28 minutes 39 seconds
Web Components Demystified
Sources: Scott Jehl
If you are like me, then you have probably been hearing a lot about web components lately. Many of us are looking for ways to integrate web components into...
7 hours 51 minutes 36 seconds
SVG Animation with GreenSock
Sources: Carl (Creative Coding Club)
Learn how to create SVGs in design programs, embed them in web pages, edit them using code, and animate them with GreenSock.
12 hours 34 minutes 48 seconds