Design comparison
Solution retrospective
I tried do make this solution as quickly as I could. To improve efficiency I should start with a boilerplate where I already set the base CSS reset and custom properties organisation so I don't have to spend to much time on this.
Next time i'll use a build tool and preprocessor with SCSS. It will help keep consistency and speed up the styling process.
I used the chrome "perfect pixel" extension to get as close as possible from the design.
What challenges did you encounter, and how did you overcome them?Getting spacing correctly and the closest possible to the design. I used a chrome extension to get the design as an overlay in the browser. By inspecting and adjusting the values I think I achieved a decent result.
What specific areas of your project would you like help with?I would need help on code structure. I'm not sure about the card__wrapper, it feels like an extra div that can be simplified;
Community feedback
- @fastcheetahPosted 5 months ago
Crazy its so close to the solution
2 - @Ehsan-eslamiPosted 5 months ago
One of the best and complete solution for this challenge. Thank you, I learned a lot
1@gmagnenatPosted 5 months ago@Ehsan-eslami Thank you for your comment ! :) I'm glad you liked it.
There are some improvement to do specially on the css reset with border-box. It will solve the issue I had with padding and the extra div.
1@gmagnenatPosted 5 months ago@Ehsan-eslami I just pushed an update to this solution with the following changes:
- fixed html markup, simpler solution, removed non necessary divs and wrapper
- fixed font sizes values with relative units
- fixed media query for the footer with relative unit
- added a modern css reset
- removed non necessary elements in the css too
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