Product preview card component using Grid and Flexbox

Community feedback

• 

  P. Ricardo•2,370

  @pRicard0Posted about 1 year ago

  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

  ---

  

  Carlos Chaves•260

  @sircarloschavesPosted about 1 year ago

  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
• 

  Muhammad Imran•150

  @codewithimranPosted about 1 year ago

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

  0

  ---

  

  Carlos Chaves•260

  @sircarloschavesPosted about 1 year ago

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

  0

  

  Carlos Chaves•260

  @sircarloschavesPosted about 1 year ago

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

  0