Responsive product card using CSS and HTML

Community feedback

• 

  Alex Garcia 🦝 Garcialexco•440

  @garcialexcoPosted almost 2 years ago

  Hello! Great job completing the challenge! 🔥

  You did excellent for claiming to be a beginner! There's a couple parts of your code that I might be able to help with:

  • Excellent use of comments and BEM as your naming structure, very easy to read and understand.
  • Instead of using div, try to use the most relevant semantic HTML. This helps screen readers and search engines make the most sense out of your website. Here is an article on the topic: https://dev.to/kenbellows/stop-using-so-many-divs-an-intro-to-semantic-html-3i9i
  • In your CSS, be careful with lines 32 to 70 and the Typography tweaks. Percentage based heights should already be usable on the website, since it's just a percentage of the parent element when you call it.

  Hope this helps, and keep up the great work! 👍 Happy Coding!

  Marked as helpful

  0

  ---

  

  Samriddh Singh•100

  @saketbytePosted almost 2 years ago

  @garcialexco OMG! Thank you soooo much for the in-depth review. I shall look into the points you have mentioned. This comment motivated me a lot to continue my learning. I will correct the shortcomings in my next attempt. Thanks again!!

  1

  

  Alex Garcia 🦝 Garcialexco•440

  @garcialexcoPosted almost 2 years ago

  @saketbyte Of course! Keep up the great work, it will keep making more sense! Also, I meant to say when you're writing resets and whatnot, you can get away with just:

  html {
      box-sizing: border-box;
      font-size: 100%;
      margin: 0;
      padding: 0;
  }
  
  *, *::before, *::after {
      box-sizing: inherit;
  }
  

  This will help keep your file data low 👍

  Marked as helpful

  1