Skip to content
Submitted over 2 years ago

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

Nguyen Nguyen•340
@jesuisbienbien
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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

Community feedback

  • C Lewis•110
    @casserole27Posted over 2 years ago

    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
    0
    Nguyen Nguyen•340
    @jesuisbienbienPosted over 2 years ago

    @casserole27 thank you!

    0
  • HectorPerez•40
    @hectorRperezPosted over 2 years ago

    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

    1
    Nguyen Nguyen•340
    @jesuisbienbienPosted over 2 years ago

    @hectorRperez I'm very glad to hear that. Thanks for your feedbacks.

    1
  • Mohireza•100
    @Mohireza1Posted over 2 years ago

    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!

    1
    Nguyen Nguyen•340
    @jesuisbienbienPosted over 2 years ago

    @Mohireza1 You're welcome, Mohireza. I'm very happy to hear that. I'm still learning and hope to receive feedbacks always. Happy coding!

    0
  • Nelson Murungi•120
    @mwinelPosted over 2 years ago

    @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.

    0
    Nguyen Nguyen•340
    @jesuisbienbienPosted over 2 years ago

    @mwinel Thank you, Nelson.

    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