Product preview card component (HTML and CSS)
Design comparison
Solution retrospective
If you saw some errors or have any suggestion about something that can help me to improve this code and become a better programmer, please feel free to comment here
Community feedback
- @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 doborder-radius
). Na verdade, a borda está lá, mas a imagem está cobrindo. Pra arrumar é bem simples. Adicionaoverflow: hidden
ao.card
.
Espero que ajude! 😁
Fora esses detalhes, você fez um excelente trabalho!
Marked as helpful0@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@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 helpful0@brunohenriquedeveloperPosted 10 months ago@danielmrz-dev deu certo, estava usando o overflow na posição errada quando apliquei no body funcionou!
1 - Primeira: Por questões semânticas, não pule os níveis de título - comece com
- @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 helpful0@brunohenriquedeveloperPosted 10 months agoHi,@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
Please log in to post a comment
Log in with GitHubJoin 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