Skip to content
Submitted 3 months ago

responsive social-links-profile-main using html and css

Marwa Asaad•260
@marwaas3d
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

  • Kamran Kiani•1,280
    @kaamiikPosted 27 days ago

    Hi. Just saw this challenge you have done and It's the first one. I noticed some points in your code I wanna mention. Please take consider these issues and refactor your code. Sorry if Its a little long but all of it are necessary points I think.

    1. Try to use a proper CSS reset at the start of your CSS style. Andy Bell and JoshComeau both have a good one. You can simply search on the internet to find them.

    2. Your img is an avatar of a person. Remember the avatar does not need alt text. So the alt text should be empty like alt="". And also Do not use the word image in your alt message. It's obvious that the alt message is on the img tag and you should only describe the image for screen readers.

    3. I think your name here should be a h2 tag. It's more semantic because your page is all about a person information so you need a heading.

    4. About using a tag You have to consider this that An <a> tag should have an href attribute to function as a hyperlink, which is its primary purpose—linking to other pages, resources, or anchors within a page. Without the href, it’s not inherently accessible because:

    • Keyboard Navigation: Without an href, the <a> tag is not focusable by default. You can not use your tab key on the keyboard to navigate.
    • Semantic Role: The href gives the <a> tag its semantic meaning as a link. Without it, screen readers and other assistive technologies can't identify the element correctly as a link, which can confuse users.

    1. Your social media links as I see is a group of items. when you have a list of items the best semantic tag to use is ol and ul. here you can use ul and It's an unordered list. And you need to also wrap each a link in a li tag. This is make your code more clean and robust and also accessible.

    2. You can check most of the pages and see they have a structure like this:

    <body>
  <header>...<header>
  <main>...<main>
  <footer>...<footer>
</body>

    Based on your design you may have header and footer or not. But You should have a main tag inside your page. So after your body always wrap all of your code inside a main tag. In this design you do not need header and footer.

    1. Use min-height: 100vh; instead of height:100vh;. height: 100vh strictly limits the height to the viewport size, potentially causing overflow issues if the content is larger than the viewport. On the other hand, min-height: 100vh allows your element to grow in height if the content exceeds the viewport size.

    2. Never limit your width and height in a container or element or tag that contains text inside. When you limit the width and height of elements containing text, you risk the text being cut off, overflowing, or becoming unreadable, especially on smaller screens or when the text dynamically changes. It's generally better to allow the container to adjust its size based on its content or set a flexible size that can adapt to different screen sizes and text lengths. You only need max-width here because it prevents elements from stretching beyond a certain point, keeping them visually appealing across different screen sizes. It ensures your design remains adaptive and doesn't get too wide on larger screens.

    3. Your font-size and max-width should be in rem unit not px. You can read this article about it and why you should not use px as a font-size. Also for the padding and margin try to use rem too.

    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