Design comparison
Community feedback
- @PhoenixDev22Posted almost 3 years ago
Hello @AlexandroMunera ,
I have some suggestions regarding your solution:
-
Anything with a hover style in a design means it's interactive. you need to add an interactive element
<a>
around the imageEquilibrium #3429, Jules Wyvern
.- Add the hover effects on them -
Page should contain a level-one heading .In this challenge , you can wrap
Equilibrium #3429
with a<h1>
, it would be like :<h1 class="card__title"> <a href="#"> Equilibrium #3429 </a></h1>
-
the link should be wrapping the original image and either have
Sr-only
text, anaria-label
oralt
text that says where that link takes you. -
The
alt
text of the avatar shouldn't be empty, it should beJules Wyvern
. -
You can use an unordered list
<ul>
to wrapclass="card__details"
and in each<li>
, there would be<svg >
and<p>
(to wrap the text). -
never use
<span>'
s or<div>'
s for meaningful content ,
<ul class="card__details"> <li class="card__value">0.041 ETH</li> <li class="card__date">3 days left</li> </ul>
Also,
<p class="">Creation of <a href="#">Jules Wyvern<a></p>
.-
an explicit width is not a good way . Remove the width from the card component and change it to
max width
instead. That will let it shrink a little when it needs to. -
Let the content inside the card element dictate the height of it
Overall your solution is good , Hopefully this feedback helps.
1@AlexandroMuneraPosted over 2 years ago@PhoenixDev22 wow thank you so much for your time and give me this feedback.
1 -
- @nehanalinikPosted almost 3 years ago
Did you just forget about the
hover
part?Also it'll be good if you add
alt
attribute to your images and add description to them too !important. 🐬1@AlexandroMuneraPosted almost 3 years ago@nehanalinik You're right. Thank you for the feedback. I'll correct it.
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