Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social Links

alexcoy06 30

@alexcoy06

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


The hardest part of this project was dealing with the buttons, but it wasn't too difficult. Each time I do a project, I try to add something I haven't done before and make a habit of following more best practices. So, after publishing my work online, I decided to run it through Lighthouse. That made me realize I needed to tweak my code so it would be more syntactical.

Also, if you're not familiar with using clip paths to make a picture round, a super helpful site is https://bennettfeely.com/clippy/. Or, you could always change it in a picture editor like Figma.

Community feedback

UG 140

@0x-UG

Posted

Hey bro. You don't need to make your picture round by editing it, you can just use CSS And make the picture have a border radius of 50%,that makes anything round (buttons, pics etc). Also adding new features on any new design is a good idea and something I'll try too. I normally just practice what I know

0

alexcoy06 30

@alexcoy06

Posted

@0x-UG putting a 50% border radius would have made the original picture look like an oval, because my picture is not perfectly square. Using somethin like this:

img {

clip-path: circle(35% at 50% 50%);

}

Places a circle on the image that only shows what the circle overlaps'.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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