Skip to content
Submitted about 3 years ago

📊 Stats Preview Card Component

Patryk Besler•355
@beslerpatryk
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

Hello everyone 👋

This is my "Stats Preview Card Component" solution using pure HTML and CSS. I used mostly flexbox for layout but there is also some CSS grid there. I had a lot of issues with getting the proper hue of the image but in the end, I got a satisfying result. How do you guys usually approach the problem of positioning in small projects like these? At what elements do you use responsive units and on which you use definite values?

As always if you see any issues with this project - let me know. Any criticism/comments can certainly help me learn and grow as a front-end developer. Thank you 😁

Community feedback

  • Jason Moody•300
    @MoodyJWPosted about 3 years ago

    As the others have said, good job on this challenge!

    A quick tip on the positioning of the text. Your design isn't quite centered, which you can do by adding align-items: center on the .card_content. The justify-content property you have on there now only centers the content on the main axis. With a flex-direction: column the main axis is a line from the top to the bottom; justify-content will only center along that line.

    Hope this helps. You did great, keep it up!

    Marked as helpful
    1
  • Dušan Lukić•1,660
    @dusanlukic404Posted about 3 years ago

    Hey Patryk, nice work! Congrats 😃

    I suggest you to take a look on your accessibility issues. Also, adding alternative text to your image element is very important for screen readers and search engine optimization. But, overall it is very nice solution

    Marked as helpful
    1
    Patryk Besler•355
    @beslerpatrykPosted about 3 years ago

    @dusanlukic404 HI Dusan! Thanks for the tips 😊 I remember watching Kevin Powell's video and he mentioned that there is no need for alt text if the image serves a purely decorative function. I thought it was the case for the project, hence the empty alt tags.

    0
  • darryncodes•6,370
    @darryncodesPosted about 3 years ago

    Hi Patryk,

    Great solution, pretty much a perfect match!

    A few thoughts from me:

    • generally you should use relative units if you want something to scale and absolute units when it doesn't need to scale. Here is a brief guide & another
    • you could clear down your accessibility report if you add one <h1> into your design. Remove <section> change <div class="card_container"> to <main class="card_container"> and make this <div class="attribution"> into <footer class="attribution">. This is useful info on semantics
    • overflow-x: hidden; you just need overflow: hidden; on your .card_container

    All the best!

    Marked as helpful
    1
    Patryk Besler•355
    @beslerpatrykPosted about 3 years ago

    @darryncodes Thanks a lot man! I will look into it for sure.

    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