Submitted 3 months ago

Responsive Social Links Profile Solution with SASS

MelissaZhuu• 100

@MelissaZhuu

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social links profile

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Since there was no design file provided this time, I'm proud that I was still able to recreate the design and have it look pretty close to the final images. I was also able to complete this project much faster, implementing the subtle mobile vs desktop changes accordingly and using responsive units from the start. I have been using Flexbox a lot in these challenges, so maybe next time I would try to practice using Grid.

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

I struggled a bit with getting every unit close to the final design images. I actually ended up changing a few of the values from the original. I noticed the values from the style-guide didn't quite match the design images, so I decided to follow the images rather than sticking to the values given in the style guide. For example, the style guide gave the text-weights: 400, 600 and 700 but I ended up using 300, 500 and 600.

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

I'm still a bit unsure when I should be using em as a responsive unit and when I should use rem. So far, I've only stuck with em and everything looks/behaves as expected, but I'm wondering if certain units should be in rem instead, like maybe layout container widths? Also, I was wondering if min-width values should be in px or some responsive unit.

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 3 months ago

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!

Marked as helpful

Please log in to post a comment

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