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
  • Useful resources

Overview

The challenge

Users should be able to:

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

Screenshot

Desktop:

Mobile:

Links

• Live site: https://michahuhn.github.io/frontendmentor-social-links-profile
• Challenge solution: https://www.frontendmentor.io/solutions/social-links-profile-using-vue-Ps-OqQsjPV

My process

Built with

• Vue
• SCSS
• Semantic HTML5 markup
• Accessibility
• Mobile-first workflow
• Custom CSS properties
• CSS Grid

What I learned

I made the card responsive by using a media query and by using fluid design. The card's width automatically adapts to the viewport on mobile screen sizes.

I also used the <q> tag to create the quote.

Useful resources

• Unfamiliar CSS patterns that improve on the classics - YouTube - How I created the max-width-wrapper class to make the card responsive.
• Get your stylesheets more organized with Sass partials - YouTube - My SCSS folder structure is inspired by this video.