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

nirglus 270

@nirglus

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


It's the first Frontend Mentor challenge that I've used grid. If you have any tips on how I can improve myself, feel free to share!

Community feedback

océane 230

@Ocece77

Posted

This is great! I thought your project was the original!🤯

• You can enhance your code by utilizing variables for colors, typography, and more…,and using :root{} in CSS. 🌳

Take a look at the mozilla web docs 📄:

https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties

https://developer.mozilla.org/fr/docs/Web/CSS/:root

In one of my projects, I was advised to use dynamic units (em, rem, vw, vh) instead of static units (px)!This offers better scalability 📐, responsiveness, and consistency across devices 💻📱

Look at this article about css unit ! : https://www.freecodecamp.org/news/css-unit-guide/

Marked as helpful

0

nirglus 270

@nirglus

Posted

@Ocece77 Thanks alot for the feedback! I will certainly take a look onto the :root{} variables, it can save me some time in my future projects.

And about the dynamic units, I usually use these on other projects but some times in order to achive exact results for specific resolutions, px worked for me better. But I will try to apply them in the future challenges.

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