Skip to content
Submitted 18 days ago

A clean and modern social links card built using Angular and SASS

Kellen James•120
@Kellenkjames
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?

I'm most proud writing a scalable codebase which made development workflow fast and efficient.

In addition, I used a the @for block in Angular to render each link from an Array of strings which is considered best practice.

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

I ran into a small challenge with the hover state. I noticed there was a transition of two elements for each link:

  • background color
  • text color

There was a CSS specificity issue which ignored the child element (text) I was targeting during the hover state. I overcame this by using a stronger selector & * which targets all descendants of a parent element with stronger enforcement.

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

N/A

Community feedback

  • Yacoub AlDweik•1,010
    @YacoubDweikPosted 18 days ago

    Hey Man! Good job I couldn't find any problems lol.

    using * is not a good practice if the reason that you want to overcome specificity, imagine that you have a span inside that a and you want to give it another color, you can just style the a itself instead of tiring yourself by dealing with li & a as separated componenets, just style the a itself and forget the parent which is li cuz it is alwayes gonna have a width of 100% like block elements.

    BTW did you really have to use Angular to perform this simple design? are you good at pure stuff?

    Keep it up!

    Marked as helpful
    0
    Kellen James•120
    @KellenkjamesPosted 17 days ago

    @YacoubDweik thanks for the feedback. I agree, using the * selector is not considered best practice and it could lead to cascading issues in a bigger project.

    You're right, the a element can be styled itself without deeper nesting.

    I didn't have to use Angular to perform this design but wanted to because it's the tool I'm focused on mastering at the moment.

    I have built many projects with pure HTML, CSS, and JS and now looking to apply modern frameworks like Angular to anything I can.

    Thanks again for the feedback!

    1

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