Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bkpecho/profile-card-component

This is a solution to the [Profile card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ).
https://github.com/bkpecho/profile-card-component

bem css3 frontend-mentor html5 mobile-first-layout responsive-design sass sass-mixins webdevelopment

Last synced: 17 days ago
JSON representation

This is a solution to the [Profile card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ).

Host: GitHub
URL: https://github.com/bkpecho/profile-card-component
Owner: bkpecho
Created: 2023-03-05T06:36:09.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2023-03-06T00:23:49.000Z (almost 2 years ago)
Last Synced: 2024-12-12T20:36:17.912Z (24 days ago)
Topics: bem, css3, frontend-mentor, html5, mobile-first-layout, responsive-design, sass, sass-mixins, webdevelopment
Language: CSS
Homepage: https://bk-profile-card-component.netlify.app/
Size: 313 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Frontend Mentor - Profile card component solution

This is a solution to the [Profile card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

## Table of contents

- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Author](#author)

## Overview

### The challenge

- Build out the project to the designs provided

### Screenshot

#### Mobile View

![](/screenshot/mobile-view.png)

#### Desktop View

![](/screenshot/desktop-view.png)

The above screenshots show how the website looks on both mobile and desktop screens. The design is responsive and adjusts to different screen sizes using the mobile-first approach and flexbox layout. The use of colors, typography, and layout elements is consistent throughout the website, giving it a professional and cohesive look.

### Links

- Solution URL: [FrontEnd Mentor](https://www.frontendmentor.io/solutions/profile-card-component-using-flexbox-sass-and-bem-dF33cWiFkV)
- Live Site URL: [Netlify](https://bk-profile-card-component.netlify.app/)

## My process

### Built with

- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- SASS
- BEM
- Mobile-first workflow

### What I learned

During the development of this project, I gained a deeper understanding of several web development concepts and technologies, including:

-HTML5: I used HTML5 to structure the content of the profile card component and ensure it was semantically correct and accessible.

-CSS3 and SASS: I used CSS3 and SASS to style the profile card component, including creating custom variables and mixins to ensure consistent styling throughout the component.

-BEM: I used the BEM methodology to organize my CSS classes and make my code more modular and maintainable.

-Flexbox: I used Flexbox to create a responsive layout for the profile card component, ensuring that it looks great on any device, from mobile to desktop.

-Mobile-first approach: I used a mobile-first approach to design and develop the profile card component, starting with the smallest screen size and working my way up to larger screen sizes. This helped ensure that the component was optimized for mobile devices and provided a better user experience across all devices.

Overall, this project was a great opportunity for me to apply my knowledge of HTML5, CSS3, SASS, BEM, and Flexbox to create a responsive, mobile-friendly profile card component.

### Continued development

While the current version of the profile card component is functional, there is still one known issue that needs to be addressed:

Responsive background: The profile card component currently uses two backgrounds that can collide with each other on smaller screens. The component will be updated to ensure that the backgrounds are responsive and don't overlap on any screen size.

## Author

- Github - [BK Pecho](https://www.github.com/bkpecho)
- Frontend Mentor - [@bkpecho](https://www.frontendmentor.io/profile/bkpecho)
- Twitter - [@bkpecho](https://www.twitter.com/bkpecho)