Skip to content
Submitted 3 months ago

Componente de QR que utiliza flexbox

Alfonso Manuel Vidrio Lizaola•70
@AlfonsoVidrio
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?

I’m proud of learning how to replicate a simple design in Figma. Next time, I would like to use CSS Grid instead of Flexbox for better layout control.

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

I had trouble centering my component on the screen, but with some research and help, I was able to achieve it successfully.

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

For now, I think everything is fine. I'm pleased with how it turned out, especially considering it's my first challenge.

Community feedback

  • Anny Chagas•10
    @AnnyCarolinePosted 3 months ago

    First, your repository README is very well written!

    It's also great to use CSS variables for colors. It helps a lot if you need to implement theme switching or when you need to update a color.

    I missed the fonts, thought. You can download it from the link at the style-guide.md and import it at the CSS using @font-family.

    Also, the card placement doesn't seem right. I can think of two ways of solving this issue:

    • Using display: flex: define the height of the body as 100vh, and make it a flex container, with both align-items and justify-content as center.
    • Using display: grid: define the height of the body as 100vh and make it a grid container. Then, define place-self: center; for your card.

    Please, let me know if you need any help fixing the code. My LinkedIn is https://www.linkedin.com/in/anny-chagas/.

    1
    Alfonso Manuel Vidrio Lizaola•70
    @AlfonsoVidrioPosted 3 months ago

    Thank you so much, @AnnyCaroline, for your helpful comments! I'm glad to hear that the README is well-written and that you appreciate the use of CSS variables for colors.

    I’ve resolved the centering issue based on your suggestions. I implemented the recommendations regarding display: flex, and the card placement is much better now. 😄

    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