my solution

Community feedback

• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Hey there, your solution looks great!

  You might also consider making it more responsive for mobile devices by adding a media query like @media (max-width: 500px) { .your-container { flex-direction: column; ...rest of the container code} } and avoid using position absolute.

  Hope you find this feedback helpful!

  Marked as helpful

  0
• 

  C H A R A N 🎯•2,670

  @0xabdulPosted over 1 year ago

  Hey there ! 👋 Congratulations you finished the Statspreview card component...🎉

  • Some suggestions for you improve your code🤔

  Html 🏷️:

  • for Accessibility reports using the non-semantic elements (or) semantic elements..
  • semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..
  • non- semantic elements : <div> , <span> ect ...
  • for easy way to clear the Accessibility reports using non semantic elements Ex :

  <div class="container" role="main">
  //Whole html code wraping the div tag named "container"..📍
  </div>
  

  • Whenever using the img tag should be put the alt Attribute✅ and mention the alt discription Ex : <img src="logo.jpg" alt="logo"></img>
  • I Hope it's useful for you and wating for your next project ❤️
  • Happy Coding 😃

  Marked as helpful

  0
• 

  Kamil•260

  @WuczekPosted over 1 year ago

  Great job!

  You didn't make use of image file image-header-mobile.jpg in images folder

  I would recommend to change your <div class="image-container"> into :

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

  so that your image file automatically changes based on certain width, you can read more about <picture> tag here: <picture> tag

  0