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 section with CSS grid and Flex

@JanWu100

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


I did it to refresh my memory on grid span / grid area.

Community feedback

Danilo Blas 6,300

@Sdann26

Posted

Hehehe your passion for good designs is very noticeable, I was checking your github and your project and you have done quite well. I was just going to recommend you that I think you are not using the BEM methodology very well.

I mention it because BEM says to use "--" to make modifiers and " __ " to indicate elements. In your case if you wanted to indicate that the card will be given a particular modification you would use card-strap--cyan instead of card-strap__cyan since he "__" is used more to talk about an element (<p>, <img>, <em>, <span>, etc.) and not for a color type modification.

I just wanted to make incapie in that, the rest you have been pretty good responsive and animations personally I really like what you've achieved, I also think you already eliminated the errors in the report which I would recommend you to generate another to leave without errors.

Just that, I hope my comments can help you. Good luck!

Marked as helpful

1

@JanWu100

Posted

@Sdann26 Thank you for all the nice things you wrote :) and also for the tip on BEM. I have read about it some time ago and i see that i need to refresh my memory and learn some more, i will definetely focus a little bit more on BEM on my next challenge ;). Also I appreciate you took time to see my github :)

1
Danilo Blas 6,300

@Sdann26

Posted

@JanWu100 You're welcome, my friend, you should always emphasize the good things you do.

Apart from what you already mentioned you could find out about normalize.CSS and reset.CSS, which are stylesheets that are placed before your main stylesheet to reset the default styles of the different browsers out there. Just that last detail good luck, Jan Wągrowski!

Marked as helpful

0

@JanWu100

Posted

@Sdann26 I actually used normalize.CSS in some of my previous projects, but i never heard about reset.CSS so I will also read up on that. I didnt used normalize for challenges yet, but maybe that is also a good idea, especially for upcoming harder ones :). Thanks!

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