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

Responsive landing page using CSS Grid and JavaScript Vanilla.

P

@flaviare1s

Desktop design screenshot for the Single-page design portfolio coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What challenges did you encounter, and how did you overcome them?

I couldn't get the side scroller out of the site. Would there be a way to fix this? Feedbacks are welcome!

Community feedback

@R3ygoski

Posted

Olá Flávia, parabéns pela conclusão do seu projeto, ele ficou muito bem feito.

Sobre sua duvida, para remover essa barra lateral de rolagem, basta adicionar o seguinte trecho ao seu seletor body: overflow-x: hidden;, após isso você verá que estará sem a barra de rolagem, mas, ainda será possível mover na horizontal em celulares, então também adicione esse trecho:

.slides {
    overflow-x: hidden;
}

E uma dica quanto ao seu CSS, ele está extremamente enorme, são mais de 600 linhas de estilização, isso acaba deixando seu CSS muito verboso. Para corrigir ou evitar isso, você pode adicionar seus responsivos em um outro CSS, exemplo um responsive.css, reset.css, font.css e por aí vai, dessa forma você deixa mais organizado seu projeto. Lembre-se de fazer o link desses outros arquivos CSS no seu HTML.

Uma outra dica, agora quanto ao seu JS/HTML, eu vi que no seu HTML você adicionou um onclick, isso não está errado, mas não é recomendável, e no caso do seu projeto ele acaba sendo repetido tanto no seu JS externo quanto nesse trecho inline de JS. O melhor é sempre utilizar a forma externa e não utiliza-lo no HTML. E quanto a forma que você fez pra referenciar os botões, ela não está errada, mas geralmente quando vamos criar uma referência para nosso JS nós utilizamos id's ao invés de classes. Id's fazem o papel de criar uma referência entre HTML e JS, enquanto classes fazem o papel de criar uma referência entre HTML e CSS.

E é isso, novamente parabéns, caso tenha ficado qualquer duvida quanto ao que eu disse, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

Marked as helpful

0
P

@flaviare1s

Posted

Bernardo, muito obrigada pelas dicas! Eu estava colocando o overflow hidden no local errado, por isso não estava funcionando. Obrigada mesmo! :)

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