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
• Author

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: https://github.com/joaoc-dev/frontendmentor-social-links-profile
• Live Site URL: https://frontendmentor.newbie.social-links-profile.joao-carvalho.dev

My process

Built with

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

What I learned

I continue to explore the balance between the flexibility of utility classes and component classes.

Tried to keep the card responsive using clamp on the padding and width.

Author

• Website - João Carvalho
• Frontend Mentor - @joaoc-dev