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

P

@PiwkoO

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 really appreciate any feedback 🤓

Community feedback

Alexandra 510

@Alexandra2888

Posted

Hi! Congrats for finishing the challenge! Your solution is very close to the design! Here are a few things I think you can improve:

  • reset also pseudo-elements with *::after, *::before,
  • implement BEM naming convention in CSS so your code will be more maintainable & cleaner,
  • use relative units (em, rem) instead of px not only for font-size. Px are preferred when you code for newspapers/magazines,
  • add aria-label for buttons for screen-readers. Happy coding!
1

P

@PiwkoO

Posted

@Alexandra2888 Thank you for taking your time and checking my solution. From the points you mentioned, I want to clarify 3 of them.

  • I didn't reset pseudo-elements because of the low complexity of this project, but I agree that it's good practice to do especially in bigger projects,
  • In this project, I intentionally didn't write BEM, but tried to use OOCSS because it's easier to practice on smaller projects and it's also good to know different methodologies,
  • I think when you have text in the button tag the readers should use it. I followed Mozilla docs for this, but you're absolutely right when this isn't the case (eg. icon inside button instead of text).

Don't get me wrong. Your feedback is precious to me but I just wanted to explain the logic behind my decisions.

You're point about relative units made me think so thank you very much for it. I already started reading articles so I could understand this concept in more detail and write better code.

Thank you and happy coding!

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