Publique os seus seis projetos
Projetos que só abrem dentro da plataforma não entram num portfólio. Veja como tirar cada um daqui, rodar de verdade no seu computador e colocar no ar.
Estudar esta lição interativa →Você construiu seis projetos, mas todos moram dentro desta plataforma, num ambiente isolado. Para mostrá-los a alguém (um recrutador, um amigo), eles precisam virar arquivos seus, num endereço público. Isso também tem um bônus: fora daqui, o localStorage da lista de compras e do dashboard funciona de verdade, e você vai ver as listas sobreviverem a um F5.
1. Uma pasta por projeto
Crie portfolio/ e, dentro, calculadora/, quiz/, compras/, memoria/, cep/ e despesas/. Em cada uma, um index.html (o nome que os servidores abrem por padrão).
2. Copie o código
Cada exemplo da plataforma tem o HTML, um bloco de estilo e um bloco de script. Copie tudo para o index.html da pasta, na mesma ordem. Pode deixar o style e o script no mesmo arquivo; separar em estilo.css e script.js é uma boa prática para quando o projeto crescer.
3. Abra e teste de verdade
Abra o index.html no navegador, adicione itens na lista de compras, aperte F5 e veja os dados voltarem. Abra as ferramentas do desenvolvedor (F12) na aba Application, ou Storage, para ver o que ficou guardado.
4. Uma página inicial
Crie portfolio/index.html com um título, um parágrafo sobre você e uma lista de links (a href="calculadora/" e assim por diante) para os seis projetos.
Três coisas pedem atenção. (1) Os avisos "este ambiente de prática é isolado" deixam de fazer sentido: apague-os ou deixe que a mensagem reflita a realidade (os projetos já checam se o armazenamento funciona). (2) A chave do localStorage é compartilhada por todas as páginas do mesmo endereço, e por isso os projetos usam prefixo e versão (programandoai:compras:v1): se você mudar o formato dos dados, aumente a versão. (3) As imagens e as APIs externas (como a ViaCEP) dependem de terceiros e de internet; teste com a conexão desligada e veja se a mensagem de erro aparece.
Para publicar, vale o mesmo caminho do curso de HTML: uma hospedagem estática gratuita (como GitHub Pages, Netlify ou Cloudflare Pages) recebe a pasta portfolio/ e devolve um endereço https. Como cada serviço muda as telas com o tempo, siga a documentação atual dele. Depois de publicar, abra o endereço no celular e teste cada projeto: o Enter envia os formulários? Os campos têm rótulos? As mensagens de erro aparecem?
O localStorage guarda os dados no navegador de quem usa a página, nunca num servidor seu. Duas consequências: quem visita não vê a lista de compras de ninguém além da dele (o que é ótimo para privacidade), e nada de segredos ali, porque qualquer pessoa pode ler o que está guardado no próprio navegador. Também por isso, não publique nenhum dado pessoal real como exemplo.