Design comparison
Solution retrospective
This project helped me apply some data fetching techniques using json-server and services in Angular. I was also able to apply some component architecture knowledge learnt from the previous material by breaking down the design into components. I would definitely build the designs from mobile first going forward.
What challenges did you encounter, and how did you overcome them?It wasn't really a challenge but I was able to implement a much simpler way of fetching data using services and asynchronous data fetching techniques.
What specific areas of your project would you like help with?For designs like these, should I go with pixel perfect applications, in the sense that if the design file says a card has a width of 200px, should I hard code the card to have the exact width? The reason I ask this is because, the part of the design where the actual summary goes, I didn't hard code the width of each category card but instead used flex gap to give the spacing between the category title and the score.
Community feedback
- @TedJenklerPosted 3 months ago
Hi @outHereSam,
If you want to achieve a responsive design that looks as close to your intended layout as possible, you should replace fixed widths with min-width and adopt a mobile-first approach. Use media queries along with flexbox or grid to adjust the design for desktop views.
Here are some best practices for responsive design:
Avoid Using Pixels: Instead of pixels, use rem for fixed widths by calculating a px-to-rem ratio.
Use min-width, max-width, or %: These properties help create a fully responsive site.
For height, avoid setting fixed values when possible—use margin and padding instead.
I hope this feedback was helpful
Best, Teodor
Marked as helpful1
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