1. Ajustando a altura da tela com CSS:

body { 
    height: 100vh;
    background-color: black;
    color: #F6F6F6;
}

1. Controlando o tamanho de elementos com Box Sizing:

body { 
    height: 100vh;
    box-sizing: border-box;
    background-color: black;
    color: #F6F6F6;
}

1. Criando um layout sem scroll:

* {
    margin: 0;
    padding: 0;
}

body { 
    height: 100vh;
    box-sizing: border-box;
    background-color: black;
    color: #F6F6F6;
}

.titulo-destaque {
    color: #22D4FD;
}

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

1. Flexbox: alinhando textos e imagens:

✦ Html:

    <main class="apresentacao">
        <h1>Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
        <p>Olá! Sou Laís Moraes, Desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias.</p>
        <img src="_Foto Portfólio.jpg" alt="Desenvolvedora Laís Moraes">
    </main>

✦ CSS:

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

1. Flexbox: Centralização vertical:

✦Exemplo dado:

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- Mais itens aqui -->
</div>

✦ Resposta:

.container {
      display: flex;
      align-items: center;
      height: 300px;

1. Flexbox: responsividade e alinhamento:

✦ Exemplo dado:

<div class="responsivo-container">
  <div>Conteúdo 1</div>
  <div>Conteúdo 2</div>
  <!-- Mais conteúdos -->
</div>

✦ Resposta:

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