Social Link Profile with Fluid Sizing

Hello there!

Congrats on completing the challenge! ✅

Your solution looks great!

📌 It's recommended to use semantic HTML elements like <ul> and <li> for creating lists. This ensures that your code is more accessible, maintainable, and semantically meaningful.

Here's and example on how you can refactor your code:

After Refactoring

<ul class="list-container">
    <li><a href="#">Github</a></li>
    <li><a href="#">Frontend Mentor</a></li>
    <li><a href="#">LinkedIn</a></li>
    ...
</ul>

By using <ul> and <li>, you convey the structure of your content more clearly, making it easier for screen readers and search engines to understand. Additionally, it aligns with best practices for HTML semantics.

I hope you find this helpful!

Keep up the excellent work!

Hiya @IncorrigibleSpirit,

Great job on a good looking solution to this project! Happy to hear that you were able to use fluid sizing for padding and typography. I like the animations you added!

A bit of friendly constructive feedback:

• I suggest adding some padding to the body element so the card has some spacing on smaller viewports.

• At the moment your card is not centered on larger viewports. I suggest changing the styling of your body element:

body {
    /* width: 100%; */
    font-family: "Inter", sans-serif;
    /* min-width: 23.4375rem; */
    /* max-width: 90rem; */
    background-color: hsl(0, 0%, 8%);
}

I commented out the lines that you could remove. body is a block element and by default has width: auto which does the same as width: 100%. The min-width and max-width prevent you from centering your card.

• You could try using CSS variables to make your values more reusable. Like the colors or font family.

I hope you find my feedback helpful and I would appreciate it if you could mark it as helpful if it did!

Happy coding!

Hiya @IncorrigibleSpirit,

I'm glad I could be of help!