Design comparison
SolutionDesign
Community feedback
- @srijanssPosted 3 months ago
Your solution looks nice and I like the way you've used different react components for the cards. However, you can make your app more accessible to all the users.
- You can make use of semantic HTML tags like
<article>
for cards,<figure>
and<figcaption>
for image,<button>
tag instead of<a>
as this is submit button for form. web.dev's Welcom to learn A11y is very helpful regarding the accessiblity and its importance - I tried accessing the app using keyboard and only button was accessible using keyboard. You can use radio buttons for the rating items which will make it accessible using keyboard on all the browsers.
- Your solution looks good on desktop. But it overflows on mobile devices.
- Your code is well structured , readable and reusable.
- Solution is almost similar to design, except some hover states of buttons and rating items.
1 - You can make use of semantic HTML tags like
Please log in to post a comment
Log in with GitHubJoin 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