Responsive product preview card

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there!👋 Here are some suggestions to help improve your code:

  • To better identify the main content of you site you will want to encase your entire component inside a Main Element.

  • The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.

  • This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:

  https://www.w3schools.com/html/html_images_picture.asp

  https://web.dev/learn/design/picture-element/

  • The name of the perfume , “Gabrielle Essence Eau De Parfum” is the most important content in your card so it should be wrapped in a Heading Element.

  • The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element and include a sr-only text explaining that this is the old price.

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  0
• 

  Danilo Alves 🎧•535

  @mizek1Posted about 2 years ago

  Oi Henrique, tudo bem? Parabéns pela solução, espero contribuir de alguma forma para o seu crescimento como desenvolvedor com o feedback abaixo.

  1. Recomendo dar uma olhada em HTML semantico, é importante começar a usar section, article e outras tags que vão dar um real significado ao seu conteúdo.
  2. Sempre que puder, adicione um texto no "alt" das imagens com um texto que descreva o que é a imagem ou o que ela representa dentro da página.
  3. Uma coisa que rapidamente entendi fazendo os desafios aqui do FrontEnd Mentor é que é importante começar a desenvolver as aplicações utilizando tamanhos relativos, como %, rem ou em, pois os layouts vão ser mais fáceis de desenvolver e provavelmente ficarão mais similares aos do design sugerido.

  0

  ---

  

  Henrique Silva•40

  @byhenriquesilvaPosted about 2 years ago

  @mizek1 Olá, muito obrigado pelo feedback, vou estudar um pouco mais sobre isso para me atentar a esses pontos na próxima prática.

  0