Product preview card component (HTML and CSS)

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Fala @brunohenriquedeveloper!

  Seu projeto ficou show!

  Eu tenho algumas sugestões pra você aprimorar ainda mais:

  • Primeira: Por questões semânticas, não pule os níveis de título - comece com <h1>, depois use <h2> e assim por diante. Ao contrário do que a maioria das pessoas pensa, a diferença entre os HTML headings não é só sobre o tamanho e peso do texto.

  📌 As tags <h1> a <h6> são usadas para definir títulos em HTML.

  📌 <h1> define o título mais importante.

  📌 <h6> define o título menos importante.

  📌 Use apenas um <h1> por página - isso deve representar o título principal de toda a página.

  • Segunda: Ainda sobre HTML semântico, use <main> pro conteúdo principal ao invés de uma <div>.

  Essas mudanças de tag geram pouco ou nenhum impacto visual mas tornam o seu código HTML mais semântico e melhoram a otimização SEO e acessibilidade do projeto.

  • Terceira: A borda superior esquerda do .card está reta (sem a aplicação do border-radius). Na verdade, a borda está lá, mas a imagem está cobrindo. Pra arrumar é bem simples. Adiciona overflow: hidden ao .card.

  Espero que ajude! 😁

  Fora esses detalhes, você fez um excelente trabalho!

  Marked as helpful

  0

  ---

  

  Bruno Henrique•90

  @brunohenriquedeveloperPosted 10 months ago

  @danielmrz-dev, muito obrigado pelo feedback, com certeza farei essas auterações, por algum motivo quando eu uso o overflow: hidden o site desconfigura totalmente.

  1

  

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  @brunohenriquedeveloper

  Caramba... que esquisito. Testei no DevTools e deu certinho 🤔

  Enfim, de qualquer maneira, essa é uma boa opção pra esses casos. Não sei exatamente o que pode estar causando essa desconfiguração... até porque o overflow: hidden não tem todo esse poder 😅

  Marked as helpful

  0

  

  Bruno Henrique•90

  @brunohenriquedeveloperPosted 10 months ago

  @danielmrz-dev deu certo, estava usando o overflow na posição errada quando apliquei no body funcionou!

  1
• 

  Hugo Sanchez•270

  @HunigoleSanPosted 10 months ago

  Hello @brunohenriquedeveloper, congratulations on completing the challenge! You've applied your knowledge well, and I'd like to contribute some "concepts" and recommend avoiding certain things when adding CSS properties. Please take the time to understand these points as it will optimize your code and make you a better developer. 🚀💻

  First Tip: Universal Selector

  The universal selector, as we know, applies defined properties to all selectors. You're using:

  * {
      box-sizing: border-box;
      padding: 0;
      height: 100%;
  }
  

  This is good as you're resetting, but at the same time, setting height: 100%. While this works when a parent container has a fixed height and your ".card" container has that fixed height, it's not ideal because each child and grandchild element inherits this height property. While it may look fine to the client, it's considered bad practice from a developer's standpoint.

  Note: Removing this property will cause your ".card" class to extend beyond the screen. To fix this, you can add the min-height: 100vh; property to the "body" selector (this ensures it takes up 100% of the screen height and adjusts if its children exceed the screen height). Additionally, add margin: 0px to the universal selector to reset margins.

  In summary, the universal selector acts as a "reset" property, allowing control over every element in the browser. I recommend adding margin to control it yourself. Remember, each web browser has default padding and margin properties, and not resetting them means letting the browser control them, which may lead to inconsistencies across different browsers. It's a good practice to apply a reset to elements. I suggest studying "CSS reset" or "normalize CSS" for more information. 📚🔍

  Marked as helpful

  0

  ---

  

  Bruno Henrique•90

  @brunohenriquedeveloperPosted 10 months ago

  Hi,@HunigoleSan thanks for help me, I appreciate your the advice to recommend these CSS contents to study, I will fixed the code as you recommended me and looking for expand my knowledge in these topics.

  1