Latest solutions
Latest comments
- @croscob3@mateussmiranda
✅ Pontos Positivos: Estrutura bem organizada: O HTML está limpo e semanticamente coerente. A separação das responsabilidades entre HTML e CSS está clara.
Layout centralizado com grid: A centralização da .card usando display: grid e place-items: center é uma escolha elegante e moderna.
Uso de hover no título: A interação no título com hover traz vida ao card e valoriza a experiência do usuário.
Boa tipografia no geral: A fonte personalizada traz personalidade ao projeto.
🔧 Oportunidades de Melhoria: Imagem sem bordas arredondadas: A classe .img está aplicando border-radius: 10px, mas parece que não está surtindo efeito como o esperado. Certifique-se de que a classe está sendo aplicada corretamente ou que o seletor não está sendo sobrescrito.
Tamanho da fonte na tag “Learning”: A classe .cor_fundo está com uma fonte um pouco grande comparado ao design original. Reduzir um pouco a font-size pode deixar mais próximo do visual do desafio.
Data está em negrito: No design original, a data está com peso de fonte regular. Alterar de font-weight: bold para font-weight: 500 ou normal deixará mais fiel.
- @Ahmed-Hussam18What are you most proud of, and what would you do differently next time?
I'm proud that i found a free course online that can help me develop my programming skills. I'll try harder to finish the tasks faster.
@mateussmirandaÓtimo trabalho, Ahmed! 👏 Sua solução está visualmente muito próxima do design original e demonstra bom domínio de CSS e organização de estrutura.
✅ Pontos positivos:
A paleta de cores está correta e bem aplicada.
Tipografia consistente com o desafio, utilizando a fonte Outfit corretamente.
O layout está centralizado e funciona bem em tamanhos de tela comuns.
Código limpo, bem organizado e de fácil leitura.
🛠️ Sugestões de melhoria:
Trocar o h2 por h1, já que é o único título e representa o conteúdo principal da página.
Melhorar o alt da imagem para algo mais descritivo, como: "QR code linking to Frontend Mentor", para acessibilidade.
Envolver a div.card em uma <main> para reforçar a estrutura semântica.
Adicionar um @media query para deixar o layout mais adaptável em telas menores.
A sombra do cartão pode ser um pouco mais suave para ficar mais próxima do design original.
No geral, sua solução está excelente! Com esses pequenos ajustes, ficará ainda mais acessível e profissional. Parabéns! 🚀