Submitted 1 day ago

Tailwind CSS Framework, HTML Semântico, Utilizei classes utilitárias.

Marcone Silva de Brito• 10

@marconesdb

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

Estou mais orgulhoso da forma como o Tailwind CSS foi utilizado para acelerar o desenvolvimento e estilização do projeto. Utilizando um framework CSS utilitário como o Tailwind, pude aplicar classes diretamente no HTML, o que tornou o processo mais ágil e modular. Outro ponto de destaque foi a personalização do arquivo CSS externo, onde defini cores personalizadas usando HSL e configurei fontes específicas. Essa customização permitiu manter consistência no design e fácil manutenção do código.

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

Na próxima vez, investiria mais tempo na acessibilidade do projeto, como a implementação de descrições mais detalhadas para leitores de tela e testes com ferramentas de acessibilidade. Também gostaria de explorar temas escuros e claros configuráveis no Tailwind, permitindo uma experiência mais adaptativa ao usuário. Usaria também componentização com frameworks como React ou Vue para criar componentes reutilizáveis em vez de depender de uma única página HTML estática.

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

Um dos principais desafios foi compilar e configurar o Tailwind CSS corretamente. O problema estava relacionado ao escopo dos caminhos definidos na propriedade content do arquivo de configuração, que não apontava corretamente para os arquivos HTML. Outro desafio menor foi garantir que o JavaScript fosse simples e funcional. Eu queria adicionar uma funcionalidade de redirecionamento ao clicar na imagem do QR code. A solução foi usar JavaScript puro (Vanilla JS) com um simples evento addEventListener, resolvendo o problema sem a necessidade de frameworks adicionais.

Community feedback

ricardoychino• 190

@ricardoychino

Posted 1 day ago

Marcones,

Primeiramente, parabéns pela solução. Sobre o que você citou de redirecionamento ao clicar na imagem, seria melhor você só ter adicionado um <a> envolvendo a imagem. Por alguns motivos:

Mais simples, sem "trabalho" adicional
Semântica
Até uma questão de segurança e confiabilidade/usabildiade. Ao passar o cursor na imagem, o <a> vai permitir que o navegador mostre pra onde o usuário vai ser redirecionado ao clicar na imagem. Se um usuário clica sem querer e é levado a um site externo, é uma ação inesperada. O destino neste caso é um site confiável, ok. Mas poderia muito bem ser um spam, então o ideal é, se possível, usar o <a> para que o navegador possa informar qual o destino
Manutenção. Digamos que algum outro dev vai trabalhar no mesmo projeto e recebeu a task de fazer a alteração do link, a primeira coisa que ele vai procurar é o <a>. Não encontra. Vai levar um tempo extra pra encontrar onde está sendo feito esse redirecionamento. Neste caso o projeto é pequeno, mas imagine em um projeto grande, num arquivo JS com 15000 linhas. É um pouco mais trabalhoso.

No mais, bem-vindo e tenha uma boa experiência com os projetos

Marcone Silva de Brito• 10

@marconesdb

Posted 1 day ago

@ricardoychino Olá Ricardo ! Vou corrigir o código, estava com pressa para entregar a atividade que é do curso e que pedia para postar aqui. Mas obrigado por me alertar. Ainda não sei muito bem mexer nessa plataforma, só hoje que tive acesso. Parece que ficou uma diferença na altura também da Div principal em relação ao projeto original, mas não tenho o Figma para ver exatamente qual é a altura que devo colocar na Div.

ricardoychino• 190

@ricardoychino

Posted 1 day ago

@marconesdb Oi Marcone! Não é tanto uma questão de estar errado, quis mais passar uma visão minha sobre experiências que tive (essa parte do JS das 15000 linhas é história real), pra talvez te dar uma visão diferente, caso aceite. A plataforma é bem legal pra praticar, então faça bom proveito! E boa sorte no seu curso

Marked as helpful

MikDra1• 6,030

@MikDra1

Posted 1 day ago

If you want to make your card responsive with ease you can use this technique:

.card {
width: 90%;
max-width: 37.5rem;
}

On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.

Also to put the card in the center I advise you to use this code snippet:

.container {
display: grid;
place-items: center;
}

Hope you found this comment helpful 💗💗💗

Good job and keep going 😁😊😉

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