Semantic HTML, SASS, Flexbox, Mobile-first

Community feedback

• 

  T

  Grace•31,270

  @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
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  Overall it looks like you got all the important elements of this challenge. Good Job! 🌟🌟🌟🌟🌟

  0