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
Request failed with status code 502

Submitted

NFT card component

@wesen

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


This is my first CSS project (but I've been a web developer in the 2000s), I decided to create some vite/tailwind/react/typescript scaffolding I could reuse for other projects.

Community feedback

T
Grace 29,310

@grace-snow

Posted

Before anything else, check those report errors and fix the html being output in this project. To be honest, the html structure is quite poor at the moment, lacking semantics and foundational things I’d expect to see in a react project. For example

  • text never in divs or spans alone, should be using meaningful elements
  • anything that indicates interactivity like a hover effect always needs an interactive element. Those interactive elements then always need a clear focus-visible style
  • landmark elements are important, even on a tiny project like this, to give structure
  • knowing when and how to write alt text on images and when and how images should be hidden/ignored by bots and assistive tech is important

These are all really easy things to fix so no need to be disheartened or anything. Just make sure you don’t jump ahead until those foundations are nailed every single time.

Marked as helpful

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