Pure HTML/CSS with Flexbox

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Hello

  Biggest feedback on this is to make sure you use the right html elements. It's essential that anything with a hover style in the design is an interactive element. And it is essential that interactive elements have focus-visible styles as well as hover styles. These need to be really clear and obvious as they are needed to help a keyboard user know where is focused on the page.

  Here are some notes made in browser:

  .card-img-overlay {
    note: needs to be an anchor tag element;
  }
  
  h2 {
    note: needs anchor tag inside, hover goes on that, not on h2;
  }
  
  .nft-details .nft-amount {
    note: text should never be in divs or spans alone. Use a meaningful element;
  }
  
  .nft-details img {
    note: is this a meaningful image? If it is decorative alt value should be blank;
  }
  
  .divider {
    note: there is a html element for this called hr;
  }
  
  .nft-creator .creator-img {
    note: not an accurate description in this alt text;
  }
  
  .nft-creator .creator-name {
    note: again this is an anchor tag;
  }
  
  main {
    margin: 1rem; // stops component hitting screen edges
  }
  
  .nft-creator span {
    note: should be a meaningful element like paragraph. The anchor tag for the persons name would go in here too;
  }
  
  

  0

  ---

  

  Skye Brown•110

  @skyebrownhPosted almost 3 years ago

  @grace-snow thanks for your feedback. I made some updates based on your suggestions. My only question is what qualifies as an "accurate description" for alt text? The .nft-creator .creator-img is an image of the NFT creator -- not sure how much more descriptive it can get.

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  @skyebrownh it’s a person. Even their name could be description enough, that’s the usual practice for avatars, sometimes it includes their facial expression or that it’s a headshot / face

  0