Order summary component

Solution retrospective
I’d really appreciate any feedback on my solution, especially regarding code structure, accessibility, responsiveness, and user experience. Any suggestions will help me improve!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @thisisharsh7
Great job on your solution! Here’s what you did well and a few tips to improve:
✅ What You Did Well:
- Clean, semantic HTML structure with proper use of
main
andarticle
. - Nice use of BEM naming for CSS classes — it's organized and readable.
- Good use of Flexbox for layout and spacing.
🔧 Suggestions:
- Add
alt
oraria-hidden="true"
to the music icon (icon-music.svg
).
alt=""
: tells screen readers to skip it.aria-hidden="true"
: further ensures it’s ignored by assistive tech.
- Consider adding more breakpoints and using
max-width
with%
for better scaling. - Add
:focus-visible
styles for keyboard users and Improve hover/focus indicators for better interactivity.
Overall, this is a strong and well-structured submission. Keep up the great work!
Marked as helpful - Clean, semantic HTML structure with proper use of
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