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

Blog preview card

Keyla 70

@KeylaLins

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?

Fiquei feliz com a velocidade de ter feito, muito mais rápido que os últimos exercícios.

What challenges did you encounter, and how did you overcome them?

Tive um pouco de problema na imagem, pois na hora de baixar os arquivos, a imagem não veio junto.

What specific areas of your project would you like help with?

Uma revisão no código por completo.

Community feedback

@R3ygoski

Posted

Olá Keyla, parabéns pela conclusão do seu projeto ele ficou muito próximo do design proposto, parabéns.

Gostaria de começar falando sobre o problema que você teve, o arquivo não estava junto ao projeto? Isso é estranho, acabei de baixar o projeto base e ele veio com todos os arquivos necessários, esse é o diretório para a imagem: assets/images/illustration-article.svg, caso realmente não tenha isso no seu arquivo base, então não sei o que pode ter ocorrido.

Agora sobre a parte de duvidas, você pediu uma revisão completa do código. Sobre o CSS a única recomendação que eu teria seria de utilizar a unidade de medida rem no tamanho das fontes, pois dessa forma você faz com que sua fonte seja ajustada para as configurações de fonte do usuário. E também uma pequena correção, que no título "HTML e CSS foundations", ele é preto, ele só fica amarelo quando passa o mouse em cima.

Sobre o HTML, ele está bem estruturado, mas não está muito semântico, por exemplo:

  • <div class="imagem"> poderia ser alterado para um <figure>.
  • <div class="informacoes"> poderia ser alterado para uma <section>.
  • <div class="usuario"> poderia ser alterado para um <footer>.

Ainda sobre acessibilidade, é sempre interessante ter uma tag <h1> por página, tanto que o título do card poderia ser esse <h1>.

Agora um pouco sobre a estrutura do HTML, por mais que ela esteja boa, não era necessário utilizar as seguintes div <div class="imagem"> e <div class="informacoes">. Você conseguiria ter feito todo o projeto sem utiliza-las, isso porque todos elementos dentro do card com exceção daquela parte do usuário, segue um fluxo padrão, isso é, de cima pra baixo, daí você poderia utilizar tanto margin quanto padding para aplicar o espaçamento correto. Mas claro, se você só remover eles sem fazer as devidas alterações, irá ficar de uma forma não esperada.

De resto é isso, novamente parabéns pela conclusão do projeto, ele ficou muito bem feito. Caso tenha ficado alguma duvida quanto eu que eu disse, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

Marked as helpful

0

Keyla 70

@KeylaLins

Posted

@R3ygoski, irei fazer os ajustes conforme sugerido. Sobre as imagens, realmente não tem entre os arquivos que baixei, mas vou tentar baixar novamente para verificar. Muito obrigada pelo retorno =)

1

@djdeveloper22

Posted

excellent! I like your solution :)

1

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