Skip to content
OverviewSolutions
6
Comments
13
Orlando Guevara
@coding-tomato

All comments

  • Orlando Guevara•220
    @coding-tomato

    Hello!

    Regarding your question about tips to write clear code, I highly recommend to study the BEM convention to write CSS. Can't state how much more predictable, debuggable and reusable my code now is thanks to it.

    https://css-tricks.com/bem-101/

    The concepts to implement it are rather simple and although they increase boilerplate due to more classes being created (which can be reduced with a preprocessor such as Sass), I found the benefits to outweigh any cons it might have.

  • Orlando Guevara•220
    @coding-tomato

    I think the HTML is fine! Good work.

    Seems like the font-weight for the description is off. Other than that it looks good!

    If you wished to work further on it, you could add some responsiveness by making the width of the card have a max-width and a min-width, and have the width be 100%, so it stretched a bit depending of the phone's screen width.

    {
    min-width: 200px;
    width: 100%;
    max-width: 300px;
}

    A similar approach would be to instead use clamp, to clamp the width between a set of values:

    {
    width: clamp(200px, 100%, 300px);
}

    To make these changes effective you'd need to make some adjustments on the padding of the card, among other things.

    Marked as helpful
  • Orlando Guevara•220
    @coding-tomato

    Hello! If you have trouble organizing your CSS to be more readable, I highly recommend to learn about BEM.

    It's a way to structure CSS code in a way that's more predictable, readable and contained.

    Reference: https://css-tricks.com/bem-101/

    Marked as helpful
  • Orlando Guevara•220
    @coding-tomato

    Hello! Good work, I structure the HTML in a very similar way.

    Thinking of making it responsive? To adjust for the mobile view.

  • Orlando Guevara•220
    @coding-tomato

    Hey! I was fiddling a bit with your website to add the clamp functionality you desired.

    I added a little bit of padding in the body tag so the component wouldn't crash against the edges.

    body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  padding: 2rem;
}

    And of course, I made the main container's width responsive by adding clamp to its width. I used the values shown as an example.

    main {
    width: clamp(920px, 100%, 1200px);
    display: flex;
}

    You can set something lower like 500px but you'd need to adjust the media query too.

    Now, this breaks the site, because now everything is aligned to the left, but you just need to center items in the X axis by adding:

    main {
    width: clamp(920px, 100%, 1200px);
    display: flex;
    justify-self: center;
}

    Overall very good work! Making things responsive can be tricky, as you can very easily break other elements.

    Marked as helpful
  • Orlando Guevara•220
    @coding-tomato

    Hello!

    Maybe instead of using media queries for different pixel sizes, you could use this line of code

    width: clamp(375px, 100%, 450px)

    There would need to be some adjustment, but it could help you reduce boilerplate code.

    Marked as helpful
  • Orlando Guevara•220
    @coding-tomato

    Hello!

    Seems like reducing the height of the site breaks the component, I'd add a minimum height for both the spending section and the header.

    Also, the component doesn't seem width responsive, maybe you could add it? Something like clamp: (375px, 100%, 450px).

    Very good work!

    Marked as helpful
  • Orlando Guevara•220
    @coding-tomato

    Looks excellent Matt! Perhaps you could've made the cards in the desktop view responsive? I know you added a Media Query to reduce a bit the width of each card, but it might have been better to have it adjust to viewport width like you did with the mobile view!

    Marked as helpful
  • Orlando Guevara•220
    @coding-tomato

    Have you tried including the media queries in the end of your CSS file instead of in the HTML?

  • Orlando Guevara•220
    @coding-tomato

    To your question, have you ever tried Grid Garden? Kickstarted me into realizing how good Grid is for like... A lot of things!

    Marked as helpful
  • Orlando Guevara•220
    @coding-tomato

    Looks really good! Would you ever try to use Grid for something like this in the future?

  • Orlando Guevara•220
    @coding-tomato

    That hover effect is sick! Love how a very simple use of transform properties can give a page so much charm.

  • Orlando Guevara•220
    @coding-tomato

    Hello! Seems like the report has some HTML issues.

    I'd also like to point out that the font for the card heading isn't the correct one.

    Great work!