CSS/HTML NFT preview card component

Community feedback

• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  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

  1
• 

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  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

  0
• 

  RTX3070•490

  @RTX3070Posted almost 3 years ago

  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

  0
• 

  Miguel Silva•510

  @migsilva89Posted almost 3 years ago

  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

  0
• 

  Aadvik•1,250

  @Aadv1kPosted almost 3 years ago

  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

  0