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 using basic HTLM/CSS

@andressakaren

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?

PT-BR

  • Este é o meu primeiro desafio do projeto, e estou muito feliz por concluí-lo. Estou aprendendo muito com este primeiro passo que dei. Na próxima vez, incluirei mais comentários e me esforçarei para fazer um código mais limpo.

EN

  • This is my first project challenge, and I'm very happy to conclude it. I am learning a lot with this initial step that I've taken. Next time, I will include more comments and strive for cleaner code.

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

PT-BR

  • Tive que aprender sobre 'display: flex' e alguns atributos para concluí-lo.

EN

  • I had to learn about 'display: flex' and some attributes to conclude it.

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

PT-BR

  • Qualquer feedback é bem-vindo para que eu possa aprimorar minhas habilidades.

EN

  • Any feedback is welcome so that I can improve my skills.

Community feedback

@R3ygoski

Posted

Olá Andressa, seu projeto ficou muito bem feito, estando muito semelhante ao design proposto.

Tenho algumas dicas quanto ao seu projeto, a primeira está relacionada a parte de semântica do seu HTML, notei que você utilizou muitas <div> o que não está errado se formos olhar pelo lado estrutural do HTML, mas isso faz com que ele fique sem semântica, então é recomendável que você utilize tags semânticas como <article> para o .card e <figure> para o .imagem.

Outra coisa seria a respeito da acessibilidade, você utilizou a <h2>, acredito que você utilizou ela devido a se parecer mais com o design, mas o correto era se ter usado uma <h1>, pois no html existe uma hierarquia dos headings, sempre começamos pelo <h1>.

Outra dica seria relacionado ao seu CSS, notei que você utilizou no font-size valores em px, o que também não está errado, mas é mais recomendável utilizar rem para fontes, pois o rem se adapta ao tamanho de fonte escolhida pelo usuário nas configurações do navegador. Outra coisa, que é apenas um pequeno detalhe, seria no seu .texto p, que possui uma redundância, que seria o font-weight: 400; por padrão o font-weight já é 400.

Abaixo alguns links a respeito do que foi mencionado:

E novamente, parabéns pelo seu projeto, pelo que entendi esse foi o primeiro projeto que você realizou de todos, correto? Se sim, parabéns você iniciou muito bem, continue se aprimorando cada vez mais. Caso algo que eu tenha dito não tenha ficado claro, por favor, comente aqui embaixo que tentarei ajudar da melhor forma possível.

Marked as helpful

0

@andressakaren

Posted

Oi, @R3ygoski !! Espero que esteja tudo bem com você. Eu li seu comentário e fiquei muito feliz por estar me ajudando. Entendi de imediato a questão da hierarquia para usar o <h1>.

Sobre os outros pontos, vou estar lendo a documentação que me mandou para entender melhor sobre semântica. Além de procurar saber mais sobre essas duas tags <article> e <figure>, pois conhecia elas mas não pensei em usar. Muito obrigada pelo comentário, incentiva bastante para que eu continue me aprimorando.

1

@xtirian

Posted

Parabéns, Andressa, seu código beirando a perfeição. Parabéns. continue assim

0

@andressakaren

Posted

Muito obrigada pelo incentivo, @xtirian. Fiquei bastante feliz com seu comentário.

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