Módulo 1

Configurar a estrutura do seu aplicativo Web

Você sabia que há diferentes maneiras de criar e gerenciar projetos de site?

Algumas variações ocorrem dependendo das ferramentas específicas que você tem e das preferências da sua organização.

Ao criar um site, é comum que a estrutura do projeto sofra alterações ao longo do tempo, conforme ele se torna mais complicado.

A chave é manter um semblante de organização e há estratégias para ajudar com isso!

Projetos grandes, geralmente, exigem um maior grau de cuidado e atenção para que as muitas pessoas envolvidas possam manter tudo organizado!

Aqui você criará uma estrutura de projeto simples que inclui três arquivos: um HTML, um CSS e um JavaScript.

Você também adicionará uma extensão do Visual Studio Code para simplificar a execução do site no navegador.

Vamos iniciar pela criação de uma nova pasta, seguindo os passos abaixo:

Abra o Visual Studio Code.
Quando você abre o Visual Studio Code, a página inicial é aberta.

Observe que você pode criar um arquivo ou abrir uma pasta.

Você também pode fazer isso acessando Arquivo > Novo Arquivo.

Se não estiver visível, você poderá exibir a janela de Boas-vindas navegando para Ajuda > Boas-vindas.

Como alternativa, selecione Exibir > Paleta de Comandos ou o atalho de teclado Shift + Command + P.

Em seguida, no campo de pesquisa, digite > Ajuda: Boas-vindas.

2. Selecione Abrir pasta na seção Iniciar da Página Inicial ou acesse Pasta > Abrir.

Ao abrir uma pasta, o sistema operacional fornece um botão para criar uma Nova Pasta.

3. Acesse o local onde você deseja criar a pasta e selecione Nova Pasta.

Nomeie a pasta como site-simples.

Selecione Arquivo > Novo Arquivo.
Salve o arquivo usando CTRL + S (Windows) ou Command + S (macOS).
Atribua um nome ao arquivo index.html.
Repita as etapas anteriores para criar mais dois arquivos, main.css e app.js.
Quando tiver terminado, a pasta do projeto conterá os seguintes arquivos, compondo seu site da Web:
- index.html
- main.css
- app.js

É possível criar um site todo em um arquivo de texto ou arquivo HTML.

Aqui você está usando:

Configurar três arquivos ajuda a nos mantermos organizados!

Isso é um exemplo de melhoria progressiva.

Se o JavaScript não estiver habilitado ou não for compatível, o CSS e o HTML ainda funcionarão.

No entanto, se o CSS não funcionar, pelo menos o conteúdo HTML será exibido.

Você pode estender a funcionalidade do Visual Studio Code usando o Marketplace de extensões.

Tenha em mente que essas são funcionalidades desenvolvidas pela comunidade.

Você pode instalar extensões individualmente em seu editor ou instalar várias ao mesmo tempo, com a linha de comando.

Para o desenvolvimento para Web, tudo que você precisa agora é da open-in-browser.

Essa extensão ajuda você a abrir rapidamente o site no navegador padrão, em vez de copiar e colar a URL do arquivo no navegador.

Selecione o ícone de Extensões na Barra de Atividade (painel esquerdo).
Digite “open in” (abrir no) na barra de pesquisa.
Selecione open in browser (abrir no navegador 2.0.0), publicada pela TechER, e escolha Instalar.

A extensão é instalada!

A instalação e a configuração demoram um pouco, mas elas só precisam ser realizadas uma única vez.

Agora estamos prontos para criar um site!