Profile Card Component Solution

Frontend Mentor Challenge

View Demo  ·  Report Bug  ·  Request Feature

       

Preview

Links

• Solution URL:	Profile Card Component 🎯 [ SEMANTIC MARKUP - VANILLA CSS3 - BEM ]
  Live Site URL:	https://0xabdulkhalid.github.io/profile-card-component/
  Remastered Version:	/~https://github.com/0xabdulkhalid/profile-card-component-remastered

Pagespeed Insights Score:

• Scored 100% for Both Mobile & Desktop
  Check out Pagespeed Insights to get live score

Built With

• 
• 

Tools Used

• 
• 
• 
• 

Outcome

• Used HTML5 semantic elements for better accessability
• Used Git and GitHub for project management
• Tried to maintain clean code, especially CSS with BEM Methodology
• Used media queries for responsive design, built with Mobile first workflow
• Scored 100% on Pagespeed Insights
• Cross tested on Firefox and Chromium based browsers

What I learned

• Usage of Semantic elements to improve accessability for screen readers
• Utilization of position: absolute property of css to move profile avatar over it's container
• Usage of GRID & FLEX layouts in css
• A lot of minor things

Acknowledgment

• Challenge was provided by Frontend Mentor

Let's Connect 👋