NFT-preview-card-component-challenge-hub

Community feedback

• 

  Zineb Boutaa•750

  @zineb-BouPosted almost 3 years ago

  Hi, there your solution looks good,

  some suggestions that may be helpful:

  • You can use the <picture/> tag for the card image, this will allow you to set different images based on the screen viewport instead of using <div/>

  • Since the image is just purely decorative and there is no alt provided, use aria-hidden: true to hide it from the screen reader.

  • The same thing applied to the icons, we don't want the screen reader to read it since it's purely decorative.

  • You need to add the alt for the avatar image(it's an informative image), the screen reader will read the image source path if we don't add any alt text.

  • Don't use <hr> for decoration purposes, it's used for indicating if there is a transition between headers and paragraphs, you can use only CSS to draw the line using the <div> border and play with card padding to make the left and right space.

  Marked as helpful

  0

  ---

  

  Harsha Bajaj•30

  @bajajharshaPosted almost 3 years ago

  @zineb-Bou Hey, thanks for the suggestions. For the horizontal line it didn't strike me to use borders but now it makes more sense. I'll take care to add alt for informative images.

  1
• 

  Bilal•130

  @BilalMrPosted almost 3 years ago

  Hi, You did a great job, congratulations! I would just recommend to center the card vertically, also you can give that class .hove a cursor:pointer; and finally a bit of margin to right for the small icons (.eth img and .days img).

  Apart from that, all looks good! keep it up for the next challenges :)

  Marked as helpful

  0

  ---

  

  Harsha Bajaj•30

  @bajajharshaPosted almost 3 years ago

  @BilalMr Thankyou..I'll do the necessary changes.

  0
• 

  Neil Khatri•620

  @nkhatri7Posted almost 3 years ago

  Hey Harsha,

  Just a couple of things that I think will be helpful:

  1. Try to use semantic HTML, so this would be using tags such as <main> and <footer> in your code. It's better for SEO (search engine optimisation) so it's a really good thing to have in your code. For this challenge, it would be good to wrap the card within <main> tags and the attribution within <footer> tags.
  2. Watch out for the indentation in your HTML file, it looks like your tags aren't indented properly. This can make it hard for yourself and others to understand your code.
  3. You should always have a <h1> tag, this is important for SEO once again and indicates what the most important text on a page is.
  4. To center your card, you can use absolute positioning in CSS:

     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     

  5. Try to avoid using px as your unit in CSS and use more relative units such as rem.

  Hope this helps :)

  Marked as helpful

  0

  ---

  

  Harsha Bajaj•30

  @bajajharshaPosted almost 3 years ago

  @nkhatri7 Thanks for the suggestions. I'll definitely make us of them. :)

  0