Responsive Stat Card

Community feedback

• 

  Abdo Achhoubi•330

  @abdoachhoubiPosted almost 3 years ago

  Hi there! Your design is great, I'd only recommend you to resize the card to make it smaller. And you still have some accessibility errors, but you can fix them if you take a course about html accessibility rules and ARIA landmarks. All the best!

  0
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! Trey Good Job on challenge

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body <main class="container"></main>

  -> Learn more on accessibility issues

  If this comment helps you then pls mark it as helpful!

  Have a good day and keep coding 👍!

  0

  ---

  

  Trey•290

  @willettoPosted almost 3 years ago

  @Crazimonk This was in my code. Please read people's questions and look at code before copy/paste responding. :)

  0

  

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  @willetto Oh my bad sry, i saw the report & posted the comment but you are giving me a ego reply without seeing the whole picture fine no problem here! Let's look at you code now shall we:

  -> Use of a strong tag! where span tag can be used is a unique approach, using span gives more control on styling, which seems a better option to me, i'm not against using strong tag tho .

  -> Put font-family: "Inter", sans-serif; in the body because it will apply to whole doc and font-family: "Lexend Deca", sans-serif; is used in only some selected places as per the original design.

  ->

         <div class="stats">
            <section class="stat">
              <h2>10k+</h2>
              <h3>companies</h3>
            </section>
            <section class="stat">
              <h2>314</h2>
              <h3>templates</h3>
            </section>
            <section class="stat">
              <h2>12M+</h2>
              <h3>queries</h3>
            </section>
          </div>```
  
  Here using unorderlist and `li` seems a better option & styling them is easy too.
  ->
  

  .stats { display: flex; flex-direction: row; }```

  Here you could have used justify-content space between or space evenly.

  -> As i can see in preview your card is not in center so try to fix that & size of the card

  ->

   <img
            src="images/image-header-mobile.jpg"
            alt="Women at a meeting table, one is coding, one is smiling."
          />
  

  -> A unique alt text i see :)

  -> ok now this is all i wanted to point out as i see they can be improved, let me tell you in no way i'm saying i'm a better dev then you. i am a rookie who is just spreading the knowledge that he has gained from this front-end mentor community so don't take this in negative way. Thank you

  I'm happy to receive any of your suggestion

  happy coding, Have a great day! 😀

  0