Responsive Single Price Grid Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Sudharshan-24, congratulations on completing this challenge!*

  Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

  Improve the semantic replacing the <div> used for the four cards and use instead <article> that is a better tag, remember that <div> doesn’t have any effective meaning is just a block elements, so for big block of elements use semantic tags.

  This a good resource to understand more about semantic tags: https://www.w3schools.com/html/html5_semantic_elements.asp

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Sudharshan S•90

  @Sudharshan-24Posted about 2 years ago

  @correlucas Hereafter I follow to use semantic tags. Thank you, Lucas :)

  0
• 

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted about 2 years ago

  Hello, Sudharshan S Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

  • You might want to use semantic tags like the <main> to wrap your code, instead of div. like

  <main class="box">
  <footer></footer>
  </main>
  

  This would help improve accessibility.

  • add the below code to the body. It will center everything

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

  • remove margin: 100px auto; from .box it's not necessary anymore.

  • add favicon <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

  I hope it will work. Happy coding.

  Marked as helpful

  0

  ---

  

  Sudharshan S•90

  @Sudharshan-24Posted about 2 years ago

  @faha1999 Thank you for your suggestion Kawsar.

  0