Responsive grid 3-column preview card component

Community feedback

• 

  Vinay Maurya•140

  @Designer-spacePosted 7 months ago

  Hi there 👋. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.

  HTML

  • Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

  • Use the <footer> tag to wrap the footer of the page instead of the <div class="col-span-1 md:col-span-3 md:flex md:mt-0 md:space-x-6 mt-8 mx-auto">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

  • It's best to have only one <h1> per page, as it simplifies and tells Google your main topic and it help screen readers. For more info

  • You could use the <h1> tag to indicate the heading of the page. Additionally, you can use a sr-only class to your heading and this will help screen reader.

  Example:

  <h1 class="sr-only">3-column-preview-card-component-main</h1>

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  0
• 

  Alan Matthews•120

  @matthewsalanPosted 7 months ago

  I need to import SVG's as images from now on.

  0