dpkreativ / profile-card-component

🌱 A profile card component challenge from Frontend Mentor (frontendmentor.io)

Frontend Mentor - Profile card component

Welcome! 👋

Thanks for checking out this front-end coding challenge.

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

To do this challenge, you need a basic understanding of HTML and CSS.

The challenge

Your challenge is to build out this profile card component and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

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
  • Welcome! 👋
  • The challenge
• 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
  • Acknowledgments

Overview

The challenge

• Build out the project to the designs provided

Screenshot

Links

• Solution URL: Click to view
• Live Site URL: Click to view

My process

Built with

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

What I learned

I learned how to add multiple background-image urls and position them using CSS, and I practiced more on using CSS Grid for layouts. I also improved my knowledge of semantic HTML. The CSS code below shows my implementation of multiple background images.

body {
  background-color: var(--color-1);
  background-image: url(./images/bg-pattern-top.svg),
    url(./images/bg-pattern-bottom.svg);
  background-position: top -45vw left -30vw, bottom -60vw right -20vw;
  background-repeat: no-repeat;
  background-size: 80vw;
}

Continued development

I'm going to keep reading up on semantic HTML so that my understanding of it will improve. I'm also going to build more projects so I can practice the concepts I've learned in both HTML and CSS.

Useful resources

• Using Multiple Backgrounds - CSS Tricks - This article helped me understand how to use multiple background-image urls in CSS and how to position them.
• Background Positioning - CSS Tricks - This article helped me properly understand background positioning.

Author

• Website - Divine Orji
• Frontend Mentor - @dpkreativ
• Twitter - @dpkreativ

Acknowledgments

Thanks to the authors at CSS Tricks for the indepth explanation of CSS concepts. Those articles are very valuable.