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

Simon 40

@SimonMartorano

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


  • I used a CSS reset I found on google, I don't know if that's the best one.
  • I first made the mobile version, but when scaling the browser to desktop it still looked good, so I did not change any sizes on desktop version. Is that ok?

Community feedback

Sandro 1,170

@sandro21-glitch

Posted

Hi Simon

Here are some suggestions for your code

HTML

Use semantic elements:

Make sure to use appropriate HTML5 semantic elements such as header, footer, article, main, nav, etc. to give structure to your content.

Alt text for images:

Make sure your images have descriptive alt text to help users who are using screen readers or have slow internet connections.

Use CSS to separate the presentation of your content from your HTML. This will make it easier to maintain your code and make changes to the design of your website.

Consider using preconnect to speed up loading time by establishing a connection to external resources before they are needed.

CSS

You could use CSS Custom Properties to store the width and max-width of the .card class, this way you can easily change the width and max-width values in one place.

You could use CSS variables for the font-families and weights instead of hard-coding them.

Consider using media queries to adjust the styles for different devices.

Otherwise, it looks great.

Good Luck

1

Simon 40

@SimonMartorano

Posted

@sandro21-glitch Thank you for your feedback, gonna update the code with your suggestions. 😀

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