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 built with React, TS, and Styled Components

#react#typescript#styled-components
P

@AdamMescher

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Gustavo 200

@Gushigustavo

Posted

Your designer is great, I would like to give you two tips, the first is that the hover in the image is having an abrupt entry, you could improve by adding a transition so that the entry is smoother, the second is about accessibility, try to involve your design into semantic tags that will help both the programmer and the browser. Let's code!!

Marked as helpful

1
P

@AdamMescher

Posted

Appreciate the nudge for accessibility testing before submission.

Found a great article with a really simple snippet to use what I already have with one extra npm module to automate axe testing with jest as a test case. No association beyond stumbling and finding with Google - https://maxrozen.com/automatic-a11y-testing-with-jest-axe

I certainly need semantic tags when rendering the application.

The h1 accessibility issue is a bit of a mislead, IMO. I'm not sure that if I were to import this component into an already existing project that I would want that many h1 tags. Perhaps I'm way over thinking it.

And yes, CSS transition looks much better than without.

Appreciate your feedback.

1

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