Blog card with hover effect

Community feedback

• 

  Antoine Delalande•130

  @HamsolovskiPosted 3 months ago

  Hello ! Very nice work, you're near pixel perfect :)

  You wanted tips on bad practices you might have, here's what i've noticed :

  • css : don't use values when naming your variables (yellow, etc.), but instead, use a term describing the role of the variable (main-color, bg-color, title-font) etc. That way, if someday, you have to change the value of your variables, you don't have to rename it and avoid having a variable "yellow" containing an hex code for red.
  • html : avoid div if you can, there are a lot of other tags you can use : article, section, header, footer, etc. divs are not very good from a SEO point of view.
  • try to store your svg data into a dedicated file : it makes your code cleaner. Good habit to have : if you have one element or function you might want to use elsewhere : put it in a separate file.

  Some other tips :

  • you can put other values than colors in your variables : font, size, etc.
  • try to avoid fixed height and width for element whose size might change : your element will better adapt to its content.
  • you can use numeric values in font-weight : 100, 200, etc. It allows you to be more precise than using values like bold, etc.

  Hope it helps :)

  Very nice work on the transition btw !

  Marked as helpful

  0

  ---

  

  arpan62825•60

  @arpan62825Posted 3 months ago

  @Hamsolovski Thanks a lot for the tips! Will keep them in mind and definitely use them in the future. Really appreciate it!

  0

  

  Antoine Delalande•130

  @HamsolovskiPosted 3 months ago

  @arpan62825 You're welcome :)

  0