Skip to content
Submitted about 1 month ago

Responsive social profile card

Favour Kelvin•20
@Favourkelvin
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

  • Grace•31,270
    @grace-snowPosted about 1 month ago

    That's all great feedback above!

    I only want to add:

    • Add some padding to the body on this so the card can never hit screen edges. This only needs to be small and can be in px. e.g. 20px
    • The image should have an explicit size in this (width and height). This can be in html or CSS. You can optionally give it an aspect-ratio: 1 if not adding width and height in html to help performance marginally as the browser then knows what space to save while loading the image in on slow connections.
    • The image should either be described properly in the alt attribute or be treated as decorative by giving it empty alt. The current description brings no value.
    • The container div (the component) should be wrapped in a main landmark, and the attribution should be either changed to be a footer OR be wrapped in a footer.
    • Make sure you update the footer link to point to your frontend mentor profile page or github profile.
    Marked as helpful
    4
    Favour Kelvin•20
    @FavourkelvinPosted about 1 month ago

    @grace-snow You are amazing! Thank you for this.

    1
  • Kamran Kiani•1,280
    @kaamiikPosted about 1 month ago

    Hi. I saw some problems in your code that I wanna mention:

    1. One of the important things in front end is to have a good html with a solid structure. I hardly can read your code. There are some extra spaces that there is no need to have. If you using Vs code add prettier to make your code more clean.

    2. This should be a basic structure in most of the page inside the body:

    <body>
  <header></header>
  <main>
    -- Main content
  </main>
  <footer></footer>
</body>

    You always need main but footer and header can be or not.

    1. headings should increase one by one. Here I think you only need h1 and you can simply use a p for your country with proper css.

    2. For your links why using div? you can not put text inside a div. there are semantic tags and here you can simply put your text inside the a tag.

    3. Your links here is a list of items so you can use ul with li for these links.

    4. On your CSS, try to use a proper CSS reset. Andy Bell's is good.

    5. Your font-size should always be in rem. Never use px for font size. You can read this article: https://fedmentor.dev/posts/font-size-px/

    6. Also never restrict your width and height specially for containers that have text insides. here instead of height: 100vh; use min-heigh: 100vh that works better.

    At the end, try to ask more questions on help channel on discord and get more feedback. Good Luck!

    Marked as helpful
    0
    Favour Kelvin•20
    @FavourkelvinPosted about 1 month ago

    Thank you so much for taking the time to give me such a detailed feedback. I will work on all that.@kaamiik

    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