Responsive product-preview-card

Community feedback

• 

  Vinicius Henrique•590

  @viniciusshenri96Posted almost 2 years ago

  Olá Andressa, Parabéns por finalizar o projeto 😄 algumas dicas para você:

  HTML:

  Quando for ícones apenas decorativos pode deixar o alt vazio, e coloca aria-hidden="true", Isso pode melhorar a experiência dos usuários de tecnologia assistiva ao ocultar: conteúdo puramente decorativo, como ícones ou imagens, é bom para acessibilidade: Leia mais aqui

  <button class="right-button">
      <img src="./images/icon-cart.svg" alt="" aria-hidden="true">
      Add to Cart
  </button>
  

  E quando for definir um valor no alt como nesta imagem você pode ser mais especifica em relação a imagem, por exemplo: "Imagem com um frasco de perfume e algumas folhas" Texto alt bem escrito e descritivo melhora a experiência do usuário.

  <div class="left">
        <img class="left-img" src="./images/image-product-desktop.jpg" alt="Imagem com um frasco de perfume e algumas folhas">
  </div>
  

  CSS:

  Não precisa definir o <p> como inline, você ja tinha definido o elemento pai que é o .price como display: flex e ele ja deixa o elemento inline, deixando um elemento do lado do outro, sempre tente deixar seu CSS limpo eliminando códigos desnecessários, com o tempo você vai aprendendo a refatorar.

  .prices {
      margin-top: 20px;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
  }
  
  

  // aqui você pode apagar
  .prices p {
      display: inline;
  }
  

  Continue praticando!!

  Marked as helpful

  1