Skip to content
Submitted 8 months ago

Social Links Profile

Jeff Gicharu•80
@jeffgicharu
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?

I'm proud that I was able to structure my HTML well and use a media query in my CSS. Next time I would include more CSS in the media queries.

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

I can't really say I encountered any challenges.

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

I would like some help with the media queries

Community feedback

  • dkaffes•140
    @dkaffesPosted 8 months ago

    Nice work @jeffgicharu!

    I believe there is room for improvement in your code:

    HTML

    • You should use the semantic elements <main> for the main content and <footer> for the attribution part inside your <body>.
    • You could give a more descriptive alt attribute for the image.
    • Giving an h2 to the title is correct, since the whole card is possibly part of a webpage with its own h1 title. However, there is no meaning in setting an h4 for the "London, United Kingdom" text. This should be a <p>.
    • There is no point in using a <div> inside the <a> tag. You could use a class inside the <a> element in order to style the anchor links. Furthemore, hrefattribute should be set with the appropriate link or left empty (href="").

    CSS

    • If you add a footeryou need to include flex-direction: column; to the body. Along with some gap to make some space beetween main and footer. In this way the vertical centering of the card will be achieved.
    • You do not have to set height:100% to the .profile-card. The browser will decide the necessary height. However, we can set: min-height:100vh to make sure we have a minimum height.
    • Since you are using display:flex for the .personal-info you could use gap to create margin.
    • There is no need for a media query in this challenge, since there is no significant layout change. So, you could also add the padding directly in the body declaration so that the card does not touch the edges of small screens.

    I hope this is helpful!

    0
  • Yash Babani•890
    @Yashbabani0Posted 8 months ago

    .

    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