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

Single price grid component using HTML and CSS

@OussamaZouaine

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would love to get some feedback. So drop a comment if it's possible.

Community feedback

P
Ken 4,915

@kens-visuals

Posted

Hey @OussamaZouaine 👋🏻

I have some suggestions to help you fix the accessibility issues.

  • In your markup, <div class="container">...</div> should be <main class="container">...</main>.
  • In this case, instead of <section>, I suggest using regular <main> for a couple of reasons. First, when you use a <section> you have to have a heading, like h2-h6. Next, <section> is for bigger parts of a layout, such as, contact us about us, image gallery, etc. This will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • Next, I suggest using <h2> instead of <h3>, because heading in HTML have to increase gradually, such as h1, h2, h3....

I hope this was helpful 👨🏻‍💻 one last small suggestion would be to try to implement a simple :hover state. Other than that, you did a great job, well done. Cheers 👾

Marked as helpful

1

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