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 using HTML and CSS

Roque Rodriguezβ€’ 40

@SourceCodeDad

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


Please provide any and all feedback.

Thank you! b

Community feedback

Naveen Gumasteβ€’ 10,480

@NaveenGumaste

Posted

Hello Roque Rodriguez ! Congo πŸ‘ on completing this challenge

Let's look at some of your issues, shall we:

  • Warp your card content around the main tag Ex: πŸ‘‡
<body>
<main class="container">
*all you content here*
</main>
</body>

happy CodingπŸ˜€

0
Shashree Samuelβ€’ 9,260

@shashreesamuel

Posted

Hey SourceCodeDad, good job on completing this challenge. Keep up the good work.

Your solution looks good however I think you should consider the following

  • your card needs to be in the center. You can use margin: 0 auto to center the card in the middle of the page.

  • The margin-top above the text is too high as compared to the design. You can alter this using the css property margin-top

  • The font weight of the title text is supposed to heavier

  • The font weight of the number part of the card statistics should be in a heavier font weight. This can be altered using font-weight.

  • The card should have some padding around using the padding css property.

In terms of your accessibility issues

  • <ul> and <ol> must only directly contain <li>, script or <template> elements. It seems like you have an empty <ul> tag where the child elements are outside.

  • wrap all your content within <main> tags to fix the rest of your accessibility issues.

In terms of your html validation errors the element <div> is not allowed as a child of the element <ul>.

I hope this helps

Cheers Happy coding πŸ‘

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