Design comparison
Solution retrospective
I'm proud that I didn't lose my sight while differentiating black pixels from black pixels. Next time I should take a spare pair of eyes.
Child components depend on the card context, hence not much reusable I guess
What challenges did you encounter, and how did you overcome them?Avatar url had absolute url and didn't load, took a while to find it out 🤪
What specific areas of your project would you like help with?I'd like to find out, how to make a child component (like avatar, links list) kind of dual, so it could work with whole card context and without context?
Community feedback
- @crossinguardPosted 6 months ago
Nearly identical, great job!
Small detail but the location and links are slightly off for the font weight (bold/700 vs semi-bold/600). Both are used in the card design, which a fun treat on top of the black pixel adventure you just went through.
One other consideration is the font size being fixed in place. Your card looks great at all sizes, has the correct font sizes, and handles browser zoom just fine. However, changing the font size in the browser settings does not interact with your card. Another small detail but worth thinking about.
Marked as helpful1@ha308ingPosted 6 months ago@crossinguard thank you for such valuable feedback!
to consider font size set in browser, css font-size should be set with percentages, right?
0@crossinguardPosted 6 months ago@ha308ing Yup!
We can set the root font size as 100% (representing 100% of the browser controlled font size) and then use the body and other selectors for our default design-spec-aligned sizing in
rem
.html { font-size: 100%; } body { font-size: 0.875rem; /* 14px */ } h1 { font-size: 1.5rem; /* 24px */ }
Marked as helpful1
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