Skip to content
Submitted over 3 years ago

CSS/HTML NFT preview card component

AdelaSch•10
@AdelaSch
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi all, I'm a beginner and would appreciate your feedback as I feel like I'm overcomplicating things :)

Code

Please log in to post a comment

Log in

Community feedback

  • Naveen Gumaste•10,420
    @NaveenGumaste

    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.

    -> In img element must have an "alt" attribute is missing so add that (This for html issue)

    Keep up the good work!

    Marked as helpful
  • Anosha Ahmed•9,300
    @anoshaahmed

    hey good job on this challenge! your report above shows a few issues though:

    • wrap everything in your body in <main> OR use semantic tags! if you're using div right after body, then give them a role=""; however, it's a little frowned upon to use role right after body, so try to stick with semantic tags instead. you can read more about landmarks here

    • add alt="" to your <img> tags

    here is a list i made of accessibility issues & best practices

    hope this helps :))

    Marked as helpful
  • RTX3070•490
    @RTX3070

    Hi, there is nothing wrong in your code...too much Flexbox maybe. Take a look at my code if you want: https://github.com/RTX3070/fem-challenges/tree/master/nft-preview-card-component-main Bye : )

    Marked as helpful
  • Miguel Silva•490
    @migsilva89

    Hi Adelasch, looks like a very good job.

    Well done!

    In order to avoid errors from FrontendMentor app you should fix the img element, which must have an alt attribute.

    Keep going!

    Marked as helpful
  • Aadvik•1,250
    @Aadv1k

    You should consider adding a media query to make this work for smaller screens. So maybe you can decrease the width of the container and make the fonts a bit smaller. My solution is not perfect either, but consider checking it out

    Marked as helpful

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