Stats Preview Card Component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  • Along with a blank alt tag your “image” should also have a aria-hidden=“true” to fully hide 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

  • Never do this as it creates more issues than solve:

  html {
    /* 0.625*16px = 10px (1rem) */
    font-size: 62.5%;
  }
  

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

  Happy Coding!🎄🎁

  Marked as helpful

  1

  ---

  

  Leo Santillan•80

  @leocsdevPosted almost 2 years ago

  @vcarames thank you. I've refactored my code based on the comments here. However, I've also read some articles about the font-size set to 62.5% in the html element. Can you tell me more about how it creates more issues? Also, is there any alternative to this solution or best practice to quickly calculate the sizes? I really appreciate any help you can provide.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @leocsdev

  If you go to the FEM Slack and search font-size: 62.5%; you find countless answers on why not to use it.

  You will use rem / em instead.

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <header class="card__header"> with <div>.The header tag should be above the main tag not within the main tag. for more on semantic html visit https://web.dev/learn/html/semantic-html/

  Use the color that were given in styleguide.md.

  There is no need to give .card__header position: relative; and a margin value.

  Add mix-blend-mode: multiply; and opacity: 0.7; to get the overlay color.

  Hope am helpful. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Leo Santillan•80

  @leocsdevPosted almost 2 years ago

  @Hassiai, thank you for your comment. It helps me to correct the color of the image. I forgot to remove the position: relative declaration, I was using an overlay div before but later I decided to use the opacity and background-color properties. The margin-bottom property is to separate the image and h1 in the mobile version.

  As for the header tag, I think it's fine as per this article https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header

  Thanks again for the feedback. It really helps me to correct the issue.

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @leocsdev

  This is a component, so the header element is not needed. The MDN website explains, that it is generally for the intro of a website or an article/section.

  The same for the footer, it is not needed.

  0