
Stats Preview Card Component 🎯 [ Bootstrap -- reactjs -- css3]
Design comparison
Solution retrospective
Hello, Frontend Mentor Community,
This is my solution for the Stats Preview Card Component.
The layout was built responsive via a mobile-first workflow approach.
Feel free to leave any feedback and help me to improve my solution (or) make the code clean!
Community feedback
- @grace-snowPosted almost 2 years ago
Hi
This looks pretty broken for me on mobile because you've limited the height to 100vh. Never ever limit height on elements that contain text in particular. Changing to min-height should fix the problems. (I'll add images to discord so you can see the breakage)
Looking at this, you really do not need bootstrap at all. All that's doing is adding loads of bloat. Your css would hardly be much different without it.
In my experience, when learners lean on bootstrap all it does is slow down learning and bloat their solutions. Practice without it and you can try it later really easily once you've embedded the foundational skills of html css and js
Other feedback
- The component and everything within it should not have a width. Use max-width instead on the component. There should be no,explicit widths on heading or paragraph etc
- It would be simpler to apply border radius to the component along with overflow hidden. Then you don't need to change individual corners anywhere
- You don't need an overlay like this with position absolute. Totally unnecessary. Instead, that half of the component needs the purple background color and the image needs mix-blend-mode and opacity
- It is better for performance to load the font in html head instead of in the css file
- If you consider this image to be meaningful content, you must describe it properly in the alt attribute! If you think it is a decorative / non-meaningful image, alt should be blank
- Why have you used a h3?
- You must rewrite the html of the statistics. Numbers like 10k make no sense at all as headings. Instead, this part of the content should be one unordered list with 3 list items inside. The numbers can be wrapped in strong or span elements and set to display block and any other styles you need
- Do not capitalise text in html. Do that in css
- Use landmark elements. Every page should at least have a
main
I think you have some html understanding missing actually. This article about translating a design to html should help you
Marked as helpful0
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