30 Front-end Skills.

Buy the Course
Scroll for more

Premium course
to strengthen your front-end skills.

Strengthen your front-end skills Watch the overview
20+ hours
  • 16m
  • 13m
  • 11m
  • 41m
  • 19m
  • 23m
  • 1h20m
  • 35m
  • 31m
  • 22m
  • 16m
  • 15m
  • 32m
  • 41m
  • 17m
  • 34m
  • 33m
  • 23m
  • 42m
  • 31m
  • 50m
  • 1h11m
  • 1h7m
  • 26m
  • 3h7m
  • 1h11m
  • 57m
  • n/a
  • n/a
  • n/a
15+ libraries
  • Three.js
  • React JS
  • Styled Components
  • HTML Canvas
  • SVG Filter
  • Axios JS
  • GSAP
  • Velocity.js
  • Anime.js
  • Mo.js
  • CSS Animation
30 modules
  • SVG liquify filter effect with Greensock & ScrollMagic
  • A pointing-arrow
  • Resizing panel
  • Light bulb
  • Split letters on hover
  • Ripple effects with CSS animation
  • SVG + CSS animation (Illustrator)
  • Slide-in menu without JS
  • Responsive Mondrian art with CSS grid
  • Horizontal text scroll with CSS variables
  • Contrast text color on image
  • 3D tilt parallax effect with mouse movement
  • Sticky menu with ScrollMagic
  • Gooey effects
  • Glitch effect
  • Cannon animation with Mo.js
  • Space rocket with requestAnimationFrame
  • Interactive mouse cursor
  • Submit button with Axios and loading animation
  • Responsive magic pagination
  • Ink transition with PNG sprite
  • Cannon confetti with canvas
  • A lake at night with SVG filter
  • David Hockney’s Joiners in Canvas
  • Three.js Practice – The Aviator
  • Particle Art in 2D & 3D
  • Smoke effect
  • Movie search app (1/3) – HTML/CSS
  • Movie search app (2/3) – JS
  • Movie search app (3/3) – React

What will I learn?

In this course, you will learn 30 practical front-end skills and at the end of this course, you will be armed with solid front-end skills and help you build quality front-end products.

Throughout this course, you will learn:

  • HTML & Pug
  • CSS and JS basics
  • CSS/SASS Animations
  • JS Animations: GSAP, Velocity.js, Anime.js, Mo.js
  • SVG filter Animations
  • 2D Animations: HTML Canvas
  • 3D Animations: Three.js
  • Trigonometric functions for web animations
  • React JS + Styled Components
  • + so much more!

Who is this for?

This course is for anyone who loves front-end and wanted to improve their front-end skills.

The structure of this course is starting from CSS and progressing towards more advanced skills like JS animations and Three.js.

I tried my best to explain the basics of skills in detail, but it would be helpful if you already know some HTML, CSS and JS.

Just in case, if you need any help, I am always here to help 🙌

Ryan Yu


I'm Ryan Yu.

I am a UX/UI engineer and really love front-end 💛.

From my 10+ years experience of building many many websites including fashion, art, government, bank, universities, e-commerce, design systems and much more, I always tried to build quality websites with animations to improve user experience.

Throughout this course, I have focused on making this course fun, useful and easy to follow.


  • React
  • Animation
  • Accessibility
  • Canvas
  • Three.js


  • Unlimited access to all videos
  • Dedicated support & training
  • 100% refund

New modules coming soon!

  • Get one free video
    The space rocket animation with Anime.js
Subscribe Now


What happens after I purchase?

Once you purchase the course, you will receive an email with the link to the membership page and login details. Once you login, you will be taken to the course page and you can start with any videos you want.

How long do I get access for?

Forever! There will be no monthly or any hidden fee.

Can I share the course with my friends/colleagues?

You must love my course 😁, that's great to hear! At the moment, one purchase only allows one access for one person. If you wanted a team license, please contact me at ryan@frontend30.com.

What is your refund policy?

I want you to be satisfied with your purchase, so if you are not happy with the product, please send me an email to ryan@frontend30.com within 60 days of enrollment with a copy of your welcome email and I will refund you.

I have another question!

Sure, please feel free to email me at ryan@frontend30.com