Skip to content
OverviewSolutions
0
Comments
9
Mike Stop Continues
@mikestopcontinues

All comments

  • Mike Stop Continues•100
    @mikestopcontinuesPosted 11 months ago

    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
    1
  • EduardoSaavedraQ•50
    @EduardoSaavedraQSubmitted 11 months ago

    This was the second challenge I tried from frontendmentor.io

    This time I was doubtful about how I built the html. I've tried to make it as semantic as possible.

    Responsive Card Using HTML and CSS

    1
    Mike Stop Continues•100
    @mikestopcontinuesPosted 11 months ago

    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!

    0
  • Melinda Eve•30
    @hejira42Submitted 11 months ago

    Completed blog preview card challenge.

    I feel like there's funny business going on with:

    1. the author's avatar - is it distorted?
    2. the left & right space around the top image - is it even?

    Thanks in advance if you take the time to review. <3

    Blog Preview Card Challenge - Solution by M.E.

    2
    Mike Stop Continues•100
    @mikestopcontinuesPosted 11 months ago

    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
    0
  • 206lee•10
    @206leeSubmitted 11 months ago

    It was difficult to make it a reactive type. The border redius of the image was not applied well.

    Blog-preview-card

    1
    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
  • Mike Stop Continues•100
    @mikestopcontinuesPosted 11 months ago

    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!

    0
  • muhibkhan2005•80
    @muhibkhan2005Submitted 11 months ago

    I completed this frontend mentor challenge result summary card component. you can my solution here. Any suggestions on how i can improve are welcome.

    result -summary-component-main

    1
    Mike Stop Continues•100
    @mikestopcontinuesPosted 11 months ago

    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!

    0
  • Mike Stop Continues•100
    @mikestopcontinuesPosted 11 months ago

    Hey, this is very nice work.

    I like that you're getting some experience with tailwind. It's very popular these days. That said—consider it a stepping stone to learning to write good pure CSS. CSS libraries only last a few years each, and your career will be much longer than that.

    Also, designers can be very picky about their work. In the workplace, I would give this one more pass to make sure the width and the purple-blue gradient was the same as they asked for. (I'm sure you know this, but you can use a color picker to grab the top and the bottom gradient colors to create your linear-gradient() css style.)

    Lastly, I would think about making your HTML more semantic:

    • This widget would likely be part of a larger page. That makes it a section.
    • Similarly, we generally only see one h1 per page, so it would be best if this widget started with an h2. You also want to make sure that all other headings are subservient to the main heading of your widget. So all of the others should be h3 or below.
    • Third, your results are really more of a list. Rather than use headings, consider using ul and li to indicate they are a group, and that the elements are "parallel" to one another.

    You're destine for great things.

    Marked as helpful
    0
  • Mike Stop Continues•100
    @mikestopcontinuesPosted 11 months ago

    Hey, you got this really close to the design. Nicely done.

    Here's some thoughts I would offer as a lead dev on your team:

    1. Designers are very picky about their designs. Can you update your design so that the overlay color is closer to the design?
    2. I think the design gets responsive too early. It should collapse for mobile only when the browser window is very close to the component. Use the padding from the mobile design image as a guide.
    3. I notice your HTML can be a bit more semantic. This widget would only be part of a larger design, so it should be a section, not an article. (Articles are for long content, or for excerpts of long content.) Similarly, you wouldn't use section within a section. The inner sections should be plain divs. Lastly, it's best practice to never skip heading levels. Where you have h1, I would use h2. After all, this would be part of a larger web page, and the full page will have an h1 for everything.
    Marked as helpful
    0
  • Mike Stop Continues•100
    @mikestopcontinuesPosted 11 months ago

    When working with a designer (as you are for this project), it's important to get as close to their design as you can. You'll notice many of your components differ in size from those of the design spec. While getting a pixel-perfect design isn't your first step, before you present your work for feedback, you should clean up this sort of thing.

    Marked as helpful
    0