Master 30 Front-end Skills.
-
Space rocket with requestAnimationFrame
Create the space rocket animation with Anime.js.
-
SVG liquify filter effect with Greensock & ScrollMagic
Create a liquify-effect with SVG filter when scrolling up/down.
-
Create a pointing-arrow with pure HTML and CSS.
-
Resize a panel by dragging the panel divider.
-
Make a room bright/dark by turning on/off a light bulb.
-
Split letters diagonally on hover.
-
Ripple effects with CSS animation
Create a ripple effect when clicking on a link.
-
SVG + CSS animation (Illustrator)
Design a SVG graphic in Illustrator and create an animation with it.
-
Learn how to create a slide-in menu with no JavaScript.
-
Responsive Mondrian art with CSS grid
Make a responsive Mondrian art with CSS grid layout.
-
Horizontal text scroll with CSS variables
Move the text horizontally when scrolling down the page.
-
Contrast text color on image
Display different color when moving inside an image.
-
3D tilt parallax effect with mouse movement
Generate 3D tilt parallax effect when moving a mouse on the object.
-
Sticky menu with ScrollMagic
Create a sticky menu when scrolling down.
-
Create a gooey effect with SVG filter.
-
Create a glitch effect with CSS.
-
Cannon animation with Mo.js
Create bubbles from a cannon with Mo.js.
-
Interact a mouse cursor with elements for its state.
-
Submit button with Axios and loading animation
Communicate with server via Axios and create a loading animation.
-
Responsive magic pagination
Create a magic line on a responsive pagination.
-
Ink transition with PNG sprite
Animate images with ink transition in PNG sprite.
-
Cannon confetti with canvas
Create confetti from a cannon on Canvas
-
A lake at night with SVG filter
Create a beautiful night scenery with a lake and shooting stars on Canvas.
-
David Hockney’s Joiners in Canvas
Inspired by David Hockney's Joiners and create it in Canvas.
-
Three.js Practice – The Aviator
Practice how Three.js works by creating an aviator.
-
Get data from an image and convert it to 2D and 3D particle art.
-
Create a smoke effect with Three.js.
-
Movie search app (1/3) – HTML/CSS
First part of building a web app. Learn how to properly prepare HTML/CSS.
-
Movie search app (2/3) – JS
Second part of building a web app. Populate data with vanilla JavaScript.
-
Movie search app (3/3) – React
Last part of building a web app. Learn how to build it with React.