Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile Card Component

#bem#sass/scss

@garcialexco

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi there! This is my solution for this challenge. πŸš€

Help:

I'm just learning to use BEM and SASS, I would really appreciate any tips, advice, or any resources you can provide.

Built Using:

SaSS BEM Responsive Deisgn

Any ideas on how to improve and reduce redundant code are appreciated greatly!

Much thanks. 😊

Community feedback

Darwin Grisalesβ€’ 130

@jhonGriGi

Posted

In general, this is a good solution; be careful with the extra double quote in your index.html line 16.

My recommendation for Sass and Bem is:

1: Instead of using your html tag in CSS, use a class or id attribute; this way, if you want to change the attribute, you don't have to change the CSS files.

from: hr: { // code }

to: .separator { // code }

2: I would rename the .stats__text and .stats__bold classes to .stats__text-bold and .stats__text-normal to make your code easier to read.Β 

Good job with your solution.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord