Submitted 9 months ago

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

accessibility

Marcone Silva de Brito•80

@marconesdb

A solution to the QR code component challenge

Preview Code

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.

Code

Please log in to post a comment

Community feedback

ricardoychino•190
@ricardoychino
Posted 9 months 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:
1. Mais simples, sem "trabalho" adicional
2. Semântica
3. 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
4. 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
P
MikDra1•7,450
@MikDra1
Posted 9 months 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 😁😊😉

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