Product preview card using HTML and CSS

Community feedback

• 

  Faisal Alharbi•330

  @LovelyFaisalPosted about 2 years ago

  Hi @jamilpl! You've done great 💪

  Here are some suggestions to improve your code:

  • Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.

  Click here for more information

  Good job, and happy coding!

  Marked as helpful

  0
• 

  Christian Prasetya•370

  @christian-prasetyaPosted about 2 years ago

  Well done finishing this challenge, even though there are some area of improvement can be made.

  1. Use the semantic HTML Instead of using <div class="container"> to wrap the whole content, supposed you can use <main class="container">. Because with the right and good semantic HTML, you can fix the accessibility of your website, especially for the user with visual impairment, as the semantic HTML will guide them to enjoy the content of your website.

  2. In your CSS file, try consistently use 1 unit measurement, like rem, or em instead of pixels. The rem and em will help you a lot when it comes to responsive design. So, in my opinion, you should stick with rem or em units.

  Overall it's nice and readable code, and also well-structured (apart from the div container wrapper), I see you trying to implement BEM, but try to look into about it further, you can learn more about BEM here.

  Can't wait to see another solution submission from you, cheers mate.

  Marked as helpful

  0