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

Interactive and Responsive Pricing Component Built with React

@carbondesigned

Desktop design screenshot for the Interactive pricing component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Would appreciate any feedback!

Community feedback

Faris P 2,810

@FarisPalayi

Posted

Works well, but do not ever set ouline: none interactive elements like buttons, unless you have a custom a :focus state style. Even if you do have that, it's a better idea to use outline: transparent taking windows contrast user's accessibility in to consideration. And try to clear those issues in the report section, like the hierarchical order of heading tags. ANd have fun coding ✨

Marked as helpful

0

@carbondesigned

Posted

@FarisPalayi Thank you for the feedback, but what is the reason for not setting the outline: none Also I did not even notice the report, this was my first challenge haha.

1
Faris P 2,810

@FarisPalayi

Posted

@carbondesigned 😀 there's a "view report" button in this page, click on it to see the report.

To answer your question, take a look at this very brief guide. Also, take a look at :focus-visible

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