Design comparison
Solution retrospective
De ter estudando alguns assuntos por fora, eu tentaria otimizar o tempo.
What challenges did you encounter, and how did you overcome them?responsividade? ainda é uma dificuldade deixar a tela do tamanho ideal para aparelhos
What specific areas of your project would you like help with?adaptação de tamanhos
Community feedback
- @R3ygoskiPosted 8 months ago
Olá Rayza, seu trabalho está bem feito e parabéns por ter tido a iniciativa de buscar por temas que você não sabia.
Sobre HTML: Notei que você utilizou duas tags strong, geralmente o ideal é utilizar uma tag de parágrafo ou h's, e no CSS alterar isso por meio do
font-weight
, pois a tag strong é semântica e serve para enfatizar um trecho em específico da sua página.Sobre CSS: Aqui vai algumas dicas. Respondendo a sua duvida quanto a responsividade, eu recomendo que você faça a responsividade sempre em mobile-first workflow, que é começar da menor tela que é 320px ou 375px e ir criando a responsividade pra cima, pois assim você apenas precisa usar o
min-width
, o que talvez te ajude a entender melhor sobre as medias queries.Uma outra dica que é mais por questão organizacional, é a respeito do uso de ID's e Classes, saiba que não é errado ter muito ID's ou usa-los para estilização, mas é recomendável usar mais as classes para fazer a estilização.
Notei também que faltou o efeito de
:hover
quando passamos o mouse sobre o<h2> Fundamentos de HTML e CSS</h2>
, e no card, pois quando passamos o mouse no card, a sombra dele aumenta.Também percebi que você importou a fonte mas não utilizou ela, pois ela está apenas aplicada nas tag's
<p>
, mas no design ela é aplicada em todos os textos.Caso tenha ficado alguma duvida basta responder aqui que me predisponho a te ajudar com o que for preciso, da melhor forma possível, e parabéns, continue praticando!
Edit: Havia esquecido de mencionar, mas notei que tem alguns problemas na responsividade do projeto em determinadas telas. Uma forma de ver como está a responsividade é utilizando o Inspecionar, que aparece quando se clicka com o botão direito na tela, com o navegador aberto, e basta ativar a opção de emulação de dispositivo (ctrl + shift + M) ou você pode usar uma extensão chamada Responsive Viewer.
Marked as helpful0@Rayza-18Posted 8 months agoOlá @R3ygoski Muito obrigado por tira um tempo para me ajudar, obrigado pela dica do <strong>, eu tinha feito com <p> retirei e achei que era <strong>, agora sei quando usar melhor, vou tomar cuidado com o <id's> também. responsividade, isso vou estudar esse assunto porque tenho dificuldade nele, muito obrigado eu tentarei ajustar do jeito que voce recomendou. Nem sabia que tinha o efeito :hover, achei que faltou atenção na hora de ler o enunciado e sobre as fontes achei que era outra por isso não apliquei, vou ajustar isso também.
Muito obrigada! seu comentário ajudou muito!
1 - @alexstrauchPosted 8 months ago
you could use flexbox for "aprendendo" and set it to flex-start with some padding to get it aligned with the rest of the elements.
0@Rayza-18Posted 8 months agoOi @alexstrauch verdade! vou fazer para ver como fica. obrigado!
0
Please log in to post a comment
Log in with GitHubJoin 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