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 Profile with CSS Grid

Vladislav Zeninβ€’ 100

@vladzen13

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


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

Nice responsiveness till ~200px, no media queries or harcodes. Img width with % seems like nice idea

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

Vertical+horizontal center with flex still shrinks div.profile a little bit, need deeper understanding of flexbox

Community feedback

@Ihdir

Posted

Hey there,

Nice work on the project! I noticed a few things that might help improve it:

1--It's best practice to include a <main> tag inside your <body> to highlight the primary content.

2--Applying a full modern CSS reset can simplify things as you build. You can check out this site for a full reset.

3--When it comes to responsiveness, try using max-width: 100% or min-width: 100% instead of just width: 100%β€”they work better in responsive designs.

4--Avoid using px for units since it's absolute. Consider using rem or em for more responsive layouts.

5--Check this article for deeper understanding of flexbox: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

Hope you find these tips helpful!

Happy coding! πŸ˜„

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