Qr code page using HTML and CSS

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Olá Angel, parabéns pela conclusão do seu primeiro projeto aqui no Frontent Mentor.

  Gostaria de te dar algumas dicas, como você fez a estilização do seu projeto com position, eu já irei começar falando sobre ele. Você acabou por trocar o position:relative e position:absolute, o relative é utilizado para posicionar um elemento quanto a sua posição original, ainda ocupando o mesmo espaço no Layout. Já o absolute ele se posiciona em relação ao elemento mais próximo que não seja static. O mais correto nesse caso era que sua img e p fossem absolute e o seu .cube fosse relative.

  Outra dica é quanto ao tamanho de fonte, sempre que for trabalhar com o font-size, utilize a unidade de media rem, isso porque ela é relativa e altera de tamanho de acordo com as configurações de fonte do usuário, o que por sua vez acaba ajudando na acessibilidade. Já a px é absoluta, ela permanece no valor definido.

  Voltando um pouco sobre position, acredito que você o utilizou para fazer o alinhamento correto? Se sim, o melhor é utilizar Flex e Grid, pois dessa forma você consegue fazer um alinhamento mais certeiro.

  Agora sobre acessibilidade, não é correto pular as tags de heading, como <h1>, <h2> e por aí vai. O certo é sempre começar da <h1> e ir descendo progressivamente a medida que for necessário. Acredito que você utilizou o <h2> devido a se parecer mais com o design, mas isso não é recomendável, o certo seria colocar uma <h1> e configurar o tamanho dela no seu CSS.

  Alguns links sobre o que falei:

  • W3School - Headings Levels
  • W3School - Position
  • W3School - Flexbox

  E novamente parabéns pela conclusão do seu primeiro projeto aqui no Frontend Mentor. Sei bem como é essa sensação, realmente, sinta orgulho do seu feito, pois ele é o começo de algo grande. E continue com esse costume de pesquisar para solucionar o problema, isso ajuda bastante a aprender novos conceitos e concretizar outros. E caso algo que eu tenha dito, não tenha ficado claro, por favor, pergunte aqui embaixo que tentarei responder da melhor forma possível.

  Marked as helpful

  1

  ---

  

  Angel•150

  @AngelZ5Posted 7 months ago

  @R3ygoski Cara muito obrigado mesmo por cada dica, Não esperava receber um feedback tão construtivo. eu nem sabia da unidade de medida rem. foram informações muito uteis Agradeço!

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  QR iMAGE ALT TEXT 📸:

  • The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.

  ---

  • The alt with Qr Code is not even explaining for what the QR image need to be used.

  ---

  • So update the alt with meaningful text which explains like QR code to frontendmentor.io

  ---

  • Example: <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  1