Skip to content
Submitted 10 months ago

Single Price Grid Component (Responsive)

Spirit•220
@git-ritesh
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

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
    @gfunk77Posted 10 months ago

    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-riteshPosted 10 months ago

    @gfunk77 Thanks a lot : )

    0

Please log in to post a comment

Log in with GitHub

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