Codex Sites: criei um site completo com 2 prompts, sem código

Autoria: NoCode StartUp · Assistir no YouTube

Vídeo de autoria do canal indicado, não da IANIA; todos os direitos pertencem ao criador. Transcrição, resumo e tradução gerados automaticamente; o conteúdo no idioma original é preservado na versão em idioma original.

Idioma original: português

Vídeo original: Codex Sites: Criei um Site Completo com 2 Prompts (Sem Código) · Canal: NoCode StartUp · 13:01 · Assistir no YouTube

Tópicos: Agentes de IA, Engenharia de software com IA, Geração de conteúdo com IA

Resumo

Danilo Fernandes demonstra como criar e ajustar uma landing page para a marca fictícia Aura One usando o Sites no Codex, com dois prompts. Depois de revisar a prévia, ele publica o site e explica como associar um domínio próprio e configurar registros DNS. O vídeo também apresenta Three.js, GSAP e P5.js como opções para adicionar elementos visuais e animações mais elaborados. O fluxo é apresentado como uma forma direta de prototipar, não como substituto de uma estrutura de desenvolvimento mais robusta.

Pontos-chave

O fluxo demonstrado consiste em descrever o site, conferir a prévia, pedir ajustes, salvar uma versão e publicar.
O exemplo é uma landing page de produto para o fone fictício Aura One, com visual inspirado em produtos Apple.
O segundo prompt pede melhorias na apresentação do produto, no CTA, nos cartões de benefícios, no contraste e na visualização em celular, sem reconstruir o site.
Salvar uma versão não publica o site; é preciso fazer o deploy e validar o URL.
O vídeo mostra a publicação usando um URL fornecido pelo serviço e explica a associação de um domínio ou subdomínio personalizado.
Para associar um domínio, o apresentador menciona configurar registros CNAME e TXT no provedor de DNS.
Three.js, GSAP e P5.js são apresentados como opções para criar cenas 3D, animações e arte generativa.
O apresentador ressalta que o resultado pode melhorar quando a pessoa tem mais familiaridade com desenvolvimento frontend e frameworks.

Capítulos

Início	Capítulo	Resumo
00:00	Apresentação do Codex Sites e do fluxo	O apresentador explica a proposta de criar um site com poucos prompts e apresenta o Sites no Codex como uma alternativa para desenvolver páginas.
02:05	Criação e ajustes da landing page	Ele gera uma página para a marca fictícia Aura One e solicita melhorias de layout e conteúdo com um segundo prompt.
05:44	Revisão, publicação e domínio	O apresentador confere os ajustes, diferencia salvar de publicar e demonstra o deploy e a configuração de um domínio personalizado.
09:20	Frameworks para experiências visuais	Ele recomenda Three.js, GSAP e P5.js para ampliar as possibilidades de animação, 3D e arte generativa.
11:57	Encerramento e convite à formação	O apresentador divulga a formação da NoCode StartUp e convida o público a comentar e compartilhar o vídeo.

Citações

Você só vai descrever o que você quer, conferir a prévia, pedir uns ajustes, salvar uma versão e publicar. — 02:36

Melhorar sem reconstruir. A gente não quer fazer nada do zero. — 04:09

Salvar uma versão ainda não coloca o site no ar. — 06:14

Use para criar composições que respondem ao movimento do mouse ou ao toque. — 11:27

Conceitos e entidades

Codex (ferramenta): Ferramenta da OpenAI usada no vídeo para gerar e ajustar um site a partir de prompts.
Sites (ferramenta): Funcionalidade no Codex apresentada para criar, revisar e publicar sites.
ChatGPT (ferramenta): Produto da OpenAI mencionado pelo apresentador ao mostrar a interface que reúne acesso ao ChatGPT e ao Codex.
OpenAI (empresa): Empresa cujo ecossistema de ferramentas o apresentador relaciona ao Codex.
Aura One (conceito): Marca fictícia de áudio premium usada como exemplo para a landing page de um fone de ouvido.
Three.js (ferramenta): Biblioteca JavaScript apresentada como opção para criar cenas e produtos em 3D.
GSAP (ferramenta): Ferramenta apresentada para criar animações e narrativas acionadas pela rolagem da página.
P5.js (ferramenta): Biblioteca apresentada para criar desenhos, animações e arte generativa.
React Three Fiber (ferramenta): Ferramenta mencionada pelo apresentador como parte de seus próprios projetos visuais.
Cloudflare (empresa): Provedor de DNS que o apresentador diz usar para apontar registros do domínio.
NoCode StartUp (empresa): Canal e organização mencionados pelo apresentador ao divulgar sua formação.
deploy (conceito): Etapa de publicação do site, distinta de apenas salvar uma versão.
DNS (conceito): Sistema cujos registros, como CNAME e TXT, são configurados para apontar o domínio ao site.

Tradução completa (pt-BR)

00:00 Eu vou pedir um site pro Codex, vou ajustar uma vez e vou colocar essa página no ar. Sem código exacerbado, sem aquele monte de arquivo, nananana, nada disso. No final a gente vai ver o que saiu em dois prompts. Meu nome é Danilo Fernandes, eu sou o seu instrutor na formação “É gente que [música] builda” lá dentro da nossa No Code Startup. Se você quiser saber mais sobre a formação, vai ter um

00:30 link na descrição [música] pra você acessar, entender, buscar, conhecer e quem sabe ganhar alguns dinheiros com o conteúdo ministrado lá. Porque o que eu vou te mostrar aqui é só a ponta do iceberg. E o que é o Sites? Sites nada mais é do que uma funcionalidade disponível no Chat GPT {barra} Codex, porque eles viraram apenas um app. Então aqui a gente pode ver Chat GPT; se eu clicar aqui, vou pro Chat GPT, vou desenvolver as coisas no Chat GPT e aqui, tudo no Codex. Sites é essa abinha

01:02 maravilhosa aqui. Aqui tem alguns projetos pra brincar, pra testar e, por meio dele, a gente faz basicamente aquilo que já fazia no Lovable, no V0 da Vercel, por exemplo, no Base 44, entende? Só que a diferença é que a gente tá falando do Codex. E, falando do Codex, a gente tem todo o mecanismo da OpenAI disponível às mãos, assim, pra que ele gere, refatore, crie e desenvolva, dispare sub agents no modo Max, no modo

01:34 Ultra, no modelo que você quiser, seja 5.6, seja Terra, seja Sol, seja o novo Astra, tá ok? Então, o que a gente vai fazer? É do prompt ao site no ar mesmo, tá beleza? Então a gente vai ter uma ideia pra conectar essas etapas e fazer com que elas sejam mais, ah, sucintas, mais diretas ao ponto. Então, assim, qual é o fluxo comum anterior? O fluxo normal é este aqui: várias etapas separadas. Mas eu quero te mostrar neste vídeo o potencial dos

02:05 sites atrelados a esse mecanismo sensacional, esse organismo quase vivo da Open AI, tá? E aqui, com o Codex Sites, o fluxo é bem direto ao ponto. Eu quero deixar bem claro que o que a gente vai desenvolver aqui não substitui de forma alguma a estrutura mais robusta, a estrutura mais completa, a estrutura mais complexa, tá? Então aqui é pra te mostrar de fato as funcionalidades, o que é possível fazer com o Sites. Então você só vai

02:36 descrever o que você quer, conferir a prévia, pedir uns ajustes, salvar uma versão e publicar. Então, um prompt pra criar e outro aqui pra ajustar. O que a gente vai fazer aqui? No exemplo, a gente vai pegar um visualzinho mais voltado pra Apple, tá OK? Então é uma landing page do Aura One, que é um website, uma página para a Aura, uma marca fictícia de áudio premium, apresentando o fone Aura One. Hum, eu não fiz isso aqui ainda, tá? Não fiz, produção, eu não fiz. Se der ruim…

03:07 …não vai dar ruim, não, vem aqui. Volta, a gente copiou aquele promptzinho no material, é só dar um Command-V aqui. Como eu sou gastão, vou colocar os seis astros assim no meu Ultra e, hum, dar um Enter, deixar ele trabalhar e vamos ver o que vai sair desse prompt. Lembrando que quanto maior o esforço, quanto mais poderoso for o modelo, mais demorada vai ser a sincronização, mesmo a gente utilizando aqui o modo rápido, tá? Duas vezes a velocidade. Mesmo utilizando ele, vai levar um tempinho. Então vamos aguardar. Meu

03:38 patrão, olha a qualidade disso aqui, velho. Olha isso aqui, Aura One. Dá até vontade de comprar um fone desses, mas só ele gerou aqui: Aura. Gostei da logo minimalista e tal. Visão geral, né? Som que deixa espaço para você, acabamento grafite, menos distração, mais presença, novo jeito de estar com o som. Feito para o seu ritmo, ouça mais, deixe o resto de lado. O mundo pode esperar um pouco. Ah, quando você coloca um fone com redução de ruído, com certeza pode. O ruído ao redor diminui conforme o ambiente muda. Sua música tem espaço.

04:09 Você também. Caraca, o maluco pegou pesado na cópia, hein? O som acontece ao seu redor. Nossa, deu vontade de comprar esse fone, mesmo ele não existindo, tá? Que triste. Over-ear, grafite fosco, áudio espacial, USB-C. Bacana. E aí ele aparece, opa, ele aparece desta forma aqui, né? Aqui ficou desse jeitinho. Beleza. Agora vamos fazer um ajuste. Vamos fazer um ajuste. Melhorar sem reconstruir. É que a gente não quer fazer nada do zero. Se você clicar aqui, já vai copiar direto. Então, revise a primeira versão sem reconstruir o site, dê mais destaque ao produto no hero e reduza o texto acima da dobra.

04:41 Deixe o CTA principal mais evidente sem usar mais cores. Transforme os três benefícios em cartões fáceis de comparar. Melhore o contraste dos textos secundários. No celular, reduza espaços vazios excessivos e garanta que nenhum conteúdo seja cortado. Preserve a identidade, o conteúdo original, a navegação e tudo que já estiver funcionando. Depois, mostre a versão atualizada para uma última revisão. Não publique ainda. Perfeito. Então vamos lá. Aí eu posso fechar aqui, deixar lá e chamar. E aí a gente vai esperar mais um pouquinho. Esse de cima aqui levou cerca de 6 minutos e 27 segundos. Se

05:13 você clicar aqui, vai ver o que ele fez. Verifique: página atualizada. Hã, abriu o site para revisão e algo assim. Beleza. Agora a gente vai aguardar. É lógico que, se você tiver mais noções de frontend, de frameworks, o resultado vai sair muito melhor, tá? Então ele vai ser muito mais assertivo. Mas aqui a gente está partindo do arroz com feijão muito bem feito, muito bem temperado com cebolas, alhos e um pouquinho de sal. Vamos aguardar. Pronto, depois de 7 minutos e 47 segundos, aqui a gente consegue ver o que ele fez.

05:44 Produto em destaque, menos texto no hero, CTA mais evidente, benefícios em cartões com contraste, tá? Vamos ver aqui. Ouça mais. Deixa eu mostrar aqui, ó, os cartões, né? Que a gente havia solicitado a ele. O mundo pode esperar um pouco. Ficou mais legal. Eu particularmente gosto desse tipo de visual. Mas dá, cara, aqui dá pra fazer, como dizem, dá pra fazer miséria, né? Dá pra fazer um negócio bem mais imersivo, com ondas sonoras. Às vezes tem vários frameworks de JavaScript pra gente aproveitar, pra deixar o negócio mais

06:14 intenso, sabe? Mais cabuloso. Voltando aqui pro material: da revisão ao domínio, salvar não é publicar. Salvar uma versão ainda não coloca o site no ar; isso é só um fato, né? Então, salvar a versão, revisar a prévia, fazer o deploy, validar o URL, adicionar o domínio, configurar o DNS. Agora a gente volta aqui no material pra entender que salvar não é publicar. A gente salva a versão, revisa a prévia, faz o deploy, valida o URL, adiciona o domínio, configura o DNS. Então, a gente revisou a prévia. Dá uma olhadinha aqui: pá, bacana, show de bola. Explorar os recursos.

06:45 Massa. Agora, o que é que eu faço aqui? Bem, dou um Ctrl-C e vou lá pro nosso queridão Google Chrome. No Google Chrome, clico nesses três pontinhos, vou em Mais ferramentas, Ferramentas do desenvolvedor. Aqui a gente consegue ver a dimensão da tela, que aqui seria a tela, e aqui, a tela do celular para o nosso usuário, para os nossos clientes. Beleza. O que mais aqui? Fazer o deploy. Vamos fazer o deploy, validar o URL. E o domínio pode ser usado da forma que ele bem entender. A gente só volta

07:17 aqui e vou clicar nesse botão, nessa opção, ah, faço o deploy com o URL referente ao nome do projeto. Mas antes é interessante que você verifique as regras de segurança antes de qualquer publicação e aplique regras de segurança cibernética. Faço o deploy com o URL referente ao nome do projeto. O que mais diz ali? Validar o URL, adicionar o domínio. Beleza. Isso aí já vai ser suficiente. Faço o deploy com o URL referente ao nome do projeto no Sites. Mas isso torna

07:48 o domínio público, OK? Dá Enter e aguarde ele fazer a mágica. Voilà! Aqui está o nosso site devidamente publicado, tá? Você pode perceber aqui que já tem um negocinho diferente aqui, ó: auraone, que é o nome do projeto, {ponto} dandegsf, que não é somente o meu GitHub, mas também o arroba, por assim dizer, da minha conta do GPT {barra} Codex, chatgpt.site. Tá,

08:19 Danilo, mas isso fica feio, né? Concordo com você, concordo plenamente. É por isso que a gente compra um domínio. Se você vier aqui em Sites, vão estar todos os projetos que você já criou, que você já desenvolveu. Esse daqui, esse link, inclusive, está público. Então, você vem aqui em Settings e adiciona um domínio, um subdomínio customizado. Esse daqui vai ser o Aura One, aí ponto mectracking.com.br, que é o nome da minha PJ. Aí eu adiciono

08:49 o domínio. Ele vai carregar, e o que vai acontecer? Ele vai disponibilizar registros CNAME e TXT para você fazer o apontamento dentro da Cloudflare, que é o que eu uso e recomendo, ou dentro de qualquer outro servidor onde você hospeda o seu site. Hostinger, Hostgator, enfim. Aí você copia, faz os apontamentos e já vai aparecer, por exemplo, assim: auraone.joaodascoves.com.br, o teu domínio com o subdomínio. É assim

09:20 que a gente cria, é assim que a gente gerencia. Aí, só a título de curiosidade e desenvolvimento, eu deixei aqui para você: seu site pode ir além do óbvio. São três excelentes frameworks JavaScript para você utilizar. Esses dois aqui são muito conhecidos. Esse P5.js não é tão conhecido, mas esses dois aqui são bem difundidos. Para que servem? Para a gente dar um tempero,

09:52 deixar um gostinho melhor no site. Então, o Three.js vai trazer para a gente cenas e produtos em 3D. O GSAP vai ser para animação e narrativa durante o scroll. Sabe aqueles sites imersivos, mais ou menos assim, em que você entra no site e fala: “Caraca, que doideira, doideira total! Olha só a imersividade, olha só a riqueza de detalhes deste site”, sabe? Algo mais ou menos nessa pegada, aqui, ó, de você

10:25 clicar, entrar no site, ó, você vai fazendo motion, as coisas vão acontecendo, sabe? Danilo, você fez isso com framework JS? Também, mas não somente. Fiz também utilizando React Three Fiber. Então, isso é só para você entender as possibilidades. Tem outros aqui também. Esse daqui está mais basicão, tá? Esse aqui foram

10:55 alguns testes que eu executei utilizando o GPT Images 2.5 atrelado aos sites, né? Então, aqui você pode ver que não ficou muito… Então, à medida que você vai fazendo o scroll, tá? O iPhone vai se desmembrando e tudo mais. É isso daí. Então, deixo aqui essa recomendação para vocês: Three.js, GSAP, P5, arte e experimentação visual. Transforma códigos em desenhos, animações e arte

11:27 generativa. Use para criar composições que respondem ao movimento do mouse ou ao toque. Isso deixa seu projeto com aquela cara de: “Esse cara teve cuidado, teve cautela na hora de desenvolver isso aí. Ele realmente passou, conseguiu colocar no papel aquilo que a gente combinou na call, que você normalmente faz antes de desenvolver um site, um projeto. Ele conseguiu não só trazer aquilo, mas trazer algo melhor

11:57 do que eu esperava. Isso foi extremamente disruptivo. Vou pagar 10.000 a mais para esse cara. Enfim, sabe onde você aprende tudo isso, né? Porque isso daqui é só o básico, só para te mostrar uma possibilidade. Mas, dentro da formação Agent Builder No Code Startup, você encontra todos os projetinhos completos. Você encontra de tudo. A gente vai pegar na tua mãozinha e vai te conduzir à riqueza. Aqui tem uma plaquinha de 100.000, a gente tem a plaquinha de 10, de 100 e a de 1 milhão,

12:28 salvo engano. Mas essa daqui foi apenas um contrato, um contrato que foi interessante para mim. Eu espero que, te conduzindo pela mãozinha dentro da nossa formação No Code Startup AI Agent Builder, eu possa te auxiliar nessa jornada para conseguir a plaquinha de 10, de 100 e, quem sabe, por que não, a de 1 milhão. E eu quero te pedir uma coisa: se você acha que esse conteúdo foi interessante o suficiente para ter um episódio 2 ou 3, comenta aqui e compartilha com aqueles

13:01 que nada sabem, que acham que sabem, mas não sabem nada sobre frontend, tá? Então, compartilha com seu amigo que está precisando desenvolver um projeto com urgência e nem sabe por onde começar. Eu te espero lá dentro da nossa formação No Code Startup AI Agent Builder, beleza? Até a próxima.

Transcrição original

[00:00] Eu vou pedir um site pro Codex, vou ajustar uma vez e vou colocar essa página no ar. Sem código exacerbado, sem aquele monte de arquivo, nananana, nada disso. No final a gente vai ver o que que saiu em dois prompts. Meu nome é Danilo Fernandes, eu sou o seu instrutor na formação “É gente que [música] builda” lá dentro da nossa No Code Startup. Se você quiser saber mais sobre a formação, vai ter um

[00:30] link na descrição [música] pra você acessar, entender, buscar, conhecer e quem sabe ganhar alguns dinheiros com o conteúdo ministrado lá. Porque o que eu vou te mostrar aqui é só a ponta do iceberg. E o que que é o Sites? Sites nada mais é do que uma funcionalidade disponível no Chat GPT {barra} Codex, porque eles viraram apenas um app. Então aqui a gente pode ver Chat GPT, se eu clicar aqui vou pro Chat GPT, vou desenvolver as coisas no Chat GPT e aqui tudo no Codex. Sites é essa abinha

[01:02] maravilhosa aqui. Aqui tem alguns projetos pra brincar, pra testar e por meio dele a gente faz basicamente aquilo que a gente já fazia no Lovable, na no V0 da Vercel, por exemplo, no Base 44, entende? Só que a diferença é que a gente tá falando do Codex. E falando do Codex, a gente tem todo o mecanismo da OpenAI disponível às mãos assim, pra que ele gere, refatore, crie e desenvolva, dispare sub agents no modo Max, no modo

[01:34] Ultra, no modelo que você quiser, seja 5.6, seja Terra, seja Sol, seja o novo Astra, tá ok? Então o que que a gente vai fazer? É do prompt ao site no ar mesmo, tá beleza? Então a gente vai ter uma ideia pra linkar essas etapas e fazer com que elas sejam mais ah sucintas, mais diretas ao ponto. Então assim, o fluxo anterior comum, qual que é? O fluxo normal é essa daqui. várias etapas separadas, mas eu quero te mostrar neste vídeo o potencial dos

[02:05] sites atrelado a esse mecanismo sensacional, esse organismo quase que vivo da Open AI, tá? E aqui com o Code Sites é um fluxo bem direto ao ponto. Eu quero deixar bem claro que o que a gente vai desenvolver aqui não substitui de forma alguma a estrutura mais robusta, a estrutura mais completa, a estrutura mais complexa, tá? Então aqui é para te mostrar de fato as funcionalidades, o que que é possível fazer com o Sites. Então você só vai

[02:36] descrever o que você quer, confere a prévia, pede uns ajustes, salva uma versão e publica. Então um prompt para criar e um outro aqui para ajustar. O que que a gente vai fazer aqui? No exemplo, a gente vai pegar uma um visualzinho assim mais voltado para para Apple, tá OK? Então é uma landing page do Aura One, que é um website, uma página para a Aura, uma marca fictícia de áudio premium, apresentando o fone Aura One. Hum, tô, eu não fiz isso aqui ainda, tá? Não fiz, produção eu não fiz, se der ruim

[03:07] não vai dar ruim não, vem aqui. Volta, a gente copiou aquele promptzinho no material, só dá um command V aqui. Como eu sou gastão, eu vou colocar os seis astros assim no meu ultra e hum, dá um enter, deixa ele trabalhar e vamos ver o que que vai sair desse prompt. Lembrando que quanto maior o esforço, quanto mais poderoso for o modelo, mais demorado vai ser o sync, mesmo a gente utilizando aqui o o modo de modo fast, tá? Duas vezes speed. Mesmo a gente utilizando ele, ele vai levar um tempinho. Então vamos aguardar. Meu

[03:38] patrão, olha a qualidade disso aqui, velho. Olha isso aqui, Aura One. Dá até vontade de comprar um um fone desse, mas só ele gerou aqui, Aura, gostei da da logo minimalista e tal. Visão geral, né? Som que deixa espaço para você, acabamento grafite, menos distração, mais presença, novo jeito de estar com o som. Feito para o seu ritmo, ouça mais, deixa o resto de lado. O mundo pode esperar um pouco. Ah, quando você coloca um um fone com redução de ruído, com certeza pode. O ruído ao redor diminui conforme o ambiente muda. Sua música tem espaço.

[04:09] Você também. Caraca, o meio maluco pegou pesado na cópia, hein? O som acontece ao seu redor. Nossa, deu vontade de comprar esse fone, mesmo ele não existindo, tá? Que triste. Over ear, grafite fosco, áudio espacial, USB-C. Bacana. E aí ele aparece, opa, ele aparece desta forma aqui, né? Aqui ficou desse jeitinho aqui. Beleza. Agora vamos fazer um ajuste. Vamos fazer um ajuste. Melhorar sem reconstruir. Que é a gente não quer fazer nada do zero. Se você clicar aqui já vai copiar direto. Então revise a primeira versão sem reconstruir o site, dê mais presença ao produto do hero e reduza o texto acima da dobra.

[04:41] Deixe o CTA principal mais evidente sem usar mais cores. Transforme os três benefícios em cartões fáceis de comparar. Melhore o contraste dos textos secundários. No celular reduza espaços vazios excessivos e garanta que nenhum conteúdo seja cortado. Preserve a identidade, o conteúdo original, a navegação e tudo que já estiver funcionando. Depois mostra a versão atualizada para uma última revisão. Não publique ainda. Perfeito. Então vamos lá. Aí aí eu posso fechar aqui, deixar lá e chama. E aí a gente vai esperar mais um pouquinho. Esse de cima aqui, ele levou cerca de 6 minutos e 27 segundos. Se

[05:13] você clicar aqui você vai ver o que que ele fez. Verify Verify page updated. Hã, abriu o site para revisão e something like that. Beleza. Agora a gente vai aguardar. É lógico que se você tiver maiores noções de front-end, de frameworks, o resultado ele vai sair muito melhor. Tá? Então ele vai ser muito mais assertivo. Mas aqui a gente está partindo do arroz com feijão muito bem feito, muito bem temperado com cebolas, alhos e um pouquinho de sal. Vamos aguardar. Pronto, depois de 7 minutos e 47 segundos, aqui a gente consegue ver o que que ele fez.

[05:44] Produto em destaque, menos texto no hero, CTA mais evidente, benefícios em cartões com contraste, tá? Vamos ver aqui. Ouça mais, deixa eu aqui ó, os cartões, né? Que a gente havia solicitado a ele. O mundo pode esperar um pouco. Ficou mais legal. Eu particularmente gosto, né, desse tipo de de visual. Mas dá, cara, aqui dá para fazer, como dizem, dá para fazer miséria, né? Dá para fazer um negócio bem bem mais imersivo, ondas sonoras, tem vezes tem vários frameworks de JavaScript para a gente usufruir, para a gente deixar o negócio mais

[06:14] bumper up, sabe? Mais cabuloso. Voltando aqui para o material, da revisão ao domínio, salvar não é publicar. Salvar uma versão ainda não coloca o site no ar, isso é isso é só um fato, né? Então, salvar a versão, revisar a prévia, fazer o deploy, validar o URL, adicionar o domínio, configurar o DNS. Agora a gente volta aqui no material para entender que salvar não é publicar. A gente salva a versão, revisa a prévia, faz o deploy, valida o URL, adiciona o domínio, configura o DNS. Então, a gente revisou a prévia. Dá uma olhadinha aqui, pá, bacana, show de bola. Explorar os recursos.

[06:45] Massa. Agora o que é que eu faço aqui? Bem, eu dou um Ctrl C e vou lá para o nosso queridão Google Chrome. E no Google Chrome, eu clico nesses três pontinhos, vou em more tools, developer tools. Aqui a gente consegue ver a dimensão de tela, que aqui seria a tela e aqui tela do celular para o nosso user, user, para os nossos customers. Beleza. Que mais aqui? Fazer o deploy. Vamos fazer o deploy, validar o URL. E o domínio ele pode pode utilizar da forma que ele bem entender. A gente só volta

[07:17] aqui e vou clicar nesse toggle, nesse escolher, ah, faço o deploy com a URL referente ao nome do projeto. Mas antes é interessante que você verifique as regras de segurança antes de qualquer publicação e aplique regras de cyber security. Faço o deploy com o URL referente ao nome do projeto. Que mais ali que fala? Validar o URL, adicionar o domínio. Beleza. Isso aí já vai ser suficiente. Faço o deploy com o URL referente ao nome do projeto em sites. Mas isso torna

[07:48] o domínio public, OK? Dá enter e aguarde ele fazer la mágica. Voilá! Aqui está o nosso site devidamente publicado, tá? Você pode perceber aqui que já tem um negocinho diferente aqui, ó, auraone, que é o nome do projeto, {ponto} dandegsf, que não é somente o meu GitHub, mas também o arroba, assim, por assim dizer, do da minha conta do GPT {barra} Codex, chatgpt.site. Tá,

[08:19] Danilo, mas fica feio isso daí, né? Concordo com você, concordo plenamente. É por isso que a gente compra um domínio. Se você vier aqui em sites, vão estar todos os teus projetos que você já criou, que você já desenvolveu. Esse daqui, esse link, inclusive, está público. Então, você vem aqui em settings, então você adiciona um domínio um subdomínio customizado. Esse daqui vai ser o Aura One, aí {ponto} mectracking.com.br, que é o nome da minha PJ. Aí eu adiciono

[08:49] o domínio. Ele vai carregar e que que vai acontecer? Ele vai te disponibilizar CNAME e registros TXT para você fazer o apontamento dentro da Cloudflare, que é o que eu uso e recomendo, ou dentro de qualquer outro servidor que você hospeda o seu site. Hostinger, Hostgator, enfim. Aí você copia, faz os apontamentos e já vai aparecer, por exemplo, assim, auraone.joaodascoves.com.br, o teu domínio com o subdomínio. É assim

[09:20] que a gente cria, é assim que a gente gerencia. Aí, só a título de curiosidade e desenvolvimento, eu deixei aqui para você, ó, seu site pode ir além do óbvio. São três excelentes frameworks JavaScript para você utilizar. Esses dois aqui, eles são muito conhecidos. Esse P5.js ele não é tão conhecido, mas é esses dois aqui, eles são bem difundidos. Para que que serve? Para a gente dar um tempero,

[09:52] deixar um um gostinho melhor no site. Então, [roncando] o Three.js, ele vai trazer para a gente cenas e produtos em 3D. O GSAP vai ser animação e narrativa no scroll. Sabe aqueles sites imersivos, homens assim, que tu tu entra no site e fala assim: “Caraca, que doideira, doideira total, olha só a imersividade, olha só a riqueza de detalhes deste site, sabe? Algo mais ou menos nessa, nessa pegada, aqui ó, de você

[10:25] clicar, entrar no site, ó, você vai fazendo motion, as coisas vão acontecendo, sabe? Danilo, você fez isso com framework JS? Também, mas não somente. Fiz também utilizando React Three Fiber. Então, isso é só para você entender as possibilidades. Tem outros aqui também. Esse daqui, ele tá mais basicão, tá? Esse aqui foram

[10:55] alguns testes que eu executei utilizando o GPT Images 2.5 atrelado ao aos sites, né? Então, aqui você tem, você pode ver que não ficou muito, então, à medida que você vai fazendo o scroll, tá? O iPhone vai se desmembrando aí e tudo mais. É isto daí. Então, eu deixo aqui essa recomendação para vocês: Three JS, GSAP, P5, arte e experimentação visual, transforma códigos em desenhos, animações e arte

[11:27] generativa. Use para criar composições que respondem ao movimento do mouse ou ao toque. Isso deixa seu projeto com aquela cara de “Esse cara teve um cuidado, esse cara teve uma cautela na hora de desenvolver isso aí”. Ele realmente passou, ele conseguiu colocar no papel aquilo que a gente acordou em call, que você faz uma call normalmente antes de desenvolver um site, um projeto, ele conseguiu não só trazer aquilo, mas ele conseguiu trazer melhor

[11:57] do que eu esperava. Isso foi extremamente disruptivo. Vou pagar 10.000 a mais para esse cara. Enfim, sabe onde você aprende tudo isso, né? Porque isso daqui é só o básico, só para te mostrar uma possibilidade, mas dentro da formação Agent que Builder no code startup você encontra todos os projetinhos completos, você encontra do a gente vai pegar na tua mãozinha e vai te conduzir à riqueza. Aqui tem uma plaquinha de 100.000, a gente tem a plaquinha de 10, de 100 e a de 1 milhão,

[12:28] salvo engano. Mas essa daqui foi apenas um contrato, um contrato que foi interessante para mim. Eu espero que te conduzindo pela mãozinha dentro da nossa formação no code startup Ei, gente, Builder, eu possa te auxiliar nessa jornada conseguir a plaquinha de 10, de 100 e quem sabe, por que não, a de 1 milhão. E eu quero te pedir uma coisa, se você acha que esse conteúdo foi interessante o suficiente para ter um episódio 2 ou 3, comenta aqui e compartilhe com aqueles

[13:01] que nada sabem, que acham que sabem mas que nada sabem sobre front-end, tá? Então compartilha com seu amigo que tá precisando desenvolver um projeto de forma urgente e nem sabe por onde começar. Eu te espero lá dentro da nossa formação Ei, gente, Builder, beleza? Até a próxima.