Submitted almost 3 years ago
Responsive NFT Card made with HTML, SCSS and BEM.
@thomasjonstrup
Design comparison
SolutionDesign
Solution retrospective
Feedback is allways welcome
Community feedback
- @pikapikamartPosted almost 3 years ago
Hey, awesome work on this one. Layout in general looks great^^
Some suggestions would be:
main
does not needdisplay: block
they are by defaultblock
.- I would put the
.attribution
outside of themain
tag and usefooter
on it so that it will be its own landmark. - Since you are treating the
img
as an interactive element, it would be better to use abutton
and wrap theimg
with it, but since theimg
hasalt
it would be confusing on what thebutton
does. Because by looking at this, clicking the image would either be modal be popping up to view the image at full or maybe page link where the user can see the full nft information. I find it hard what to do at this one 😅. - I saw on other submissions that the
Equilibrium
text and the person's name are interactive components. Maybe you have missed them out? - Also, for now using the
h1
on theEquilibrium
text seems fine but if you consider of usingh2
on it and making the theh1
a screen-reader only , that would be much better. If you about this layout, on a real site, it wouldn't have only a single nft right, there will be bunch of those so not applying theh1
on a nft title will be great. - Use only
ethereum
on the icon. When usingimg
tag, you don't need to add words that relates to "graphic" such as "icon" and others, sinceimg
is already an image so no need to describe it as one. - The text
0.041 ETH
should be inside ap
tag and not justdiv
. Remember to always use meaningful element in a text-content. - The clock-icon is only a decorative image. ecorative images should be hidden for screen-reader at all times by using
alt=""
andaria-hidden="true"
to theimg
tag or onlyaria-hidden="true"
if the image is usingsvg
. 3 days left
should be insidep
tag as well.- Person's image should be using the person's name as the
alt
value likealt="Jules Wyvern"
. Components like this where a person's information is presented, make sure to use their name as the person'simg
alt
value.
Aside from those, great job again on this one.
Marked as helpful1
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