Skip to content
Submitted 7 months ago

Responsive Social Link Card Using CSS FlexBox

Stephengrammy•60
@Stephengrammy
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

using flexbox and article

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

nothing much my babe cheated and broke my heart so i just jumped on the project to clear my head

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

i just want to see a different css code

Code

Please log in to post a comment

Log in

Community feedback

  • Alaa Mekibes•2,090
    @alaa-mekibes

    You did it good job 🎉 just there are few points to fix :

    • Add favicon between <head> like this :
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />
    • Use css variables to improved maintainability like this :
    :root {
    --bg-color: hsl(210, 46%, 95%);
    /* Add your other colors here */
}

body {
    background-color: var(--bg-color);
    /* Other properties */
}
    • Add min-height: 100vh to the body to get full-screen.
    Marked as helpful
  • Aakash Verma•9,500
    @skyv26

    Hi @Stephengrammy,

    Great job on the project! Here’s some feedback and suggestions to help you refine your work further:

    1. Avoid Using the <article> Tag Here
      The <article> tag is intended for self-contained content that could stand independently, like a blog post or news article. In this case, a <div> or another more general-purpose container would be more appropriate. 👍

    2. Add Descriptive alt Text for the Image
      Accessibility is key! 🌟 Add meaningful alt text for the image, e.g., alt="Profile picture of Stephen Makinde", to help users relying on screen readers.

    3. Design Consistency
      Try to match your design as closely as possible to the original reference. A pixel-perfect approach can elevate your work. 📏

    4. Avoid Using Fixed Heights
      Instead of hardcoding height: 500px for the .container, let the content determine the height or use padding to maintain spacing. This ensures your layout is more flexible and adapts well to varying content sizes. 📐

    5. Apply DRY Principles to Your CSS
      For example, you can use a shared class for reusable styles (like margins and paddings) to reduce redundancy:

      .nav-link {
    text-decoration: none;
    font-weight: 600;
    color: hsl(0, 0%, 100%);
    background-color: hsl(0, 0%, 20%);
    margin: 10px 5px 0;
    width: 250px;
    border-radius: 5px;
    text-align: center;
    padding: 7px 5px;
}

      Then remove repetitive margin and padding styles applied separately.

    6. Other Minor Suggestions

      • Ensure your fonts load as expected by double-checking the Google Fonts link.
      • Test hover and focus states thoroughly for a polished interactive experience.

    I hope these pointers help you enhance your project! 🚀

    Happy coding! 💻✨

    Marked as helpful

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