Skip to content
OverviewSolutions
7
Comments
5

AlvaroPrates

@AlvaroPrates130 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • AlvaroPrates•130
    @AlvaroPrates

    Hey, nice work! Pretty close to the design.

    The only things that I noticed was:

    • When opening the preview site in a wider screen, the component streches. I think this problem can be addressed by adding a max-width property to the contant-hold class.
    • Could decrease some line-height from the product title and increase some line-height from the product description. But if you've done everything by eye, its pretty good.
  • AlvaroPrates•130
    @AlvaroPrates

    Hey, nice work!

    Adjusts that make sense from viewing the screenshot:

    • Add or increase the max_width property (with width: 100%)
    • Change the bullet points color
    • Adjust the font color to the lighter gray from the design system

    Regarding the code, I saw that you nested css selectors. I didn't know that you could do that, thanks for showing me!

    Marked as helpful
  • AlvaroPrates•130
    @AlvaroPrates

    Nice work!

    Good use of css variables and code organization. Congrats!

  • AlvaroPrates•130
    @AlvaroPrates

    Good work, keep on practicing!

    Let's go over some point that I observed from the screenshot:

    • I think the card component would look better if centralized in the page. You could achieve that by wrapping the card in a <main> or <section> tags and set display: flex; and add align-items: center; and justify-content: center;.
    • Need to ajust the card width property. In the figma files the card's width is 384px. To make this adjustment easier, you can set box-sizing: border-box in a universal CSS selector.
    • In the design there is a little thin black border around the card. You can add all the properties in the border property.
    • Need to adjust the spacing between elements in the card information. I think the easiest way to achieve different spacing is with the margin-bottom property.
    • Probably should add a little more padding to the card, but I'm just being picky...
    Marked as helpful
  • py-code314•430
    @py-code314
    What are you most proud of, and what would you do differently next time?

    I was able to make good use of Flexbox to center the card and make it responsive

    What specific areas of your project would you like help with?
    1. I wrapped card image, title and text in individual divs. Is it advisable to do it this way or is there a better way to do it?
    2. Tried to use BEM nomenclature for class names. Please let me know if I made any mistakes!
    3. Little confused about the use cases of margins and padding. Is there any good resource out there which explains their proper use?
    4. Any alternatives to media queries so that I don't have to write them for every screen size?

    Responsive QR Code card using Flexbox

    2
    AlvaroPrates•130
    @AlvaroPrates

    I'm fairly new to web-development, but I think I can leave a little feedback.

    When I've done this project, I forgot to add the box-sizing: border-box CSS property and had some trouble to adjust the width. So, nice catch implementing it!

    Regarding the topics that you need help:

    1. Instead of wrapping the image, title and text within normal divs, maybe you can use the <article> and/or <figure> HTML semantic tags.
    2. I didn't use any media queries to this project. Do you really need any?
    Marked as helpful