Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Preview Card component solution (React/TypeScript/Tailwind)

#react#tailwind-css#typescript
Rachaelβ€’ 200

@rachaelhrlm

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Is there anything I can do better?

Community feedback

P
Dave Quahβ€’ 670

@Milleus

Posted

Hi there o/

Nice work! I like the clever use of Tailwind's group utility class for the image hover πŸ‘

I do have one minor feedback and that is to use <button> or <a> for the interactive (hover-able/focus-able) elements instead of applying hover directly to the h1, div or p. Using a <button> or <a> element naturally makes the website much more accessible for screen reader / keyboard users because these elements are "tab-able" by default.

This challenge doesn't explicitly state that whether the interactive elements are links or trigger a pop-up, but it does seem like they are meant to (to me at least). For example,

  • "Hover-able image" could be a button to pop up a bigger image, or a link to a bigger image.
  • "Hover-able Equilibrium #3429" could be a link to a page with more details about this NFT.
  • "Hover-able Jules Wyvern" could be a link to the user's profile page.

Something for your consideration perhaps. Happy coding! :)

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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