Skip to content
Submitted almost 3 years ago

Stats Preview Card

Alfredo Britoβ€’250
@95Fredo
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

Any type of feedback is greatly appreciated!

Community feedback

  • Anosha Ahmedβ€’9,300
    @anoshaahmedPosted almost 3 years ago

    To avoid accessibility issues in the future, wrap everything in your body in <main> OR give role="" to the direct children of your <body> ... Read more here

    Good job! :)

    Marked as helpful
    1
  • Mojtaba Mosaviβ€’3,760
    @MojtabaMosaviPosted almost 3 years ago

    1- Stats is more semantically described as unordered list, always prioritize native html elements.

    2- You chose the quite an intuitive name "main-paragraph" but the right element, whenever your doing this I suggest you always ask yourself a simple question witch is what is this piece of content ? I sure you did it when choose the class name, if there isn't a native html element for that content then go with div.

    3- If there is multiple repeating propeties such padding-top and padding-bottom try to use shortand padding: top right bottom left; it simplifies your code and also reduces the volume.

    4- Try not use to many fixed widths because doing so works against reponsiveness and as consequence you end up writing a lot more styles to make it responsive.

    Keep coding

    Marked as helpful
    1

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