status preview card

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Thapa, It looks good!... Here are some suggestions:

  • Document should have one main landmark, Contain the component with <main>.

  <main class="container-fluid body-main">
     <div class="container">
        //...
     </div>
  </main>
  

  • Page should contain a level-one heading, Change h2 to h1 You should always have one h1 per page of the document... in this challenge, you will use h1 just to avoid the accessibility issue that appears in the challenge report... but don't use h1 on small components <h1> should represent the main heading for the whole page, and for the best practice use only one <h1> per page.

  • Heading levels should only increase by one, Make sure you are using the headings in order... Ordered headings make it easier to navigate and understand when using assistive technologies.

  • Use min-height: 100vh; Instead of height: 100vh; This will make your layout more responsive when the card's height becomes taller than the viewport height.

  • I suggest you put the status of the preview card component into the list item to add more semantics to your project, Div's don't do much for semantics but a list is much more meaningful..:

  <ul class="stats-preview__stats">
     <li>
        <span class="stat-number">10K+</span>
        <span class="stat-name">Companies</span>
     </li>
     <li>
        <span class="stat-number">314</span>
        <span class="stat-name">Templates</span>
     </li>
     <li>
        <span class="stat-number">12M+</span>
        <span class="stat-name">Queries</span>
     </li>
  </ul>
  

  Hope this help!... Keep coding👍

  Marked as helpful

  1

  ---

  

  Pankaj Thapa•150

  @thapa14Posted over 2 years ago

  @Bayoumi-dev thank you for your response. it helped me a lot. I didn't knew what is the accessibility issue for and why i am getting it. But your response is a huge help for me ...

  Thank You..

  0
• 

  Amindu Liyanaratne•160

  @AminduSasankaPosted over 2 years ago

  Good job. The easiest way to design fully responsive website is starting with mobile site design. Then move on to the desktop site with CSS media queries. And I suggest some changes to the design.

  1. Make the font size little bigger as the original design.
  2. Always use different different stylings to headings and paragraphs. e.g - make paragraph opacity 0.9
  3. Use flex-direction property to control flex direction.

  Marked as helpful

  0