Skip to content
Submitted about 2 years ago

HTML + CSS Page

Bernardo Hollmann•250
@BernardoHollmann
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

The most dificult part for me was to place the container in the middle of the viewport. I did it using "display:flex" with "align-items:center" in the body section along with "margin: 0 auto" in the container. The rest of the CSS code was simply designed parameters to match the requested result.

Community feedback

  • Luigi•240
    @luigi-peronePosted about 2 years ago

    Hi Bernardo, congratulations for your first solution! And welcome to the Frontend Mentor community 👍

    You've a great solution here but there are some tags you can consider changing in the html, for example, the h2 should be wrapped with an h1, you can also replace the first div with an main tag and you should update

    <img src="images\image-qr-code.png" alt="QRCode">

    to

    <img src=".\images\image-qr-code.png" alt="QRCode">

    Hope it helps, happy coding 👋

    Marked as helpful
    1
    Bernardo Hollmann•250
    @BernardoHollmannPosted about 2 years ago

    @luigi-perone Hi Luigi! Thanks for welcoming me! =) Yes, I will consider this for my further projects. I really didn't understand what I did wrong in the <img>, but you explained me why. Thanks a lot!

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

    👾Fala Bernardo, tudo bem? Parabéns pelo desafio!

    Sua solução ficou perfeita, eu só mudaria algumas tags e reduziria o html, por exemplo, pra div que segura todo conteúdo vc pode usar tag semantica como <main> e ao invés de usar h2 voce pode usar o h1 ja que o texto principal dessa pagina é o titulo. Ao que diz respeito da estrutura do html vc pode reduzir tudo em somente uma div/main e dentro dela colocar todos elementos (img, h1 e p), desse jeito seu código fica pelo menos 10% mais limpo.

    👋 Espero ter ajudado e continue no foco!

    Marked as helpful
    1
    Bernardo Hollmann•250
    @BernardoHollmannPosted about 2 years ago

    @correlucas Oi Lucas! Muito obrigado pelo feedback! Eu mesmo estava lendo os artigos trazidos pelos warnings e entendi o propósito de usar tags como <navigation>, <main> e <footer> como boas práticas HTML. Também percebi a importância da hierarquia das tags para usuários com deficiências visuais. Irei me atentar a isso para os próximos projetos! =)

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

    @BernardoHollmann Beleza, isso é só um detalhe eu acho que vc mandou mto bem já na primeira solução! Fico no aguardo pra ver as proximas.

    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