Skip to content
Submitted almost 3 years ago

Sats preview card component challenge

mariano•60
@marianojugo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Community feedback

  • Hexer•3,660
    @EmmanuelHexerPosted almost 3 years ago

    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
    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    @Phalcin I guess you might mean that every section should contain a heading tag and ... if you have other headings in the section add h3.

    header is a landmark that usually contains a nav element and the logo of the company.

    1
    mariano•60
    @marianojugoPosted almost 3 years ago

    @Phalcin thanks for your advice, I just check my html and i put un h1 in my section 2.

    1
    Hexer•3,660
    @EmmanuelHexerPosted almost 3 years ago

    @vanzasetia right

    0
  • Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    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! 😁

    1
    mariano•60
    @marianojugoPosted over 2 years ago

    @vanzasetia Thank you my friend for your good advice .

    0

Please log in to post a comment

Log in with GitHub

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