phantuank4• 60
@phantuank4
Submitted
Antonio
@AntonioALV92
All comments
- Antonio• 20
@AntonioALV92
Posted
You may want to improve the position of the card on the screen. The card should be placed in the middle of the screen, you can also improve the responsive design for mobile devices. The font is different of the original design, in specific the card title.
TIP: You can create a separate CSS file, this in order to tidy up your code and make it more readable
0 - ThalissonBr• 10
@ThalissonBr
Submitted
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.
Antonio• 20@AntonioALV92
Posted
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
