Skip to content
Submitted 9 months ago

social link profile page with html, css .

seshadrianadasu•170
@seshadrianadasu
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

Community feedback

  • Øystein Håberg•10,510
    @Islandstone89Posted 9 months ago

    HTML:

    • The image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of Jessica Randall" would be read like this: "image, image of Jessica Randall".

    • Headings must always be in order, so you should never go from a <h2> straight to a <h5>. Also, "London, United Kingdom" should be a <p>.

    • The social links are not headings. Change them into links.

    CSS:

    • Performance-wise, it's better to link fonts in the <head> of the HTML than using @import.

    • It's good practice to include a CSS Reset at the top.

    • max-width on the card should be in rem.

    • Change the font-size on .about from px to rem. font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser.

    • Since all the text has the same font, you should place the font-family on the body, and remove it elsewhere.

    0
    seshadrianadasu•170
    @seshadrianadasuPosted 9 months ago

    Thanks for remember my faults and correction

    1
    seshadrianadasu•170
    @seshadrianadasuPosted 9 months ago

    Thanks for remember my faults and correction

    1

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