@fastcheetah
Posted
Crazy its so close to the solution
@gmagnenat
Posted
@fastcheetah Thank you for checking it out :)
What are you most proud of, and what would you do differently next time?
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;
@fastcheetah
Posted
Crazy its so close to the solution
@gmagnenat
Posted
@fastcheetah Thank you for checking it out :)
@Ehsan-eslami
Posted
One of the best and complete solution for this challenge. Thank you, I learned a lot
@gmagnenat
Posted
@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.
@gmagnenat
Posted
@Ehsan-eslami I just pushed an update to this solution with the following changes:
@geomydas
Posted
Maybe using hgroup? for .card__content
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