Stats Preview Card Component using FlexBox

Community feedback

• 

  Adriano•38,390

  @AdrianoEscarabotePosted almost 2 years ago

  Oi Isabella Tressino, tudo bem?

  Tudo está muito bom, mas tenho uma dica sobre as duas imagens que ficam alternando o display entre resoluções!

  Para fazer isso de uma forma facil e direto no html podemos usar a tag picture:

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

  adicione isso no seu html para fazer o teste!

  se quiser ler sobre -> link

  o resto está ótimo!

  espero ter ajudado... 👍

  Marked as helpful

  2
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  • It is best practice to use, classes for your naming convention as classes are reusable, making them ideal for CSS styling. IDs on the other hand, are not reusable and are mainly used for JavaScript.

  • The only heading in this component is the “Get insights that help your business grow” everything else will be wrapped in a paragraph element.

  • 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

  • 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/

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

  Happy Coding!🎄🎁

  Marked as helpful

  0