Four-Project Series

CSS Animations and Transitions you own this product

prerequisites
basic HTML • basic SVG • basic CSS • intermediate JavaScript
skills learned
use CSS hover and focus pseudo-classes • use transitions • animate SVGs • show/hide elements • use of JavaScript to support CSS animations
Martine Dowden
4 weeks · 6-8 hours per week average · INTERMEDIATE
filed under
includes 4 liveProjects
liveProject $38.99 $59.99 self-paced learning

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.

These projects are designed for learning purposes and are not complete, production-ready applications or solutions.
Get Your Certificate of Completion—Free!
Finish the work in this liveProject to earn a Certificate of Completion. Once you’re done with your build, take a short online test, then contact the liveProject mentor who will review your submissions. Finally, set up a 15-minute video call with the mentor to verify your work.

here's what's included

Project 1 Transitions

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.

$29.99 FREE
try now
Project 2 Animating SVGs

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.

$29.99 $19.49
add to cart
Project 3 Showing and Hiding Elements

My Little Cookie Shop’s website looks pretty nice, but there’s a problem with an accordion feature on the store’s page. Instead of allowing the user to expand or collapse pastry categories, the content abruptly appears and vanishes. To make sure Max’s competitive edge doesn’t vanish, too, you’ll make the sections glide open and close, as well as fix an arrow’s rotation problems, using CSS and JavaScript. Also, to respect all users, you’ll use media query to disable animations for users whose browser settings indicate they prefer reduced motion.

$29.99 $19.49
add to cart
Project 4 Complex Transitions

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.

$29.99 $19.49
add to cart

project author

Martine Dowden

An award-winning CTO, UX/UI designer and developer, international speaker, and author, Martine focuses on web interfaces that are beautiful, functional, and accessible. She approaches user experience from both art and science perspectives, drawing from her degrees in psychology and visual communications. She has worked as a developer, artist, educator, and consultant since 2005. To stay active in the industry she writes articles, leads workshops, and speaks at conferences and meetups worldwide. Her favorite topics to present are frontend web development, CSS, user experience, interaction design, accessibility, and Firebase. In recognition of her work in the community, she was awarded and still maintains the Google Developer Expert (GDE) status and the Microsoft Most Valuable Professional (MVP).


In 2015, she published a children’s book, Programming Languages ABC++, of which the workbook edition sold over 20,000 copies in 2016. She then went on to write Approachable Accessibility: Planning for Success, which was released in June 2019, and Architecting CSS: The Programmer’s Guide to Effective Stylesheets in 2020.


Currently, she is the CTO at Andromeda Galactic Solutions where she continues to learn, work on, and share her passion for frontend development.

Prerequisites

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:


TOOLS
  • HTML
  • CSS
  • JavaScript
  • SVGs
  • A code editor of your choice (for example Visual Studio Code, Atom, Notepad++)
  • A modern browser (for example Chrome, Firefox, Edge)
TECHNIQUES
  • Basic HTML
  • Basic SVG
  • Basic CSS
  • Intermediate JavaScript

you will learn

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:


  • Transition styles from one state to another over short periods of time
  • Use CSS hover and focus pseudo-classes
  • Use transitions in response to user interactions on form fields, links, and buttons
  • Types of animations functions and how to customize them
  • Use media query to disable animations according to user preferences
  • Show/hide elements

features

Self-paced
You choose the schedule and decide how much time to invest as you build your project.
Project roadmap
Each project is divided into several achievable steps.
Get Help
While within the liveProject platform, get help from other participants and our expert mentors.
Compare with others
For each step, compare your deliverable to the solutions by the author and other participants.
book resources
Get full access to select books for 90 days. Permanent access to excerpts from Manning products are also included, as well as references to other resources.
Get Your Certificate of Completion—Free!
Finish the work in this liveProject to earn a Certificate of Completion. Once you’re done with your build, take a short online test, then contact the liveProject mentor who will review your submissions. Finally, set up a 15-minute video call with the mentor to verify your work.
RECENTLY VIEWED