Social Links Profile

Hi Fatih, I hope you're doing well.

Your solution looks great.

I have a few tips that might help you improve it.

Use semantic HTML tags

The text should be placed in meaningful elements like paragraph tags <p> or heading tags (<h1> - <h6>). Text alone inside a <span> or <div> is not recommended, since browser won't understand the purpose of that text. You could do this for example:<p class="profile-location">London, United Kingdom</p>

Use rem unit for font sizes

You should avoid using px for setting font sizes, you should use rem instead, this way, when the user increases the zoom setting of the website, the fonts will scale accordingly. This video can give you some examples of when to use each unit: Are you using the right CSS units?

Avoid using height

Setting a height on an element can cause some issues, on smaller screens if the content inside that element shrinks, it won't be able to extend since you set a fixed value for the height, so the content will overflow. If you need to set a height consider using min-height instead.

Try using relative units for widths

Relative units like percentages are usually better for width values because it will prevent overflow issues on smaller screens.

For example, in the .profile element you could set this:

.profile{
  width: 90%;
  max-width: 320px;
}

This way you are telling .profile to ideally be 90% of its parent width, which works well for smaller screens and it's allowed to expand until it reaches the maximum with of 320px on larger screens.

You can also use the min() function as a shorthand to set both values in a single line:

.profile{
  width: min(90%, 320px)
}

I hope these tips help you improve your code. You’re doing a great.

Wishing you all the best with your coding journey ✨

The code is structured correctly and design wise it is also good