Semantic Html, display flex.

Community feedback

• 

  Agnik Bakshi•480

  @Agnik7Posted over 1 year ago

  Hi, Congratulations on completing this challenge!!!🎉🎉🎉🎉 I have a few suggestions which might help you.

  • Replace the h2 tag with h1 tag to fix the accessibility issue.

  • For .boxContent, instead of defining width, define the max-width to make the card responsive.

  Replace
  .boxContent{
  width: 320px
  }
  
  With
  .boxContent{
  max-width: 320px
  }
  

  • By defining the height, you are making the height of the card constant. This means that even if there was no text, the card would take up that much height, thus wasting the space. By not defining height, the height of the card remains variable, i.e. , it can change depending upon the content inside of the card.

  • Try using relative units like rem and em instead of absolute units like px. This helps in better responsiveness, as px value remains constant throughout, and rem and em change according to the screen size. To know more, click here.

  Hope this comment helps you in your journey.

  Have a nice day!!

  0
• 

  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 heading in your html code.

  CSS 🎨:

  • Avoid using absolute length units px, especially for font-size and width properties, because they are not relative to anything else so that means they will always be the same size. Instead, you can use relative lengths like em or rem. The benefit of that last one is element which has that unit will scale relatively to everything else within the page, e.g., the parent container. You can dig up about it here.

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

  Happy <coding /> 😎!

  0