+55 (21) 99584-6774 [email protected]
Coalescencffe
Coalescencffe Workshops práticos de design web para iniciantes
Web Design para Iniciantes

Meu Primeiro Site do Zero

Projeto de aluno
03.2026 402 visualizações 12 minutos de leitura
Meu Primeiro Site do Zero

Isabela Fontoura tinha 34 anos quando decidiu parar de terceirizar tudo para agências e aprender a criar ela mesma. Ela não tinha base técnica nenhuma — só vontade de entender o que estava pagando para outros fazerem.

O ponto de partida

O projeto começou com uma página em branco no VS Code e muita confusão sobre a diferença entre HTML e CSS. Isabela documentou cada erro, cada tag esquecida, cada vez que o layout quebrou no celular mas ficou perfeito no computador.

Em vez de seguir tutoriais prontos, ela escolheu um objetivo concreto: criar um portfólio para seu trabalho como fotógrafa. Isso forçou decisões reais — paleta de cores, tipografia, organização de galeria — não exercícios genéricos.

O que o projeto cobre

  • Estrutura HTML semântica para uma página de portfólio
  • CSS com Flexbox para galeria responsiva
  • Formulário de contato funcional sem JavaScript
  • Publicação gratuita via GitHub Pages

Quanto tempo levou de verdade

Oito semanas, estudando cerca de cinco horas por semana. Não foi linear — a semana quatro foi praticamente perdida tentando entender posicionamento CSS.

Eu precisei refazer o menu três vezes. Na terceira, finalmente entendi por que o position: relative importa. — Isabela Fontoura

O resultado não é perfeito. Há coisas que ela refaria hoje. Mas o site está no ar, com domínio próprio, e ela sabe exatamente como atualizar cada parte dele.

Recursos utilizados no projeto

VS Code, Chrome DevTools, GitHub Pages, Google Fonts, Unsplash para imagens de teste, e o validador oficial do W3C para checar o HTML.

Estrutura do projeto

Como o trabalho está organizado

Etapas do projeto

  1. Semana 1-2: Estrutura HTML — cabeçalho, navegação, seções e rodapéFoco em tags semânticas: header, main, section, footer
  2. Semana 3-4: Estilização com CSS — cores, fontes, espaçamentoBox model, seletores, variáveis CSS
  3. Semana 5-6: Layout responsivo com FlexboxGaleria de fotos adaptável para mobile e desktop
  4. Semana 7: Formulário de contato e detalhes finaisValidação nativa HTML5, acessibilidade básica
  5. Semana 8: Publicação e revisãoGitHub Pages, teste em dispositivos reais, ajustes finais