Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

πŸ“Š Stats Preview Card Component

Patryk Beslerβ€’ 355

@beslerpatryk

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@MoodyJW

Posted

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

@dusanlukic404

Posted

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

@beslerpatryk

Posted

@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,430

@darryncodes

Posted

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

@beslerpatryk

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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