Skip to content
Submitted over 2 years ago

Stats Preview Card Component Challenge using HTML and CSS

Esther•20
@estaarrr
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This is my second challenge, trying to practice my HTML and CSS skills. I had fun with this project, especially with grid technique and attempting to make a responsive component. I would appreciate any feedback! Thank you for your time.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hello, Esther! 👋

    Congratulations on completing this challenge! 🎉

    I have some feedback on this solution:

    • Accessibility
      • All the page content should live inside landmark elements (header, main, and footer). By using them correctly, users of assistive technology navigate the website easily. In this case, wrap all of it with main tag,except the attribution. The attribution should be lived inside the footer.
    <body>
  <main>
    page content goes here...
  </main>
  <footer class="attribution">
      attribution links goes here...
  </footer>
</body>
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
    • Next time, when you write alternative text to images, make sure that it is not hyphenated. Alternative text for images should be descriptive and meaningful.
    • Use CSS to uppercase the text. The uppercased word in the HTML will be spelled by the screen reader (spelled letter by letter).
    • Make the stats element as ul and wrap each stats item with li instead of using div.
    • The stats number should not be heading. The content below it is too small. You might find it helpful if you think of a heading like a title on a document.
    • I don't see any px unit in the CSS, well done! 👍
    • Styling
      • Make the card in the middle of the page vertically by
        • Remove the margin-top from the .card element
        • Add min-height: 100vh; to the body element
      • I had done this only with flexbox. It is not a complex layout so there's no need for using grid.
    • Best Practice (Recommended)
    • Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain).

    That's it! Hope you find this useful! 😁

    Marked as helpful
    1
    Esther•20
    @estaarrrPosted over 2 years ago

    @vanzasetia

    Hello Vanza, Thank you so much for the detailed and informative feedback! I went back to my codes and edited them accordingly; as with classes and id's, I will start practicing them on my next project. If it wouldn't be too much of a bother, please take a look at the edited version once again please. Thank you once again. I am so glad to have joined this community, where people build each other up. I am already learning so much by doing hands on and receiving feedback from people like you.

    1
    Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    @estaarrr I took a look at your updated solution, and everything's looking better now. Great job on the updates! 👍

    0
  • Abdul•8,540
    @SamadeenPosted over 2 years ago

    And for responsiveness you should use the max-width on your card.. . Your card is also not centered you can do that by using by displaying flex and align items and justify-contents to center.. then set your margin to 0 auto

    1
  • Abdul•8,540
    @SamadeenPosted over 2 years ago

    Hey! Esther!! Cheers 🥂 on completing your second challenge.. . Here are my suggestions 1.You should use <main class="container"> instead of <div class="container">. 2. Go down orderly when you are using the headings h1 down to h2 down to h3 and so on. 3.You should use underscore(_) instead of dash(-) when naming your classes

    . Regardless you did amazing.. Happy coding!!!

    1
    Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    @Samadeen Why do you recommend naming classes using underscore instead of dash?

    0
    Esther•20
    @estaarrrPosted over 2 years ago

    @Samadeen

    Hello Abdul,

    Thank you for your feedback. I am so glad that I found this community. I am already learning so much. I will apply your feedback to my codes. Happy coding!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord