Submitted over 1 year ago

News homepage using HTML, CSS and Javascript

accessibility, animation, lighthouse

Paulo Xavier•100

@paulo-xavier

A solution to the News homepage challenge

Preview Code

Solution retrospective

News homepage Website 💻

Hi guys 🖐 I'm Paulo and this is my solution for the challenge:

Technologies used: 🛠

HTML5
CSS3
Javascript

Stats according Lighthouse: 🧾

93% for Performance
93% for Accessibility
100% for Best practices
100% for SEO

Questions for community: 🔊

In the responsive layout for mobile devices, by clicking on the hamburger menu, the background of the page changes to a darker tonality. I do not know exactly which CSS property is more appropriate for that. For my solution, I used: filter: grayscale(60%). I would appreaciate feedback on that or suggestions for a more fitting property.

Thanks for your attention! If you have suggestions or feedback, I would appreciate that! 😁

Paulo Xavier.

Code

Please log in to post a comment

Community feedback

Account deletedPosted over 1 year ago

Olá, Paulo! Eu sou o Alberto.

Meus parabéns pelo seu trabalho duro e por completares este desafio. Eu tenho algumas sugestões sobre este desafio que podem te ajudar a melhorar a sua solução.

Ao se clicar no menu hamburger, você poderia mudar a tonalidade da página para uma mais escura na versão Mobile, utilizando a seguinte técnica:

Passo 1: HTML - Adicione um novo elemento, div com a classe darker, como filho direto de body ao seu index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  ...
</head>

<body>
  <div class="darker"></div>
  ...
</body>
</html>

É por meio deste elemento que você poderia aplicar o efeito de escuridão, quando o menu hamburger for clicado pelo usuário.

Passo 2: CSS - Adicione as seguintes regras CSS, ao seu estilo:

.darker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  opacity: 0;
  visibility: hidden;

  /* Você pode mudar para uma cor escura de sua preferência  */
  background-color: #555;  
  
  /* Você pode mudar para uma transição de sua preferência */
  transition: 0.5s ease-in-out opacity; 
}

.darker.active {
  opacity: 1;
  visibility: visible;
}

Isso fará com que haja um fundo escuro sobre toda página (efeito de escuridão), mas para isso ter efeito, você deveria modificar o seu JavaScript, conforme o passo 3.

Passo 3: JavaScript - Agora ao se clicar no menu hamburger, em vez de adicionar a classe active ao seu elemento main, adicione esta classe ao novo elemento criado no passo 1 (<div class="darker"></div>). Isso fará com que a classe active, aplique o efeito de escuridão sobre a página, conforme você perguntou.

Então, Paulo! Estas são as minhas sugestões para a sua solução sobre este desafio. Espero sinceramente que elas possam te ajudar a melhorá-la. Se você tiver qualquer dúvida, problema, ou pergunta, ao seguir estes passos, saiba que você pode me chamar, ou mesmo pedir ajuda em outros membros da plataforma.

Alberto,

Feliz Codificação :)

Marked as helpful

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