Skip to content
Submitted 6 months ago

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

ha308ing•90
@ha308ing
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

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

  • W. Brett Egbert•80
    @crossinguardPosted 5 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 helpful
    1
    ha308ing•90
    @ha308ingPosted 5 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
    W. Brett Egbert•80
    @crossinguardPosted 5 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 helpful
    1

Please log in to post a comment

Log in with GitHub

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