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

@laurentGurbala

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?

I am particularly proud of having implemented a mobile-first approach to manage the responsiveness of the site. This allowed me to ensure a good user experience on mobile while remaining flexible for desktop versions. In addition, the management of hover and focus states for interactive elements proved to be fluid and accessible.

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

One of the biggest challenges I faced was managing the Inter variable font. Integrating a variable font and ensuring it worked correctly across browsers required me to understand how the font's variation axes (like weight and slant) worked. After doing some research and testing different approaches, I decided to use the static version of the font to ensure maximum compatibility.

Community feedback

@KP1976

Posted

HTML

  • Try to add meta tag with description to improve your SEO.
  • You can change the <div> (class="card-profile") to an <article> tag.
  • Use alt text more descriptive: instead of "photo avatar" try for example "picture of user Jessica Randall".
  • In this project you have a list of social media. I would suggest using the <ul> and <li> tags.

CSS

  • I wouldn't use font-size: 62.5%. Here's a link explaining why not: font-size: 62.5%.
  • In transition (.btn): Be more specific, use "color" instead of "all".

Other

  • Amazing Read.me file!
1
MiloosN5 190

@MiloosN5

Posted

Good job! However, it seems that something is either oversized or undersized. From what I can see, the main heading (Jessica Randall) seems to be the issue, but there may also be other elements, such as padding, that need adjustment.

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