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 Component Card

karlkodes 20

@karlkodes

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


A redo of the nft card component challenge. On my first attempt I had everything up until it came to putting the blue overlay of the image, so I had a friend who was an experienced developer help me with that part. I decided to do it again from scratch to get a better understanding and was able to learn a lot from having outside help and doing it a second time myself. This is that second attempt, the first attempt with my friend's changes is under "nft" on my github page. Shoutout to @jon-luke

Community feedback

Rio Cantre 9,690

@RioCantre

Posted

Hello there! Good job with this project. Viewing your solution, I would suggest the following for you..

  • Adjust the font size for the .nft-tag p into 22px, it's better to use h1 in this part
  • Instead of using table, alternative is unordered list ul and li or p and span and use Flexbox for the alignment

Hope this helps and Keep it up! Cheers!

0
Naveen Gumaste 10,460

@NaveenGumaste

Posted

Hay ! Good Job you made it look nearly perfect to the preview

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body like it should be your container

-> For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc

-> But use header tag only once in main heading element.

Keep up the good work!

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