Product Preview Card with HTML and CSS

Community feedback

• 

  Felipe Salazar•140

  @andressalazar08Posted almost 2 years ago

  @Aiqin-Gu Hi Aigin,

  Let me first congratulate you on submitting the challenge. This is the start of something big for you if you review and improve your solution. I've been going through your code and can suggest a few things.

  -Take into account the warnings that the Frontend Mentor platform tells you. For example, one of them is that you should not include a <p> tag inside an <h2> tag.

  -In the Readme of the repo you have a link that is not well related.

  -All the content is inside the body. for this reason the page extends to the entire screen. You must use the <div> tag appropriately to include the elements to be displayed there. It defines a division or a section in an HTML document.

  -In general I would recommend creating a section for the main card first. Manage to position it in the center of the screen and then, create within it two additional sections that allow you to manage the image and the description and price of the product.

  -I see that you mix the use of pixels and rem for units of length in your code. Always try to use relative measures like rem. In that case 1rem==16px which is the default value. If you need to make any changes in the units of length, it will be easier for you to work with relative units.

  -One aspect that will help you a lot in your projects with Frontend Mentor is the use of the definition of color or font variables in the root.

  :root {
    --main-bg-color: brown;
    --color-for-text:  hsl(0, 0%, 100%);
   }
  
  .one {
     background-color: var(--main-bg-color);
  }
  
  .two{
    color: var(--color-for-text);
  
  }
  

  You can also review the solutions of other members of the community to train and improve.

  For now you can start with these suggestions, I hope they are useful for you.

  Best regards, Felipe

  Marked as helpful

  1
• 

  Aiqin Gu•10

  @Aiqin-GuPosted almost 2 years ago

  Felipe, Thank you so much for your detailed suggestions on my code. I did not expect anyone would check my work and not even give any comments. Not just you read through my code, but you kindly shared your advice which I felt you are absolutely right about. Your feedback is a great help to me. Thank you very much.

  0

  ---

  

  Felipe Salazar•140

  @andressalazar08Posted almost 2 years ago

  @Aiqin-Gu Hi Aiqin, I'm glad it was helpful. This platform is designed to support each other, regardless of the level of experience we have. If you keep publishing projects, the feedback will surely arrive. Have a nice day and happy coding!!.

  0