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 using HTML and CSS (w/ Flexbox)

P
Sara Dunlopā€¢ 220

@Risclover

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


I think I've done really well with this one. I wasn't sure how to do the colored image and would appreciate some correct methods for that solution. What I am really proud of is my page's responsiveness, and I would love some feedback to see if I'm doing everything correctly or not. Thanks!

Community feedback

Yazdunā€¢ 1,310

@Yazdun

Posted

Hello Risclover and this looks great ! Here I have some suggestions:

  • Approach mobile first, It will make your life much easier

  • for stats, I think you'll be better off with something like :

<ul>
      <li>10k+<span>companies</span></li>
      <li>314 <span>templates</span></li>
      <li>12m+ <span>queries</span></li>
</ul>

In this case ul is more efficient IMO.

Overall great job and keep it up šŸ‘

0

P
Sara Dunlopā€¢ 220

@Risclover

Posted

@Yazdun Hi Yazdun, I appreciate the feedback and suggestions!

It's funny that you mention your first tip... I've seen people suggest that several times now - to do "Mobile first because it's easier" - and actually after I'd created my "Desktop mode", I remembered that advice. That's why, in my code, you'll see that I pretty much recreated my whole CSS in the "Mobile mode" @media block. It's because I was having a bit of trouble and was trying to think of it in the sense of starting from mobile. I mean I'd already finished my desktop version, so I wasn't going to start over, but when I started to think about it from a fresh point of view (rather than from the point of view of working from desktop to mobile), it was a lot easier. :)

Is the unordered list necessary? I never would have thought of that. When I look at the page, I see it as three separate div boxes of text, not a list. I understand using a list for horizontal navbars and such, but why this?

Thanks! <3

0
Yazdunā€¢ 1,310

@Yazdun

Posted

@Risclover No worries ā¤ ! It's not necessary, personally I find it easier to use ul in such cases, but you can take whatever approach that suits you better

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