Design comparison
Solution retrospective
Olá, pessoal!
Este é meu terceiro desafio realizado. Particularmente foi o desafio o qual tive mais facilidade, pois não exigiu de mim conceitos os quais eu não dominava.
Única coisa com a qual ainda tenho um pouco de dificuldade é a propriedade "position: relative/absolute;" e um pouco de dificuldade com porcentagem como unidade de medida para tamanho e posicionamento.
Me senti à vontade para adicionar alguns outros estilos ao projeto, que foram a função ‘scale: ;’ na imagem do perfil, e os 'box-shadow: ;' ao card e aos links.
Estou aberto a críticas ou qualquer outro tipo de comentário que me ajude no meu crescimento profissional.
No mais é isso. Obrigado.
Hello, guys!
This is my third challenge completed. In particular, it was the challenge that I had the easiest time with, as it did not require concepts that I did not master.
The only thing I still have a little trouble with is the "position: relative/absolute;" property. and a little difficulty with percentage as a unit of measurement for size and positioning.
I felt free to add some other styles to the project, which was the 'scale: ;' function. in the profile image, and the 'box-shadow: ;' to the card and links.
I am open to criticism or any other type of comment that helps me in my professional growth.
That's it anyway. Thanks.
Community feedback
- @LucianoDLimaPosted 9 months ago
Salve meu mano, parabéns ai por concluir o desafio, esse ai ajuda bastante a fortificar os conceitos de flexbox. Segue meu feedback, vou me referir as tags específicas pelo nome que você deu na classe:
- Essa tag <article> que tu usou ao redor do .card não é necessária. Se você quiser manter o seu site com uma semântica bacana, subsitua por <main>, que significa que é o corpo principal da página
- Sobre o uso do relative/absolute, qual a sua dúvida exatamente? Nesse desafio não tem nada que necessite alteração da propriedade position
- Eu vi aqui que você usou relative/absolute para centralizar sua página. Isso não é algo recomendado, pois vai causar problemas em páginas maiores, então é legal você aprender a forma correta de fazer (usar o absolute para centralizar ainda é útil em alguns casos específicos, mas não para centralizar a página principal, saca?). Segue abaixo:
// Tudo que eu colocar abaixo, é o que você tem que remover dentro do .card // O resto que não está aqui você pode manter .card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: auto; }Agora para centralizar após remover o position e as propriedades que o afetam:
//Troca o nome da taga <article> por <main> e coloque o seguinte estilo nela main { display: flex; height: 100vh; width: 100%; align-items: center; // Isso vai centralizar verticalmente justify-content: center; // Isso vai centralizar horizontalmente }Marked as helpful0@lsilva021Posted 9 months agoSalve, @LucianoDLima !
Cara, muito obrigado pelas dicas. Isso ajudou pra caramba a simplificar o código.
Era uma parada que eu fiz o código inteiro com as divs, mas tava cego, pq peguei a referência dessa parte do position pra alinhar o card de uma resolução de um outro desafio, e simplesmente não conseguia enxergar outra maneira de fazer kkk.
Mais uma vez, muito obrigado ai meu mano. Se não se importar vou mandar um convite de conexão lá no LinkedIn (onde também sou novato).
0@LucianoDLimaPosted 9 months ago@lsilva021 Claro, fique a vontade! No começo a gente sofre muito, mas o bom é que é quando a gente mais aprender também kkk, tendo alguma dúvida fique a vontade para me chamar
Marked as helpful0
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