Skip to content
Submitted about 1 month ago

Social Links Profile created using HTML and SCSS

#sass/scss
Kuvashnee Naidoo•370
@KuvashneeNaidoo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

While working on this task, I learned how to use SCSS to nest selectors, making the styles more structured and readable. SCSS also helped to support variables to store reusable values like colors and fonts. I will continue to focus on improving my SCSS skills by diving deeper into mixins to define styles that can be re-used throughout the stylesheet.

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

At first, I found it a bit tricky to manage global styles such as font and colour variables. I then created a centralised approach which I defined in the :root and at the top of my SCSS file. This allowed me to easily reference the reusable values.

Community feedback

  • P
    Gabe•300
    @gabeiPosted about 1 month ago

    This looks awesome! I love the color alterations and the slight hover animation for the buttons.

    I don't have a lot to say, but I'll add the two things that I pretty much tell everybody since I think they're interesting:

    1. When viewing your site on a device in landscape mode on a mobile device (quite an edge case), the container extends beyond the top of the screen. How might you prevent that from happening?

    2. From a semantic HTML perspective, I tend to think of the social links as a list of sites to visit. This looks the same visibly, but changes how screen readers read off the content. Personally I think the difference is negligible for a site like this, but it's worth mentioning.

    Nice work and happy coding!

    Marked as helpful
    1
    Kuvashnee Naidoo•370
    @KuvashneeNaidooPosted about 1 month ago

    @gabei Thank you for your feedback! Both of your points are valid, and I’ll be sure to focus on them to improve my code moving forward.

    I hadn’t considered how the site looks in landscape mode so thanks for bringing that to my attention. I’ll definitely try to address this by perhaps ensuring the container doesn’t overflow or extend past the viewport, possibly by using media queries.

    The suggestion about the semantic structure is also a great best practice that I’ll take into account as I continue refining my code.

    Thanks again! Happy coding!

    0

Please log in to post a comment

Log in with GitHub

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