Design comparison
Solution retrospective
Olá! Tudo bem?
Este é meu primeiro desafio solucionado.
Como um iniciante nas linguagens, eu só usei os conhecimentos que tive até agora. E, como ainda não cheguei na parte de Flexbox ou Grid, usei das artimanhas que tinha para fazer com que o site funcionasse.
Ainda tenho algumas dúvidas em como usar % como medida, pois sempre que uso não sai como o esperado. Caso tenham alguma dica, toda ajuda será bem-vinda.
Adicionei algumas funções visuais como o :hover no "Learning", o qual mudava o background e a cor da fonte.
No mais é isso galera, estou aberto a qualquer tipo de sugestão ou comentário.
Hello! How are you?
This is my first solved challenge.
As a beginner in languages, I only used the knowledge I've had so far. Since I haven't reached the Flexbox or Grid part yet, I used the tricks I had to make the website work.
I still have some doubts about using % as a measure because whenever I use it, it doesn't turn out as expected. If you have any tips, any help will be welcome.
I added some visual features like :hover on the "Learning" section, which changed the background and font color.
That's it, guys! I'm open to any suggestions or comments.
Community feedback
- @danielmrz-devPosted 10 months ago
Fala, Leo!
Parabéns pelo seu primeiro projeto! Ficou excelente!
Tenho algumas pequenas sugestões:
-
Primeira: Vi que você utilizou
maine em seguidaarticlepro conteúdo principal. Nesse caso você não precisa envolver o conteúdo principal com 2 tags. A tagarticleé útil quando trabalhamos com projetos maiores e o conteúdo faz parte de um grupo de outros conteúdos relacionados, mas como aqui só temos o card, a tagmainé suficiente. E te ajuda a diminuir um pouquinho seu código. -
Segunda: Sempre faça uso do atributo
"alt"nas imagens. Ele serve pra você colocar uma descrição da imagem, e se por algum motivo ela não carregar, essa descrição aparece no lugar. Ajuda muito a melhorar a acessibilidade do seu projeto. Exemplo utilizando seu código:
<img id="principal" src="images/illustration-article.svg" alt="colocar a descrição aqui">Fora esses detalhes, você fez um belo trabalho!
Espero que ajude! Abraço!
Marked as helpful0@lsilva021Posted 10 months agoObrigado, Daniel!
Eu fui seguindo as recomendações de como montar uma estrutura mas não tinha essa informação quanto a quantidades de tags em relação ao tamanho do projeto. Irei aderir com certeza.
A ausência do "alt" realmente foi falta de atenção.
Eu gostaria de perguntar também, o que achou da responsividade? Como foi o assunto que tive mais dificuldade, gostaria de um feedback em relação a isso.
Fiz alguns testes nos dispositivos que tenho acesso, e tudo saiu de acordo com o planejado. Porém, quando postei a solução aqui no site, me parece que ele não fica centralizado.
Caso tenha algum outro tópico para pontuar, será bem vindo.
1@danielmrz-devPosted 10 months ago@lsilva021
A responsividade me parece muito boa. Mas esse projeto não é o melhor pra você avaliar isso, porque a versão mobile não muda muito em relação à versão desktop.
Eu vou acompanhar seus próximos projetos e terei o maior prazer em te ajudar nessa parte! 💪🏼
Gostaria de te pedir um favor: Se meu primeiro comentário foi realmente útil, por gentileza, clica em Mark as helpful. Isso me ajuda com os pontos na plataforma 😊
Marked as helpful0 -
- @lsilva021Posted 10 months ago
Edit: Adicionais:
- <footer>, indicando de onde tirei o desafio, e minha rede social.
- Tradução para minha língua nativa ao pairar o mouse sobre o texto, usando a tag <abbr>
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