Social links profile with flexbox

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 5 months ago

  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•220

  @porumbachanovPosted 5 months ago

  @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-IPosted 5 months ago

  @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•220

  @porumbachanovPosted 5 months ago

  @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-IPosted 5 months ago

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

  1

  

  Nikola•220

  @porumbachanovPosted 5 months ago

  @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

  Guilherme Dias Simões•210

  @gdsimoesPosted 5 months ago

  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•220

  @porumbachanovPosted 5 months ago

  @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