1) Ajustando a altura da tela com CSS

Você está desenvolvendo um site e deseja que ele ocupe 100% da altura da tela do usuário, sem deixar espaços em branco acima ou abaixo do conteúdo. Para isso, você precisa ajustar o elemento body do seu CSS para garantir que ele preencha toda a altura da tela. Utilize a propriedade height e o valor 100vh para conseguir este efeito. Teste o resultado usando a ferramenta "Inspecionar" do navegador para verificar se o body realmente ocupa toda a altura da tela.

body {
    height: 100vh ;
    }

2) Controlando o tamanho de elementos com Box Sizing

Imagine que você está trabalhando em um projeto web e precisa garantir que todos os elementos filhos dentro do body não ultrapassem os limites, especialmente ao adicionar bordas e paddings. Para isso, você deve utilizar a propriedade box-sizing com o valor border-box no elemento body. Após aplicar esta configuração, inspecione o layout para garantir que nenhum elemento filho ultrapasse o limite do body e os seus próprios tamanhos definidos, mesmo ao adicionar bordas e paddings.

body {
    box-siging: border-box; /*Vai controlar o tamanho do conteudo FILHO para que caiba sempre dentro da propriedade PAI*/
    
    }

3) Criando um layout sem scroll

Você recebeu um design do Figma para um site que deve caber em uma única tela, sem necessidade de scroll. O design inclui dois blocos de conteúdo sobre um fundo preto. O desafio é criar um layout CSS que reproduza essa estrutura, garantindo que todo o conteúdo caiba em uma tela, sem scroll. Utilize as propriedades CSS adequadas para posicionar os blocos de conteúdo lado a lado e centralizá-los na página, mantendo o design conforme especificado no Figma.

body {
    height: 100vh ; /*Utilizando a altura de 100% da tela */
    box-sizing: border-box ; /*Vai controlar o tamanho do conteudo FILHO para que caiba sempre dentro da propriedade PAI*/
    
    }

4) Flexbox: alinhando textos e imagens

Você está desenvolvendo um site e precisa posicionar textos e uma imagem lado a lado, adaptando-se a diferentes tamanhos de tela. Utilize Flexbox para alinhar um bloco de texto à esquerda e uma imagem à direita dentro de um <main>.

    .container {
  display: flex;
  justify-content: space-between;
}

5) Flexbox: Centralização vertical

Seu desafio é centralizar verticalmente o conteúdo de um container usando Flexbox. Você tem uma <div> com a classe .container contendo vários itens.

.container {
  display: flex;
  align-items: center;
  }

6) Flexbox: responsividade e alinhamento

Crie uma página web responsiva onde os elementos se ajustam em diferentes tamanhos de tela, evitando margens fixas. Utilize Flexbox para alternar entre dispor elementos em uma linha ou coluna.

.responsivo-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

flex-direction: row; ou column; para ajustar a direção dos itens.

flex-wrap: wrap; para permitir que os itens se ajustem e mudem de linha conforme o tamanho da tela.