Skip to content
Submitted 9 months ago

social-links-profile-main

Madhu U•170
@Madhu-U
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

Haven't been able to get back to learning Web Dev in more than 2 years for various reasons. Starting out with some newbie projects again. I would appreciate any feedback on it. Haven't written a README for this project. But I'll get to it soon. I know I should be using rems instead of px. But I didn't want to do those conversion calculations on my first project back.

Community feedback

  • Grace•31,270
    @grace-snowPosted 9 months ago

    This is broken for me viewing on mobile with content cut off screen because you've broken a golden rule: Never limit the height of elements that contain text! That includes the body element.

    Change height: 100vh to min-height so the body is allowed to grow beyond the confines of the viewport when needed.

    You also must change all of the buttons for anchor elements. These are links because they would navigate on click. This is extremely important to understand - buttons and links have totally distinct purposes.

    Other important points to note

    • Do not set height on buttons either. Same principle as above. Use padding.
    • NEVER set font size in px! Never ever. It is inaccessible.
    • Look up how and when to write alt text on images. They shouldn't include words like "image" or "picture" because they are already on an element with an image role. There is a great post about alt text if you search the resources channel in the discord server. Worth a read!!

    Make sure you go back and refactor earlier solutions with these learnings too.

    Marked as helpful
    1
    Madhu U•170
    @Madhu-UPosted 9 months ago

    @grace-snow Thank you! I'll work on these!

    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