Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML + CSS Page

@BernardoHollmann

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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-perone

Posted

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

@BernardoHollmann

Posted

@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,420

@correlucas

Posted

👾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

@BernardoHollmann

Posted

@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,420

@correlucas

Posted

@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
Discord logo

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