Skip to content
Submitted over 3 years ago

Sats preview card component challenge

mariano•60
@marianojugo
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi i just started in this world of coding , Im a beginner and i would like your advices about my job. Thanks

Code

Please log in to post a comment

Log in

Community feedback

  • Hexer•3,620
    @EmmanuelHexer

    Congratulations on completing this challenge.

    • One tip i can give you is to always note that every section should contain a header tag. like one h1 for every webpage and h2. Then if you have other headers in the section add h3. This will help fix any html issues.
    Marked as helpful
  • Vanza Setia•27,715
    @vanzasetia

    Hello, Mariano! 👋

    Congratulations on finishing this challenge! 👏

    I have some feedback on this solution:

    • Accessibility
      • Don't use section for the card content since it is not a full webpage.
      • The attribution should be lived inside the footer.
    <body>
  <main>
    card content goes here...
  </main>
  <footer class="attribution">
      attribution links goes here...
  </footer>
</body>
    • There should not be text in span and div alone; instead wrap the text with a meaningful element. In this case, make the .stats as ul and wrap each item li.
    • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
    • Styling
      • Don't specify the height of the main element, let the content inside it dictate the height of it. Also, use padding to give a white space between the content and the card itself.
      • To make the card perfectly in the middle of the page, you can make the body element as a flexbox container. Then you can remove the margin on the main element.
    /**
 * 1. Make the card vertically center and
 *    allow the body element to grow if needed
 */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* 1 */
}
    • Prefer unitless numbers for line-height values to avoid unexpected results. The MDN documentation explains it well. 👍

    That's it! Hope you find this useful! 😁

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