Responsive Product Preview Card Using CSS Grid

Community feedback

• 

  Shashikant•430

  @shashikantdev3Posted over 1 year ago

  Hello there 👋. Good job on completing the challenge! Here are some suggestions regarding your code that may be of interest to you.

  HTML 🏷️: To clear/pass the Warning "Page should contain a level-one heading" and for Accessibility:

  Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy.

  Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy.

  HTML5 elements such as <main>, <nav>, <header>, <footer>, <section>, <aside> act as landmarks or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology (Users with disabilities). You can use the <div> for sub-items within landmarks like <section>. In other words for containers or sections in your HTML, you can use the <section> tag if you want to nest in subitems <div>.

  Landmarks such as the <section> may require that you specify a heading within. In other words, if the section has no heading it may throw an error when checked by an accessibility tool.

  It is advisable that you place all your main site content in a landmark element <main> Here is an Accessibility Evaluation Tool to check your webpage for any errors or warnings related to landmarks.

  There exists an attribution <div> that comes with the frontend mentor starter kit. You will have to wrap this <div> in a <footer> tag

  Read

  W3schools Accessibility Landmarks Notes for more information.

  Accessible Landmarks Article by Soctt.

  I hope you find my comment useful. 😄 Nevertheless, the solution you submitted is great! 🎉 Happy coding

  Marked as helpful

  0