Frontend Mentor - Profile card component solution

This is a solution to the Profile card component 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

Overview

The challenge

• Build out a profile card component to the designs provided

Screenshot

• Desktop screenshot

• Mobile screenshot

Links

• Live site URL: https://giovanibulian.github.io/profile-card-component/

My process

Built with

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

What I learned

• Background sizing and positioning with multiple background images
• CSS Grid Layout (basics)

Continued development

I'd like to dive deeper into CSS Grid and also become more fluent in background manipulation.

Useful resources

• CSS-Tricks.com comprehensive guide to CSS grid - This guide is very illustrative and helped me a lot with CSS Grid Layout.
• CSS background-image Tutorial by Kevin Powell - This video guide about background images really helped me with the background-sizing and background-position properties.

Author

• GitHub - Giovani Bulian Simioni