Product Preview Card

Community feedback

• 

  Boris•2,850

  @mkborisPosted 4 months ago

  Hi Supa-Thobile2 great job, some suggestions

  • Responsive images are handled using html elements and techniques such as the picture element. Using CSS to hide and show images (when given images to display according to screen sizes) is not part of the best practices
  • Font-size should be written in rem not px. This article explains it better Why font-size must NEVER be in pixels.
  • Media queries should be defined in rem or em not px.
  • All content should be wrapped within landmarks. Wrap a footer tag around the attribution.
  • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset.

  Hope this helps

  Marked as helpful

  1

  ---

  

  Supa-Thobile2•100

  @Supa-Thobile2Posted 4 months ago

  @mkboris Thank you! I am in awe of the masterclass in frontend wisdom you have given.

  I will work on all the points highlighted and hopefully make all the changes before Monday.

  I appreciate your feedback. It shows great wisdom Sensei!

  1
• 

  P

  Lo-Deck•2,790

  @Lo-DeckPosted 4 months ago

  Hi well done for this challenge.

  You can use picture tag to display different image depending on the size. Here a link : MDN.

  <picture>
    <source media="(max-width: 799px)" srcset="your path" >
    <source media="(min-width: 800px)" srcset="your path" >
    <img src="your path" alt="your description" >
  </picture>
  

  And another link you can check out and validate your HTML 3WC.

  You need to use em or rem insead of px.FreeCodeCamp

  Hope to be helpful.

  Marked as helpful

  1

  ---

  

  Supa-Thobile2•100

  @Supa-Thobile2Posted 4 months ago

  @Lo-Deck Thank you for this. I am more of a Mcguyver coder, so sometimes I bend the rules but you just showed me the legal way not to pay my taxes!!

  I will go through the resources and work with them to improve the project.

  I appreciate your feedback!!!

  0