Skip to content
Submitted about 1 month ago

FlexBox

ThalissonBr•20
@ThalissonBr
Preview site (opens in new tab)View code (opens in new tab)
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?

Orgulho

Simplicidade e organização do layout: Estou orgulhoso de como o layout ficou simples, mas elegante. Usar CSS Grid e Flexbox permitiu organizar os elementos de forma responsiva e limpa, criando uma interface bem estruturada e adaptável para diferentes dispositivos.

Uso de variáveis CSS: A utilização de variáveis para cores e espaçamentos tornou o código mais fácil de manter e ajustar, o que melhorou a clareza e a flexibilidade do projeto.

O que faria diferente

Aprimoramento de acessibilidade: Na próxima vez, daria mais atenção à acessibilidade, implementando melhorias como descrições alternativas mais detalhadas para imagens e uso de ARIA landmarks para facilitar a navegação para pessoas com deficiência.

Exploração de CSS Grid: Embora tenha usado Flexbox para organizar o layout, poderia explorar mais CSS Grid para ter maior controle sobre a disposição dos elementos em uma estrutura mais complexa.

Otimização da performance: Poderia compactar as imagens ou usar formatos mais leves como WebP para otimizar o tempo de carregamento da página.

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

Desafios e como os superei: Responsividade: Ajustar o layout para diferentes tamanhos de tela foi desafiador. Usei Flexbox e a meta tag viewport para garantir uma boa adaptação em dispositivos móveis.

Alinhamento e espaçamento: Distribuir bem os elementos e evitar excessos de espaço foi difícil. Resolvi isso com variáveis CSS para padronizar espaçamentos.

Tipografia: Escolher uma fonte que fosse moderna e legível foi um desafio. Encontrei a solução usando Google Fonts com a fonte Outfit.

Community feedback

  • Antonio•20
    @AntonioALV92Posted about 1 month ago

    El diseño de la card es idéntico! Felicidades! Solo el diseño en general no se adapta bien a diversas pantallas, en especifico en una pantalla de iPhone SE(375x667) y de un S22 Ultra(385x824) genera un scroll que realmente no es necesario, también lo revise en una pantalla 1080x1774 y el fondo azul se corta a la altura de 960 pixeles. Una solución seria agregar el color al body directamente :), para evitar ese corte, asi como manejar la alineación con flex ahi directamente, por ejemplo algo asi:

    body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

    Espero mi comentario te ayude, y si tienes alguna duda podemos resolverlo. Buen trabajo!

    0

Please log in to post a comment

Log in with GitHub

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