Blog-preview-card

Community feedback

• 

  Mike Stop Continues•100

  @mikestopcontinuesPosted 11 months ago

  Hey, nice work! Your work is pretty good, and very few people noticed the big shadow of the active state! Here's a few tips for next time:

  1. Designers and Product Managers are very picky about their designs. Before you present your work for feedback, you should aim for pixel-perfect design. The pill is notably different (with a typo), as is the line-height of the description.

  2. Your responsiveness doesn't align with the designs. This is another place your designer will have problems. At most screen sizes, the card should look like it does in the desktop image. And when the screen gets small, the width of the container should shrink, but the contents (according to the design) don't get any smaller. To fix your design, look into using max-width rather than width. Your inner elements really shouldn't have any width at all.

  3. In your CSS, I would avoid using "utility classes" like .bold800. They make your code much more difficult to maintain because it's not immediately clear in your code what styles are impacting this specific element. Also, they don't improve your user's experience, since compression is very effective at squashing repeated rules.

  Next time, try giving your component a distinct component class like .ArticleCard, then use inheritance to target nested selectors like .ArticleCard-image. This is one way to ensure you can drop your component into a larger codebase with minimum conflicts. And you can be sure of exact what style is impacting which element even in very large codebases.

  Keep going!

  0