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

product card design with css grid

@juampi19

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Criztiandev

Posted

Hi! Juan Pablo Amigo👋, welcome to the frontend mentor, Congratulations 🎉🎉 on completing the project! Your hard work and dedication have paid off. Well done!

However, there is a problem with your html code, since you have used semantic tags. I advise you to utilize semantic tags as much as possible, as this will benefit you in the long run. All page content should be contained by landmarks, as per the reports, which may be resolved by turning the div into a footer.

by following this structure is a good way to ensure that the content of your web page is well-organized and accessible.

<body> <header>This is the header</header> <nav>This is the nav</nav> <main>This is the main</main> <footer>This is the footer</footer> </body>

The <header> element is used to contain information about the document, such as the title, logo, and other introductory content.

The <nav> element is used to contain navigation links for the site, helping users find the content they are looking for.

The <main> element is used to contain the main content of the document, excluding content that is repeated across multiple pages, such as headers and footers.

The <footer> element is used to contain information about the document, such as links to related documents, copyright information, and contact information.

By using these semantic elements, web developers can help ensure that the content on their pages is accessible and usable for all users, including those who rely on screen readers. Additionally, search engines can understand the structure of the page and display it appropriately in search results, making it easier for users to find the content they are looking for.

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