Product card with HTML and CSS Solution

Community feedback

• 

  Adriano•38,330

  @AdrianoEscarabotePosted about 2 years ago

  Hi Anastasiia Pushkareva, how are you?

  Welcome to the front-end mentor community!

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
  • To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

  Example:

  body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  }
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0

  ---

  

  Anastasiia Pushkareva•10

  @AnastasiiaPushkarevPosted about 2 years ago

  @AdrianoEscarabote Thank you, Adriano! This is really great feedback! So helpful! You're doing amazing job! Thank you so much!

  0

  

  Adriano•38,330

  @AdrianoEscarabotePosted about 2 years ago

  @AnastasiiaPushkarev no problem, keep coding!!

  0
• 

  Danilo Alves 🎧•535

  @mizek1Posted about 2 years ago

  Hi, great job! I suggest that you search about <picture> when you have different conditions to show images, it works very well when you have this case where you need to show an image on desktop size and another image on mobile size. Try to use more semantic tags, like <section> or <aside>, they work like a <div> but can make your blocks more meaningful.

  Marked as helpful

  0

  ---

  

  Anastasiia Pushkareva•10

  @AnastasiiaPushkarevPosted about 2 years ago

  @mizek1 Thank you Danilo Alves. I really appreciate your feedback and I'll check all information about semantic tags and picture tag. Thank you again!

  1
• 

  cesar hernan ruscica•320

  @hernanruscicaPosted about 2 years ago

  hello AnastasiiaPushkarev. First of all, congratulations on coming back to the frontend world and welcome to this platform. The page looks great, very similar to the required design, although the vertical centering would be missing. About the code, don't forget to use the semantic tags, not only divs... the css code is also very good, I would only add that you can use "custom variables", to better control the possible different layouts. "Custom variables" would be very useful for making "night" and "day" versions. Overall the project is very well completed. Greetings and I hope you like the comment.

  Marked as helpful

  0

  ---

  

  Anastasiia Pushkareva•10

  @AnastasiiaPushkarevPosted about 2 years ago

  @hernanruscica Thank you so much! Your feedback is vry important for me! And I vas surprized how quick you replied!

  1