stats-preview-card-component {HTML/TailwindCSS}

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • Unless your company requires you to use a library , I strongly suggest you stay away from using libraries until you fully grasp the fundamentals of HTML, CSS and JS. By using a library, you are robbing yourself from actually learning how to code.

  • The images serve no other purpose than to be decorative; It adds no value. The alt tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • This challenges requires the use of two images 🎑 for different breakpoints. The picture element will facilitate this.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:📚

  https://www.w3schools.com/html/html_images_picture.asp

  • The statistics at the bottom are a list, so it should be built using an unordered List element.

  More Info:📚

  MDN <ul>: The Unordered List element

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  1
• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Hey, for the image, I did something like this, I hope that helps:

  <div class="image-container">
  img class="main-image" src="images/image-header-mobile.jpg" alt="">
  </div>
  
  .image-container {
    display: inherit;
    position: relative;
    width: 100%;
    border-radius: 0 10px 10px 0;
    background-color: hsl(277, 64%, 61%);
  }
  .main-image {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    border-radius: 0 10px 10px 0;
    mix-blend-mode: multiply;
    opacity: 0.75;
  }
  
  

  Marked as helpful

  1
• 

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  HEY KAMIL!

  To fix the error on your accessibility report, instead of using a div on .attribution, you should instead use a semantic element like footer, doing so will not only make your page more accessible for disabled people but you will also get rid of the error as well.

  IF THIS WAS HELPFUL IN ANY WAY, DON'T HESITATE TO MARK IT AS HELPFUL :)

  HAPPY CODING!

  Marked as helpful

  1