Design comparison
Solution retrospective
Apesar dos desafios, me orgulho por ter conseguido fazer esse projeto, passei dias até conseguir chegar nesse resultado.
What challenges did you encounter, and how did you overcome them?Foi um desafio conseguir centralizar o main entre o header e footer, mais ao passar dos dias fui vencendo e outro desafio foi deixar o botão "lilás" ao passar o mousse em cima.
What specific areas of your project would you like help with?Desejo ajuda em todo o projeto pois, assim descobrirei aonde estou errado e posso melhorar especificamente no CSS e responsive.
Community feedback
- @rosanapedraPosted 5 months ago
Obrigada Bernardo, por esse feedback. Eu não prestei atenção enquanto estava resolvendo. Então, retiro a <div> e a class que estava nela, eu posso colocar no <header> e no <footer> a mesma coisa né isso? Irei fazer essas alterações para na próxima não cometer mais esses erros. Nesse projeto não achei que ficou parecido com o modelo que eles pediram. 😔
1@R3ygoskiPosted 5 months agoOlá novamente Rosana, não há de que, fico sempre feliz em ajudar outros devs.
E sim, você entendeu corretamente, removemos as
<div>
e pegamos a classe que estavam nelas e passamos para o<header>
e<footer>
.Sobre ficar parecido, não se preocupe, com o tempo você acaba pegando o jeito, tanto que tem uma extensão de navegador que ajuda bastante a replicar o design, se chama PerfectPixel, recomendo dar uma olhada depois.
1@rosanapedraPosted 5 months agoObrigada novamente, irei instalar essa extensão. @R3ygoski
0 - @R3ygoskiPosted 5 months ago
Olá Rosana, parabéns pela conclusão do projeto, ele ficou muito bem feito.
Algumas sugestões quanto ao seu projeto. A primeira é que eu notei que você não utilizou um
<h1>
na sua página mas pulou direto para o<h2>
, claro, isso em estrutura não tem problema, mas isso acaba sendo um erro para acessibilidade. O mais correto é que sempre se comece pelo<h1>
e todas páginas devem conter um<h1>
.Ainda sobre o HTML, notei também que você utilizou algumas tags com
<div>
dentro, por exemplo na sua tag<header>
, isso não era necessário, ao invés de aplicar a estilização na<div>
, você poderia ter aplicado diretamente na<header>
, e isso também vale para o<footer>
, tanto que se você tirar a classe da<div>
dentro do<footer>
e colocar essa mesma classe no seu<footer>
o resultado será o mesmo. Uma dica seria, pense sempre nessas tags semânticas como se elas fossem<div>
só que com um nome descritivo.Também sobre suas tags
<a>
, elas estão com umhref
vazio, o mais correto é colocar um valor nelas, mesmo que esse valor não leve a nenhum lugar, por exemplo:href="#"
. E também lembre-se sempre de colocar umaria-label
em<a>
que não possuem conteúdo de texto, para poder ajudar os leitores de tela a lerem aquele elemento.Agora sobre seu CSS, você fez dessa forma por exemplo para estilizar um elemento:
.header .logo { }
Isso não está errado, mas caso você ache que esteja ficando grande, ou que esteja verboso e confuso, saiba que você pode usar só um
.logo
nesse exemplo, pois você já estará direcionando para a classe desejada, e também já que existe só uma classelogo
.E novamente, parabéns pela conclusão do seu projeto, caso tenha ficado alguma duvida, por favor, pergunte abaixo que tentarei ajudar da melhor forma possível.
1
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