Publique: Da Sua Tela para o Mundo
Publique: Da Sua Tela para o Mundo
Uma verdade dura: uma página que só existe no seu computador não foi publicada. Ninguém pode vê-la, ninguém pode usá-la e ninguém pode te dizer que ela é incrível. Publicar significa uma coisa só — uma URL que qualquer pessoa no mundo pode abrir. Essa é a linha entre "estou aprendendo a programar" e "eu construí algo".
A boa notícia? Conseguir uma URL agora é a parte fácil. Serviços gratuitos fazem isso em segundos:
- Netlify Drop — abra o site, arraste seu arquivo HTML para a página, receba uma URL ao vivo. Esse é o processo inteiro.
- Vercel — conecte uma pasta ou um repositório do GitHub, clique em deploy, pronto. (Esta academia roda exatamente nele.)
E se você travar em algum momento? Você é um vibe coder — pergunte à IA. "Me guie passo a passo para fazer o deploy deste arquivo HTML na Netlify" funciona lindamente. O deploy costumava ser a parte assustadora da programação. Agora é uma conversa.
Mas antes de arrastar esse arquivo para qualquer lugar, existe uma diferença entre uma página que funciona e uma página pronta para o lançamento. Sites de verdade têm toques profissionais: um título adequado na aba do navegador, uma descrição que mecanismos de busca e pré-visualizações de link podem mostrar, tags sociais para o seu link ficar bonito quando alguém compartilhar no WhatsApp ou no X, e um rodapé que diz "uma pessoa de verdade fez isto — aqui, compartilhe". Nesta lição final, você vai pegar o seu Quadro de Ideias do Módulo 4 e dar a ele exatamente esses toques.
O que vem a seguir no seu caminho
Esta é a última lição de Fundamentos de Vibe Coding — mas é o primeiro passo da trilha Do Zero ao Herói. A partir daqui você vai conhecer o Claude Code no navegador (uma IA que constrói projetos inteiros a partir de uma conversa), depois instalar a ferramenta de verdade na sua própria máquina e, por fim, construir o seu próprio agente de IA. Você agora sabe como a web é feita. Hora de fazer muito mais dela.
Vamos publicar.
Instruções
Dê à sua página um <title> de verdade — substitua "Untitled" por um nome digno da aba do navegador. É a primeira coisa que mecanismos de busca e favoritos mostram.
Dica: Encontre `<title>Untitled</title>` no <head> e mude para algo como `<title>Idea Board — Never Lose a Spark</title>`. Pelo menos alguns caracteres — deixe com a sua cara.
Adicione uma tag <meta name="description"> no <head> — uma frase que diz aos mecanismos de busca (e aos humanos curiosos) o que o seu app faz.
Adicione tags Open Graph — <meta property="og:title"> e <meta property="og:description">. Elas controlam como o seu link aparece quando compartilhado no WhatsApp, no X ou no LinkedIn.
Adicione um <footer> na parte de baixo do cartão com um crédito "Built with vibes" e um <a id="share-link"> — todo produto publicado assina o próprio trabalho.
Seu Código
Descreva o que você quer construir para esta etapa e eu escrevo o código — depois clique em Aplicar para inseri-lo no seu editor. Esta etapa: Dê à sua página um <title> de verdade — substitua "Untitled" por um nome digno da aba do navegador. É a primeira coisa que mecanismos de busca e favoritos mostram.