Product preview card component (HTML and CSS)

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!

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. 📚🔍