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

Flexbox - projeto-huddle-base

@rosanapedra


Design comparison


SolutionDesign

Solution retrospective


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

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

@rosanapedra

Posted

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

@R3ygoski

Posted

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

@rosanapedra

Posted

Obrigada novamente, irei instalar essa extensão. @R3ygoski

0

@R3ygoski

Posted

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 um hrefvazio, 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 um aria-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 classe logo.

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