NFT preview card component using SCSS

Community feedback

• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted over 3 years ago

  Hello @abassum2507 ,

  I have some suggestions:

  • By using landmark elements , you can improve the navigation experience on your site for users of assistive technology . So wrap the content of the body (card) in<main>, a< footer >for the attribution.

  • It's invalid html to wrap a heading element in an anchor tag. Swap those around so the anchor is inside the heading.

  • Try flexbox properties and a min-height 100vh on the main to center the card.

  • The eye image doesn't really need to be in the html, you could do it with css.

  • The images don't need filled alt. They are decorative images, so alt attribute should be left intentionally blank. You can optionally addaria-hiddenor role presentation to ensure the images are always ignored by screen readers EXCEPT avatar read up about how and when to write alt text

  • You can simply use unordered list <ul> to wrap <div class="box__price">and in each list item would have <img > and <p>.

  • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. Using px won't allow the user to control the font size based on their needs.

  • It's rarely a good practice to set heights on elements . Let the content dictate how tall something needs to be.

  • Use max-width instead width: 350px;

  hopefully this feedback helps.

  00

  Marked as helpful
• 

  Rio Cantre•9,650

  @RioCantre

  Posted over 3 years ago

  Hello there! Nice job making this project. Viewing your solution I would suggest the following for you...

  • Adjust the top margin on the main content into margin-top: 5rem;
  • Same with the hover icon, adjust the properties for example...

  .box__img2 {
    position: relative;
    top: 25px;
  }
  

  • Wrap the box with specific tag like main and attribution with footer tag
  • Use a validator to check your solution before submitting

  Hope this helps and keep up the good work!

  00

  Marked as helpful