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

Four card feature - HTML/SASS

Rayaneβ€’ 1,935

@RayaneBengaoui

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone ! πŸ™‚

Here is my version for this challenge, any feedback/remark is appreciated ! I guess I could have done a media query for tablet view to make the transition softer.

Have a nice day β˜€οΈ

Community feedback

Arturo Simonβ€’ 1,785

@artimys

Posted

Hi Enayar, you did great job. You were able to capture the details really well. I do agree with you on a tablet view for the transition from mobile to desktop. I'll add some feedback.

  • Good use of using BEM. I would only suggest adding the --modifer to your class that overwrites the color. Example card__top-color blue_color to card__top-color card__top-color--blue. Though I do admit your method looks much cleaner for this situation.

Just a note. Be aware of "specificity" when building out your selectors (example below of what I mean). Sometimes when they nest too deep in larger projects. It can be difficult to over override styles and manage. BEM is a way to help know which classes go along with each other which you already have a start on.

body main .cards .card .card__description {  <-- these guys I'm referring to

}

Great job, keep it up and keep on coding!! πŸ‘

2

Rayaneβ€’ 1,935

@RayaneBengaoui

Posted

Thank you @artimys for this feedback ! πŸ™‚

I recently started to read about BEM methodology and found it very interesting, so I try to use it more and more but I'm not confident yet. Next time I won't forget to use a --modifier.

For the specificity I totally get your point. But I really like how I can nest everything with SASS because I find it very clean on the "code side" (personnal preference). So do you suggest to nest less so that I can reduce my specificity ?

I'll take a look on your code to see how you process, thanks again πŸ‘

0
P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Hey, nice work, Enayar! πŸ‘

Your solution looks good and is responsive! πŸ‘

Just a tipβ€”I think you can make your HTML is little more semantic by using a <h1> tag for the heading of the page and perhaps some <article> tags for the feature cards. πŸ˜‰

Keep coding (and happy coding, too)! 😁

1

Rayaneβ€’ 1,935

@RayaneBengaoui

Posted

Thank you @ApplePieGiraffe for this feedback ! πŸ™‚

Ho right ! I've never dived into semantic HTML but seems a good idea for a better readability. I'll implement it next time πŸ‘

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