Submitted almost 2 years ago

Stats Preview Card Component

Leo Santillan• 80

@leocsdev

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

バレンタイン 😈• 64,190

@VCarames

Posted 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

Leo Santillan• 80

@leocsdev

Posted over 1 year 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.

バレンタイン 😈• 64,190

@VCarames

Posted over 1 year 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.

Hassia Issah• 50,670

@Hassiai

Posted 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

Leo Santillan• 80

@leocsdev

Posted 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.

バレンタイン 😈• 64,190

@VCarames

Posted 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.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord