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 using HTML and CSS

zdnnnnn 40

@zidannn24

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?

It is important for me to receive feedback.

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

So far, I haven't encountered any difficulties while working on this project. However, if there are still areas where I can improve, please provide me with feedback.

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

Is my code clean? And are there any unnecessary elements? And is the usage of margin or padding, along with their respective units, correct?

Community feedback

T
Grace 29,310

@grace-snow

Posted

The html needs some tweaks

  1. Is "London" the heading for all content beneath it? I don't think so. That means it should be a paragraph not a heading.
  2. Avatar is not descriptive alt text. There's a great post in the resources channel on discord.
  3. The personal info and job divs are unnecessary.
  4. This is a list of links so use a list element for those.
  5. The outer wrapper div needs to be a main. There's no benefit from this being an article either.

Marked as helpful

1

T
Grace 29,310

@grace-snow

Posted

And in CSS

  1. Always use a modern css reset at the start of the styles in every project. Andy Bell has a good one you can look up and use.
  2. There is no need for a media query in this challenge. But in future challenges media queries should be min-width (mobile first) and defined in rem or em not px. More info
  3. The component should not have an explicit width. It should have a max width in rem only. Once that's done you wouldn't need the media query.
  4. Don't use huge margins to try and create a layout. To center the component on the screen make the body a flex column and min height 100vh and use flex properties.
  5. I think you are misunderstanding padding vs margin
  6. Font size must never be in px

Marked as helpful

1
zdnnnnn 40

@zidannn24

Posted

@grace-snow Thank you so much for your input. I appreciate you taking the time to provide detailed feedback. It has been very helpful, and I will try to make improvements later. By the way, would you also mind providing feedback on my solution titled "Recipe Page using HTML & CSS"? Once again, thank you.

0
T
Grace 29,310

@grace-snow

Posted

@zidannn24 a lot of the feedback will be the same as on this one. So refactor this, then apply what you've learned on the first one.

After that I can try to take a look at it :)

1
zdnnnnn 40

@zidannn24

Posted

@grace-snow Alright, I will try to implement it.

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