Code review - Stats preview card component
Guys, I would like you to give your opinion on the best way I should have used to build this component. I struggled for two days to make something that worked, even if it was full of 'hacks'.
Github repository: https://github.com/sircarloschaves/stats-preview-card-component
Live site: https://sircarloschaves.github.io/stats-preview-card-component/
GitHub
GitHub - sircarloschaves/stats-preview-card-component: The challeng...
The challenge was to build a Stats preview card component so that users can view the optimal layout depending on their device's screen size - GitHub - sircarloschaves/stats-preview-card-com...
Stats preview card
A website that I cloned from a challenge from the Front End mentor website. It is a study and practice site.
6 Replies
For the record: I'm just a beginner who's practicing as much as I can so I can learn how to make layouts the easiest way. I've been trying to do it 100% on my own, the little things that I really can't make work I ask for help.
Hi, @Chaves . Do you need help yet?
I think it's really good! 🙂
It's pretty similar to how I'd do it as well
I really like how you added
aria-hidden="true" to the picture section
This is a really small, knitpicky thing and it's really up to preference too but I'd almost make the h1 inside a header and put the stats in a footer
You see headers/footers inside a lot of card components from what I've seen, I think if you look up gumroad and you make an account their product/services cards are similar structure
The mobile responsiveness is a bit wonky; I'm not sure what the design specs are, but I'd want to make the overlay and the content sections both the same width and then just collapse into a single column
I'd also make the stats not a single column unless the screen size is really small; you can experiment with decreasing the flex gap dynamically with clamp()
Also be careful with logical properties (eg margin-block-start) as they're not supported in older browsers iirc
I should also say that flex gap isn't supported in Safari <2020 too (but I use it anyway because I'm lazy 😂 )Thanks friend, I'll fix things. I thought I should use margin-block-start for writing mode reasons, since margin-top would not automatically adjust to a different writing mode, like in the Arabic language.
I have a lot of difficulty laying out the columns, as I'm still learning grid layout
Hey bro, okay? In fact, I just wanted suggestions for best practices that I could use in the code.Hey bro, okay? In fact, I just wanted suggestions for best practices that I could use in the code.
and as I don't have much experience with layouts, I still have difficulty with these components that use a grid, as I struggle to create the image part
It really upsets me that I can't do these simple layouts the way I should, it really discourages me despite not giving up.
You gotta really do a lot of css to get comfy with it
yea that's a good idea just be aware it's not fully supported though it's pretty damn close, i think it might be like 92 or 93% of all browsers
https://caniuse.com/css-logical-props 94%
So really it can be safely used except in IE so if you don't care about IE then feel free
