Frontend Mentor | Single Price Grid Component Solution coding challenge solution

Community feedback

Vanza Setia• 27,795

@vanzasetia

Posted over 2 years ago

Hello there! 👋

Congratulations on completing this challenge! 🎉 Good job on using Normalize on the site! 👏

However, there are some areas that can be improved.

Use min-height instead of height on the body element. This way, if the card element needs more than 100vh then the body element can grow (by adding a vertical scrollbar) which means that the users can scroll to see the rest of the content.
Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (by using Tab key).

Hope you find this useful!

Marked as helpful

GSD3v08• 190

@GSD3v08

Posted over 2 years ago

@vanzasetia , Thank you for your feedback , I made the changes you suggested. I'll try to do the same in next challenges.

Vanza Setia• 27,795

@vanzasetia

Posted over 2 years ago

@GSD3v08 You're welcome! I took a look at the site and I would recommend making the :focus-visible styling using outline only. The purpose is to make the styling stand out from the :hover or :active states. So, the only time where the element has an outline is when it gets focused.

GSD3v08• 190

@GSD3v08

Posted over 2 years ago

@vanzasetia Thank you I understand now, I fixed it .

Vanza Setia• 27,795

@vanzasetia

Posted over 2 years ago

@GSD3v08 Yup! Now, it is stand out with a white outline! Great job with the update! 👍

Buddyyy• 40

@semi26

Posted over 2 years ago

Really good work looks very identical, I like that you included a README.md with your solution. handles well with responsiveness. Overall great work. Happy Coding 👍

GSD3v08• 190

@GSD3v08

Posted over 2 years ago

@semi26 Thank you for your feedback.