A imagem principal deste artigo foi gerada pelo  do HackerNoon por meio do prompt "website" AI Image Generator    é o tópico   mais quente nas últimas semanas - todos compartilham suas conversas com ele ou respondem a muitos problemas. As pessoas também compartilham suas ideias sobre a capacidade de escrever código - mas não vamos falar sobre isso. Neste tutorial, criaremos um site usando o ChatGPT. O ChatGPT de IA  E se você deseja criar um aplicativo baseado no ChatGPT e outras tecnologias inovadoras, considere se inscrever em nossos   . AI Hackathons  Então… não perca mais tempo e mergulhe!  Faça um site com GPTChat  Primeiro, inseri meu prompt:    Crie um esqueleto html com design responsivo bootstrap e menu responsivo e menu hambúrguer responsivo que também funciona em dispositivos móveis. E importe todos os scripts necessários antes da tag body de fechamento, como jquery, popper e bootstrap.  Parece que recebemos uma resposta correta do ChatGPT, mas para ter certeza, vamos apenas verificar em   para ter certeza e continuar trabalhando com ela lá.  replit  Podemos ver que está funcionando, mas o menu móvel não. E parece que o ChatGPT cortou um pouco o esqueleto e não temos uma tag de fechamento para um script e, se verificarmos   , podemos ver esse bootstrap falta o roteiro. https://getbootstrap.com/docs/4.1/getting-started/introduction/  Então vamos consertar. Ah, e também mudarei as importações para as mais recentes com base na introdução do bootstrap.   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Website</title>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" /> </head> <body>  <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">My Website</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav>  <div class="container mt-5"> <h1>Welcome to My Website!</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. </p> </div>  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html>  Viva, está funcionando! Vamos trabalhar o conteúdo. Eu gostaria de ter um site de portfólio.  Qual deve ser o título?  Em primeiro lugar, qual deve ser o título? Perguntei ao ChatGPT, pois está fazendo o trabalho 🙂    Qual deve ser o título do site do meu portfólio?  Ok, eu irei com Jane Doe - Usuário iniciante de IA  Introdução para o site     Escreva uma introdução para o site do meu portfólio. Sou um usuário iniciante de IA e um programador.  Crie um elemento de imagem nessa página   Mostre-me um elemento de imagem com uma montanha para a página bootstrap.  Vou usar uma imagem de montanha de lorempicsum   <img src="https://picsum.photos/id/29/600/600" class="img-fluid rounded" alt="Mountain">  Esta será uma única página por uma questão de simplicidade. Vamos adicionar id para a parte inicial e vamos adicionar href às tags de âncora correspondentes às seções.   <li class="nav-item active"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li>  Fazendo a seção sobre     Crie um texto sobre mim para uma página sobre em um site. Gosto de escalada e de todos os esportes ao ar livre e gosto de programar. Comecei minha carreira como engenheiro de qualidade na indústria automotiva, mas sempre tive curiosidade sobre programação. Comecei com automação e programação de microcontroladores. Mudei-me para a Polónia há 7 anos. Comecei o desenvolvimento web sozinho há 4 anos com HTML e JavaScript. Estou trabalhando agora como Desenvolvedor Full Stack.  Vamos colar isso em nossa seção sobre   Precisamos fazer esta seção tão alta quanto o dispositivo. Por isso pedi ao ChatGPT que me mostrasse a forma correta de o fazer.    Como fazer um elemento alto como o dispositivo no bootstrap?  Vou seguir as instruções e colar o estilo na tag Head e adicionar a classe ao elemento div que contém a seção.   Criando a seção de contato como um formulário. (Não faremos isso funcionar neste tutorial)     Crie um formulário de contato com o Bootstrap com os seguintes campos de entrada. Nome, e-mail, mensagem.   <form> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" placeholder="Enter your name"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="email" placeholder="Enter your email"> </div> <div class="form-group"> <label for="message">Message</label> <textarea class="form-control" id="message" rows="3" placeholder="Enter your message"></textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>  Então, vamos copiar isso e criar a seção para o formulário de contato E, finalmente, vamos criar um plano de fundo legal para o site    O que é um bom gradiente CSS para um plano de fundo de site html que não seja muito brilhante?  Usei a opção colar e colei a tag style na tag head.   body { background: linear-gradient(135deg, #f5f7fa, #c3cfe2); }  Ok, veja os resultados  [AQUI]   https://replit.com/@Flafi87/LegitimatePrevailingScript?embedable=true  E está pronto! Estou impressionado! Não perfeito, mas funcionando :)  Não estamos sugerindo criar todo o seu site de portfólio com o ChatGPT, mas com certeza ele pode dar boas dicas e melhorar o seu trabalho. Ou pelo menos torná-lo mais fácil e menos demorado.  Se você quiser aprender mais ferramentas baseadas em IA, visite nossa   . E se você quiser dar um giro em suas habilidades de IA, participe de nossos   e crie em 3 ou 7 dias um modelo funcional de um aplicativo que pode ser o início de sua inicialização! página de tutorial de IA generativa Hackathons de IA  A imagem principal deste artigo foi gerada pelo AI Image Generator do HackerNoon por meio do prompt "website"

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This writer has a vested interested be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

Build with AI!

Win $$$ on AI Hackathon 

Hire Me

Este áudio é produzido no idioma original da história!

O que acontece quando você usa o ChatGPT para criar um site?

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Uma breve introdução à teoria do cérebro de Boltzmann

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Criando produtos criptográficos centrados no usuário: a importância do feedback do cliente

Uma breve introdução à teoria do cérebro de Boltzmann

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Criando produtos criptográficos centrados no usuário: a importância do feedback do cliente

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps