Skip to content
OverviewSolutions
6
Comments
13

Orlando Guevara

@coding-tomatoVenezuela220 points

A bit of an empirical loser. Web developer/game developer.

Latest solutions

Latest 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
View more comments