Submitted almost 2 years ago

Responsive Single price grid component created with CSS Grid

Mihael• 260

@mihaelpavlakovic

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Single price grid component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hii everyone, this is the 11th challenge I have tried to recreate. I'm so happy about how it turned out, but I think I could further improve in writing cleaner code.

It would be helpful for my future growth if you could point me in the right direction. For example, I'm interested in potentially better solutions for this challenge. In which area do I need to improve, and what do you recommend that I should implement? What are some best practices that I haven't got right?

Thanks for your attention and all the future feedback.

Community feedback

Aatypic• 490

@Aatypic

Posted almost 2 years ago

Hello and congratulations on your 11th solution, keep up the good work it helps to see that others are improving ✌️

I'm a newbie myself so I can't recommend any new implementations or else.

For the questions about cleaner code, I think you can achieve the same result by having one container less. Instead if you use the <body> and flex on it, you won't need the <article>

<body>
  <main class="grid">
    <div class="p1... ></div>
    <div class="p2... ></div>
    <div class="p3... ></div>
  </main>
</body>

Good luck !

Mihael• 260

@mihaelpavlakovic

Posted almost 2 years ago

@Aatypic Thanks for the suggestion! I will try and research that topic to get a better understanding if that is good practice.

Please log in to post a comment

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