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

Social Links Card with vite, ts, react, styled-components

ha308ing 90

@ha308ing

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

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

@crossinguard

Posted

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 helpful

1

ha308ing 90

@ha308ing

Posted

@crossinguard thank you for such valuable feedback!

to consider font size set in browser, css font-size should be set with percentages, right?

0

@crossinguard

Posted

@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 helpful

1

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