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

#accessibility
lukingβ€’ 230

@alululululuer

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


Always use correct heading levels.

Community feedback

P
Dave Quahβ€’ 670

@Milleus

Posted

πŸ‘‹ Hello!

This is a nice solution - I like the use of HTML elements and CSS custom properties.

I think a few things that would make this even better:

  • The "attribution" as a <p> instead of a <div>, and if it could fit in the same viewport without scrolling.
  • Addressing the accessibility concerns with Safari browser for list-style: none
  • Perhaps consider utility classes for font size, weight and color instead of declaring them with headings (h1, h2). This gives more flexibility as most times headings aren't always styled the same.

Really nice! I look forward to seeing more solutions from you. Happy coding!

Marked as helpful

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