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

@colis123

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Great work on this Pedro! Nice to see you using min-width media queries and working mobile-first too 👍

Here are a couple of things I picked up from looking at your code:

  • In your HTML you have 3 h4 elements, but no other headings. I would always recommend starting at h1 and working down depending on the content hierarchy. This makes sure that the content outline for screen reader users is well structured.
  • I would also recommend not using IDs for styling purposes. Their specificity is really high and also they can't be reused on the same page. I always stick with classes, pseudo selectors, attribute selectors, and type selectors. It makes your CSS far more maintainable as it grows.

I hope these pointers help. Keep up the great work! 🙂

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