Skip to content
Submitted about 2 months ago

Social profile links solution

Sober•150
@tankTopTaro
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

  • Zxjklp•90
    @ZxjklpPosted about 1 month ago

    Hello,

    Great job on your solution! With a few adjustments, you can make your solution even better.

    HTML

    • Your solution does not have <meta name="description"> element in head. It should provide a summary of a page's content that search engines include in search results. A unique meta description can increase your search traffic. <meta name="description" content="Put your description here.">

    • To improve the semantic structure of your HTML, you can wrap the main content of your page inside a <main> tag. The <main> tag is used to denote the main content of the document.

    • The alt attribute text for the image can be improved to provide more descriptive and meaningful information. The current alt text is "avatar-jessica", which is not very descriptive. A better alt text would describe the image in a way that is useful for users who rely on screen readers. For example: <img src="./assets/images/avatar-jessica.jpeg" alt="Profile picture of Jessica Randall">

    • The image should have width and height attributes. These attributes specify the size of the image, helping the browser allocate space for it before it loads.

    • To enhance the code, consider removing the <br> tag and using CSS for spacing. This approach will make the HTML more semantic and the layout easier to maintain.

    • The links div can be improved. You can use an unordered list (<ul>) instead with list items (<li>) and put <a> tags inside list items to represent the list of links . This approach enhances the semantic meaning of the HTML and improves accessibility.

    CSS

    • Include a CSS Reset at the top of your css file or put reset code in a new file that you import in your html file.

    • Change height to min-height in body selector. Using min-height instead of height for the body element ensures that the body can expand to fit content that exceeds the viewport height.

    • Use max-width and min-width instead of fixed widths. It is a good practice for creating responsive designs. This allows the elements to adapt better to different screen sizes and orientations.

    • I think you could remove flex from .profile and use text-align: center instead and add more margin-bottom.

    • The border-radius in .profile img should be 50% and not 100%.

    • The font-size should always be in rem units. These units are relative to the root element's font size (<html>), making it easier to scale the entire layout by changing the root font size. This is particularly useful for responsive design.

    • To ensure best practices and consistency across different environments, the transition property should be placed in the base state (.link) of the element.

    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