Skip to content
Submitted 8 months ago

qr code component

Mauricio Andrade•50
@mauricioandrade
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Acho que esse ficou mais claro, não tive muita dificuldade apesar de ser algo simples.

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

No começo esqueci que eu precisava dar um padding na imagem pra ela se ajusar na "div" que eu fiz do background, mas logo percebi e acabou dando certo.

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

Sempre quero melhorar, qualquer sugestão para melhorar o código e deixar menos verboso tá valendo.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Bernardo Poggioni•6,950
    @R3ygoski

    Olá novamente Mauricio, e novamente parabéns.

    Vou começar falando sobre isso que você mencionou do padding. Na verdade, o mais correto era colocar a padding no card, ou seja, no cartaoqr. Porque dessa forma você consegue dar o espaçamento correto para todos os items, e não deixa a padding "fragmentada" em cada elemento. E claro, isso também simplifica pois não precisamos ficar procurando por elemento X para mudar a padding dele quando alterarmos a padding de um elemento Y.

    Caso você remova a padding de todos os elementos e deixe só no cartaoqr, lembre-se de adicionar também ao cartaoqr um gap: 1.5rem, que assim deixara os elementos espaçados.

    Sobre o HTML, mesma coisa que falei da semântica no projeto de NFT, mas dessa vez, o único elemento que poderia ficar mais semântico é div.cartaoqr, que poderia ser uma <article>, explicação também no projeto de NFT.

    E é isso, novamente parabéns, caso tenha ficado qualquer dúvida, já sabe.

    Marked as helpful

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