Dividindo o nosso main do nosso projeto em duas seções

Agora chegamos a nossa main, onde teremos as seções de entrada e saída de dados, bem como os nossos botões de controle. Começando pela lógica de separação, se voltarmos para a imagem do projeto completo, que está no #01 desta série de tutoriais, podemos ver o main como pequenas partes de um todo. 

Essas separações organizam nosso código e nos ajuda a separar os elementos seguindo uma lógica, sendo que temos várias tags para usar de acordo com o que precisamos. No nosso projeto temos duas seções maiores, a seção de elementos relacionados com o usuário: onde ele vai digitar o texto e os botões que ele precisa apertar, ficam nessa seção.

A segunda seção seria a de saída de dados, ou seja, onde o texto criptografado ou descriptografado irá se apresentar ao usuário. No HTML temos uma tag para seções, a section, que agrupa seções de conteúdo de forma lógica, diferente das divs que são mais genéricas, as sections são tags semânticas.

Dessa forma teremos as seguintes sections, com suas classes para podermos estilizar no CSS posteriormente:

<main class="container-general">
<section class="container-general__data-entry">

</section>
<section class="container-general__data-output">

</section>
 </main>

Agora vamos escrever o que precisamos dentro da primeira seção. Para receber o texto do usuário podemos adicionar um textarea para que ele possa escrever. Abaixo dessa textarea nós temos uma informação importante para o usuário, podemos construir uma section de informação e dentro dela adicionar um ícone e uma tag de parágrafo. 

Por fim, colocamos abaixo da seção de informação, uma div para englobar nossos dois botões. Agora, na segunda seção, colocamos uma div para englobar tudo, dentro dessa div adicionamos uma segunda div para colocar a imagem que irá aparecer nas telas maiores quando não tivermos nenhum texto.

Abaixo da div com a imagem adicionamos o título usando uma tag h2 e para concluir, uma tag p com a frase final. Seguindo essa estrutura teremos o seguinte main no final, sendo que para concluir nosso projeto, está faltando apenas o nosso footer.

<main class="container-general">
<section class="container-general__data-entry">
 <textarea name="text" cols="30" rows="10" class="container-general__input-area" id="input-area">Digite seu texto</textarea>
 <section class="container-general__information-area">
  <span class="iconify container-general__information-area__icon" data-icon="ion:information-circle"></span>
  <p class="container-general__information-area__text">Apenas letras minúsculas e sem acentos</p>
 </section>
 <div class="container-general__service-buttons">
  <button class="container-general__service-buttons__encrypts" id="button-encrypt">
   Criptografar
  </button>
  <button class="container-general__service-buttons__decrypts" id="button-decrypt">
   Descriptografar
  </button>
 </div>
</section>
<section class="container-general__data-output">
 <div class="container-general__output-area" id="output-area">
  <div class="container-general__center-area" id="hide-area">
   <img class="container-general__output-area__image-search" src="link da sua imagem" alt="texto informativo sobre a sua imagem">
  </div>
  <h2 class="container-general__output-area__title-empty-area" id="hide-area2">
   Nenhuma mensagem encontrada
  </h2>
  <p class="container-general__output-area__area-receiving-output" id="output-area-text">
   Digite um texto que você queira criptografar ou descriptografar.
  </p>
 </div>
</section>
 </main>

No próximo artigo, vamos concluir nosso HTML com o footer e a linkagem dos nossos arquivos CSS e Js para começarmos a estilizar nossa página e deixar ela com uma aparência linda, também iremos aprender duas animações básicas com CSS e por fim, deixar nossa tela responsiva para diversos tamanhos. Um abraço e até breve.

publicação original: https://francileudo-frontend.blogspot.com/2022/08/dividindo-o-nosso-main-do-nosso-projeto.html