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

Overview

The challenge

• Build out the project to the designs provided

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/simple-responsive-profile-card-with-html-css-9zoNxvEqF
• Live Site URL: https://ameyadeokule.github.io/profile-card/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Clamp()

What I learned

• Using 'Clamp()' to fix an element to the desired place even when resizing.
• Using CSS Grid to align two or more elements to take up a fix percentage of space on all screen sizes
• Flexbox to arrange element with respect to the available screen space.
• Pracrice to only specify the width and let the content of the element decide it's height.

Continued development

Redo the coding process using Tailwind and use any API to pull in stats and photos in real time.

Useful resources

• A Complete Guide to Flexbox - This section helped me in better understanding flexbox and how the arrangements world

• A Complete Guide to CSS Media Queries - This is an amazing article which helped me finally understand breakpoints and how to handle HTML elements on a much smaller screen using CSS media queries.

• CSS Tricks for Grid - Helped to understand CSS grid fragments.

• clamp() - Helped to understand clamp function and its use.

Author

• Website - Ameya Deokule
• Frontend Mentor - @ameyadeokule

Acknowledgments

I would like thank Kethmar Salumets @developerhabits for encouraging me to start completing challenges on Frontend Mentor.