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 component solution

solesβ€’ 40

@loicsolbes

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


Hi everyone ! Any feedback would be appreciated Thank you !

Community feedback

Travolgi πŸ•β€’ 31,420

@denielden

Posted

Hello Soles, You have done a good work! 😁

Some little tips to improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • add margin: 0 to the body to remove the scroolbar of browser
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • img element must have an alt attribute, it's very important!
  • You can fix the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution
  • Using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use div with border-bottom because this line is decorative
  • add transition on the element with hover effect
  • instead of using px use relative units of measurement like rem -> read here

Keep learning how to code with your amazing solutions to challenges.

Hope this help πŸ˜‰ and Happy coding!

0
Adebisiβ€’ 330

@adebisiabdussamad

Posted

Cheers soles πŸ₯‚ on completing this challenge.. .

An img element must have an alt attribute. This enables physical challenge to understand the image better.

-This is your code:<img src="images/icon-view.svg" id="view">

-This is how it should be:<img src="images/icon-view.svg" id="view" alt="" >the second one with the alt attritube. to know more about the alt attribute you can click this link Img element your code is really amazing...

hope you find this helpful...

Happy coding!!!πŸ‘ŒπŸ‘

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