Frontend Mentor | QR Code Component Flexbox centering coding challenge solution

@correlucas

Posted about 2 years ago

👾Oi João Oliveira, tudo bem? Parabéns pelo desafio!

Acabei de ver sua solução e tenho umas dicas pra melhorar seu código/design:

1.O seu componente já está com o design pronto, um bom exercício pra melhorar seu código, seria criar a estrutura mais limpa o possível e reduzir seu código ao máximo. Por exemplo, você pode segurar todo conteúdo em um bloco só usando (<main> ou <div>) nesse caso vamos usar <main> por que é uma tag semantica. Se você notar, nem precisa adicionar nenhum div além da principal pra segurar o conteúdo (img, h1 e p). A estrutura ideal e mais limpa possível pra esse desafio é essa aqui:

<body>
<main>
 <img src="./images/image-qr-code.png" alt="Qr Code Image" >
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </main>
</body>

Para reduzir o CSS, você pode excluir todas as classes e selecionar todos elementos no CSS com o seletor direto para cada um deles, nesse caso (img, div, main, h1 e p). Faltou também colocar o alt text pra imagem ser reconhecida por leitores de tela.

2.O CSS padrão vem com um monte de comportamentos que deixam o código dificil de configurar, por exemplo, margens, imagens, animações e etc. Usando esse CSS RESET, você vai salvar um bom tempo usar esse arquivo que já reseta a maioria das coisas como margens, imagens, animações e etc. Vai salvar um bom tempo usar isso desde o começo: https://piccalil.li/blog/a-modern-css-reset/

👋 Espero ter ajudado e continue no foco!

Marked as helpful

João Oliveira• 370

@jvmdo

Posted about 2 years ago

@correlucas obrigado pelo feedback. Utilizei o elemento section porque decidi aplicar margin e gap para/entre h1 e p de uma só vez ao invés de aplicá-las individualmente a cada elemento e também com intuito de praticar flexbox.

QR Code Component Flexbox centering

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community