
Submitted almost 2 years ago
INTERACTIVE RATING COMP 🎯 [ ACCESSIBLE - BEM - VANILLA CSS3 - ES6 ]
#accessibility#bem#lighthouse
@0xabdulkhaliq
Design comparison
SolutionDesign
Solution retrospective
👾 Hello, Frontend Mentor Community,
This is my solution for the Interactive Rating Component.
100%
Accessible solution withform
integration, you check by pressingtab
key along with←
&→
to traverse your rating selection finally hitenter
to submit your result- Learned the usage of
fieldset
,legend
, &radio
input elements to build well accessible form - Scored
99.5%
on Google Pagespeed Insights! 🤩 - Actually it's been overwhelmed at this part because of performance issues. So i injected the
css
andjs
inside thehtml
file itself to improve site performance. results86%
=>99.5%
🚀 - Used
Prettier
code formatter to ensure unified code format ⚙️ - Layout was built responsive via mobile first workflow approach 📲
- Had a lots of fun while building this challenge ! 🤠
- Feel free to leave any feedback and help me to improve my solution 💡
.
👨🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks
Ill be happy to hear any feedback and advice !
Community feedback
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