Skip to content
Submitted 8 months ago

Responsive Social link profile using HTML and CSS

123dakalo•50
@123dakalo
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?

Applying most of the method or rules of using Semitic HTML in this project, also by not using position absolute to centre my content but using flex to centre my content.

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

The challenge I encountered was the links I was failing to make the background look like a button but figured it I left out display: block; when I applied it, it worked and then added padding space from the inside for top and bottom only

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

Mostly the main container should I give it a width or not because on my project I did not give it a width.

Community feedback

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

    I'm afraid there is a very serious accessibility failure in here. You must not change the role of html elements and cannot add custom values on that very very important attribute. The role attribute is used by the accessibility API and would overrule what the default element semantics afe. Remove every place you have added role attributes in the html. At the moment all of the semantics have been broken.

    Other recommendations :

    • you do not need to use the picture element if there is only one image source. Just use the img element on its own.
    • get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
    • it's very unusual to capitalise class names. It is a well established practice that class names should all be lowercase.
    • place classes directly on what you want to style. Try to avoid using element selectors. This change would keep the css specificity nice and low, making it much easier to manage and making the styles more portable and improving the robustness (if the html ever changed, styles would not break).
    Marked as helpful
    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