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

New HomePage Main

#jss#sass/scss

@cassiality

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


All suggestions are welcome!

Community feedback

Adriano 33,970

@AdrianoEscarabote

Posted

Ola Cassia, tudo bem? Parabéns pelo projeto e pela constância !!

Algumas dicas:

Geralmente quando estamos desenvolvendo layouts procuramos sempre ter uma estrutura com:

<header>...</header>
<main>...</main>
<footer>...</footer>

Ter um header, main e footer em um site é importante porque ajuda a organizar e estruturar o conteúdo da página, tornando a experiência do usuário mais intuitiva e fácil de entender. O Header geralmente contém informações importantes como o logotipo da empresa, menu de navegação, informações de contato e outras inforamções relevantes. O main é onde o conteúdo principal da página é exibido. É aqui que as informações relevantes, imagens, vídeos, e outros elementos são apresentados aos usuários. O footer fica no final da página e geralmente contém informações adicionais, como links para páginas importantes, informações de contato, termos de uso, políticas de privacidade, entre outros.

Alguns desenvolvedores preferem usar um container, dessa forma:

<div class="container"> 
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</div>

É bem útil para definir "max-width" ou fazer alguma estlização. Colocar o header, main e footer dentro de um container ajuda a manter todos os elementos do layout juntos e organizados.

Sobre essa lista que está dentro do header eu aconselho a colocá-la dentro de uma tag nav para definir uma seção de navegação.

Observei que você está usando bastante margin para posicionar elementos tome cuidado quando usar margin para não dificultar quando for deixar o projeto responsivo, eu tbm tinha essa mania kkkkkk minha vida melhorou muito quando comecei a usar flexbox pra quase tudo e deixei margin e padding apenas para pequenos detalhes.

O restante está ótimo!!!!

parabéns pela dedicação, ta bem legal acompanhar a sua evolução!!

Marked as helpful

1

@cassiality

Posted

@AdrianoEscarabote obrigada pelas dicas mais uma vez, sempre que coloco em prática, meus projetos ficam cada vez melhores e mais bonitos! Obrigada mais uma vez, vou fazer as mudanças sugeridas.

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