HTML CSS GRID

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  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

  @GrishmitaPosted about 3 years ago

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

  0