![](https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_900/Screenshots/j0mysmvso7pxpzirsjqp.jpg)
Submitted 4 months ago
A clean and modern social links card built using Angular and SASS
#angular#sass/scss#typescript#bem
P
@Kellenkjames
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.
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.
N/A
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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