Submitted 6 months ago

QR code component solução, usando flex

Isabela Fernanda•170

@Isabela-Fernanda

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

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

Bernardo Poggioni•5,360
@R3ygoskiPosted 6 months ago
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
aniketsharma889•40
@aniketsharma889Posted 6 months ago
good
0

Please log in to post a comment

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