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

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

Nguyen Nguyen• 340

@jesuisbienbien

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@casserole27

Posted

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

@jesuisbienbien

Posted

@casserole27 thank you!

0
HectorPerez• 40

@hectorRperez

Posted

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

@jesuisbienbien

Posted

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

1
Mohireza• 100

@Mohireza1

Posted

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

@jesuisbienbien

Posted

@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• 90

@mwinel

Posted

@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

@jesuisbienbien

Posted

@mwinel Thank you, Nelson.

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