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

achallett 160

@achallett

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?

Understanding how padding and margin behaves better

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

Had an issue understanding the spacing initially

Community feedback

py-code314 290

@py-code314

Posted

Hello,

Nice job on the project. I think it's very close to the design specifications.

I would like to point out a few things if you don't mind.

  1. When the screen size is narrower than 400px, card content is hiding behind the screen edge. I suggest you change width on .card to max-width to make it flexible
  2. There's a thin blue outline around the links when I focus them with TAB. You can remove this with outline: none if you want
  3. I think it's better to use <p> and <blockquote> tags for .card__profile_location and .card__profile_bio as they describe the content more accurately
  4. I also noticed that you used <div>s to wrap social media links. You should put them in <a> tags as they are links when clicked take the user to another page. In addition you can put all links in a <ul> element if you want
  5. No need to use width on body as it may add scrollbar sometimes. Also it's a good practice to use min-height instead of height on body

Hopefully these points will help you to make it better. All the best!

Marked as helpful

1

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