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
Not Found
Not Found
Not Found

Submitted

Christmas countdown timer using HTML, CSS and JavaScript

FesoQue 380

@FesoQue

Desktop design screenshot for the Launch countdown timer coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I couldn't make the cards flip vertically probably because my knowledge of JS is limited (newbie)... Any help will be appreciated... I equally needs your feedback on the design too, thanks

Community feedback

T
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hey, good work on this challenge, FesoQue! 👍

It's cool that you made your solution Christmas-themed! 🎅

I suggest,

  • Turning the social media links at the bottom of the page into actual links using the anchor tag.
  • The lights at the top of the page look great, but they are very stretched in the desktop layout of the page. You might want to consider adding multiple rows of lights in the desktop layout to prevent that from happening.
  • You can clear up some of the errors on your solution report by adding a <title> tag to the inline SVGs on your page. 😉

Keep coding (and happy coding, too)! 😁

And happy holidays! 🎄

0

FesoQue 380

@FesoQue

Posted

@ApplePieGiraffe thanks for your input, but I don't know understand the adding a <title> to the SVGs part? Can you elaborate??

0
T
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@FesoQue

It looks like you wrapped some inline SVGs in anchor tags (which is totally fine) but the solution report is complaining that there is no link content for those anchor tags (probably because there is nothing to indicate what those links are for to screen readers or something, IDK). If believe if you add a <title> tag to each of the inline SVGs, like

<svg>... <title>Visit our Facebook page</title>... </svg>

...you should be able to clear up those errors and identify those links for accessibility purposes.

Hope that helps! 😃

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