Stats preview card component (HTML | CSS)

Community feedback

• 

  Venus•1,640

  @VenusYPosted 9 months ago

  Great work on this challenge! You did a good job with the styling and layout of the site.

  There are a few small tweaks you could make to improve the site though.

  I noticed that you used a <section> tag as a wrapper element for the image, which is semantically incorrect as <section> tags should almost always contain a heading. I recommend using a <div> tag if you want a generic wrapper tag.

  I would also recommend against setting a hard-coded width for the .container element as it causes issues with smaller screen sizes that don't fit the entire card.

  A very small thing that you could change is to include a padding on the body, especially on the top and bottom, so that there's space between the viewport and the card itself on smaller screen sizes. This improves the visual balance of the site, and therefore improves the user experience as well.

  Other than that, this is a very good solution! :)

  Marked as helpful

  1

  ---

  

  Erik Braga•180

  @ErikBragaPosted 9 months ago

  @VenusY finally understand what I was doing wrong, thanks bro

  0

  

  Venus•1,640

  @VenusYPosted 9 months ago

  @ErikBraga No problem! I'm glad I could help.

  I would appreciate it if you could consider marking my comment as helpful. :)

  0
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 9 months ago

  Olá @ErikBraga!

  Seu projeto está ótimo!

  Eu tenho uma sugestão sobre o seu código que pode te interessar:

  📌 Você pode usar a tag <picture> quando tiver diferentes versões da mesma imagem 🖼. Usar a tag <picture> ajudará a carregar a imagem correta para o dispositivo do usuário, economizando largura de banda e melhorando o desempenho. Exemplo:

  <picture>
      <source media="(max-width: 460px)" srcset="{caminho da imagem desktop aqui}">
      <img src="{caminho da imagem mobile aqui}" alt="{texto alternativo aqui}">
  </picture>
  

  Espero que isso ajude!

  Fora isso, excelente trabalho!

  1