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.
- Build out the project to the designs provided
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.
- Solution URL: FrontEnd Mentor
- Live Site URL: Netlify
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- SASS
- BEM
- Mobile-first workflow
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.
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.