Skip to content
Submitted about 2 years ago

Html, CSS, flexbox

Eliseu Caputo•110
@eliseucaputo
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

Hello!

Here's one more resolution.

I'm having a hard time adjusting the height so that the container is centered. I did it the way I think is right. If anyone wants to leave any comments or criticisms, they are welcome.

Thank you!

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    Oi Eliseu, tudo bem? Tenho duas dicas pra você, uma sobre reduzir a estrutura do html e outra sobre o uso de ID.

    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>

    Não é aconselhável usar IDs como seletores de CSS porque se outro elemento na página usar o mesmo estilo/semelhante, você terá que escrever o mesmo CSS novamente. Mesmo que você não tenha mais de um elemento com esse estilo agora, ele pode vir mais tarde.

    Pra melhorar a performance em diferentes dispositivos e tipos de tela você pode usar rem e em ao invés de px.

    Espero que te ajude, continue no foco!

    Marked as helpful
    0
    Eliseu Caputo•110
    @eliseucaputoPosted about 2 years ago

    @correlucas Obrigado pelas valiosas dicas Lucas! Tenho certeza que elas vão ajudar em projetos futuros.

    1

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