gbmatheus/profile-card-component

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

• Frontend Mentor - Profile card component solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author

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

• Solution URL
• Live Site URL

My process

Built with

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

What I learned

The use of the BEM methodology, which consists of Block - Element - Modified. Block is the component itself. Element is the smallest element that makes up the block. It is a modifier which is used to change the appearance or behavior of the block. This methodology proves to be very useful for organizing projects and reusing components.

<!-- Block -->
<section class="content">
  <!-- Block__Element -->
  <p class="content__description">
  <!-- Block__Element-Modifier -->
  <p class="content__description-highlight">
</section>

Continued development

Maybe by CSS.

Useful resources

• Documentation BEM - This helped me a little with the functioning of the BEM methodology.
• CSS-Tricks - This is an amazing article that finally helps me understand how the background-position property, which I used to position the background images, works.

Author

• Github - gbmatheus
• Frontend Mentor - @gbmatheus