In this liveProject series, you’ll play the role of a frontend developer hired by Max, the owner of My Little Cookie Shop, to take his website to the next level. A competing bakery has opened across the street and Max wants to make sure his competitive edge doesn’t crumble. Using CSS, you’ll add transitions and animations to My Little Cookie Shop’s UI, making it shine while providing a more fluid experience for the user.
Help Max, the owner of My Little Cookie Shop, sharpen his competitive edge. He’s hired you to upgrade his store’s website with hovers. Using the provided design file as your guide for what each state should look like, you’ll ensure the user can easily see what’s clickable and provide a smooth transition from one state to another. You can use the provided HTML and base CSS, but you’re welcome to deviate from that if you’d like to get more creative.
Bring My Little Cookie Shop’s logo to life.The website already looks pretty nice, but Max, the owner, has hired you to sweeten it even more. Using keyframes and CSS properties within the SVG code itself, you’ll animate the logo with blinking stars and rotating text, then create the illusion of drawing a path. The logo includes two thin circles around a central design; you will make it look like those circles are being drawn and erased as the animation loops.
Max, the owner of My Little Cookie Shop, wants to take his online menu from meh to marvelous. Using CSS, you’ll style and animate the pastry pictures so that they flip around when clicked, revealing the details on the back, just like a real-world, three-dimensional card. Also, to respect all users, you’ll use media query to disable animations for users whose browser settings indicate they prefer reduced motion.
This liveProject series is for frontend developers who already know some CSS and want to take their skills to the next level. To begin these liveProjects you will need to be familiar with the following:
In this liveProject series, you’ll learn to create a user experience that’s smooth, natural, and intuitive using transitions, animations, and show/hide functionality:
geekle is based on a wordle clone.