Product preview card component

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  HTML 🏷️:

  • I need to address a minor semantic improvement which may help accessibility devices to properly announce the old price of the perfume.

  ---

  • Currently the old price is not being properly announced, you have used span element for that with text-decoration-line: line-through css property.

  ---

  • Instead of customizing span there's actually a native semantic html element which comes handy in these situations. it is del element

  ---

  • So you can use like this <del>$169.99</del>

  ---

  • These are the tips which improves the accessibility in real world situations.

  ---

  • If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1
• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Olá Vitoria, primeiramente, parabéns pelo seu projeto, ele está perfeitamente bem feito, se assemelhando muito ao design proposto, parabéns.

  Gostaria de dar algumas dicas relacionadas ao HTML do seu projeto, a estrutura está em partes correta, você poderia ter usado sua <main> como você utilizou a <section>, tanto que aparentemente você não está usando o main, o que faz com que tenha uma redundância no seu HTML.

  Sobre a parte semântica, essa sua tag <section class="container"> faria mais sentido se fosse um <main>, pois nela está contida o conteúdo principal da página.

  Outra trecho seria <div class="picture"> faria mais sentido ser uma <figure> pois é uma imagem diretamente relacionada ao conteúdo da página.

  Edit: Havia esquecido de mencionar que o lado direito do seu card está com a cor errada, a cor certa é branco.

  Já o seu CSS está impecável, parabéns. Caso algo que eu tenha dito não tenha ficado claro ou tenha ficado confuso, por favor, comente aqui embaixo que tentarei ajudar da melhor forma possível.

  Marked as helpful

  1

  ---

  

  P

  Vitoria Fonseca•230

  @vitorianfonsecaPosted 7 months ago

  @R3ygoski Thanks for the advice, the background color was wrong because I had changed something directly on github and I didn't confirm that it was ok. I already fixed it :)

  1
• 

  P

  Arnold Limberg•410

  @CreativeLogicPosted 7 months ago

  Your background color for the right side should be white.

  Marked as helpful

  1
• 

  ricky•140

  @thekid2005Posted 7 months ago

  very well done, good job! :)

  Marked as helpful

  1
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 7 months ago

  Hello @vitorianfonseca!

  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="(min-width: 768px)" 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

  0