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 responsive

Marcofa87 40

@Marcofa87

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

P

@srijanss

Posted

  • You have used landmark components like main and footer , however using article or section for card element would've been more semantic. Level 1 heading is missing for you page, so you can change h2 to h1 in your card
  • There are two links in the solution, but they were not accessible using keyboard. You can change the Heading and author name to link so that it takes default focus on keyboard Tab press
  • The solution differs a bit from the design, with some padding and margin fixes it will match the design
  • I followed BEM methodology to define CSS classes for this solution, its really helpful to write and manage modular CSS
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