Frontend Mentor | Sats preview card component challenge coding challenge solution

Community feedback

Hexer• 3,660

@Phalcin

Posted over 2 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

Vanza Setia• 27,795

@vanzasetia

Posted over 2 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.

mariano• 60

@marianojugo

Posted over 2 years ago

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

Hexer• 3,660

@Phalcin

Posted over 2 years ago

@vanzasetia right

Vanza Setia• 27,795

@vanzasetia

Posted over 2 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! 😁

mariano• 60

@marianojugo

Posted over 2 years ago

@vanzasetia Thank you my friend for your good advice .

Sats preview card component challenge

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community