Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Not Found

Submitted

Launch countdown timer

Joshysmart 840

@joshysmart

Desktop design screenshot for the Launch countdown timer coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Community feedback

T
Grace 29,310

@grace-snow

Posted

Hey, well done on this! It's not an easy challenge and you've clearly had a good go at the card flip animation!

Only a few suggestions from me for improvements:

  1. Your numbers can't be h2s. They are changing dynamically which is a problem for the accessibility tree - assistive technology will read out all h2s on the page, so it needs to be static content. I would just have them in a span inside an outer HTML block.

  2. On mid-sized screens the cards go quite small and very far apart because you're using justify-content: space-between;. instead, I suggest you set that to center and use the gap property to give the cards some space between.

Hope that helps :)

2

T
Grace 29,310

@grace-snow

Posted

Here are some resources to help you refine the animation:

  • https://codepen.io/annikakuelzer/pen/XWXVGGO
  • https://codepen.io/shshaw/pen/vKzoLL

There are lots of examples out there, all a bit different to each other

1
Joshysmart 840

@joshysmart

Posted

Thank you so much for taking the time to review my solution I learned a lot. I have refined the animation. I hope this is better?

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord