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

All comments

  • Mostafa Karem•80
    @Mostafa-AlfikySubmitted over 2 years ago

    This is my first project in frontendmentor,

    As a beginner, I faced a lot of problems I could not solve and raised a lot of questions, those are some of the issues I faced and I will be very happy if you help me solve and understand them:

    1- My project looks a bit bigger when hosted on github than the original project 2- It was difficult to position elements vertically, I used position, left, top, and transform properties, but I could not understand them in-depth enough to feel comfortable with using them freely, so if you have a link to a course or a book that makes it easy to understand positioning, I would appreciate your help. 3 -What are your tips to write clear code?

    I faced a lot of technical issues, But there are a lot of helpful developer communities that make it easier to find the answers, and I am happy I joined that huge community as a beginner developer.

    QR Code component

    3
    Orlando Guevara•220
    @coding-tomatoPosted over 2 years ago

    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.

    0
  • Orlando Guevara•220
    @coding-tomatoPosted over 2 years ago

    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
    0
  • Kipo•80
    @rezokipSubmitted over 2 years ago

    The hardest challenge for me yet. This time I played around a lot to make the responsiveness as fluid as possible with max width min width and so on. Because of it the CSS looks like a mess. Tried my best.

    Any tipps welcome.

    Thanks.

    social-proof-section-master

    1
    Orlando Guevara•220
    @coding-tomatoPosted over 2 years ago

    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
    0
  • Orlando Guevara•220
    @coding-tomatoPosted over 2 years ago

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

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

    0
  • Kipo•80
    @rezokipSubmitted over 2 years ago

    On this one i first tried to make a fluid transition from mobile to desktop with the "clamp" element but didnt turned out well. Any tipps for that?

    Otherwise i think this one was managable.

    3-column-preview-card-component-main

    1
    Orlando Guevara•220
    @coding-tomatoPosted over 2 years ago

    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
    0
  • Orlando Guevara•220
    @coding-tomatoPosted over 2 years ago

    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
    0
  • Orlando Guevara•220
    @coding-tomatoPosted over 2 years ago

    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
    1
  • Orlando Guevara•220
    @coding-tomatoPosted about 3 years ago

    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
    0
  • Young Jin Seo•10
    @yj6477Submitted about 3 years ago

    My media queries seem to not work when changing it into mobile device and I don't know why. I try to change the border-radius when changing the screen size, but the media queries just don't seem to work on me.

    3-column preview card component

    1
    Orlando Guevara•220
    @coding-tomatoPosted about 3 years ago

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

    0
  • Ken•935
    @kenreibmanSubmitted about 3 years ago

    Did this with Flexbox because I am still not comfortable with Grid. This definitely felt like a project that would have been easier using CSS Grid. A lot of videos/resources on learning grid are a little confusing - If anybody has any good resources that helped them, that would be great. I know grid is very powerful when used correctly.

    SOCIAL PROOF SECTION using Flexbox

    3
    Orlando Guevara•220
    @coding-tomatoPosted about 3 years ago

    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
    1
  • Orlando Guevara•220
    @coding-tomatoPosted about 3 years ago

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

    0
  • Ken•4,915
    @kens-visualsSubmitted about 3 years ago

    I've had a lot of fun building this project, and here is why 👇🏻

    I've wanted to work on a project that will allow me to use both CSS Flexbox and CSS Grid at the same time, that will fit to the needs of the project harmonically. This project was the perfect candidate to achieve what I've wanted to do for a while. Moreover, this was a perfect project to use BEM convention. There are a lot of pieces that are technically the same, so BEM helped me to use its power to shorten my CSS, and of course BEM + SCSS makes both of them even more powerful.

    P. S. I just wanted to spice things up a bit, so I added some hover effects 🙃

    Feel free to leave some feedback 👨🏻‍💻

    Four Card Feature Section with CSS Flexbox, CSS Grid, SCSS, and BEM

    1
    Orlando Guevara•220
    @coding-tomatoPosted about 3 years ago

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

    0