Skip to content
Submitted over 2 years ago

Responsive QR Code Component With Flexbox

Rafael Holanda•30
@rafael-holanda
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

How can I simplify the code, especially the CSS?

Do I need to fix something?

Any feedback is more than welcome, as this is my "first" project!

Community feedback

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

    Fala Rafael, beleza?

    Respondendo sua pergunta:

    Pra simplicar seu código basta pensar em inserir somente os elementos necessários, por exemplo, esse desafio requer só uma div segurando todo o conteudo (img, h1 and p1). Nao tem necessidade de nada alem disso, olha a estrutural ideal de html abaixo:

    <body>
<main>
<img>
<h1></h1>
<p></p>
</main>
</body>

    Em relacao ao css, vc tbm nao vai precisar nenhuma id ou classe, basta usar os seletores diretos pra cada elemento visto que existe só um elemento de cada itpo nesse desafio, uma img, h1, div/main e p.

    Fazendo isso vc vai ver que seu código vai ficar bem mais curto e limpo

    Marked as helpful
    1
    Rafael Holanda•30
    @rafael-holandaPosted over 2 years ago

    @correlucas Entendi. Vou reescrever a parte depois, para ver como que fica. Muito obrigado pelas sugestões!

    1
  • Ali Hassan•30
    @alihassan1177Posted over 2 years ago

    You did a great job keep it up. Just prevent using # selector in CSS instead use . selector

    Marked as helpful
    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