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

Project tracking intro component - BEM | SASS | Grid | Flexbox

SimpleMB 260

@SimpleMB

Desktop design screenshot for the Project tracking intro component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@gramme01

Posted

Hi, SimpleMB. Great job here. I noticed the div with class 'wrapper__background' has a 'src' and 'alt' attribute. Perhaps you meant to use an 'img' tag.

Also, good use of BEM. However I also noticed things like you were selecting elements with more than one class. The idea of BEM is that all selectors have a specificity of 10 i.e selected with only one class.

e.g: you had

'.menu__list .menu__item .menu__link'

to select the .menu__link

You should only use '.menu__link'

The advantage of this is that you can move the html element to anywhere in the block without having to change your css code.

All-in-all, great job done. And I must say this, you inspire me. You're consistently churning out great solutions to the challenges here.

1

SimpleMB 260

@SimpleMB

Posted

Thank you Emmanuel :)

0
SimpleMB 260

@SimpleMB

Posted

Hi, gramme01.

That div WAS an img. I renamed tag but forgot to delete img attributes.

As of BEM with SASS. This was my first project using it.That 3 level deep nesting was done by my SASS pre-processor.

Thank you for your feedback!

1
P
Matt Studdert 13,611

@mattstuddert

Posted

Another awesome solution! 💯

Emmanuel makes a great point about nesting the selectors in Sass when using BEM. The methodology behind BEM is that it allows you to reduce the specificity of your selectors by targeting the single class directly.

Keep up the great work!

0

SimpleMB 260

@SimpleMB

Posted

Holy Moly! I've done some research on what you two are talking about and Now I get it. Thank you Emmanuel and Matt.

Thank you guys :)

0

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