Product Card Component

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Buenas Veronica, enorabuena por terminar el challenge, hiciste un buen trabajo!

  Con tu permiso me gustaría darte algunos consejos que pueden servirte para otros challenges.

  1. Primero que todo intentaría centrar bien el product card completo usando flex-box en vez de margins, te va a costar mucho menos y para ello solo tienes que darle al body un min-height de 100vh (para que ocupe toda la pantalla) y usar flex para centrar, algo mas o menos así (primero quitando todos los margins del div class 'card'):

  body {
    background-color: hsl(30, 38%, 92%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  Con eso ya te quedaría completamente centrado!

  2. Para la imagen del producto, en este caso sería mejor que la pusieras directamente en el html, como tienes que poner una para desktop y otra para mobile, en vez de usar el tag img, usa los tags <picture></picture> y dentro de ese tag pones dos <source> tags, uno con la imagen para mobile y otro para la imagen desktop, con esto puedes poner la imagen condicionalmente dependiendo del tamaño de la pantalla (como si fuese un media querie, pero en una imagen html), si tienes dudas del tag picture, aquí lo explican bastante bien!

  3. Finalmente te aconsejaría que siempre que tengas un botón, le agregues un cursor: pointer (para que se vea la manita de como que se puede pulsar) y si además le añades una pequeña transición tipo transition: all 0.5s ease; ya queda incluso con una apariencia más bonita y fluida!

  Espero que mi feedback te ayude en tus futuros proyectos, cualquier duda que tengas no dudes en preguntarmela que estoy aquí para ayudarte! Un saludo!

  Marked as helpful

  0

  ---

  

  Veronica Valdez•130

  @veronicajujuyPosted about 2 years ago

  @DavidMorgade Muchas gracias por tu comentario!! por supuesto que me ayuda a mejorar!! voy a poner en practica lo que me pones :)

  1
• 

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  Hi Veronica, how are you?

  I really liked your project, but I have some tips that I think you will like:

  1- document should have one main landmark. click here to read about it

  2- To centralize the content you could have done as follows:

  body { display: flex; align-items: center; justify-content: center; flex-direction: column; min height: 100vh; }

  try to avoid using margin to center the content.

  The rest is really good! Hope it helps...👍

  Marked as helpful

  0

  ---

  

  Veronica Valdez•130

  @veronicajujuyPosted about 2 years ago

  @AdrianoEscarabote Thank you for your reply!! i'm always struggle with flex-box :) I will definitely use what you suggest!

  1

  

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  @veronicajujuy I also had difficulty with flex-box at first auhauhahu but I guarantee that practicing it becomes very easy to understand.

  If you want to read a little about it, I'll leave a link here to a very cool and didactic article about flex-box:[click here](https://css-tricks.com/snippets/css/a-guide-to-flexbox /)

  There are also some games that help you a lot to fix and understand some concepts that exist in flex-box, I'll leave you two games that helped me a lot in the beginning:

  game 1 : click here

  game 2 : click here

  Marked as helpful

  0