Product Preview Card using SASS and Mobile-First

Community feedback

• 

  Bernardo Poggioni•5,390

  @R3ygoskiPosted 7 months ago

  Olá mais uma vez Murilo, parabéns por mais um projeto concluído.

  Sobre sua metodologia BEM, ela está correta em partes. Veja trecho a seguir:

  <section class="card__info">
      <h3 class="card__category">Perfume</h3>
  

  O correto, é que o <h3> fosse na verdade card__info__category.

  Agora uma dica sobre semântica, essa sua <div class="card">, poderia ser um <main>, isso devido a nela estar o conteúdo principal.

  Agora sobre uma <figure> ele está correto, mas dentro dele, notei que você utilizou dias imagens, tem uma outra forma que é até melhor, se eu já tinha dado essa dica antes, já peço desculpas, mas é a de usar <picture>, que dessa forma você consegue manipular qual imagem vai aparecer de acordo com o tamanho de tela, veja um exemplo:

  <picture>
    <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
    <source media="(min-width:465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
  </picture>
  

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

  E uma pergunta off-topic, o que o urso faz 🤔?

  Marked as helpful

  0

  ---

  

  Murilo Matt•200

  @MuliroMattPosted 7 months ago

  @R3ygoski como sempre valeu pelas dicas, muito legal essa tag <picture>, já vou atualizar meu código.

  Respondendo sua pergunta sobre o urso, ele panda

  1