3-column preview card component solution

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 4 years ago

  👋Hi Víctor Mato!

  👍 Good job on completing your first challenge!

  I have some feedback to improve this solution:

  • You need to make the h2 all uppercase by using CSS text-transform property.
  • The body should have grayish background too.
  • You should wrap all your content except the attribution one inside a main tag.
  • For the attribution, I recommend to use footer instead of a div.
  • I recommend to use woff2 or woff (Web Open Font Format) instead of the .ttf (TrueType). It's recommended because, the woff has smaller size which mean it can improve the loading speed of your page. I recommend to convert all your *.ttf to *.woff (to support Internet Explorer 9 and above) and *.woff2 (for all modern browsers) using this Free Font Converter.
  • I recommend to always make all elements have box-sizing: border-box; as your common reset. It will prevent all elements to add initial width when you add padding to them.

  *, *::after, *::before {
    box-sizing: border-box;
  }
  

  • Use rem or sometimes em for everything that you usually uses px. Using px will prevent the user to control the size of your page.
  • Try to use CSS Custom Property, to prevent you from keep repeating the same thing. It's also make it easier to organize things.

  That's it! Hopefully this is helpful!

  01