Design comparison
Solution retrospective
I'm just new in front-end development, hope you like my solution to this challenge. I spend about almost 2 hours in total in creating solution for this challenge. Feedback on my solution, i.e, areas for improvements, code optimization, and others are welcome.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Ralph Custodio, congratulations for your new solution!
👏 Great start and great first solution! You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:
1.A best practice to have all the image inside the container scaling and respecting the size of the container, you need to add
max-width: 100%
and add alsoobject-fit: cover
to make the image auto-crop when resizing inside the column:img { object-fit: cover; max-width: 100%; /* width: 100%; */ border-radius: 0.625rem; /* max-height: 18rem; */ /* max-width: 18rem; */ display: block; }
2.You’ve used
<div>
to wrap the card container, in this case you need to use<main>
since this is the main block of this page.3.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/
✌️ I hope this helps you and happy coding!
Marked as helpful0@itsmeralph09Posted about 2 years ago@correlucas oww thank you so much Sir. I will note all of these for future reference.
0 - @madkn1311Posted about 2 years ago
Hello Raph,
Great job on the design...!!!😊
The image paths should have a forward slash instead of backward slash.
Also, images should have an alt attribute for better accessibility for screen readers.
Marked as helpful0@itsmeralph09Posted about 2 years ago@madkn1311 heads up, thank you so much Sir. The alt attribute, I forgot about it, thanks you so much Sir for your comments.
1
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