NFT Preview Card Solution Using CSS Flex-Box & Grid

Community feedback

• 

  Daniel•330

  @daniel-web-developer

  Posted about 2 years ago

  First of all, you did a good job in getting your design similar to the one proposed by Frontend Mentor.

  I'm not a very experienced developer, so instead of saying you should do something, I'll say how I'd do it, because I'm not sure my way is the best way.

  1 - I wouldn't comment on almost every element. It may be a good idea because it seems to make it easier for others to understand the code, but unless you have an absolute beginner coder, I don't think there's need for that much detail. This video from CodeAesthetic "advocates" for codes without any comments at all. It's rather interesting and I recommend it.

  2 - I'd add hover animations. I know animations may sound really advanced and scary but these are rather easy. For instance, you could write on your CSS file:

  a{
      ...
      transition: color 300ms ease-in-out;
      
      &:hover{
          color: var(--cyan);
      }
  }
  

  This would gradually change (in 300ms) the color of the author's name, making it look cooler in my opinion. I recommend using a class instead of doing like I did in the example, since you may have multiple <a> elements and you probably won't want every single one of them to have the same behaviour.

  11

  Marked as helpful