Skip to content
Submitted about 2 years ago

QR Code component challenge solution

Leo Silva•40
@leozizz
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

Following the challenge I tried to do the best I could to make it as similar to the design as possible using the knowledge of HTML and CSS that I have.

I used CSS Flexbox and Media Queries for responsiveness. Give your opinion and possible tips on what can be improved, what do you think?

Community feedback

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

    👾Oi Leo, tudo bem? Parabéns pela sua nova solução!

    Acabei de ver o preview da sua solução e tenho algumas dicas pra você:

    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.

    👋 Espero que essas dicas te ajudem e que você continue no foco!

    Marked as helpful
    1
    Leo Silva•40
    @leozizzPosted about 2 years ago

    Fala @correlucas, tudo certo?

    Dei uma olhada nas suas dicas e fiz algumas alterações no código que caíram como uma luva!

    De fato por esse projetinho ser mais simples o uso excessivo de classes no CSS não se faz necessário e o código ficou mais enxuto, assim como o HTML ficou mais semântico.

    Vou me atentar mais a esses detalhes nos próximos projetos.

    Muito obrigado pelas dicas Lucas! Sucesso!

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

    @leozizz Perfeito, fico feliz em ouvir isso! Se for de boa pra você posso analisar suas outras soluções também.

    1
    Leo Silva•40
    @leozizzPosted about 2 years ago

    @correlucas Claro, fique a vontade! Estou sempre aberto a críticas e opiniões com dicas sobre o que posso melhorar nos códigos!

    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