Projeto: o seu portfólio, publicado · HTML do zero

O que você já construiu

Nada aqui é novo. As onze aulas anteriores escreveram o portfólio inteiro, um pedaço por sábado. Esta aula junta, confere e publica.

meu-portfolio/
├── index.html
├── sobre.html
├── portfolio.html
├── stack.html
├── carreira.html
├── contato.html
└── imagens/
    ├── retrato.jpg
    ├── feira.png
    ├── barco.png
    └── glossario.png

O que cada página precisa ter

Todas as seis, sem exceção: o esqueleto da aula 2, o link "pular para o conteúdo", o <header> com o <nav> de seis itens, um <main id="conteudo">, um <h1> só, e o <footer> completo.

index.html - a página que decide se a pessoa continua:

a abertura: situação, <h1> com seu nome, função, e duas ou três linhas sobre o que você faz;
dois links de ação: "Vamos conversar" para contato.html, e o currículo em PDF;
<section> "Sobre", com um resumo e link para sobre.html;
<section> "Como trabalho", com a <ul> de três a seis itens;
<section> "Projetos selecionados", com dois ou três <article> e link para portfolio.html;
<section> "Trajetória", com os dois cargos ou cursos mais recentes e link para carreira.html;
<section> final com uma pergunta e o link para contato.html.

sobre.html - a história com calma: três parágrafos de biografia, o retrato com alt de verdade, e a <ul> aninhada de ferramentas.

portfolio.html - um <article> por projeto, com <figure>, <h2>, descrição, <dl> de ficha técnica e link para abrir. No mínimo três.

stack.html - a <table> de ferramenta × área × nível, com <caption>, scope e no máximo oito linhas.

carreira.html - a <table> de formação e a <ol> de experiência, cada item num <article>.

contato.html - a <dl> de canais diretos e o <form> validado da aula 9.

O que fazer se você não tem três projetos

Você tem um. O portfólio é o primeiro projeto do portfólio, e não é truque: são seis páginas escritas à mão, com tabela, formulário, semântica e acessibilidade conferidas, publicadas num endereço público. Escreva o <article> dele como escreveria o de qualquer outro:

<article id="portfolio">
  <header>
    <h2>Este portfólio</h2>
    <p>2026 · estrutura, conteúdo e publicação</p>
  </header>

  <p>
    Seis páginas em HTML puro, sem framework: passa no validador do W3C, é
    percorrível só com o teclado e pesa menos de 300 KB.
  </p>

  <footer>
    <a href="https://github.com/marinasales/portfolio">Ver o código no GitHub</a>
  </footer>
</article>

Os outros dois saem de uma tarde de trabalho cada, e usam só o que estas doze aulas ensinaram:

O projeto	O que dele você já sabe fazer
Os horários de um transporte da sua cidade	a tabela com `scope` da aula 5
Um glossário de termos que só a região usa	a `<dl>` da aula 4
A página de um coletivo ou de uma feira	a semântica da aula 10
Um formulário de inscrição para um evento	os campos e a validação das aulas 8 e 9

Cada um vira uma pasta dentro do portfólio, com o próprio index.html, e um <article> na portfolio.html apontando para ele.

A lista de conferência

Antes de publicar, percorra os seis arquivos:

Estrutura

<!DOCTYPE html> na primeira linha
lang="pt-BR" no <html>
charset e viewport no <head>
<title> próprio em cada página, no formato "Assunto · Seu Nome"
<meta name="description"> em cada página
um <h1> por página, e nenhum nível de título pulado

Navegação

o mesmo menu nas seis páginas
todos os links funcionando nos dois sentidos
nenhum caminho absoluto para o seu computador
nenhum texto de link genérico

Conteúdo

toda imagem com alt, e as decorativas com alt=""
toda imagem com width e height
nenhuma imagem acima de 300 KB
todo campo com <label for>, id e name
tabelas com <caption> e scope

Acessibilidade

dá para percorrer tudo com Tab
dá para ver onde o foco está
o link "pular para o conteúdo" é o primeiro do <body>
cada <nav> tem o seu aria-label

Verdade

nenhum Lorem ipsum
nenhum projeto que você não fez
nenhuma ferramenta que você não usa
o e-mail e o telefone são os seus, e estão certos

O validador

Cole cada uma das seis páginas no validador do W3C. Ele aponta tag não fechada, atributo inválido e id repetido - três defeitos que não aparecem na tela e quebram leitor de tela e CSS.

Zero erro é a meta, e é alcançável: são páginas pequenas, escritas à mão.

Como publicar de graça

Quando estiver pronto, dá para pôr no ar sem pagar nada. Duas opções comuns:

GitHub Pages: hospeda o repositório como site, e o endereço fica seuusuario.github.io/portfolio. Exige aprender o básico do Git, que vale por si - e o link do repositório vira mais uma prova do seu trabalho.
Netlify: arrasta a pasta na página deles e o site sobe.

Nos dois casos, o arquivo tem de se chamar index.html e estar na raiz.

Depois de publicado, abra o endereço no celular, com os dados móveis, não no Wi-Fi de casa. É assim que a maior parte das pessoas vai abrir.

O que vem depois

O curso de CSS do zero pega estas seis páginas e as transforma sem mudar uma linha de HTML: fundo escuro, realce verde, cartões com borda fina, a grade de projetos, o tema claro para quem lê no sol e o anel de foco que a aula 11 pediu.

O curso de JavaScript do zero resolve o que ficou faltando: o menu que abre no celular, a mensagem de erro escrita embaixo do campo, e o formulário que realmente envia.

Os três cursos trabalham no mesmo portfólio. Este aqui é a fundação, e é a que sustenta as outras duas.

Exercícios

Monte as seis páginas com tudo o que a aula lista.
Percorra a lista de conferência inteira, item a item, nas seis páginas.
Passe as seis pelo validador do W3C até dar zero erro.
Peça a alguém para abrir o site e, em dez segundos, dizer o que você faz e como te achar. Se demorar mais, a estrutura pode melhorar.
Navegue no site inteiro só com o teclado.
Publique. Abra o endereço no celular, nos dados móveis.
Mande o endereço para três pessoas: alguém que trabalha na área, alguém que não trabalha, e alguém da sua família. As três críticas são diferentes, e as três servem.

Referências

Publicando seu site - MDN - as opções gratuitas, passo a passo
Validador de HTML - W3C - cole seu código e ele aponta tag não fechada e atributo inválido
Checklist de acessibilidade - WebAIM - a lista completa, além da desta aula