Skip to content
OverviewSolutions
3
Comments
3

Anderson Paulo

@AndersonPaulo50 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

Latest comments

  • Anderson Paulo•50
    @AndersonPaulo

    Compared to other codes I've seen, this one stands out for its quality and performance." Code optimization is above average, which demonstrates special care for performance.

  • Anderson Paulo•50
    @AndersonPaulo

    Congratulations, your code is easy to understand, it was perfect, I'm following your way of developing responsive websites. I have a long way to go.

    Marked as helpful
  • Aiden•20
    @sorcerycss
    What are you most proud of, and what would you do differently next time?

    I'm extremely proud of making this my very first challange here, on Fronted Mentor. The QR code component is a great starter project and I really enjoyed it despite being a little bit lazy with refactoring my CSS. I'd definetely be more efficient with my styles next time and not overthink as much as I do.

    What challenges did you encounter, and how did you overcome them?

    I had trouble centering the component using flexbox. The way I approched this was by adding height: 100vh; to my generic .container. I haven't learn much about the viewport units yet, just have the basic idea of how it works, but it seemed to make it work for this challange.

    What specific areas of your project would you like help with?

    First of all, I'd love to hear experitise opinion regarding the CSS reset, more specifically box-sizing: border-box;. I noticed that it shrinks the component a little bit, so I decided to comment it out for now. Please advise!

    This is my very first solution on this platform plus I have zero experience working with Figma, so I'd also love to find out if my min-width: 288px; and max-width: 288px; on generic .container have place to be as a workaround.

    Regarding the .container: I started to overthink a lot, and made my .container extremely large in terms of attributes inside, so I can't really call it generic afterwards. As far as I know, there should be only width, max-width, and margin: 0 auto;. Should I just make another div inside the .container where I would include things like box-shadow, border-radius and background, or just make an additional class and append to existing div?

    Image tag <img>: Is it a good practice to have my <img> wrapped inside separate div? Or it just depends how I implement flexbox to such things if I were to use it on this specific image? Also, I've added a fixed height: 288px; and width: 288px; to the qr code image, but I'm very unsure if that's proper way of doing that. Please help!

    Lastly, margin on .qr-title in em units. When I do 1.5em for margin-top, it shows as 33px, not 24px in Dev Tools, but when I do it in px instead of ems everything fine in Dev Tools. Any ideas on why this is happening?

    QR code component using CSS Flexbox

    1
    Anderson Paulo•50
    @AndersonPaulo

    Congratulations!....It's identical. I learned a lot by looking at your code, thank you very much. I found it interesting that you didn't need to use @media to make it responsive.