single price grid component with HTML5&CSS flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello there! 👋

  Congratulations on completing this challenge! 🎉

  I have some feedback on this solution:

  • Accessibility
    • Don't use header for the card content since it is not a full webpage. This is one chunk of content that all belong together and in a real website would sit with other content.
    • Put the attribution or the footer outside the main element.
    • b tag has been deprecated. Use strong tag instead.
    • The Monthly Subscription section should not be a ul.
    • I think the Sign Up button should be a link instead a button. What do you think it's going to happen if the user the click the button?
    • Always specify the type of the button to prevent the button from behaving unexpectedly (like submitting).
    • The Why Us section should be ul instead of a paragraph. It would make sense if it's read as a list instead of as a sentence.
    • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
  • Styling
    • To make the card perfectly in the middle of the page, you can make the body element as a flexbox container.

  /**
   * 1. Make the card vertically center and
   *    allow the body element to grow if needed
   */
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* 1 */
  }
  

  • Best Practice (Recommended)
    • Remove the commented code. If another developer (it can be you in the future) wants to improve this solution, he/she might get confused about whether or not the commented code should be used or deleted.

  That's it! I hope this information is useful! 😁

  Marked as helpful

  1

  ---

  

  adilido99•90

  @adilido99Posted over 2 years ago

  thank you so much for all these informaions and tips, i am sure that if i apply what you've said it will improve my code and make it better. i thank you again for your feedback@vanzasetia

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @adilido99 You're welcome! Glad to help! 😄

  0