NFT preview card component

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 24 days ago

  Hi, this is missing some important html structure to make it an accessible and functional component.

  • anywhere you see a hover style in a design that’s assigned to you that something is meant to be interactive. That means you have to use an appropriate interactive element. On the image you’ll need to decide what that element should be based on what the behaviour would be on click for example if it would open a model or lightbox that’s a button but if it navigates like to a new page then that’s a link.
  • It’s also important to note interactive elements must have an appropriate accessible name that communicates their function. Links usually have text inside which acts as the accessible name. But images or icons inside controls can provide the accessible name through the alt description. Or those controls can have area labels.
  • I think you need to learn more about how and when to write alt text On images. Decorative images like those small icons must have empty alt attributes. Alt descriptions should never include words like image because they’re already on an Element with an image role.
  • Also note that heading order matters it has nothing to do with the size of text. I think it’s highly unlikely that this card would have an H4. Use an appropriate heading level for where this component would be placed on a page. Headings should go in hierarchical order, So imagine what headings would be before it And that will help you decide what level this should be.

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted 24 days ago

  I’ve also had a quick glance at the CSS and noticed these pointers. If you’ve not already had this feedback before, I think you will likely need to change these things on all previous projects as well as they are important foundational principles that will set you up well for the future:

  • Linking fonts in the HTML head is better for performance than using CSS imports.
  • get into the habit of using a full modern CSS reset at the start of the styles in every project you do. Andy Bell has a very good one. You can look up read about on his website and then use.
  • Font size should never ever be in pixels. Use rem So that use a preferences on font size can be honoured. https://fedmentor.dev/posts/font-size-px/
  • I’m not sure why you’ve got a section and then the card. There’s no need for that extra wrapper. You can make the card itself a section if you want it makes no difference. But as a general rule, don’t add extra HTML unnecessarily.
  • This card must not have a width. This is an important principle to get your head round don’t apply fixed widths to things except small images or icons. Instead, set a max with on the component in rem. This allows the component to shrink narrower if and when it ever needs to like on small screens. You can optionally give it a width of 100% But it should be full width already by default if it’s a block element.
  • Even more important than this card must not have a height. This is really really important. Setting height limits the height. It removes all flexibility and means that they component will not be robust. As soon as someone changes their font size or family or as soon as an author changes the content inside one of these cards, everything would break. There is no need to set a height at all. It is the browsers job to decide what height is needed based off the contents inside. Just remove the height altogether.
  • never add cursor pointer if you don’t have an interactive element.
  • try to get into the habit of using classes for styling and not element sectors as you’re doing now. Currently, the styles will break if you have to change the HTML which I have advised you to do so now you have to apply changes to both the HTML and CSS. Whereas if you were using classes, You can change the HTML elements independently with without breaking styling. Classes also have low specificity which is better for CSS maintenance and management. Stick to class, select as much as possible.
  • when converting to Ren values, it’s better to allow as many decimal places as needed (three or four is completely normal). Values like 0.95rem Equate to 15.2 pixels which is a very strange value for the browser to have to work with.
  • in some places you’re using margin where it would make more sense to use gap on the parent. When using gap, make sure you are confident in the unit you are choosing. It’s quite common to use CH unit or pixels even. It certainly not wrong, but just be aware that using em units Can be unpredictable because that is scaling off the current element or parent elements font size and compound so if you use it too much one elements em value can feed of the previous em which can feed off the previous em etc. If you want a property Value to scale when an end user changes their font size then rem Often makes more sense than using em. Personally, I only use em units in Specific circumstances like button padding or margin top on prose content like Headings and paragraphs in a blog

  0