NFT Preview Card using HTML, SCSS, and A sprinkle of JS
Design comparison
Solution retrospective
This was a fun challenge to make! To implement the Viewing Overlay or the image I used JS and CSS-Animations. Not sure if there was a better way, but it still works! :D Any feedback? I'd love to hear it below!
Community feedback
- @PhoenixDev22Posted almost 3 years ago
Hello @Cooly-o-Cats,
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 around the image.
-
For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images.(alt="Ethereum Crypto Currency", alt="Clock Icon", alt="View Icon"
). -
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 -
Never start with
“Image of …” or “Picture of …”
It’s going to be obvious to either a person or a machine when something they're accessing is alt text. it should beJules Wyvern
.Tips for writing 'good' alt text -
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. -
You can use an unordered list
<ul>
forclass="small-info"
and in each<li>
, there would be<img >
and<p>
. great use of the<abbr> -
No need for
<div class="divider"></div>
, you can useborder-top
to theclass="author"
(there is <hr/> in html )- You can addbordr-radius
to the.overlay
. -
A general point - try to put classes directly on anything you want to style. Then you won't need as many nested css selectors.
Overall your solution is good , Hopefully this feedback helps.
Marked as helpful1@Cooly-o-CatsPosted almost 3 years ago@PhoenixDev22 Thanks so much! I'll be using this feedback in future projects. And might even update this one. :D
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