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

#fresh#accessibility
Gabrielaā€¢ 180

@PaulaR-05

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


Here is my solution to the NFT preview card component solution āœØ I still find it challenging to understand all the best practices for CSS/HTML, so ...any tips for it?

šŸ˜Š Happy to hear any feedback and advice. Thanks!

Community feedback

@Abdalrzakalsouki

Posted

Hello, that is look great

here some suggestions:

  • Accessibility:
  1. Heading should only increase by one, means you go from h3 to h4, not h3 to h5, this is important for SEO
  • HTML validations:
  1. use heading with article
  • General:
  1. importing the fonts in CSS is not really good for performance, unless you need a lot of customization, better to include it in HTML head
  2. this is optional but you can use some variables with CSS, it make modifying much easier
  3. do not put the custom CSS before Google fonts, this will reduce the performance
  4. you can minimize the code for better performance
  5. use a meta description

hope this is helpful, all luck

Marked as helpful

2

Gabrielaā€¢ 180

@PaulaR-05

Posted

@Abdalrzakalsouki awesome tips, thanks a lot :)

1
Sameer Singhā€¢ 560

@SameerJS6

Posted

"Nice one, buddy, but you forgot to add hover effects on the link tags (Creators Name, Price) and on the main image. You also forgot to add a cursor: pointer to some links. Always make sure to decrease the heading tag only by one. For example, if you have used h1, you should not use h4 directly on the page; it should only decrease one by one."

Thank You,

Marked as helpful

1

Gabrielaā€¢ 180

@PaulaR-05

Posted

@SameerJS6 Thank you :) I'm going to correct everything you said, thanks a lot!

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