Frontend Mentor - Profile card component solution

This is my solution to the Profile card component challenge on Frontend Mentor. I'm using Frontend Mentor challenges to help me improve my coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

The main goal of this challenge is to build out the project to the designs provided by practicing flexbox skills.

Screenshot

My process

To build this project without Sketch and Figma design file access, I used the LightShot application to take screenshots and analyze the desired content in parts. You can check this analysis in the image below:

This was the first solution's version: In this solution is possible to see any background image in body or in the personal informations section. So as we can see a spacing flexbox issue in account information, where the LI elements are closer than the original design.

Now, let's have a look in the second's solution: That solution is only possible thanks to Frontend Mentor community, who answered my doubts and helped me to build a better code. A special thanks to Hugo Sanchez and Daniel. For this solution I had to add the flex propriety directly in the UL element, like this:

ul{
 width:100%;
 display: flex;
 justify-content: space-around;
}

What I was doing was applying display: flex in the .info-account div. Also, I just avoid fixed measurements in the .card class, letting the child elments naturally expand within the parent container.

The next issue I faced was to find different versions from my local server and GitHub Pages: All of my bg-pattern-top.svg, bg-pattern-bottom.svg, and bg-pattern-card.svg images had the 404 Not Found status code, just as if they were missing files. This issue was solved with MDN documentation search, like this:

background-image: url("../../src/images/bg-pattern-card.svg")

Links

• Solution URL: GitHub Repository
• Live Site URL: GitHub Pages

Built with

• Semantic HTML5 markup;
• CSS custom properties;
• CSS variables;
• Flexbox.

What I learned

It was a relevant project for reinforcing semantic HTML skills, styling and my first flexbox practice where I was able to reinforce the content learned in the classes and activities of the DevQuest course. Building the first project alone is a good experience as it tested what I have really learned and what topics I need to revisit.

Useful resources

• CSS-Tricks - This helped me for being a visual resource and bring some pratical examples of application. I really liked this pattern and will use it going forward.
• MDN Dococumentation - This section really helped me in the last stage from this project, deployiment.
• My own class notes (pt-BR) -These notes were made in class, during explanations of concepts and practical examples.

Author

• GitHub - Thaísa Vieira
• Frontend Mentor - @thaisavieira
• Dev.to - @thaisavieira