landing page using flexbox

Community feedback

• 

  Bernardo Poggioni•6,330

  @R3ygoskiPosted 16 days ago

  Olá Alexia, parabéns pela conclusão do seu projeto, ele ficou muito bem feito e próximo ao design proposto.

  Tenho algumas dicas a dar quanto ao seu projeto. Começando pelo HTML, ele está correto só que tem alguns pontos na estrutura dele qeu podem ser otimizados, por exemplo, a div.texts e a div que engloba a imagem não são necessárias, você conseguiria atingir o mesmo resultado sem elas. Isso em projetos pequenos não afeta muito, mas em projetos maiores pode deixar o HTML mais verboso.

  Outra parte seria quanto a semântica, supondo que você mantenha aquelas <div> você poderia aprimorar a semântica delas, assim trazendo mais acessibilidade a sua página e melhorando o SEO.

  • div que engloba a imagem, poderia ser alterada para uma <figure> pois a imagem do QRCode é autocontida, por exemplo, ela não depende do texto abaixo para fazer sentido. Isso ajuda com tecnologias assistivas como leitores de tela.
  • div.texts poderia ser alterada para uma <section> pois ela serve para englobar elementos tematicamente semelhantes, no caso a apresentação do Frontend Mentor.

  Uma outra dica, você pode englobar a imagem do QRCode dentro de uma tag <a> que dessa forma você permite que ela seja clicável, assim facilitando o acesso para pessoas que utilizam leitores de tela, daí só seria necessário utilizar aria-label para descrever o que é aquele link, como por exemplo: aria-label="Ir para o site do Frontend Mentor".

  Agora sobre o CSS, só uma pequena dica relacionada a unidades de medida, quando for utilizar tamanho de fonte, é mais recomendável utilizar a unidade de medida rem pois essa unidade adapta seu tamanho baseado nas configurações de tamanho fonte do usuário, o que ajuda na acessibilidade. Já px é uma unidade absoluta, ele mantém o mesmo valor sempre. Note que dependerá de caso a caso o uso de ambas as unidades.

  Edit: Havia esquecido de mencionar, mas quando clica em "View Code" aqui no Frontend Mentor, ele não direciona para seu código, isso talvez ocorra por você ter privado o repositório. E isso não é um grande problema, mas isso pode dificultar nos feedbacks, já que quem for dar o feedback não terá acesso ao código fonte.

  E é isso! Novamente parabéns, caso tenha ficado qualquer dúvida quanto ao que foi dito, por favor comente abaixo que tentarei ajudar da melhor forma possível.

  Marked as helpful

  0

  ---

  

  Alexia Ramalho•40

  @alexiaramalhoPosted 13 days ago

  @R3ygoski Muitíssimo obrigada, Bernardo! São todas as dicas muito úteis, vou levar todas elas em consideração. Realmente está em privado o meu repositório. Acredito que você tenha dado um jeito de ver o código kkkk, mas vou me atentar nisso no próximo projeto. Muito obrigada pelo feedback!

  1
• 

  Supachai Chaisopha•10

  @Supachai-ChaisophaPosted 16 days ago

  im noob

  0