Responsive Stats Preview Card Component Using CSS Grid

Community feedback

• 

  Minh Khang Tran•510

  @MinhKhangTranPosted over 2 years ago

  Hi Shamil Ussain C, nice solution!

  If you want to use responsive images you can use picture and source with srcset tags in your html.

  For example:

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

  I found a helpful article at mdn. If you are interested you can read there more.

  I hope this helps. Keep going and have fun 🥰.

  Marked as helpful

  0

  ---

  

  Shamil ussain c•70

  @shamilussaincPosted over 2 years ago

  hey @MinhKhangTran , I have read the article and it found really useful. thank you for sharing it with me and thank you for your feedback.

  happy learning 😊

  0
• 

  teamie•470

  @tea-scriptsPosted over 2 years ago

  Great job completing the challenge. Just some points:

  • Nesting is one of the beautiful features of SASS but try as much as possible not to always nest too deep. Might become hard to find things.
  • Also try not to nest in the body. Keep only default styles in the body. Default styles like line-height, default color, default font-family etc. should be the styles in your body then you can overwrite them later outside of the body wherever you'd need to.
  • You might also want to consider using sematic HTML like article in place of the divs. For instance your card is considered an article in semantic HTML. Learn more about HTML Semantics here.

  Overall you did an impressive job. Keep pushing and happy coding 👍!

  1

  ---

  

  Shamil ussain c•70

  @shamilussaincPosted over 2 years ago

  Hey @coder-teamie , thanks for your feedback. it will help me to improve my CSS skills. i will try to follow these instructions.

  happy coding 😊

  1