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 - Mobile first dev with Sass

#sass/scss

@norman02

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


Feed back welcomed!

Community feedback

@pikapikamart

Posted

Hey, nice work on this one. The overall layout looks great, but when I try to go at 1050px below, the card just occupy almost the screen's size. It will be better to just let the original size be the same for all screen size. The reason is, if you imagine this as a real site, there would be lots of other nft as well and you don't want each of it to occupy the screen when the user's screen goes smaller right.

For some other suggestions, here are some:

  • On this one, you didn't need to use header and footer. A primary header usually contains the topmost part of the site where it includes the site-logo, navlinks and other controls. footer contains the bottom-most part includes the site-logo and other links or cta as well. For this, the main would be better if it was used in the .card selector instead of div.
  • Adding an extra aria-hidden="true" on the eth-icon and the clock-icon so that they will be skipped by screen-readers.
  • Person's name could be using their name as the alt value since it is already present.
  • Lastly, just addressing the layout size when changing the screen size into a smaller one.

Aside from those, great job again on this one.

Marked as helpful

2

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