Front-end

Olá Marcílio! Tudo bem?

Que bom saber que você está aproveitando a Alura e buscando aprimorar seus conhecimentos em front-end! A prática é realmente essencial para consolidar o aprendizado, então você está no caminho certo. Não sou o Luan, mas vou ter o maior prazer em tentar esclarecer suas dúvidas.

Vamos lá: é totalmente possível adaptar o layout para que ele se comporte de maneira diferente em dispositivos móveis e desktops. Para isso, você pode usar o conceito de media queries em CSS, que permite aplicar estilos diferentes com base no tamanho da tela do dispositivo.

Por exemplo, você pode definir um menu que aparece na lateral em telas maiores (como desktops) e que se transforma em um menu superior ou um menu hambúrguer em telas menores (como celulares). Você pode começar com uma base como a seguinte e depois ir personalizando de acordo com o que você quer para cada situação (telas pequenas ou maiores):

/* Estilos gerais para todos os tamanhos de tela */
.menu {
    display: flex;
 
}

/* Estilos específicos para telas menores */
@media (max-width: 768px) {
    .menu {
        flex-direction: column; /* Menu em coluna para mobile */
    }
}

/* Estilos específicos para telas maiores */
@media (min-width: 769px) {
    .menu {
        flex-direction: row; /* Menu em linha para desktop */
    }
}

Para o footer, você pode usar um conceito semelhante, ajustando a disposição dos elementos conforme o tamanho da tela. No exemplo que você mencionou, o uso do flex-direction e display: flex no rodapé é uma ótima maneira de começar a organizar os elementos de forma responsiva. Também pode estudar alguns conceitos como o Position, para facilitar o posicionamento dos elementos.

Espero que essas dicas tenham sido úteis para você.

Em caso de dúvidas, conte com o apoio do fórum :)

Um abraço e bons estudos!

Bom dia Rafaela,

Desde já obrigado.

Att,

Marcílio