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

QR code component solução, usando flex

@Isabela-Fernanda

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


What are you most proud of, and what would you do differently next time?

Neste projeto eu fixei meus conhecimentos sobre flex e aprendi a usar a função hsl() para declarar cores

What challenges did you encounter, and how did you overcome them?

Eu não sabia o tamanho exato do cartão, então fui alterando a altura e a largura até parecer que era igual ao design fornecido

What specific areas of your project would you like help with?

Eu gostaria de receber ajuda na parte de estilização do código

Community feedback

@R3ygoski

Posted

Olá Isabela, parabéns pela conclusão do seu projeto, ele ficou perfeitamente idêntico ao design proposto, parabéns mesmo!

Sobre a sua pergunta, sinceramente eu não entendi ela muito bem, você quis dizer que queria ajuda na parte do CSS é isso? Bom, sobre seu CSS, ele está muito bom, não vejo muito o que melhorar. A única parte que eu iria sugerir uma alteração no seu CSS é no Reset, que tem algumas redundâncias, que seria o border, outline e font-weight que foram utilizados ali mas acabam não tendo efeito, e também a estilização para tags <a> e <ul>, que nem se quer foram usadas no seu projeto.

Agora sobre seu HTML, a estrutura dele está correta, mas ele está pouco semântico, e isso pode acabar afetando a acessibilidade da sua página, então é mais recomendável utilizar sempre tags semânticas, mostrarei algumas que você pode alterar:

  • <div class="container"> poderia e deveria ser alterado para <main>, isso porque sempre depois da tag <body>, deve vir uma tag <main>. Mas também porque essa <div> que representa o conteúdo principal da sua página.
  • <div class="card"> poderia ser alterado para um <article>, pois o conteúdo aqui presente é independente e autoexplicativo.

E é isso, seu projeto está muito bem feito, novamente, meus parabéns, continue praticando e se aprimorando, caso tenha ficado alguma duvida quanto ao que eu falei, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

Marked as helpful

0

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