Skip to content
OverviewSolutions
0
Comments
9

Mike Stop Continues

@mikestopcontinuesUnited States100 points

Principal engineer, leader, and founder, working in frontend for 17+ years. I love helping devs reach their full potential. Former lead of AI Projects, Developer Experience, and Integrations at MongoDB.

I’m currently learning...

I'm learning how to translate my knowledge into content to help devs have the careers they want... fast. Meanwhile, I'm bootstrapping BrowserCat, a platform that gives your code (and AI bots) access to a full web browser. I'm learning a ton along the way!

Latest solutions

No solutions submitted yet.

Latest comments

  • Mike Stop Continues•100
    @mikestopcontinues

    Wow, this is the best solution I've seen. Here's some suggestions:

    1. Designers expect pixel-perfect results. Your component is smaller than it should be, and a few of the styles can be tweaked, including the font-weight. When building components, it's always best to start from the outside and work inward. Get the exterior size and styles right, and the rest will follow.

    2. You nailed the responsiveness. Your work is elastic. That's great. Preserve that when you update the size.

    3. Go back to the active state designs. Something else changes when you click. (Hint: Expand your focus.)

    4. Nice use of CSS vars. Next time, don't attach your vars to :root but to your component's top element .card. This will keep your component's styles from interacting with any other element on the page. Similar, consider giving your component a distinct class .ArticleCard and giving all sub-elements classes like .ArticleCard-image. When working in pure CSS, this is the best way to ensure the fewest bugs as your codebase grows. Similarly, avoid generic styles like a and .h3--style as well as utility classes like .mg-bottom. Put all of your styles on your component-specific classes. Duplicate rules compress really well and using CSS vars ensures you have a way to tweak the whole component at once.

    Nice work. Keep going!

    Marked as helpful
  • Mike Stop Continues•100
    @mikestopcontinues

    Nice work. Here's some suggestions:

    1. Designers are picky. Pay closer attention to the font-weight, line-height, border-radius, and so on. They should be nearly pixel-perfect to the design before you bring it to them for feedback.

    2. Your design becomes responsive at the wrong time. In the real world, you only want elements to shrink when they must shrink. Similarly, you don't really want them to shrink to another specific size, because your user's screen can be any size and there are often many elements on the screen at once that interact in different ways. Instead, prioritize max-width and drop width or min-width wherever possible. This will make your element naturally elastic. Do it well, and this element won't need any media queries at all to shrink as the browser window shrinks. Give it a try!

    3. Go back to the design spec for the active state. Something other than the font-color changes. (Hint: It's not the text at all!)

    4. Lastly, don't include your name or any additional elements in your results. Attribution can go in your git repo and your name already appears on this page.

    Anyway, your work is pretty darn good. Keep going!

  • Mike Stop Continues•100
    @mikestopcontinues

    Nice work! Here's some suggestions:

    1. Use fewer width and min-width rules and more max-width rules. They resize better, making your component "naturally" responsive.

    2. Pay closer attention to the design spec. Designers are very picky. font-weight, font-size, line-height, border-radius, and padding can all be tweaked.

    3. Lastly, take a closer look at the active state spec. What else changes when a user clicks the link? (Hint: It's really big, but it's not on the link itself.)

    You're destine for great things. Keep going!

    Marked as helpful
  • Mike Stop Continues•100
    @mikestopcontinues

    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!

  • Mike Stop Continues•100
    @mikestopcontinues

    Hey, nice work! 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. They would want to see you fix the padding around the edge, the "Learning" pill's shape, and the "active" state when you hover over the article title. See the design images for details.

    2. The mobile design shows the card retaining all of it's padding and text size, but it doesn't show what happens when the device is smaller than the image. Given what you see in the design spec, it seems like the intention is that the card should shrink to fit the device width, meaning that the image should get smaller and the text should wrap. Your problem comes from using too many width and min-width properties with pixel values. Solve this by relying on max-width: *px and width: *%.

    3. Next time around, clean up your CSS before submission. Many of your rules are @media duplicates or are unnecessary. In a toy project, this doesn't matter so much, but in real work, these extra rules make it really hard to maintain code.

    You've come a long way already. Keep going!

  • Mike Stop Continues•100
    @mikestopcontinues

    Hey, this is a great start. I would dip back into this project and give it a few more revisions. Designers and product managers are very picky about their work. They expect you to match their designs nearly pixel-for-pixel.

    When working from a design, I like to go from the outside in. Focus on getting the side of the largest container to work like the design first, then drill down and work on the inner sections.

    In this case, I notice a few things about your outer box:

    • It doesn't have the same box-shadow as in the design.
    • It doesn't shrink when the browser window shrinks.

    After that, take a look at the left area. Use a color picker to select the top and bottom color of the gradient to create your own matching linear-gradient(). Then focus on the text size.

    Similarly, take the right area piece by piece.

    If anything is unfamiliar, remember that the MDN docs on CSS are really awesome.

    Keep going!

View more comments