Stats Preview Card Component using HTML and CSS (w/ Flexbox)
Design comparison
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
- @YazdunPosted about 3 years ago
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@RiscloverPosted about 3 years ago@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@YazdunPosted about 3 years ago@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 better0 -
Please log in to post a comment
Log in with GitHubJoin 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