Skip to content
Submitted 8 months ago

Social links profile using HTML and CSS

zdnnnnn•40
@zidannn24
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

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

  • Grace•31,090
    @grace-snowPosted 8 months ago

    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
    Grace•31,090
    @grace-snowPosted 8 months ago

    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
    @zidannn24Posted 8 months ago

    @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
    Grace•31,090
    @grace-snowPosted 8 months ago

    @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
    @zidannn24Posted 8 months ago

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

    0

Please log in to post a comment

Log in with GitHub

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