Skip to content
Submitted about 3 years ago

Responsive stats preview page using Grid and Flexbox (this was tough)

Nguyen Nguyen•340
@jesuisbienbien
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This challenge was a little tough for me. I have a few questions:

  1. How can I make my code more clean and efficient?

  2. I use rem and px mixed up, it seems unorganized for me. Any suggestions?

  3. I used border-top-left-radius, border-top-right-radius, etc... Because in this challenge, the rounded corners change in mobile and desktop view. Better way to set the border-radius?

Any other feedbacks and suggestions are welcome as well. I'd love to learn. Thank you! :D

Code

Please log in to post a comment

Log in

Community feedback

  • C Lewis•110
    @casserole27

    Which CSS Measurements to Use When: http://thenewcode.com/775/Which-CSS-Measurements-To-Use-When

    I don't have specific feedback about efficient code, but I found it difficult to keep things clean during this project. One thing you could try that helps me is organizing your CSS by comments: /****** GLOBAL STYLING / / STATS STYLING ******/ etc.

    I switched the border radius as well, I did not see another way around it.

    Marked as helpful
  • HectorPerez•40
    @hectorRperez

    That's amazing, your solution taught me the mix-blend-mode property that I didn't know about. I'm your fan. I learned that in the future a design will help me a lot

  • Mohireza•100
    @Mohireza1

    Hey, I just wanted to thank you for this great solution! I learned a lot from your code, and I feel like it's just the refined version of every solution here. Thank you!

  • Nelson Murungi•120
    @mwinel

    @jesuisbienbien your solution is awesome.

    Regarding your question on how to use PXx or REM, I once came across this article;

    https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15.

    Hope it helps make a clear decision.

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