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

Pixel perfect without Figma is hard

@Jorggyh

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Oi Jefferson, tudo bem? Parabéns pelo desafio!

Acabei de ver o preview da sua solução e tenho algumas dicas pra você:

1.Não é aconselhável usar IDs como seletores de CSS porque se outro elemento na página usar o mesmo estilo/semelhante, você terá que escrever o mesmo CSS novamente. Mesmo que você não tenha mais de um elemento com esse estilo agora, ele pode vir mais tarde.

2.A sua solução ficou muito boa, a estrutura html o design também, mas se você quiser melhorar ainda mais, você pode usar a tag <picture> para simplificar seu código e segurar as duas imagens dentro do html. Usando essa tag, você nem precisará de media query para mudar de uma imagem para outra dependendo do dispositivo (mobile ou desktop), basta configurar tudo dentro do html.

Caso você ainda não conheça essa tag, aqui na documentação explica certinho como configurá-la: **https://www.w3schools.com/tags/tag_picture.asp **

👋 Espero que essas dicas tenham sido úteis e continue codando!

Marked as helpful

0

@Jorggyh

Posted

@correlucas sim, se eu estivesse trabalhando numa página onde tivesse mais de um card, eu usaria class pra estilizar todos de uma vez, mas como é só um acabei usando id, não faz diferença pra este projeto, mas sua dica é boa, talvez seja uma boa prática ir me acostumando a usar class.

Quanto a tag picture conheço sim, aprendi no curso em vídeo do Guanabara hehe, inclusive eu comentei isso no README deste projeto, mas preferi fazer pelo CSS mesmo.

Obrigado pelo feedback!

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