Frontend Mentor project - product-preview-card

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 8 months ago

  Hello @Leticiafbm!

  Your project looks great!

  I have a suggestion about your code that might interest you:

  📌 You can use the <picture> tag when you have different versions of the same image.

  Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.

  Example:

  <picture>
      <source media="(max-width: 460px)" srcset="{desktop image path here}">
      <img src="{mobile image path here}" alt="{alternative text here}">
  </picture>
  

  I hope this helps!

  Other than that, excellent work!

  Marked as helpful

  2

  ---

  

  P

  Dmitry Papka•30

  @doojinPosted 8 months ago

  @danielmrz-dev I think it's the opposite. media="(max-width: 460px)" is not for "desktop image path" for sure. Probably you meant min-width instead of max-width.

  0
• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 8 months ago

  Olá Letícia, parabéns pelo seu projeto, ele ficou muito bem feito e semelhante ao design proposto.

  Sobre a parte de trabalhar com ícone, você poderia ter usado também uma tag <img/> para adicionar o ícone de dentro do botão, bastando apenas aninhar da forma desejada. Exemplo:

  <button class="add-to-cart">
      <img src="./images/icon-cart.svg" alt="Cart icon"/>
      <span class="button-text">Add to cart</span>
  <button/>
  

  Nessa ordem, você não precisaria usar o flex-direction: row-reverse;, já que a imagem veio antes do <span>.

  Em relação ao border-radius, você não precisa necessariamente usar border-top-right-radius: 0px;, uma forma que talvez fosse mais simples, seria usar dessa forma: border-radius: 20px 0 0 20px, isso é uma shorthand do border-radius, mas saiba que a forma que você fez não está incorreta, é apenas uma outra forma de fazer o que você fez que talvez possa ser mais simples para você, e isso também pode ser usado com margin, padding e gap. Caso queira ver mais sobre isso aqui vai um link: MDN - Border Radius.

  border-radius: 20px 0px 15px 10px;
  

  Esse trecho acima é equivalente a esse outro trecho:

  border-top-left-radius: 20px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 10px;
  

  Recomendo utilizar a unidade de medida rem ao invés de px para o tamanho da fonte. O rem se adapta ao tamanho de fonte escolhido pelo usuário no navegador, proporcionando uma melhor experiência de leitura e mais acessibilidade.

  A respeito de semântica HTML, você ao invés de usar uma <div> no div.main-container, você poderia por exemplo ter usado a tag <main>, pois isso daria mais semântica ao seu HTML. Caso queira ver mais sobre semântica de HTML, aqui vai um link: W3School - Semantic HTML.

  Caso tenha ficado alguma duvida, por favor comente abaixo que tentarei ajudar da melhor forma possível.

  E novamente, parabéns pelo seu projeto e também pelo seu esforço e dedicação para aprender, continue praticando e bons estudos.

  Marked as helpful

  1

  ---

  

  Letícia Fernanda•120

  @LeticiafbmPosted 8 months ago

  @R3ygoski

  obrigado pelas dicas! Me ajudou bastante

  1