Frontend Mentor - Social links profile solution

This is a solution to the Social links profile challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - Social links profile solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author
  • Acknowledgments

Overview

The challenge

Users should be able to:

• See hover and focus states for all interactive elements on the page

Screenshot

Desktop

Desktop Active State

Mobile

Links

• Solution URL: Github
• Live Site URL: Github Pages

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

Working on the Social Links Profile project provided me with valuable insights and reinforced several important front-end development concepts:

1. Flexbox for Layout: I improved my proficiency with Flexbox, which allowed me to create a responsive and flexible layout for the card. Flexbox's ability to distribute space and align items within a container was essential for achieving the desired design.
2. CSS Custom Properties: I utilized CSS custom properties (variables) to manage styles more efficiently. This practice made it easier to maintain consistency and implement global changes quickly.

:root {
    --primary-color: hsl(75, 94%, 57%);
    --White: hsl(0, 0%, 100%);
    --Grey: hsl(0, 0%, 20%);
    --Dark-Grey: hsl(0, 0%, 12%);
    --Off-Black: hsl(0, 0%, 8%);

    --paragraph-font-size: 14px; /*paragraph*/
}

body {
    background-color: var(--Off-Black);
}

3. Hover and Focus States: I implemented hover and focus states for interactive elements to enhance the user experience. This included changing colors and adjusting other styles when users interact with elements.

.profile-card .profile-link:hover{
    background: var(--primary-color);
    color: var(--Off-Black);
}

Continued development

In future projects, I plan to continue focusing on:

• Enhancing accessibility through improved semantic HTML and ARIA roles.
• Expanding my knowledge of CSS Grid for more complex layouts.
• Exploring CSS animations and transitions to add more interactivity.
• Refining my mobile-first design skills to ensure better responsiveness across devices.

Useful resources

• W3Schools - Great resource for revisiting basic concepts and getting quick references.
• freeCodeCamp - Great resource for revisiting basic concepts.

Author

• Website - Ahmed Mahmud
• Frontend Mentor - @dDevAhmed
• Twitter - @dDevAhmed

Acknowledgments

I'd like to thank the following:

• Frontend Mentor for providing this challenge and the resources.
• The challenge author Frontend Mentor, for designing this project.
• My friends and family for their support and encouragement.

By working on this challenge, I have significantly improved my front-end skills and gained more confidence in building responsive web components.