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

Desktop-HTML,CSS-stats-preview-card-component

P

@HaithamAmireh

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


If anyone can help me on how to make the stats section better. Thank you.

Community feedback

@cessnar516

Posted

I think your solution looks really nice! Here are few suggestions to make your layout more accessible:

  • Heading levels should be used sequentially on a page. Right now, you have the card title set to an <h1>, so the next heading on the page should be an <h2> instead of an <h3>, and the next heading after that should be an <h3> instead of an <h6>. It's best to use the headings sequentially, and then adjust the CSS of the heading to be the size/style you want because screen reader users depend on the structure of the page to understand it's content. When heading levels are skipped, it can be confusing, and those users may think they're missing information.

  • To make the HTML for the stats section more semantic, I suggest using a <ul> instead of using headings because the information is a list of statistics instead of sections of content. Then, you can style the <ul> to remove the bullets and display horizontally. Your HTML might look something like this:

<ul class="stats">
<li><span>10k+</span> Companies</li>
<li><span>314</span> Templates</li>
<li><span>12M+</span> Queries</li>
</ul>
  • One more thing that would help your accessibility would be to use some semantic HTML elements to define the sections of your page. I suggest adding a <main> element around your main-card div, and a <footer> element around the attribution information at the bottom of the page. These elements will provide helpful information to assistive technology to help those users understand the structure of the page.

Hope this helps!

Marked as helpful

1

P

@HaithamAmireh

Posted

@cessnar516 Thank you for your help!

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