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

The brief for this project was to build out the social links profile and get it looking as close to the design as possible, starting with the following assets:

• JPEG design files for mobile & desktop layouts
• Style guide for fonts, colors, etc.
• Optimized image assets
• Variable and static font files
• HTML file with pre-written contents

Users should be able to:

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

Screenshot

Links

• Frontend Mentor solution
• GitHub repository
• Live site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS flexbox

What I learned

If you compare the desktop layout with the mobile layout, you can see that on desktop the social links are slightly wider than the paragraph directly above them. On mobile, the width of the links is closer to the width of the paragraph. That is, going from desktop to mobile, the width of the card shrinks to fit the smaller viewport width.

I knew I could achieve this shrinking behavior with flexbox. What I had to figure out was that the main element had to span the whole viewport width. With main as a flexbox container with the default flex-direction: row, I used justify-content: center and align-items: center to center the card horizontally and vertically. flex-basis: 24rem and the default flex-shrink: 1 gave me the desired width of the card component in the desktop layout and the shrinking behavior for small viewport widths.

main {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  /* ... */
}

/* Profile card */
.card {
  /* ... */
  flex-basis: 24rem;
  /* ... */
}

Continued development

This project is the third of four challenges on Frontend Mentor's learning path Getting started on Frontend Mentor. All four are HTML & CSS only with no JavaScript with a focus basic web development best practices. They build a foundation for more complex projects.

Useful resources

• An Interactive Guide to Flexbox by Josh Comeau - I come back to this guide every time I get stuck on a problem with flexbox.
• MDN article on styling links - This article gives a good introduction to styling links in all their different states.

Author

I'm an aspiring web developer and a former chemist. What I bring from chemistry to software development is a systematic approach to problem solving and the perseverance to not give up easily.

• Frontend Mentor - @SabineEmden
• Personal Website - Sabine Emden
• Mastodon - @sabineemden

Acknowledgments

This project uses Josh Comeau's CSS reset.

The font family used in this project is Inter. The fonts are licensed under the Open Font License.