Responsive stats preview page using Grid and Flexbox (this was tough)
Design comparison
Solution retrospective
This challenge was a little tough for me. I have a few questions:
-
How can I make my code more clean and efficient?
-
I use rem and px mixed up, it seems unorganized for me. Any suggestions?
-
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
- @casserole27Posted almost 3 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 helpful0 - @hectorRperezPosted almost 3 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@jesuisbienbienPosted almost 3 years ago@hectorRperez I'm very glad to hear that. Thanks for your feedbacks.
1 - @Mohireza1Posted almost 3 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@jesuisbienbienPosted almost 3 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 - @mwinelPosted almost 3 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
Please log in to post a comment
Log in with GitHubJoin 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