NFT-Card-Preview Component using css Grid and FlexBox

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted 6 months ago

  I'm afraid this has lots of problems currently.

  • it's unreadable for me due to poor colour contrasts that aren't like the design. I'll add an image to discord so you can see what I see.
  • all content should be contained within landmarks. This component belongs inside a main landmark. It does not have a header. It's just one card that would go inside main, it's not a full Web page.
  • the image has a hover style in the design. That tells you it needs to be wrapped in an interactive element like a link or button (which one you choose depends on what you think would happen on click of it). That element will need an accessible name to make clear what the action of that button does or where the link goes.
  • the heading also has a hover style so needs a link in there.
  • those icons are decorative and you've correctly left their alt blank. But that means it makes no sense to use figure and figcaption. You can't have a caption to no content and when an image is decorative its like no content. The price and time left are just paragraphs.
  • similarly the bottom of the card doesn't make sense as a figure either.
  • the author name is meant to be a link, not the text before it.
  • to make the main image hover work once you've updated the html have a look at the tutorial post I've written on the resources channel on discord.
  • in the styles get into the habit of including a full modern css reset at the start of the styles in every project you do. Look up Andy Bell's modern css reset.
  • it's really important you don't limit the height of elements that contain text, including the body. Instead of height 100vh, use min-height instead so it is allowed to be taller than the viewport when necessary (like on landscape orientation phones).
  • this component mustn't have a width either. It can have a width 100% but not a fixed width. Use max-width in rem units instead. This is another important distinction. Using max width allows the card to be narrower if it ever needs to be, and using rem units means the layout will work even when users change their default text size.
  • it's very bad to Increase css speed as you're doing with these complex css selectors. The styles will become extremely difficult to maintain on larger projects writing styles like this. Keep css specificity as low/flat as possible and stick to single class selectors as much as possible. For example, use .view instead of main .view.

  04

  Marked as helpful