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 main solução, usando flex

@Isabela-Fernanda

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?

Neste projeto eu tentei usar termos HTML mais semânticos, também foi a primeira vez que usei a propriedade box-shadown no CSS

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

Um desafio que eu encontrei foi limitar o tamanho do p no qual está escrito "Learning", pois depois de usar o flex ele ocupava toda uma linha e ele deveria ocupar só o espaço da palavra, sabia que tinha como limitar o tamanho então procurei qual propriedade era capaz de fazer isso e descobri que era a max-width: max-content; e resolvi o problema

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

Eu gostaria de receber um feedback da semâtica do HTML, se ela está boa e se teria alguma coisa que poderia ser melhorada.

Community feedback

@R3ygoski

Posted

Olá novamente Isabela, parabéns pela conclusão de mais um projeto.

Fico feliz que você tenha notado meu ultimo feedback quanto ao HTML semântico ^^.

Sim, seu HTML está bem semântico, mas tem apenas um trecho que não ficou semântico, que seria <div class="usuario">, geralmente nossos últimos elementos são <footer>, isso porque o <footer> serve para dizer que ali é um elemento final de um fluxo ou que é o rodapé da página.

Agora uma outra dica é sobre headings, no seu HTML, você pulou o <h1>, e foi direto pro <h2>, o que na estrutura não causa nenhum problema, mas na acessibilidade sim, pois existe uma hierarquia de headings que deve ser seguida, então o mais correto era utilizar um <h1>, e sempre, em todas as páginas, deve conter pelo menos uma tag <h1>.

E mais uma vez, parabéns, seu projeto ficou impecável, ele está um pouco diferente do design proposto, mas isso não é um grande problema, caso queira deixar mais próximo você pode considerar utilizar uma extensão de navegador chamada PerfectPixel, ela ajuda bastante a deixar o design próximo do proposto. Caso algo que eu tenha dito não tenha ficado claro, já sabe, só perguntar abaixo que tentarei ajudar da melhor forma possível.

Marked as helpful

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