click to
look inside
Look inside
CSS

Transitions you own this product

This free project is part of the liveProject series CSS Animations and Transitions
prerequisites
basic HTML • basic CSS
skills learned
use transitions in response to user interactions • types of animations functions and how to customize them
Martine Dowden
1 week · 6-8 hours per week · INTERMEDIATE
filed under

placing your order...

Don't refresh or navigate away from the page.
This free project is part of the liveProject series CSS Animations and Transitions explore series
Check your email for instructions on accessing Transitions (liveProject)
continue shopping
go to cart

Look inside

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.

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 is for frontend developers who want to level up from the basics of CSS and HTML pages. To begin this liveProject you will need to be familiar with the following:


TOOLS
  • HTML
  • CSS
  • 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 CSS

you will learn

In this liveProject, you’ll learn to create transitions that make web applications more natural and intuitive:


  • Create smooth hover and focus
  • Change the styles of elements to signal to the user that the element is interactive
  • Provide feedback to the user about focus
  • Transition styles from one state to another over a short period of time

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.
Compare with others
For each step, compare your deliverable to the solutions by the author and other participants.
RECENTLY VIEWED