Implementation of the pricing card challenge

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello @Praanshuu, congratulations on completing another project. It turned out very well, although it's misaligned, it's clear that it's well done.

  To align it to the center, you can use this snippet in your CSS:

  body {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  This will perfectly center the card.

  I'd like to make some suggestions regarding your HTML. It's well structured, but it lacks some semantics, which is important not only for SEO but also for accessibility. Here are some parts that could be improved:

  • <div Id="card">: This could be replaced with <main>, as it contains all the main content of your page.
  • <div Id="top">: This could be replaced with <header>, as it contains the introductory part of your page.
  • <div Id="bottom">: This could be replaced with <article>, as it's independent from the rest of the content and is also self-explanatory.

  Another tip, regarding accessibility, is to avoid skipping heading levels, as this can cause some accessibility issues. It's always correct to start with an <h1> and progress downwards. So, changing your heading tags to <h1>, <h2>, and <h3> will make your page more accessible. W3School - Heading

  Once again, congratulations. If you have any questions, please feel free to ask, and I'll do my best to help.

  0