1
resposta

[Bug] O SITE PAROU!

Boa noite, fiz o término do curso no domingo (07/04/2024), hoje quinta-feira (18/04) fui rever o site e o código, pois gostaria de lembrar algumas coisas sobre flexbox. No entanto notei que havia algumas coisas faltando. Na parte esquerda aonde havia os intens estava aparecendoapenas até biblioteca, o restante da lista não aparece, volteis aulas, refiz os códigos e nada. No fim baixei o arquivo zip da aula 05 (aonde seria o projeto do curso) para eu ver aonde etsava o problema e o arquivo também não constava os itens.

Ressalto que é mesmo código do arquivo zip da aula 05.

CÓDIGOS DOS ITENS QUE FALTAM:

  • Histórico
  •         <li>
                <a class="menu__itens" href="#">
                    <i class="icone__relogio icone-item"></i>
                    <span>Assistir mais tarde</span></a>
            </li>
    
            <li>
                <a class="menu__itens" href="#">
                    <i class="icone__like icone-item"></i>
                    <span>Marcados com like</span></a>
            </li>
        </ul>
    
        <ul class="menu__lista">
            <li>
                <a class="menu__itens" href="#">
                    <i class="icone__mostrar icone-item"></i>
                    <span>Mostrar mais 2</span></a>
            </li>
    
            <li>
                <a class="menu__itens" href="#">
                    <i class="icone__deschamps icone-item"></i>
                    <span>Felipe Deschamps</span></a>
            </li>
    
            <li>
                <a class="menu__itens" href="#">
                    <i class="icone__nerd icone-item"></i>
                    <span>Jovem Nerd</span></a>
            </li>
    
            <li>
                <a class="menu__itens" href="#">
                    <i class="icone__souto icone-item"></i>
                    <span>Mario Souto</span></a>
            </li>
    
            <li>
                <a class="menu__itens" href="#">
                    <i class="icone__iamarino icone-item"></i>
                    <span>Atila Iamarino</span></a>
            </li>
    
            <li>
                <a class="menu__itens" href="#">
                    <i class="icone__ballerini icone-item"></i>
                    <span>Rafaella Ballerini</span></a>
            </li>
    
            <li>
                <a class="menu__itens" href="#">
                    <i class="icone__gaveta icone-item"></i>
                    <span>Gaveta</span></a>
            </li>
    
            <li>
                <a class="menu__itens" href="#">
                    <i class="icone__alura icone-item"></i>
                    <span>Alura</span></a>
            </li>
    
            <li>
                <a class="menu__itens inscricoes" href="#">INSCRIÇÕES</a>
            </li>
        </ul>
    
        <ul class="menu__lista">
            <li class="jogos">
                <a class="menu__itens" href="#">
                    <i class="icone__jogos icone-item"></i>
                    <span>Jogos</span></a>
            </li>
    
            <li class="filmes">
                <a class="menu__itens" href="#">
                    <i class="icone__filmes icone-item"></i>
                    <span>Filmes</span></a>
            </li>
            <li class="premium">
                <a class="menu__itens" href="#">
                    <i class="icone__videos icone-item"></i>
                    <span>Vídeo Premium</span></a>
            </li>
    
            <li class="menu__itens maispagina">
                <a href="#">MAIS DA PÁGINA</a>
            </li>
        </ul>
    </aside>
    

    PRINT DO SITE CONSTANDO A FALTA DOS INTES[]()

1 resposta

Olá Leonardo!

Isso ocorre devido à responsividade aplicada no projeto. Acredito que a sua tela seja diferente da do instrutor. A minha, por exemplo, tem uma resolução inferior a 1920x1080, então os demais elementos/categorias não aparecem aqui também.

Porem podemos testar uma forma de visualizar como o site ficaria em uma tela maior ou menor no caso de dispositivos móveis.

Basta inspecionar o projeto clicando com o botão direito do mouse e depois em inspect, e em seguida ajustar a resolução da tela conforme desejado. A resolução mais comum para monitores é 1920x1080. Observe que o site é otimizado e apresenta mais elementos para essa resolução.

A imagem mostra a interface de um site de streaming de vídeo chamado “AluraPlay”. O layout é similar ao YouTube, com um menu à esquerda contendo opções como “Início”, “Explorar”, “Shorts”, “Inscrições” e outros. Há uma barra de pesquisa no topo e vários vídeos educacionais ou tutoriais são exibidos em grade, com miniaturas coloridas e informações como número de visualizações e tempo desde o upload. As categorias incluem tópicos como “Data Science”, “Apps”, “Linguagem de Programação” e “Ciência da Computação”. A parte superior da imagem também mostra ferramentas de design web, indicando que o site é responsivo com dimensões de 1920 x 1080.

Assim, o que ocorre é que o nosso dispositivo possui telas menores, nas quais o design do projeto opta por omitir algumas informações, semelhante ao que acontece no site do YouTube, no caso do youtube, o site sempre tenta priorizar recomendações de vídeos e acaba "escondendo" algumas categorias e seções, tornando a interface mais limpa para cliques, especialmente em dispositivos móveis.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software