The Pricing Card Challenge

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • It is best practice to use, Classes for your naming convention as classes are reusable, making them ideal for CSS styling. IDs on the other hand, are not reusable and are mainly used for JavaScript.

  • To not only improve your HTML’s code but to identify the main content of you page, you will want to wrap your entire component inside the <Main> Element.

  • The “30-day, hassle-free money back guarantee” is not a heading. It should instead be wrapped in a Paragraph Element.

  • The button was created with the incorrect element. When users click on the button they should directed to a different part of your site; that Anchor Element will allow this to happen.

  • The “Why Us” list needs to be created using an Unordered List Element along with the List Items Element.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🍂🦃

  0
• 

  Adriano•38,390

  @AdrianoEscarabotePosted about 2 years ago

  Hi Ana, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  A good practice to center content is using grid or flex-box, avoid using margin or padding to make placements, use only in the latter case! we can do it like this:

  Flex-box:

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

  GRID

  body {
      display: grid;
      min height: 100vh;
      place-content: center;
  }
  

  The rest is great!

  I hope it helps... 👍

  0