NFT-Preview Card Component Page with only HTML & CSS

Community feedback

• 

  P

  Remus D. Buhaianu•3,125

  @MiculinoPosted almost 3 years ago

  Good job on completing the challenge, Ali! The solution turned out nicely ;)

  It's nice you tried to get it as close as possible to pixel perfect, but make sure not to stress yourself out too much over this. As long as your solution respects the design guidelines and the solution is functional and responsive, you're good to go.

  I had a look through your code and I have a few suggestions / observations that I hope can be useful. In no particular order, here they are:

  1. To remove that accessibility issue from your report, use the <footer> element for the .attribution div. Usually, a footer is right at the end of a page, below the <main> element. In this context, you're building a card component, so it wouldn't make sense to have the <footer> inside the card.

  2. I noticed you've used the relative rem units for font size, but you've used pixels for the rest. Percentages and other relatives units such as rem and / or em are recommended for building modern, functional, and responsive interfaces. This will also allow more options for accessibility and for users in general.

  3. You don't need to use the "height:auto" property on an img element because the height is automatically calculated by the browser based on the element's width.

  4. As I've suggested to many others who've completed this challenge, you can use the ::after and ::before pseudo-elements to create the overlay effect. At the end of the day, it's up to you what approach you use, but I'd say it's worth a short.

  5. If you set the root font-size to 62.5%, that'll make it easier to use rem units since 1rem will be equal to 10px because 62.5% of 16 is 10px.

  6. You did a nice job of structuring your HTML code and using meaningful class names. I think you'd be ready to start using the BEM methodology, which I recommend you start looking into.

  Overall, you're definitely on the right path and with each challenge you complete, you'll learn new tricks and best practices to write even more awesome code!

  0

  ---

  

  Ali Sariyer•160

  @alisariyerPosted almost 3 years ago

  @Remus432 Thank you Remus sincerly for this feedback ,I got them. Happy to see these useful points. 👋🏻😊

  0