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

This is 6th project from "Frontend Mentor" to sharpen HTML & CSS skills along with responsive web design and it's build with BEM and Flex layout.

The challenge

Adding multiple background images with correct position, proper usage of symantic HTML elements, flex layout and over all CSS good practices. Learning never STOPS.

Screenshot

Links

• Solution URL

My process

• Use Google drawing to draw boxes as per design
• Add BEM class names against each of the boxes
• Create HTML -> add BEM class names
• Mobile screen styling first
• Use media query to design for desktop

Built with

• Semantic HTML5 markup
• BEM
• CSS
• Flexbox
• Mobile First workflow

What I learned

• Able to solve few complex challenges wrt CSS by googling and reading different approaches.
• Breaking down big problme into as small chunk as possible, helps to solve it quickly

Continued Development

• More practice, reading, study is needed wrt BEM, SEO, Accessibility, CSS

Useful resources

• Check Acknowledgments section

Author

• Frontend Mentor - @vikramvi

Acknowledgments

Kevin Powell

• Learn flexbox the easy way
• Do you understand how Flexbox does what it does?
• Stop using Chrome if you're writing CSS
• Fastest way to be a MASTER web dev???