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 beginner level challenge, doesn't have that much going on when transitioning from mobile design to desktop design. What might be a challenge however for beginners is the background patterns.

The challenge

• The challenge was to build out the project to the designs provided

Screenshot

Links

• Github Repo: Github
• Live Site URL: Netlify

My process

As always, I work with a mobile first workflow.

• After analyzing the design patterns for both desktop and mobile, I build out the structure using html.
• I have also started using root variables in all my projects so i created a custom css snippet that has all variables needed in my projects
• The next step is to lay out the styling for the mobile design
• After mobile design, I add breakpoints for my desktop design using media queries and add the styles for larger screens

Built with

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

What I learned

I have really learned alot in this challenge.

• First thing, i have learned how to set background patterns to your designs
• I have also learned how to use the z-index property
• I have learned how to properly use transform property in css and z-index
• Lastly, I have learned to use an appreciate the awesome power of css

Continued development

I want to continue improving on complex css techniques to improve my styling game and to also start worrking on projects with javascript

Author

• Github - Munyite001
• Frontend Mentor - @munyite001
• Twitter - @emunyite