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

@SOULBRODA023

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


while working on this project, I forgot my browser's zoom was on 80% and so i worked with that value ,styled according to that value . Afterwards i noticed it was not on 100%, and so whenever I zoom to 100%,content becomes bigger than viewport.

Community feedback

@VCarames

Posted

Hey @SOULBRODA023, some suggestions to improve you code:

  • You want to wrap your "NFT image", "Equilibrium #3429" and "Jules Wyvern" in anchor tags <a>. This is because they are meant to be links that lead the user to another part of a site.

  • The NFT Alt Tag description needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.

  • The Icons serve no other purpose than to be decorative; They add no value. There Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  • The Active States need to be Hover ones.

  • Your CSS Reset is extremely bare. You want to add more to it.

Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that already prebuilt.

https://www.joshwcomeau.com/css/custom-css-reset/

https://meyerweb.com/eric/tools/css/reset/

http://html5doctor.com/html-5-reset-stylesheet/

Happy Coding!

Marked as helpful

0

@SOULBRODA023

Posted

@vcarames Thank you, much appreciated. Alright , I will check them up.

I really appreciate the kind gesture.

0

@SOULBRODA023

Posted

@vcarames been going through your codes.... they look extremely perfect ... any tip for me on how to get close results?

0

@VCarames

Posted

@SOULBRODA023 @SOULBRODA023 A lot of them are made with old code, so I need to update them. I still have a lot to learn.

Honestly, just research as much as you can on Google and YouTube, join the Frontend Mentor Slack channel and ask question when your submitting your project.

I highly suggest signing up to stackoverflow. You can find pretty much any answer to your questions you may have.

Marked as helpful

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