Capitulo 05 - Criando Seu Primeiro Site do Zero

Do arquivo em branco a uma URL publica que representa voce

Introducao: este e o capitulo em que conhecimento vira vitrine

A partir daqui, tecnologia deixa de ser apenas entendimento interno.
Ela vira algo visivel.

Voce vai sair do "estou aprendendo" para "eu construo e publico".

Esse capitulo e importante por dois motivos:

consolidacao tecnica (HTML, CSS, JS, responsividade)
posicionamento profissional (site no ar, portfolio real)

Nao e exercicio de apostila.
E produto publicado.

1) HTML semantico: estrutura que faz sentido para humano e maquina

HTML nao e sobre "jogar tag".
E sobre estruturar informacao com intencao.

Blocos semanticos centrais:

header
nav
main
section
footer

Por que semantica importa

melhora leitura do codigo
melhora acessibilidade
ajuda SEO
facilita manutencao

Regra pratica:
escreva HTML como se outra pessoa fosse continuar seu projeto amanha.

2) CSS com criterio: visual profissional sem gambiarra

Depois da estrutura, vem estilo.
Mas estilo sem sistema vira caos.

Fundamentos que seguram qualquer layout

Box model (conteudo, padding, border, margin)
seletor por classe e id com intencao
hierarquia visual clara (tipografia, espacamento, contraste)

Erro classico

Copiar blocos de CSS sem padrao.

Resultado: conflito, retrabalho, tela que quebra facil.

Abordagem madura:

nomeacao consistente
tokens visuais basicos (cores, tamanhos, espacamentos)
componentes reutilizaveis

3) Layout moderno: Flexbox e Grid no mundo real

Layout e onde muita gente trava por falta de modelo mental.

Flexbox

Ideal para distribuicao em uma dimensao (linha ou coluna).

Use para:

menu
alinhamento de botoes
card horizontal

Grid

Ideal para estrutura em duas dimensoes.

Use para:

dashboard
galeria
sessoes de pagina com varias areas

Regra de bolso

Flexbox para fluxo simples
Grid para estrutura de pagina
combinacao dos dois para resultado profissional

4) Responsividade: um site, varias telas, mesma qualidade

Site que funciona so no desktop nao esta pronto.

Responsivo nao e detalhe estetico.
E requisito de uso real.

Elementos essenciais

viewport configurada
media queries bem pensadas
unidades flexiveis (rem, %, vw, clamp)
imagens adaptativas (max-width: 100%)

Pensamento mobile-first

Comece pelo menor contexto.
Depois expanda para telas maiores.

Isso força simplicidade e melhora decisao de hierarquia.

5) JavaScript no navegador: quando sua pagina ganha comportamento

Com HTML e CSS, voce tem estrutura e visual.
Com JavaScript, voce ganha interacao.

No navegador, os pilares sao:

DOM (representacao da pagina)
selecao de elementos
manipulacao de conteudo e estilo
eventos (click, input, submit)

Aplicacoes diretas para portfolio

menu responsivo
formulario com validacao
filtros de projeto
feedback visual de acao

Interatividade boa aumenta percepcao de qualidade imediatamente.

6) Publicar seu site: da sua maquina para a internet

Muita gente aprende a codar e para antes do passo mais estrategico: publicar.

Sem deploy, nao existe produto.

Conceitos que voce precisa dominar

hospedagem
servidor web
dominio e DNS
HTTPS

Verdade simples

Publicar nao e "final do projeto".
E inicio do uso real.

Quando seu site entra no ar, voce passa a ter:

feedback de usuarios
material para portfolio
prova de execucao

7) Vercel e deploy moderno: velocidade com confiabilidade

No fluxo moderno, deploy manual constante nao escala.

Com Vercel + Git:

voce faz commit
plataforma gera build
publica automaticamente
disponibiliza URL de producao e previews

Por que isso importa para sua carreira

Nao e so "ferramenta da moda".
E pratica de engenharia:

repetibilidade
rastreabilidade
rollback rapido
ciclo de iteracao curto

Voce nao entrega so codigo.
Voce entrega processo.

8) Projeto do capitulo: portfolio pessoal publicado

Seu output aqui precisa ser um site com:

apresentacao clara
secao de projetos
formulario de contato
navegacao funcional
layout responsivo
URL publica

Criterio de qualidade

Pergunte:

Quem entra no site entende em 10 segundos quem eu sou?
O site funciona bem no celular?
Existe chamada clara para contato?
O visual transmite profissionalismo?
O link esta estavel e compartilhavel?

Se sim, voce nao tem apenas um exercicio.
Voce tem ativo de carreira.

9) Framework de construcao de site para repetir sempre

Sempre que for criar um novo site, siga este fluxo:

Definir objetivo da pagina
Estruturar HTML semantico
Aplicar sistema visual no CSS
Construir layout com Flexbox/Grid
Adaptar para responsividade
Adicionar interacoes com JS
Testar e publicar

Esse framework evita improviso e aumenta consistencia.

Plano de execucao em 7 dias

Dia 1 - Estrutura

Montar HTML base com secoes principais.

Dia 2 - Estilo

Aplicar CSS com tipografia, cores e espacamento.

Dia 3 - Layout

Organizar com Flexbox/Grid.

Dia 4 - Responsividade

Ajustar para mobile, tablet e desktop.

Dia 5 - Interatividade

Adicionar JS para menu, formulario e microinteracoes.

Dia 6 - Ajuste final

Refino visual, revisao de conteudo, testes.

Dia 7 - Deploy

Publicar na Vercel e compartilhar URL.

Checklist de dominio do Capitulo 5

Consigo estruturar pagina com HTML semantico
Estilizo com CSS de forma organizada
Uso Flexbox e Grid para layout real
Garanto responsividade em multiplas telas
Adiciono interacoes com JS no DOM
Publico site com URL acessivel
Configuro fluxo de deploy moderno (Vercel)

Erros classicos que este capitulo te ajuda a evitar

Fazer layout so para uma resolucao
Misturar estrutura e estilo sem padrao
Ignorar acessibilidade e semantica
Usar JS para resolver problema que era de CSS
Deixar deploy para o fim e travar no ultimo passo
Publicar sem testar fluxo principal

Fechamento do capitulo

Este capitulo marca uma mudanca objetiva:
voce sai da fase de estudo para fase de entrega publica.

Ter um site no ar muda sua narrativa profissional.
Voce deixa de dizer "estou aprendendo" e passa a dizer "eu construo".

No proximo capitulo, vamos para backend.
Ou seja: voce ja domina a vitrine.
Agora vai dominar o motor por tras da vitrine.

Resumo executivo do Capitulo 5

HTML semantico organiza conteudo com clareza
CSS com sistema evita caos visual
Flexbox e Grid resolvem layout moderno
Responsividade transforma site em produto real
JavaScript no DOM traz interatividade
Publicacao e deploy transformam estudo em entrega
Vercel + Git acelera iteracao profissional
Portfolio publicado vira ativo de carreira

Capítulo 5 / 16