Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML and CSS

Rayza-18 60

@Rayza-18

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

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

@R3ygoski

Posted

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 helpful

0

Rayza-18 60

@Rayza-18

Posted

Olá @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

@alexstrauch

Posted

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-18 60

@Rayza-18

Posted

Oi @alexstrauch verdade! vou fazer para ver como fica. obrigado!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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