Cool Product preview card

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @KelvinMvungi, some suggestions to improve you code:

  • It is best practice to have separate files for your HTML and CSS code. It helps in keeping your code organized and easier to maintain.

  • 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.

  • The only heading in this challenge is the name of the perfume, “Gabrielle Essence Eau De Parfum”. The rest of the text should be wrapped in a Paragraph Element.

  • For the perfume description, you want to add a line-height to better match the FEM example.

  • Wrap the prices in a container and use display: flex along with align-items: center to have them perfectly aligned like the FEM example.

  • Your button has the incorrect hover color applied. You want to look at the “style-guide” to see what the correct color is.

  • Implement a Mobile First approach 📱 > 🖥

  With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

  Happy Coding! 👻🎃

  0

  ---

  

  Kelvin Mvungi•140

  @KelvinMvungiPosted about 2 years ago

  @vcarames Thanks for the feedback. The alt tags I accidentally deleted them and I said it was okay haha! (but I knew it was a bad practice). I added the line height for the top "perfume" text but it wouldn't work, I don't know why? About prices may be I saw them with a incorrectly, I thought they were not aligned, the original price was somehow upper than the discount price. I will check the style guide for the button. Thanks for the important tip to implement mobile first as it is the common these days and I also think it is easier to do that first.

  0
• 

  Julián Andrés Montes García•150

  @JuliMontesPosted about 2 years ago

  @KelvinMvungi _ El diseño responsivo es importante para los componentes webs, realmente no es difícil, se trata de usar las media query para definir tamaño de pantallas y así ir ajustando el diseño en los elementos que se requiera. Anímate a realizarlo y completar el reto.

  0

  ---

  

  Kelvin Mvungi•140

  @KelvinMvungiPosted about 2 years ago

  @JuliMontes Tu hablas ingles? Yo no comprender mucho el espanol.

  0