jtitak06/frontendmentor-card

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

Overview

• This is a challenge provided by Frontend Mentor. The design and some minimal specifications were provided on this task. This one page challenge tested me to utilize many concepts that web developers will come across during their daily tasks of web development.

The challenge

• The challenge is to build out this profile card component and get it looking as close to the design as possible. I was able to use any tools at my disposal to help complete the challenge.

Screenshot

• Screenshot URL: https://i.postimg.cc/QCDSbrSw/Frontend-Mentor-Solution.png

Links

• Solution URL: https://github.com/jtitak06/frontendmentor-card

My process

• I started with building out the HTML code and worked down from there. After I inserted the HTML code for the background of the page, I typed the CSS for the background. For the background, I used absolute positioning to ensure a consistent look throughout different devices.

After the background was set, I began to build out the card. Although it seemed simple, this proved to be much more difficult than I expected. Similar to the process of establishing the background, I started with the HTML code and worked from the top down. After each HTML class was established, I would set the rules for each class in the CSS.

I used a flexbox to arrange the stats section and a grid to arrange the info section. The margin top feature was used to create the space for the grid and flexbox.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid

What I learned

This project was a review of many of the concepts I have already learned about during my time in the Practicum course from Yandex.

To challenge myself, I did not use the Figma files on this project. I had to look at the picture and guess many of the characteristics of the design based on the provided screenshots.

This was great practice for setting parameters for different devices. I was also able to utilize practice with flexbox and grid feature.

Continued development

I'm extremely determined to become a great web developer. I will use the challenges from Frontend Mentor and the courses available from Practicum by Yandex to continue to develop my skills.

The courses offered through Yandex will teach new concepts and provide opportunities to practice these necessary skills of a full-stack developer.

Both Practicum by Yandex and Frontend Mentor have Slack communities to provide support whenever I come across roadblocks. I can also do online searches for certain concepts that I am having issues with as well.

Author

• Github - Jeff Titak