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

HTML CSS GRID

Grishmita 105

@Grishmita

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
Ken 4,915

@kens-visuals

Posted

Hey @Grishmita 👋🏻

I have couple of suggestion on how to fix accessibility, HTML and also some other issues.

  • Your <div class="grid-container">...</div> should be <main class="grid-container">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>. These will fix most of your accessibility issues. The other one related to heading, in your code headings should decrease gradually. Meaning of, start from h1 and then go down to h2 and so on. Don't forget to generate a new report once you fix the issues.
  • To fix the website's HTML issue, I'd suggest swapping <section>s with just <div>s for a couple of reasons. Generally, <section> is used to separate a bigger section in a website, for example if a website's layout has a review section, image gallery, etc., you get the point. Besides that if you use <section> you have to have some type of heading h1-h6.
  • <h1> Get <a>insights</a> that help your business grow.</h1> here, I'd suggest changing <a> with a <span> tag, since <a> tag is used for links and in this case there's no link attached to the word.
  • In the code below, you should change <h3> to <p>, since it's not really a heading.
<div>
 <h3> 10k+</h3>
 <p>COMPANIES</p>
</div>

I hope this was helpful 👨🏻‍💻 Other than those semantic issues, your grid layout looks great, Cheers 👾

Marked as helpful

2

Grishmita 105

@Grishmita

Posted

@kens-visuals Thank you so much for guidance .I'll keep that in mind for sure.thanks

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