NFT preview component using BEM by Alexander MP
Design comparison
Solution retrospective
First time using BEM in a Frontend Mentor project.
I found it confusing when creating wrappers like "card__image-wrapper". Is that the right approach?
I welcome all other feedback and BEM tips, thanks :)
Community feedback
- @correlucasPosted about 2 years ago
πΎHi Alex Martos P., congrats on completing this challenge!
Hereβs some tips to improve your component design:
To improve your component overall responsiveness, something you can do its to create a media query to save space in the
pricing section
to make each information in a different row. Hereβs the code for this media query.@media (max-width: 350px) { .card__meta { display: flex; justify-content: space-between; align-items: center; flex-direction: column; } }
βοΈ I hope this helps you and happy coding!
0 - @denieldenPosted about 2 years ago
Hi Alex, congratulations on completing the challenge, great job! π
Some little tips for optimizing your code:
- use
main
tag to wrap the all main content of page and improve the Accessibility, not as a container of card - you can use
article or div
tag instead ofmain
tag to the container card for improve the Accessibility - add descriptive text in the
alt
attribute of the images - remove all
margin
from.card
class because with flex they are superfluous - instead of using
px
use relative units of measurement likerem
-> read here
Hope this help! Happy coding π
0 - use
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