Skip to content
Submitted 3 months ago

social-links-profile

Tanuja0530•30
@Tanuja0530
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 most proud of how I was able to create a clean and responsive layout that works well across different devices. I also enjoyed customizing the design to make it visually appealing while maintaining simplicity.Next time, I would spend more time refining the accessibility features to ensure the site is fully navigable using a keyboard and screen readers. I would also explore different approaches to structuring the CSS to improve maintainability and scalability.

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

One of the challenges I encountered was ensuring that the social links were both visually appealing and functional across various screen sizes. I initially struggled with making the layout responsive, but after experimenting with different CSS techniques like flexbox and media queries, I was able to achieve a consistent design. Another challenge was aligning the icons perfectly, which I resolved by fine-tuning the margins and padding.

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

I would appreciate feedback on the accessibility of my project, particularly in terms of keyboard navigation and screen reader compatibility. Additionally, I'd like advice on how to optimize my CSS for better maintainability and scalability, especially if there are ways to simplify the code while maintaining the design integrity.

Community feedback

  • Bernardo Poggioni•5,360
    @R3ygoskiPosted 3 months ago

    Hello @Tanuja0530, congratulations on completing the project.

    Your layout seems to be incorrect because the card is at the bottom of the screen, and there is also an overflow happening. To fix this, consider resetting your CSS by using this snippet:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

    Now, you need to remove position: absolute from div.card. Finally, in your div.container, you can replace min-height:300px; with min-height:100vh;, so your card will be perfectly centered on the screen.

    I also noticed that you used spacing like margin to center the items inside your card. For centering, it's always recommended to use display: flex;, which will allow you to align elements perfectly and ensure they stay aligned even if the size of the parent element changes. Consider using these snippets:

    .card {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

.contant {
  text-align: center;
}

    This way, you will center all the elements inside your card. You can also apply this to the button area by creating a <div> that wraps around all of them, and in this div, add display:flex; and gap: 1rem, so they will have equal spacing between them. Or, you can continue using margin as you did.

    Also, note that the fonts you tried to use were not applied because there is no src property in CSS. To change the font, we use font-family: "Font Name".

    Now regarding accessibility, I'll start with semantic HTML, as it's very important for both accessibility and SEO. Your HTML is not very semantic, and you used few semantic tags. Examples of tags that could be changed:

    • <div class="container"> can be changed to <main>, as the <main> tag is typically used after the <body> tag to indicate the main content of the page.
    • <div class="card"> could be changed to <article>, as the content here is self-explanatory and independent of the page, but it could also be a <section>.

    Your image also has an empty alt attribute. We use alt="" like this for icon or background images, but for a picture, we need to provide a descriptive text, such as alt="Avatar of Jessica Randall".

    Another accessibility issue is the Headings. They are incorrect. When using Heading tags like <h1>, <h2>, etc., they should be structured hierarchically, starting with <h1>, then <h2>, and so on. So replacing your <h2> with <h1> might be more appropriate and accessible. Also, consider replacing <h4> with <address> as the content there refers to an address.

    Lastly, instead of using <button>, it would be more appropriate to use <a> because those "buttons" are actually links to other sites. When creating something to interact with the page, such as changing themes, opening modals, or closing modals, we use <button>. But when we want to navigate between pages, we use <a href="#">.

    That's it! Congratulations again on completing your project. Keep practicing and improving, and if you have any questions, feel free to comment below.

    Marked as helpful
    1

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