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
  • Need improve
• Author

Overview

The challenge

• Build out the project to the designs provided

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: (https://patejo-coder.github.io/profile-card-component-main/)

My process

I started by analyzing the layout provided for the challenge and decided that I would build the site with a display grid, from then on I demarcated each element in HTML, and from that point I left HTML aside and focused on CSS, with the styling started I was able to direct the website for the path he should follow.

Built with

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

Need improve

I need to improve my understanding of the use of Width and Height properties, so that the site or the elements themselves do not have absolute sizes and end up leaving the site non-responsive, which is a bit of a hassle, at least for me, when editing and fix the responsiveness part.

Author

• Frontend Mentor - @patejo-coder
• Instagram - @patejo_sama