Submitted over 3 years ago
Semantic HTML, SASS, Flexbox, Mobile-first
@Kanonkongen-dk
Design comparison
SolutionDesign
Solution retrospective
First project where I used SASS in a long time. Particular interested in feedback on the SASS bits.
Community feedback
- @grace-snowPosted over 3 years ago
Hi, looks great!
Just a few suggestions but most are pretty minor ☺
- you shouldn't be using blockquotes for these cards
- are you attempting to use BEM naming here? Because it looks like your class names are element style for modifiers and vise-versa...
--
is for a modifier usually, whereas__
indicates an element belonging to a block - scss looks a good structure but I think you're making it way longer / more complicated than it needs to be. Eg that's a lot of utility classes for colors, and all buttons could be the same using 1 css property (mix blend mode screen)
- only add widths if you really need to. Same with height (min-height is often a more robust choice). On this challenge I would have a max width on the container and set its children (the cards to have flex 1 1 33%). That's probably about it. And that's all that would need to change in a media query... I guess I'm advising you plat in dev tools and see how much extra html and css you can remove. It's probably more than you think 😉
Good luck
0 - @palgrammingPosted over 3 years ago
Overall it looks like you got all the important elements of this challenge. Good Job! 🌟🌟🌟🌟🌟
0
Please log in to post a comment
Log in with GitHubJoin 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