Design comparison
Solution retrospective
I am a newbie in coding. Contributions are very welcomed. Please help me improve!
Community feedback
- @PhoenixDev22Posted over 2 years ago
Hello @DevDoc7 ,
I have some suggestions regarding your solution:
-
Use the
<main>
landmark to wrap the body content using amain
(which will be the NFT card ) .- 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
.
- Anything with a hover style in a design means it's interactive. you need to add an interactive element
-
Images must have alt text.
-
For any decorative images, each img tag should have empty
alt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images in(icon-view, icon-ethereum, icon-clock
). -
The avatar 's alt shouldn't be
"empty "
, you can setJules Wyvern
to it. And for the equilibrium image should be descriptive. -
This should be a heading Equilibrium #3429. for this challenge , you can use
<h1>
. -
The
icon-view
doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt. -
I would leave the equilibrium main img in html and use pseudo-elements . You either have to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo on hover.
-
Alt text for the profile image shouldn't be
empty .
Read more how to write an alt text -
the link should be wrapping the main image and either have
Sr-only
text, anaria-label
oralt
text that says where that link takes you. -
You can use an unordered list
<ul>
to wrapclass="section-price"
and in each<li>
, there would be<img >
and<p>
. Don't use span's for meaningful content .
<ul class=""> <li class="etherium"> <img src="./images/icon-ethereum.svg" alt="" aria-hidden ="true"> <p class="text-eth">0.041 ETH</p> </li > <li class="deadline"> <img src="./images/icon-clock.svg" alt="" aria-hidden ="true"> <p class="text-time">3 days left</p> </li> </ul>
And for this part,
<p class="">Creation of <a href="#" class="text-by">Jules Wyvern</a ></p>
.-
I recommend to use
em
andrem
units .Bothem
andrem
are flexible, Usingpx
won't allow the user to control the font size based on their needs. -
Never use
px
for font size.
Overall, your solution is good, Hopefully this feedback helps.
Marked as helpful0@DevDoc7Posted over 2 years ago@PhoenixDev22 Your feedback is very helpful. Thank you for your time
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