Skip to content
Submitted 10 months ago

News homepage using HTML, CSS and Javascript

Paulo Xavier‱100
@paulo-xavier
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

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.

Community feedback

  • Account deleted

    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
    1
    Paulo Xavier‱100
    @paulo-xavierPosted 10 months ago

    Olá @albertorauljose 👋

    Muito obrigado por sua incrĂ­vel explicação, foi de grande utilidade e esclareceu minha dĂșvida. Agradeço por ter tirado um tempo para me ajudar com isso. Com certeza vou aplicar e atualizar meu projeto com essa dica. 😀 Um forte abraço e bons estudos!

    Paulo Xavier.

    0

Please log in to post a comment

Log in with GitHub

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