L'image principale de cet article a été générée par  de HackerNoon via l'invite "site Web" le générateur d'images AI    est le sujet le plus brûlant   au cours des dernières semaines - tout le monde partage ses conversations avec lui ou répond à de nombreux problèmes. Les gens partagent également leurs idées concernant sa capacité à écrire du code - mais nous n'allons pas en parler. Dans ce didacticiel, nous allons créer un site Web à l'aide de ChatGPT. ChatGPT de l'IA  Et si vous souhaitez créer une application basée sur ChatGPT et d'autres technologies révolutionnaires, vous devriez envisager de vous inscrire à nos   . AI Hackathons  Alors… ne perdez plus de temps et lancez-vous !  Créer un site Web avec GPTChat  Tout d'abord, j'ai inséré mon invite:    Créez un squelette html avec une conception réactive bootstrap, un menu réactif et un menu hamburger réactif qui fonctionne également sur mobile. Et importez tous les scripts nécessaires avant la balise de fermeture du corps, tels que jquery, popper et bootstrap.  Il semble que nous ayons reçu une réponse correcte de ChatGPT, mais pour en être sûr, vérifions-la simplement en   pour être sûr et continuer à travailler avec elle là-bas.  réplique  Nous pouvons voir que cela fonctionne, mais pas le menu mobile. Et il semble que ChatGPT ait un peu coupé le squelette et nous n'avons pas de balise de fermeture pour un script et si nous vérifions   nous pouvons voir ce bootstrap le script est manquant. https://getbootstrap.com/docs/4.1/getting-started/introduction/  Alors réparons ça. Oh, et je vais également changer les importations pour les plus récentes en fonction de l'introduction du 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>  Hourra, ça marche ! Travaillons sur le contenu. J'aimerais avoir un site portfolio.  Quel devrait être le titre ?  Tout d'abord, quel devrait être le titre ? J'ai demandé à ChatGPT, car il fait le travail 🙂    Quel devrait être le titre de mon site Web de portefeuille ?  Ok, j'irai avec Jane Doe - Utilisateur débutant en IA  Présentation pour le site web     Rédiger une introduction pour mon site Web de portfolio. Je suis un utilisateur débutant d'IA et un programmeur.  Créer un élément d'image sur cette page   Montrez-moi un élément d'image avec une montagne pour la page bootstrap.  Je vais utiliser une image de montagne de lorempicsum   <img src="https://picsum.photos/id/29/600/600" class="img-fluid rounded" alt="Mountain">  Ce sera une seule page par souci de simplicité. Ajoutons id pour la partie home et ajoutons href aux balises d'ancrage correspondant aux sections.   <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>  Création de la section À propos     Créer un texte sur moi pour une page à propos sur un site Web. J'aime l'escalade et tous les sports de plein air et j'aime programmer. J'ai commencé ma carrière en tant qu'ingénieur Qualité dans l'industrie automobile mais j'ai toujours été curieux de la programmation. J'ai commencé par l'automatisation et la programmation de microcontrôleurs. J'ai déménagé en Pologne il y a 7 ans. J'ai commencé le développement web par moi-même il y a 4 ans avec HTML et JavaScript. Je travaille actuellement en tant que Développeur Full Stack.  Collons ceci dans notre section à propos   Nous devons rendre cette section aussi haute que l'appareil. Par conséquent, j'ai demandé à ChatGPT de me montrer la bonne façon de le faire.    Comment rendre un élément aussi haut que le périphérique en bootstrap ?  Je vais suivre les instructions et coller le style dans la balise Head et ajouter la classe à l'élément div qui contient la section.   Création de la section contact sous forme de formulaire. (Nous ne ferons pas cela fonctionner dans ce tutoriel)     Créez un formulaire de contact avec Bootstrap avec les champs de saisie suivants. Nom, email, message.   <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>  Alors copions ceci et créons la section pour le formulaire de contact Et enfin, créons un joli fond pour le site Web    Qu'est-ce qu'un joli dégradé css pour un fond de site Web html qui n'est pas trop brillant ?  J'ai utilisé l'option Paster et collé la balise style dans la balise head.   body { background: linear-gradient(135deg, #f5f7fa, #c3cfe2); }  Ok, voir les résultats  [ICI]   https://replit.com/@Flafi87/LegitimatePrevailingScript?embedable=true  Et c'est prêt ! Je suis ébahi! Pas parfait, mais fonctionnel :)  Nous ne suggérons pas de créer l'ensemble de votre site Web de portefeuille avec ChatGPT, mais il peut certainement donner de bons conseils et améliorer votre travail. Ou au moins le rendre plus facile et moins long.  Si vous souhaitez en savoir plus sur les outils basés sur l'IA, visitez notre   . Et si vous voulez donner un tour à vos compétences en IA, rejoignez nos   et créez en 3 ou 7 jours un modèle fonctionnel d'une application qui peut être le début de votre démarrage ! page de didacticiel sur l'IA générative Hackathons IA  L'image principale de cet article a été générée par le générateur d'images AI de HackerNoon via l'invite "site Web"

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

Cet audio est produit dans la langue originale de l'histoire !

Que se passe-t-il lorsque vous utilisez ChatGPT pour créer un site Web ?

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Libérer la puissance de l’IA. Une revue systématique des techniques de pointe : résumé et introduction

Télégramme : le pont de Crypto Island vers le continent

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Libérer la puissance de l’IA. Une revue systématique des techniques de pointe : résumé et introduction

Télégramme : le pont de Crypto Island vers le continent

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps