1. Animated Menu Tab Bar
This is a 60 FPS fluid header with animations between switching tabs.
What you will learn by building the animated menu tab bar
How to work with SVGs, CSS animations, and combining both.
Beautiful Cyberpunk-style buttons. Notice the hover effect. Try to recreate it. Check out the original if you’re unsure how to do that.
What you will learn by building the Cyberpunk 2077 buttons:
How to use CSS variables, keyframes, and clip-paths.
How to create complex hover animations.
Interest in chess has skyrocketed after the success of The Queen’s Gambit, a drama miniseries based on Walter Tevis’s 1983 novel. I highly recommend watching it if you haven’t already!
Bonus points: Make the chessboard interactive.
What you will learn by building the chessboard:
How to create an 8×8 grid. Try using CSS Grid for that.
Hand-carving the chess pieces with CSS.
This is a dashboard for project management purposes. Monitor projects and chat with clients.
What you will learn by building the project management dashboard UI:
Building clean UIs with CSS and HTML.
How to use WebSockets to create the chat.
“Neumorphism (or Neo-skeuomorphism) is a modern iteration of a style of designing web elements, frames, screens, etc.” — GitHub
What you will learn by building the neumorphic animation:
- How to create smooth animations with CSS and HTML.
Let’s recreate the Earth! By the way, did you notice the moon’s shadow on the Earth’s surface when it passes in front of the sun?
What you will learn by building the HTML Earth:
How to use the LUME library. According to GitHub, LUME is “a toolkit that simplifies the creation of rich and interactive 2D or 3D experiences for any device from mobile to desktop to AR/VR.”
Just look at this beauty. Notice the small details every time you change tabs.
What you will learn by building the fluid tabs with animations
CSS transform for 60 FPS animations.
This makes me want to drink water. Grab a sip before you start solving this challenge.
What you will learn by building the cup of water
How to use CSS to create smooth 60FPS animations.
How to use CSS transform and pseudo-selectors.