Skip to content
Submitted 7 months ago

Responsive page using Flexbox to adapt to all screen sizes.

Flavio S.V•60
@Flavio-sv
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

What I am most proud of is having finished this project, despite its simplicity. I like how simple things can be challenging.

For now, I wouldn’t do anything differently.

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

The biggest challenge I encountered was making it responsive, but after much research, I found some ways to do that.

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

I would like you to analyze my HTML and CSS code and give me feedback and tips on how I can improve my code and further enhance my skills. This would help me a lot, and I would be very happy with everyone's contribution.

Community feedback

  • jgambard•340
    @TripouillePosted 7 months ago

    Hi Flavio !

    Congratulations! Adding height and width attributes to the img tag can help prevent layout shifts. Additionally, I suggest creating CSS variables for colors to enhance maintainability and readability. Apart from that, great work!

    1
    Flavio S.V•60
    @Flavio-svPosted 7 months ago

    Hi, @Tripouille!

    I was considering using it, but then I started to doubt: should I use variables, given that the CSS code is not very extensive and the colors are only used once throughout the code? But thank you for the tip; I will adopt this method of using variables. Thank you again for the feedback.

    0
  • xiNeRoar•50
    @xiNeRoarPosted 7 months ago

    There are indeed a very slight shadow around the card in the original image, next time you might consider code that as well

    1
    Flavio S.V•60
    @Flavio-svPosted 7 months ago

    Hi, @xiNeRoar!

    I think it's time to change my glasses; I hadn't even noticed that shadow in the background. Thank you for letting me know, and you can be sure that I will implement it. Thanks again for your feedback.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord