Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats Preview Card Component using FlexBox

@isabellatressino

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Adriano 37,030

@AdrianoEscarabote

Posted

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

@VCarames

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

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