Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

flexbox css html

teolima 50

@teolima

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

O que eu mais tenho orgulho é de enfrentar o primeiro desafio, mesmo sabendo que estou começando na área da tecnologia. Foi errando muito nas primeiras tentativas e revendo os erros. Sei que ainda tenho muito a aprender, mas não adianta desistir. Então, é praticar e continuar tentando.

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

Os desafios encontrados foram muitos. Posso dividi-los em 4 etapas, que são: 1) Conseguir alinhar o QR Code no centro da página. 2) Conseguir fazer com que o QR Code ficasse com as bordas arredondadas. 3) Fazer com que o H1 e o parágrafo ficassem todos abaixo da imagem. 4) Tornar a página responsiva. Comecei a superar esses desafios a partir do momento em que parei e comecei a inspecionar a página. Nessa hora, a mente se abriu. Sei que talvez não esteja tudo perfeito, mas o legal foi que consegui alinhar o QR Code no centro da página.

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

Gostaria muito de ajuda sobre responsividade. Eu terminei, mas não sei se fiz certo ainda. Sou iniciante e, como estou no início, não sei muita coisa e estou inseguro. Gostaria de orientação sobre se usei as divs corretamente. Não sei se usei código demais ou não. Onde posso melhorar? O que estudar mais?

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Fala @teolima!

Seu projeto ficou ótimo!

Sobre sua dúvida pra centralizar o card:

📌 Existe uma forma bem eficiente de posicionar elementos no meio da página (tanto na horizontal quanto na vertical):

  • Aplique isso ao body (Pra funcionar corretamente, não use position ou margins):
body {
    min-height: 100vh;
    display: flex; /*  também funciona com grid  */
    justify-content: center;
    align-items: center;
}

Espero que ajude!

Fora isso, você fez um excelente trabalho!

Marked as helpful

0

teolima 50

@teolima

Posted

@danielmrz-dev tá blza valeu pela dica.👍

0

Please log in to post a comment

Log in with GitHub
Discord logo

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