Single Price Grid Component

Community feedback

• 

  Saulius K.•560

  @TH3RIV

  Posted over 2 years ago

  Hi, @Nunamniroi!

  Your card is nearly done, it could use a few adjustments:

  • You should be using landmarks. This case your card is your main content, so it should be wrapped between main tags. Makes it easier to understand the code and helps screen-readers to figure out your main content.
  • There is no need to use header element as it is part of your card. Just wrap your whole card in a container element:

  <div class="card">
      <div class="first-section">
           Section code...
      </div>
     <div class="second-section">
           Section code...
     </div>
     <div class="third-section">
           Section code...
     </div>
  </div>
  

  • Your button does not need a <p> element, just use text of whatever you want it to say.
  • You should not limit the width of your body, you can always limit the size of your elements within the body.
  • You can limit the width of your card using max-width property and you can center your card within the page using flexbox on your body element.
  • To round the card corners you use border-radius property. And if it's not showing, you use overflow: hidden.
  • Try to avoid using px values and use rem values instead.
  • Try using custom CSS properties for your projects, it is great habit to develop.

  Hope this helps! You got this!

  10

  Marked as helpful