Curso Básico de Criação de Sites

Do Zero ao Site no Ar

Módulo 0 – Apresentação do instrutor e do curso

Meu nome – Luiz. 79 anos. Aposentado. Ex-funcionário Embratel na área de informática. Não consegui me divorciar do computador e da internet e, estamos juntos desde sempre. Minha ideia de criar este curso básico formou-se em função de minhas próprias limitações, em função da disparidade que percebemos entre tentar acompanhar o progresso nesta área e a velocidade em que as transformações acontecem. Notei, ao longo deste tempo, que muitas pessoas gostariam de ter algum conhecimento sobre informática, especialmente referente à Internet. A maioria, diante das dificuldades, desiste definitivamente, preferindo pagar alguém (às vezes, caro) para resolver o seu problema, muitas vezes simples. Este não será um curso de formação profissional – isto poderá vir depois – mas, o básico para não sentir-se perdido quando houver necessidade em lidar com o assunto. Podendo até mesmo ser a base para um conhecimento mais profundo – dependendo do objetivo de cada um particularmente.

Sobre o Curso

Curso Básico de Criação de Sites do Zero ao Site no Ar está voltado para pessoas 100% leigas (zero conhecimento técnico). O curso poderá estar composto em cerca de 20–25 horas no total e ser dividido em 8–10 módulos, considerando possíveis atualizações.

Público-alvo: Pessoas que nunca mexeram em código, donas de pequenos negócios, autônomos, professores, artistas, etc.

– O que o aluno vai ter no final:
  Um site publicado e funcionando – de sua criação.

– Ferramentas que serão utilizadas:
  Todas gratuitas ou com plano grátis. A ideia é minimizar ou excluir gastos.

– Instalações obrigatórias (necessários para o acompanhamento do curso):

1 – Navegador Google Chrome – se ainda não está instalado, baixe e instale (pode ser o Edge da Microsoft. Estamos definindo o Chrome apenas pra manter o padrão de aplicativos usados. 

  2 – Conta Google (Gmail) – ou outro email que preferir, mas pra ficar igual elegemos o Gmail. Se você ainda não tem conta, crie uma.

  3 – Conta no GitHub – esta é uma plataforma gratuita onde se pode hospedar o nosso trabalho. Ao longo do curso explicaremos como utilizá-la.

  4 – Visual Studio Code (editor de texto grátis) – é só baixar e instalar. É um editor de texto que também executa os códigos (que vamos digitar) e mostra o resultado no navegador (como em site verdadeiro). Como instalar e configurar basicamente será tratado mais à frente.

5 – Extensão Live Server no VSCode – já está incluída no Visual Studio.

Instalação dos Softwares (necessários para o acompanhamento do curso) Passo-a-Passo.

1. Navegador Google Chrome

1. Abra o navegador que você já tem no Windows.
2. Digite na barra de endereço: www.google.com/chrome 
3. Clique no botão azul “Fazer download do Chrome”
4. Escolha “Para uso pessoal” → “Aceitar e instalar”
5. Quando baixar, clique duas vezes no arquivo ChromeSetup.exe
6. Espere instalar (aparece uma barrinha azul)
7. Quando abrir sozinho, fixe na barra de tarefas (arraste o ícone pra baixo)
8. Pronto! Agora sempre abra o Chrome pra fazer o curso.

Observação:
 “Se aparecer ‘Quer permitir que este aplicativo faça alterações?’ → clique em SIM.”

9. Video de demonstração no Youtube. – Ver o Vídeo 

 Figura: Mostra a barra de endereços no navegador Chrome, onde digitamos os endereços dos sites (URL) que desejamos acessar, ou algo que desejamos consultar.

O que significa URL? – URL (Uniform Resource Locator – Localizador Uniforme de Recursos) é o endereço único de um recurso na internet, como uma página web, imagem ou vídeo, usado para localizá-lo e acessá-lo através de um navegador, funcionando como um “CEP digital” que indica o caminho para encontrar o conteúdo online.

1-A. Criar Conta de e-Mail no Chrome

Como CRIAR (do ZERO) sua conta de e-mail  no Chrome.

Especial para os alunos que nunca criaram um e-mail na vida (ou criaram no passado e esqueceram tudo).

“Antes de instalar qualquer coisa, vamos fazer uma coisa importantíssima: quem ainda não tem e-mail (ou esqueceu a senha antiga) vai criar um Gmail agora comigo.
 É de graça, rapidinho e vai servir pro curso inteiro.”

Passo-a-passo:

1. Abra qualquer navegador que você tenha (até o Internet Explorer serve)
2. Digite na barra: www.gmail.com 
3. Clique no botão azul grandão “Criar conta” 
4. Escolha “Para mim” 
5. Preencha assim:

• Nome: Seu nome real (ex: Maria Silva)
• Nome de usuário: algo simples tipo
   → mariasilva1958@gmail.com
   → joaopedreiro62@gmail.com
   → luizpimentel2025@gmail.com
   (se der “já existe”, coloca o ano de nascimento ou a cidade no final)
• Senha: crie uma fácil de lembrar mas segura
   Exemplo: Maria2025! ou Casa1234@
   (tem que ter letra maiúscula, número e símbolo)

1. Clique em “Próxima” 
2. Coloque o número do celular (é importante pra recuperar senha depois)
3. Data de nascimento e sexo → preenche normal
4. Clique em “Próxima” → “Aceito”
5. Pronto.! Seu e-mail foi criado.!

Dica carinhosa:
 “Agora anota esse e-mail e senha num papel e guarda na carteira.
 Vai ser o mesmo e-mail que a gente vai usar no GitHub, na hospedagem e pra tudo no curso.

Frase final desse passo (pra tranquilizar):

“Quem já tinha e-mail, ótimo.! Quem não tinha, agora tem um e-mail moderno e bonito.
 Todo mundo está no mesmo barco agora, ninguém fica pra trás.”

Veja no vídeo

GitHub

O que é GitHub?
 — O GitHub é um site e um serviço baseado em nuvem que ajuda os desenvolvedores e estudantes a armazenar e gerenciar seu código, bem como rastrear e controlar as alterações. É gratuito e fácil de usar.

O que significa “baseado em nuvem”?

— O armazenamento em nuvem é um modelo de computação em nuvem que permite armazenar dados e arquivos na Internet por meio de um provedor de computação em nuvem que você acessa usando a Internet pública ou uma conexão de rede privada dedicada. O provedor armazena, gerencia e mantém com segurança os servidores de armazenamento, a infraestrutura e a rede para garantir que você tenha acesso aos dados quando precisar, em escala praticamente ilimitada e com capacidade elástica. O armazenamento em nuvem elimina a necessidade de comprar e gerenciar sua própria infraestrutura de armazenamento de dados, oferecendo agilidade, escalabilidade e durabilidade com acesso aos dados a qualquer hora e em qualquer lugar.

2. Criar conta no GitHub – “GitHub é onde a gente, possivelmente, vai publicar o site de graça depois. Siga os passos criar sua conta.”

1. Abra o Chrome
2. Digite: github.com
3. Clique em “Sign up” (canto superior direito)
4. Coloque seu e-mail (pode ser Gmail ou qualquer um)
5. Crie uma senha forte (ex: SeuNome2025!)
6. Escolha um nome de usuário simples (ex: luizpimentel, mariasilva60, joaopedreiro)
7. Na pergunta “How many team members…” coloque 0
8. Pule as próximas perguntas clicando “Continue” ou “Skip”
9. Confirme o e-mail que o GitHub vai mandar
10. Pronto! Deixe a aba aberta.

Observação:
 “Se não souber o nome de usuário, coloca seu nome + ano de nascimento (ex: ana1958).”

11. Video de demonstração no Youtube.

– 1) Veja o vídeo.! – Para iniciante (explicação mais abrangente)

– 2) Veja o vídeo.! – Explicação mais complexa. 

3. Instalar o Visual Studio Code – Esse é o programa que usaremos pra escrever o código. É gratuito e leve.

1. No Chrome digite: code.visualstudio.com
2. Clique no botão azul grande “Download for Windows”
3. Quando baixar, clique duas vezes no arquivo VSCodeUserSetup.exe
4. Clique em “Avançar” → “Avançar” → marque a caixa “Adicionar ao PATH” → “Instalar
5. Deixe marcado “Abrir o Visual Studio Code” → Concluir
6. Quando abrir, fixe no desktop ou na barra de tarefas
7. Pronto! Esse vai ser nosso caderno de códigos.

Observação:
 “Se aparecer controle de conta → clique em SIM.”

8. Video de demonstração no Youtube.

   – Veja o vídeo.!

4. Instalar a extensão Live Server (o milagre do curso).

1. Abra o VSCode
2. Clique no ícone de 4 quadradinhos na barra lateral esquerda (Extensões)
3. Na barra de busca digite: Live Server
4. O primeiro resultado é do Ritwick Dey (mais de 40 milhões de downloads)
5. Clique em Install (azul)
6. Quando terminar aparece um “Reload” → clique nele
7. Pronto! Agora toda vez que salvarmos um arquivo, o site atualiza sozinho no navegador.

5. Teste final + recado carinhoso – “Agora vamos fazer o teste dos deuses:

1. Feche tudo
2. Abra o VSCode
3. Clique em File → New File 
4. Salve como index.html na área de trabalho
5. Digite só isso abaixo e salve (Ctrl + S): – (copie e cole)

html

<h1>Hello World.! Eu consegui!</h1>

6. Clique com botão direito no nome do arquivo → “Open with Live Server”

Se aparecer no Chrome a frase grandona “Hello World.! Eu consegui.!” – parabéns.!
 Seu computador está 100 % pronto pro curso.Se deu algum erro, tira print e manda pra mim no WhatsApp que eu te ajudo na hora.

**Fim do Módulo 0**

Módulo 1 – Como a internet e os sites funcionam

Teoria:

1 – Saudações.

Saudações, meus queridos alunos.! Bem-vindos ao Módulo 1.
 Hoje a gente vai entender como diabos um site aparece na tela do seu celular, ou do computador, quando você digita www.google.com.
 E eu prometo: sem jargão técnico chato. Só história boa.

2 – Metáfora da Pizzaria (Cliente × Servidor)

Imagina que o site é uma pizzaria – (Pizzaria São Luís)

• Você (no celular ou computador) = o CLIENTE sentado na mesa. (Impaciente pra ser atendido) 
• A pizzaria São Luís inteira (cozinha, forno, cozinheiro) = é o SERVIDOR que fica em algum lugar do planeta. (Vamos imaginar… Em Copacabana, Rio de Janeiro.)

Você levanta a mão e fala por garçon que está passando ao lado:

 — Moço, me traz uma pizza de calabresa.!  Isso é o que chamamos de PEDIDO (ou REQUEST (é o termo técnico)).

O garçom leva o pedido até a cozinha, o pizzaiolo faz a pizza e o garçom traz de volta pra sua mesa.

 Isso é a RESPOSTA (ou RESPONSE (outro termo técnico)). – Na internet funciona exatamente igual:

1. Você digita um endereço no navegador (no Google Chrome, por exemplo) → faz o pedido (escrevendo lá na barra de endereços)
2. O navegador manda esse pedido pro servidor da pizzaria (que na verdade é um computador gigante em algum galpão – lá em Copacabana) 
3. O servidor prepara a página (a pizza) e manda de volta pro seu celular ou computador (ou quem pediu a pizza)

Pronto. Isso é Cliente × Servidor. — Cliente PEDE, servidor SERVE.

 Todo site do mundo funciona assim. Simples, né?”

3 – Os 3 ingredientes do site (HTML, CSS e JavaScript – explicação de avó)

O que é HTML, CSS e JAVASCRIPT?
 — São 3 pessoínhas que trabalham juntos pra traduzir a sua linguagem (português, inglês, ou seja a língua que for…) Para o entendimento do computador. Mas eles, juntos, também trabalham para deixar tudo bonitinho pra você ver e gostar do que vê…

Tecnicamente, são linguagem de computação. Você usa os três pra criar um programa que vai realizar uma tarefa que você determinar.

 Vamos ver isto de uma forma mais agradável…usando analogias.

 Toda página da internet é feita de 3 coisas só. Três ingredientes. Vamos imaginar um prato de comida:

1. HTML = o PRATO e a COMIDA crua.
    É a estrutura. É o arroz, feijão, bife e salada colocados no prato de qualquer jeito. Tudo junto e misturado!.
    Sem o HTML não tem nada pra ver. É o esqueleto. 
2. CSS = o TEMPERO e a DECORAÇÃO
    É o cheiro verde por cima, o molho especial, a arrumação bonita no prato.
    Deixa tudo colorido, alinhado, bonito. Sem CSS o site funciona… mas fica feio pra caramba. 
3. JavaScript = o GARÇOM que faz mágica
    É quem abre a porta quando você clica, quem troca a foto quando você passa o mouse, quem calcula o frete no carrinho.
    É o que faz o site “mexer” e interagir com você.

Resumo da avó:
 HTML = o que tem
 CSS = como ficar bonito
 JavaScript = o que faz acontecer quando você clica

Quando você usa estas pessoínhas da forma adequada, no final, você criou uma página do seu site.

O que fazer depois? Se você criou sua página, o que vai fazer com ela pra que outras pessoas possam ver sua obra de arte?

Agora, vamos apresentar o complemento, que vai realizar seu desejo. São outras 3 pessoínas que também juntas, realizam este trabalho. Vamos ver como isto acontece?

4 – Domínio, Hospedagem e DNS (metáfora da casa)
 Agora vamos imaginar que o site é uma CASA.

• O terreno + a casa construída = representa a HOSPEDAGEM
   É onde todos os arquivos(*) do site moram de verdade. Tipo a Napoleon Host que a gente vai usar depois. Realmente, são grupos de computadores de grande porte, com grande capacidade de armazenamento e velocidade de processamento, dedicados a este tipo de serviço.

   (*) – Arquivo: é o que você escreveu em HTML, CSS e JAVASCRIPT (lembra?). Estas escritas são guardadas em Arquivos, em alguma pasta do seu computador. 

• O endereço da casa (Rua das Flores, 123) = representa  o DOMÍNIO.
   Exemplo: www.seunome.com.br
   É o que você digita no navegador. É o nome fácil de lembrar. Mais à frente, no curso, falaremos mais sobre este item. 
• O DNS = é a LISTA TELEFÔNICA que junta os dois (Domínio e Hospedagem).
   Quando você digita www.seunome.com.br, o DNS é o cara que olha na lista e fala:
   — Ah, essa casa fica no terreno da Napoleon Host, número IP 189.38.12.123.😊. – é o famoso DEDO DURO!.
   E manda seu navegador ir direto pra lá.

Assim sendo, podemos notar que:

Sem domínio = ninguém acha sua casa.
 Sem hospedagem = você não tem casa, só tem endereço no meio do nada.
 Sem DNS = tem casa e endereço, mas ninguém consegue ligar um no outro.Por isso quando a gente contratar a Napoleon Host, ela já anota e guarda o domínio e já configura o DNS sozinha. Zero dor de cabeça.”

5 – Front-end × Back-end (só pra saber que existe). Você só vai precisar saber mais fundo se seguir em frente para um nível mais PRO.

Última coisa rapidinha, só pra vocês não ficarem perdidos quando alguém falar:

• FRONT-END = tudo que você VÊ e CLICA – é o que aparece na sua tela: As cores, botões, fotos, menus. É o que a gente vai aprender 90% do curso. 
• BACK-END = o que acontece “nos bastidores” – como a cozinha da pizzaria do nosso exemplo acima.
   Onde podemos programar – salvar cadastro no banco de dados, mandar e-mail automático, calcular estoque da loja, etc.
   A gente não vai mexer nisso agora (e nem precisa pra 95% dos sites).

Pensa assim:

 Front-end = a vitrine e o salão da loja
 Back-end = o estoque e o escritório lá nos fundos.

 Neste curso a gente vai dominar a vitrine inteira e deixar ela linda.
 E se um dia você quiser aprender o estoque, aí a gente faz o curso avançado (?).

6 – Revisão rápida + piadinha final
 “Resumindo tudo que você aprendeu hoje:

1. Internet = cliente pede, servidor entrega (pizzaria) 
2. Todo site tem HTML (estrutura), CSS (beleza) e JavaScript (mágica) 
3. Domínio = endereço da casa | Hospedagem = terreno + casa | DNS = lista telefônica (dedo duro) 
4. Front-end = o que você vê | Back-end = o que você não vê

E agora a frase que eu mais falo pras minhas turmas:
 ‘Se até minha tia de 73 anos entendeu isso aqui… você também entendeu!- Tô certo ou tô errado?’”

7 – Tarefa de casa (2 minutinhos)
 “Antes da próxima aula, quero que vocês façam só duas coisinhas:

1. Abra o Google e digite ‘pizza’ na barra de endereços e selecione a opção “Imagem” → perceba que você é o cliente e o Google é o servidor te entregando a pizza (as imagens).  
2. Pense no nome do domínio do seu futuro site (ex: mariaartesanato.com.br). Anote num papel.

Próxima aula: vamos colocar a mão na massa e criar o primeiro arquivo HTML do zero!” 

Resumo:

– Cliente × Servidor – Basicamente, refere-se ao seu site e onde ele vai estar alojado (hospedado).

– O que é HTML, CSS e JavaScript (explicação de avó) – refere-se à programação propriamente dita. São os comandos que você passa para o computador (servidor) para que aconteçam os milagres…

– Domínio, hospedagem e DNS (explicação simples com metáfora de casa e endereço) – explicado, de forma bem humorada, sobre cada um…

– Front-end × Back-end (só pra saber que existe) – realmente, só pra saber que existem pois serão transparentes pra você.

Final
 “Alguma dúvida? Manda aqui no grupo do WhatsApp.
 E já deixa salvo: na próxima aula o site de vocês começa a ganhar vida de verdade. Beijo no coração de cada um e até lá!” 

Tente responder estas questões

QUESTIONÁRIO – MÓDULO 1 

“Como a internet e os sites funcionam” 

1. Quando você digita um site no navegador, quem é o “cliente” na história da pizzaria? 
2. a) O forno 
3. b) Você (seu computador/celular)
4. c) O cozinheiro 
5. d) O garçom

2. Quem prepara a página e manda de volta pra você? 
3. a) O cliente 
4. b) O servidor
5. c) O DNS 
6. d) O JavaScript

3. Das três opções abaixo, qual é a função do HTML? 
4. a) Deixa o site bonito 
5. b) Faz o site mexer e interagir 
6. c) É a estrutura (o arroz com feijão)

4. CSS serve para: 
5. a) Estrutura 
6. b) Tempero e decoração  
7. c) Fazer mágica quando clica

5. JavaScript é responsável por: 
6. a) Estrutura 
7. b) Aparência 
8. c) Interação (botões, formulários, troca de foto)

6. Na metáfora da casa, o que é o DOMÍNIO?
7. a) O terreno 
8. b) A casa construída 
9. c) O endereço (Rua das Flores, 123)
10. d) A lista telefônica

7. O que é hospedagem?
8. a) O endereço bonito 
9. b) O terreno + a casa onde os arquivos moram
10. c) A lista que traduz o nome pro número

8. DNS é: 
9. a) O carteiro 
10. b) A lista telefônica que junta domínio com hospedagem 
11. c) O nome do site

9. Front-end é: 
10. a) Tudo que acontece nos bastidores 
11. b) Tudo que o visitante vê e clica 
12. c) Só o banco de dados

10. (Pergunta aberta – essa é a mais importante!) 

    “Em no máximo 3 linhas, me explica com suas palavras como funciona a internet (pode usar a metáfora da pizzaria ou da casa). Quero ver se virou mestre mesmo!”

Na próxima aula, enviarei o gabarito. Até logo mais…!

Não esqueçam de enviar suas respostas (seu gabarito) + a questão 10 via Whatsapp do Grupo.

FIM DOS MÓDULOS 0 E 1