Stat Preview Card

Community feedback

• 

  Mehdi•990

  @siavhnz

  Posted almost 3 years ago

  Hello Nien, Congrats on completing this challenge

  I like your comments on the CSS custom variable; I'll apply your approach in my upcoming solutions.

  I have some recommendations if you don't mind:

  It will be better to use landmark tags like <main> and <article> for accessibility instead of a bunch of <div>; More on this topic

  It's easier to start with mobile workflow and proceed to the desktop mode. To begin with the mobile-first design, you can use chrome dev tools. This also may help you

  Don't put your images in the CSS file; instead, use the below code with the appropriate media value.

  <picture>
      <source media="(max-width: 1023px)" srcset="./assets/images/image-header-mobile.jpg" />
      <source media="(min-width: 1024px)" srcset="./assets/images/image-header-desktop.jpg" />
      <img class="" src="./assets/images/image-header-mobile.jpg" alt="" />
  </picture>
  

  More on picture tag

  I hope this helps you.

  That will be great if you come to my solutions page and tell me what you think and which part I must improve.

  Happy coding

  11

  Marked as helpful