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

• 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

Links

• Live Site URL: Live Site

My Process

Built With

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Google Fonts - For font styling

What I Learned

In this project, I learned to:

• Implement hover and focus states effectively for interactive elements.
• Use CSS custom properties to maintain a consistent color scheme.
• Adjust layouts responsively with media queries to ensure compatibility across various device sizes.

    <section class="profile-info">
        <h2>Jessica Randall</h2>
        <p class="user-location">London, United Kingdom</p>
        <p class="passion">"Front-end developer and avid reader."</p>
    </section>

    .social-links a:hover {
        background-color: var(--green);
        color: var(--grey-700);
    }

Continued Development

I plan to continue improving:

• My responsiveness techniques to handle more diverse screen sizes.
• The performance optimization of my CSS for better load times.
• My understanding of accessibility features in web design.

Useful Resources

• MDN Web Docs - Great for learning about HTML and CSS properties.
• CSS-Tricks - Helpful articles and examples on CSS techniques.

Author

• Frontend Mentor - @Yashi-Singh-1
• LinkedIn - Yashi Singh

Acknowledgments

A big thank you to the Frontend Mentor community for providing such engaging challenges and to my peers for their constructive feedback.