Stats preview card component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

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

  • The purpose of the Main Element is to identify the main content of your page. It is not the container of you component. After the main element, you want add a container to wrap you separate components in.

  • The statistics component is a list of statistics, so it should be built using an Unordered List along with a List Items Element.

  • The image 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.

  • Your are missing the Source Image inside the Picture Element.

  • To get the image to look like the FEM example, you are going to want to use the Mix-Blend-Mode along with the Multiply Value and include a Opacity with the value of 0.8.

  Code:

  img {
    opacity: 0.8;
    mix-blend-mode: multiply;
   
  }
  

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  Marked as helpful

  0

  ---

  

  Hassan Mourad•50

  @Mourad3rdPosted about 2 years ago

  @vcarames I didn't get the main element part here so if the container is not the main element here what is the main element?

  and when do I know that the image need an Alt tag or not

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @Mourad3rd

  Keep the Main Element where it currently is. After the Main add an “Article Element” this will now be you new container. Inside that new container, move all the components stuff inside of it

  Marked as helpful

  0