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

Product preview card component using Grid and Flexbox

@sircarloschaves

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


It was my first time using the grid layout in a project. I had some difficulty with the image.

Community feedback

P. Ricardo 2,370

@pRicard0

Posted

Algumas dicas HTML

  • Imagens decorativas devem sim ter atributo alt vazio e tals mas... você acha que a imagem do produto é decorativa? Eu não sei não hein, acho que talvez precise descrever a imagem no atributo alt.
  • Você deveria utilizar a tag <em> para o preço com o texto "$149.99". Essa tag significa emphasis. É usada para texto que você queira que receba ênfase. O texto vai ser lido com ênfase pelos leitores de tela.
  • Você precisa dizer se aquele botão é um botão normal ou um botão para envio de formulário, como a gente faz isso? Utilizando o atributo type. Quando não vem especificado, se não me engano ele é tratado como botão de formulário. Tem que botar type="button" para que ele se enquadre melhor nesse caso.

Acho que só isso mesmo, o resto ta perfeito. Eu costumava utilizar a tag <s> para o outro preço mas acho que <del> é melhor mesmo. Vivendo e aprendendo.

Marked as helpful

0

@sircarloschaves

Posted

Fiz as mudanças @pRicard0 !

  • Coloquei a <img> no lugar do <div> com o backgroung-image.
  • Incluí a tag <em>, porém além dela também incluí a <ins> que contrasta com a tag <del>. Semanticamente a tag <ins> remete a algo que foi inserido depois de algo ter sido deletado pela tag <del>.
  • Inseri também o atributo type no button.

Valeu pelos toques!

0

@codewithimran

Posted

You should make it responsive. Every design must be responsive.

0

@sircarloschaves

Posted

It is responsive, mobile and desktop. Open the devtools and change the vw @codewithimran

0

@sircarloschaves

Posted

@codewithimran https://prnt.sc/iI__rotE8h-z

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