Skip to content
Submitted 6 months ago

QR CODE card

Morrango•80
@Moranggoo
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)
Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Brian Muniz Silveira•200
    @BrianMunizSilveira

    Sugestões para o Desafio: Component de QR Code

    Seu código está muito bem estruturado e funcional! Aqui estão algumas sugestões para melhorar ainda mais o projeto e torná-lo mais profissional:

    1. Responsividade

    • Embora o layout funcione bem em telas menores, é uma boa prática adicionar media queries para melhorar a aparência em dispositivos de diferentes tamanhos. Por exemplo:
    @media (max-width: 320px) {
  main {
    max-width: 90%;
    padding: 15px;
  }

  img {
    width: 100%;
  }

  h1 {
    font-size: 1.2rem;
  }

  p {
    font-size: 0.9rem;
  }
}

    2. Acessibilidade

    • Melhore a acessibilidade do seu site para garantir que todos os usuários possam aproveitá-lo:
    • Adicione uma descrição mais detalhada ao atributo alt da imagem:
    <img src="imagens/image-qr-code.png" alt="QR Code para acessar o site Frontend Mentor">
    • Utilize tags semânticas como <section> ou <header> para descrever melhor as áreas do conteúdo.

    3. Centralização Melhorada

    • A centralização atual funciona bem, mas pode ser otimizada usando flexbox no lugar do position: absolute; e transform. Isso também ajuda na responsividade. Exemplo:
    body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

main {
  background-color: white;
  max-width: 260px;
  padding: 20px;
  border-radius: 20px;
}

    4. Melhorias Tipográficas

    • Pequenas melhorias podem tornar o texto mais legível e visualmente agradável:
    • Ajuste o espaçamento das letras e o line-height:
    h1 {
  margin: 20px 0;
  text-align: center;
  color: hsl(218, 44%, 22%);
  font-size: 1.5rem;
  line-height: 1.4;
}

p {
  color: hsl(216, 15%, 48%);
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
}

    5. Sombras e Interatividade

    • Adicione sombras sutis e efeitos de hover para melhorar a aparência e a interatividade:
    main {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s, box-shadow 0.3s;
}

main:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

    6. Separação de Estilos

    • Considere mover o CSS para um arquivo separado (ex.: style.css) para melhorar a organização. Exemplo de estrutura de arquivos:
    /
|-- index.html
|-- style.css
|-- imagens/
    |-- image-qr-code.png

    O <head> no HTML ficaria assim:

    <link rel="stylesheet" href="style.css">

    Resumo

    • Pontos Fortes: Estrutura limpa, design funcional e foco na simplicidade.

    • Melhorias Sugeridas: Responsividade, acessibilidade, centralização com flexbox e interatividade.

    Essas sugestões vão ajudar você a criar um projeto mais refinado e profissional. Continue praticando e evoluindo! 🚀😊

    Brian.

    Marked as helpful

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