Pricing Card Frontend Mentor Challenge (My Solution)

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  Greetings! you have done a great job 😎

  📌 Some accessibility and semantics recommendations for your HTML

  • To improve the semantics of your HTML, you can change your <div class="card"> to a <main class="card">
  • You need to add <meta name="viewport" content="width=device-width, initial-scale=1.0"> to your head
  • You need to add <meta charset="UTF-8">

  📌 Some suggestions

  • If you use reset CSS make sure it is above everything, otherwise you will be rewriting properties unnecessarily
  • Do not use % for width or height. Better use rem, em or px
  • font-weight do not accept values in px
  • It is not recommended to use id unless it is very necessary, instead you can use class
  • Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens
  • Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:

  body {
        padding: 20px;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
  }
  

  Marked as helpful

  0

  ---

  

  Mikaila Ysabel•90

  @m-ysabelbPosted 8 months ago

  Thanks for your valuable feedback! It only makes sense to me after a few months of learning coding 😅 @Blackpachamame

  1
• 

  realxnogga•150

  @realxnoggaPosted 10 months ago

  bat andito ka😆

  0