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

First solution using CSS Grid

@alb1nut

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


Code Updated. Please help me out by reviewing it. Still not responsive for mobile and web, your opinions on that and any other suggestion will be welcomed. Thank You.

Community feedback

Bob 105

@robakerson

Posted

Few quick changes I would make:

For the numbers on bottom you used H4, I would use H2 as those numbers are not big enough for you.

Also, your h4 & p elements have default margins that are pushing your numbers too far from the description. You want "10k+" and "Companies" to be a little closer. I would remove the bottom margin from those H elements and reduce the top margin on the p elements to fix that.

I would add a "line-height" property to your p elements as well to add space between lines on your middle paragraph. Maybe "line-height:2"?

Compare the edges of your boxes to the example, you want rounded edges so you are looking for the "border-radius" property. I would experiment with that property to figure out how it works and how you could use it to round the edges of your components.

Marked as helpful

1

@alb1nut

Posted

@robakerson Thank you for viewing my solution. Very helpful. I will make the changes

1

@alb1nut

Posted

@robakerson Please i have updated my code kindly review thanks

1
Bob 105

@robakerson

Posted

@albertnutifafa Looks like Grace is already giving you a lot of help. She's better at this than I am, I would heed her advice!

1
T
Grace 30,770

@grace-snow

Posted

Hi

Even if you struggle with the responsiveness, try to get this looking much closer to the design with the fonts, spacings, sizes etc if you can

Marked as helpful

1

@alb1nut

Posted

@grace-snow Please i have updated my code kindly review thanks

0
T
Grace 30,770

@grace-snow

Posted

@albertnutifafa this is still quite a way off the design I’m afraid. Slow down and be methodical.

First address the html. Those h2s don’t make sense as headings. They are numbers to be read with the word. How would you write this content in a normal document? There would be 3 bullet points I expect. That means this must be an unordered list with three bullets, one for each stat

Next start to address …

  • removing brs. Use margin for vertical spacing
  • capitalisation. Use text transform not html capitals
  • font family. Follow the style guide
  • mobile styles. Only one media query needed
  • max widths and/or flex basis for flex children; or with css grid let the grid template choose how big it’s children should be
  • border radius
  • spacing
  • look up blend modes for the image and make display block

Hope this helps

0

@alb1nut

Posted

@grace-snow Thank you. I really appreciate the help . I will slow down and do the change to get it right.🙏🏻

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