Stats preview card component

Community feedback

• 

  Lukáš Říha•225

  @lukasrihaPosted about 1 year ago

  Hi girldocode!

  Very nice attempt! Couple of remarks:

  In your html file, you are preconnecting to couple some origins multiple times. This should be sufficient:

   <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">
  

  Also you are downloading the whole Lexend Deca family, including font-weights you don't use. I recommend not doing that, as in bigger projects, it can increase your loading times unnecessarily. :)

  You should also look into responsive images - In the design there are two images provided - with mobile and desktop suffixes. You should always use images which are as small as possible, as to not load unnecessarily large images, since that can increase loading times. You can load different images based on your window width using either art direction (<picture>) element or using the <img> tag with the srcSet attribute. You can read more about that here.

  Other than that, very well done! Happy hacking :)

  Marked as helpful

  1

  ---

  

  girldocode•260

  @girldocodePosted about 1 year ago

  Thank you so much @lukasriha for helpful comment. I will look forward to make these changes in upcoming projects.

  0
• 

  Michael Dos S. S. Rodrigues•160

  @MegeladoPosted about 1 year ago

  hey woman, how you make image change color ?

  0