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

stats-preview-card-component

@yanbabagbeto

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Is there anything you would suggest I change or do differently next time? I'd appreciate any feedback or advice you can offer. Please help me continue to grow and better myself.

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi!

I recommend using a code-formatter. This way, your code base will have a consistent format, which makes it easier to read the code. I suggest using Prettier as your code-formatter.

Prettier · Opinionated Code Formatter

You could make this solution better if you:

  • Make the statistic a list element with three bullet points.
  • Wrap the text with a meaningful element like a paragraph element instead of using <div> and <span>.
  • Replace the <div class="attribution"> with <footer>. All the page content should live inside landmark elements.
  • Don't change the <html> or the :root font size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements.

I hope this helps. Happy new year!

Marked as helpful

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