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 profile with flexbox

Nikola 190

@porumbachanov

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?

Nothing in particular, would probably try a smarter way to do the css.

What challenges did you encounter, and how did you overcome them?

It was pretty similar to the Blog preview card.

What specific areas of your project would you like help with?

Maybe a better way to write the responsiveness and css as whole.

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hi! Well done =)

I see that you use em for paddings and margins and px for fonts. Although such values like em and rem are primarily intended for fonts cos they depends on user's font settings. Also I recommend you to use rem instead of em. You see, rem depends directly on the root element while em - on the parent element. It could lead to reducing of the sizes of nested elements.

By the way, very neat work! Happy coding =)

Marked as helpful

1

Nikola 190

@porumbachanov

Posted

@Alex-Archer-I Thanks for the helpful explanation! I didn't make much of a difference between em and rem before, now I know xD. Pushed the changes.

1
Alex 3,130

@Alex-Archer-I

Posted

@Vrondir Yeah, em could be tricky value. Better to use it when you're 100% sure it's exactly what you need =)

Also I can recommend you to learn about css-variables and start to use them - primarily for colors but sometimes for sizes as well. They looks like this:

:root {
    --white: hsl(0, 0%, 100%);
}

main {
    background-color: var(--white);
}

It'll be incredibly helpful in future big projects =)

1
Nikola 190

@porumbachanov

Posted

@Alex-Archer-I Yeah, I'm aware of css custom properties, didn't really find the need to use them up till now because I was dealing with two or three colors. However, I am gonna use them in the recipe-page project cuz there are like eight colors in there. Thanks for the heads up tho!

1
Alex 3,130

@Alex-Archer-I

Posted

@Vrondir Oh, sorry, sometimes it's hard to say who is at what level =)

1
Nikola 190

@porumbachanov

Posted

@Alex-Archer-I No worries, I'm here to learn after all, just trynna pass the first learning path so I get used to the platform :).

1
P

@gdsimoes

Posted

I really enjoyed reviewing your project—it's clear you've put a lot of effort and creativity into it! The overall design is visually appealing, and the functionality seems robust. I do have a few suggestions that could enhance the usability and accessibility of your project even further.

  • Contrast Issue: The contrast in your footer links is currently too low, which may cause accessibility issues for visually impaired users. Consider enhancing the contrast to improve readability.

  • Font Size Units: It's recommended to avoid using pixels for setting font sizes, as this can restrict users who need to adjust font sizes in their browser settings for better readability. Consider using relative units like em or rem instead.

  • Layout Consistency: The spacing between the description and the first button differs from the original design. Adjusting this distance could enhance the visual consistency of your project.

Marked as helpful

1

Nikola 190

@porumbachanov

Posted

@gdsimoes Thanks for the remarks!

  1. I think I fixed the contrast issue by making the text bigger and changing the color to green so it matches the design.
  2. I also switched the units to rem.
  3. I added a bit more space between the description and the buttons, but I'm kinda eyeballing it so I'm not sure if it's good or not.

I have pushed all the changes, I can't update the screenshot, but you can check it out in the live demo if you want. Thanks again!

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