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

Single Price Grid Component (Responsive)

Spiritβ€’ 220

@git-ritesh

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi there πŸ‘‹, I’m Spirit, and this is my solution for this challenge.

✨ Features:

  • Achieved 92% in Lighthouse score for performance πŸš€, 100% for best practices βœ… and 91% for SEO 🌐 for both Mobile & Desktop.

πŸ› οΈ Built With:

  • Mobile First CSS. 🎨
  • BEM
  • Grid Layout using Nested Grid πŸͺŸ

❓ Question:

  • How to achieve pixel perfect design which matches approx. 100% with the Challenge Design ?
  • Any Best Practices which I missed out ? Suggest me some best resources to Learn more about Grid Layout & its complexities

Feedback is appreciated.

Thank You : )

Community feedback

gfunk77β€’ 1,200

@gfunk77

Posted

Nice job on your solution. For resources, the resources tab on the frontendmentor site is filled with pretty awesome suggestions. I would suggest checking out the Wes Bos Grid course here: https://wesbos.com/announcing-my-css-grid-course/

It’s free and pretty excellent.

For a pixel perfect design I’d suggest getting access to the figma files as a pro member.

Nice job on the project!

Marked as helpful

1

Spiritβ€’ 220

@git-ritesh

Posted

@gfunk77 Thanks a lot : )

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