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 card

@Abolude30

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


any review would be appreciated

Community feedback

Ferβ€’ 3,970

@fernandolapaz

Posted

Hi πŸ‘‹, perhaps some of this may interest you:

HTML 🧱, ACCESSIBILITY βš–:

  • Every page should have an <h1> to improve user experience and because it is one of the most important elements when it comes to SEO. Maybe 'Equilibrium #3429' in this case.
  • The 'image-equilibrium' is a meaningful image and in case the user can't see it, the alt text should give a description.

CSS 🎨:

  • The page content could be centered using Grid or Flexbox. For example as follows:
body {
min-height: 100vh;
display: grid;
place-content: center;
}
  • When there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, we should use a link or a button for the image (depending on what happened when clicking on it). Also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the <a> tag.

Please let me know if you want more info on any of these topics or disagree with something. I hope it’s useful πŸ™‚

Regards,

Marked as helpful

0

@Abolude30

Posted

@fernandolapaz thanks a lot, would work on it

0
Ferβ€’ 3,970

@fernandolapaz

Posted

@Abolude30 You are welcome πŸ™‚

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