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

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

• Build out the project to the designs provided.

Screenshot

Links

• Live Site URL: My Work

My process

First, I decided to give myself a timeline of when I hope to finish this challenge. My process focuses on exposure and well, a lot of practice. I worked from the background to the card (holding the information). Within the card, I worked top to bottom (the background image, profile image, . . . , to the stats).

Built with

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

What I learned

I learned how to use background-image for this project.

Continued development

I would like to focus on best CSS practices in the future and reading more documentation.

Author

• Website - Alexandria's Tech
• Frontend Mentor - @alexandriastech
• Twitter - @alexandriastech

Acknowledgments

I really struggled with the background images, so I had to search for different ways to fix it. I discovered the calc function in CSS through ApplePieGiraffe because I tried other positioning but calculating works best. So big thanks to them! Now, I understand the calc function after playing with it.

• ApplePieGiraffee