Frontend Mentor - Profile card component

Design preview for the Profile card component coding challenge

Welcome! 👋

Thanks for checking out this front-end coding challenge.

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

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

  • Build out the project to the designs provided

Screenshot

Links

My process

Built with

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

What I learned

In this project i learned about -

  • Adding multiple background images and how to position them
  • How to position something using position: absolute; property
  • How to something in the center

Continued development

I found myself struggling with position while creating this project and I am going to improve on that.

Useful resources

  • adding Multiple backgroound images - This helped me for adding multiple background images. I really liked this pattern and will use it going forward.
  • Center anything with css - This is an amazing article which helped me finally understand on how to center anything. I'd recommend it to anyone still learning this concept.

Author