#02 - Estruturando pastas e arquivos em um projeto simples

#HTML
#JavaScript
#CSS

Para começarmos a desenvolver nosso projeto Decoder (codificador e decodificador de textos simples) iremos começar organizando nossa estrutura inicial. primeiro criamos uma pasta para armazenar nosso projeto, vou chamar ele de “decodificador-de-texto”, dentro dele vou criar um arquivo chamado index.html, logo após, criamos uma pasta “assets” onde vamos construir mais duas pastas, uma para armazenar nosso css e o outro para o nosso javascript, concluindo nossa estrutura como a imagem à seguir (imagem disponível no artigo original, a dio não permite fotos no artigo)

Como você pode perceber, já criei os nossos arquivos de css e js nas suas pastas, agora vamos para o nosso html para que possamos construir a nossa estrutura inicial do arquivo, para deixar nossa aprendizagem mais calma para quem está no início da aprendizagem, vamos começar montando todo o nosso html, depois vamos para o css realizar as estilizações e por fim, terminaremos no javascript com toda a lógica de programação necessária para que possamos deixar nosso projeto funcional.

No arquivo index.html vamos começar com o seguinte código:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

Na primeira linha temos a tag DOCTYPE, que informa ao navegador qual versão do HTML estamos utilizando. Por sua vez, tudo o que iremos escrever deve estar dentro de uma tag chamada html, que recebe um parâmetro lang informando ao navegador qual o idioma da nossa página. A tag html tem um fechamento, algumas tags (como as meta tags) não tem isso, as tags meta tem o que chamamos de atributos, neles ficam especificados o que precisamos.

Após isso, temos duas tags que separam nosso conteúdo geral, a tag head guarda dentro de si as tags importantes para que o navegador possa entender nossa página, bem como indexar ela aos mecanismos de busca. A tag body guarda o conteúdo que nosso usuário precisa ver, como textos e imagens, por exemplo.

Dentro da tag head temos uma tag title onde englobamos o título da nossa página. E por fim, uma tag meta, essa sendo responsável pelo entendimento de caracteres na nossa página, como ~ ` por exemplo. Existem outras meta tags com finalidades diferentes como a meta description para escrever uma descrição que será vista nas pesquisas de busca, por exemplo.

Ainda temos outra tag meta, a <meta name="viewport" content="width=device-width, initial-scale=1.0">, que vai fornecer ao navegador instruções sobre como controlar as dimensões e o dimensionamento da página (tem uma publicação pequena, porém bem interessante sobre isso: https://www.w3schools.com/css/css_rwd_viewport.asp)

Para concluir, na tag title, ao invés de “Document” vamos escrever “Decoder”, como desafio eu deixo para você adicionar a meta tag descripton, recomendo dá uma olhada na internet para encontrar como a tag é escrita, mas não se limite a isso, deve ter outras meta tags importantes para se conhecer no html não acha? Eu acho que sim… Um abraço e até a próxima.

Artigo original em meu blog: https://francileudo-frontend.blogspot.com/2022/08/02-estruturando-pastas-e-arquivos-em-um.html