Responsive-product-card-preview

Community feedback

• 

  Francisco Carrillo•5,540

  @frank-itachiPosted over 1 year ago

  Hello there 👋. You did a good job!

  I have some suggestions about your code that might interest you.

  HTML 📄:

  • The heading order is important in the html structure so try to always start your headings and/or titles with an <h1> tag and then you can increase by one if you need to use more headings in your html code. So replace the <h1>Eau De Parfum</h1> by the <h2> tag.
  • You could also use the <picture> tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here
  • Put the <div class="attribution"> out of the <main> tag and wrap it inside the <footer>.

  CSS🎨:

  • You can use grid or flexbox to center the content no matter the viewport size. Using grid you can do the following:

  body {
  min-height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
  }
  

  With flex:

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

  • You can also use the text-transform: uppercase; property to make the perfume word appear in upper case even though you typed it lower cause in the HTML file.

  I hope you find it useful! 😁😁 Above all, the solution you submitted is great👌!

  Happy <coding /> 😎!

  Marked as helpful

  0

  ---

  

  Erwin Sendaydiego•100

  @EFS1008Posted over 1 year ago

  @frank-itachi thank you so much for the help sir. :)

  0