Skip to content
Submitted over 1 year ago

Product preview card component using Grid and Flexbox

Carlos Chaves•260
@sircarloschaves
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Code

Please log in to post a comment

Log in

Community feedback

  • P. Ricardo•2,370
    @pRicard0

    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
  • Muhammad Imran•150
    @codewithimran

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

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