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

Responsive stats preview card component

@sezimarjr

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, well I had some problems with this project in terms of organizing the contents of the container, and I would like some feedback on how the code was written and how to improve it

All feedback is welcome

Community feedback

P
Alper 1,010

@adonmez04

Posted

Hi, @EvolxTV. I checked your code. It's a good solution. Keep coding. I have some suggestions for you.

1 - You should wrap .img-container in your section tags, because it's part of the section, not a independent area in your page (as a nested structure rule).

2 - You don't need to use span tag for .group-content's items. You can use strong and p for them. Span is an inline element, that's why you had to br tag inside of them. Keep it simple and just use the text formatting elements for texts.

3 - You can use your class name instead of element selectors to style the elements. Element selectors have the lowest specificity, it'll be a problem for a big project. I think you already know that, I just want to remind you. Keep it simple and just use classnames.

4 - You can use CSS Grid for the general page layout and flexbox for 1-dimensions document flow. It'll be easy to create the layout. You used the flexbox for this page layout, it's ok. Actually, I didn't do that, I failed honestly, congratulations to you for that but CSS Grid is so easy for the page layout.

I hope these will help you to improve your perspective. Keep coding. All the best.

1

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