इस लेख की प्रमुख छवि हैकरनून के  द्वारा प्रांप्ट "वेबसाइट" के माध्यम से तैयार की गई थी एआई इमेज जेनरेटर    पिछले सप्ताहों में सबसे लोकप्रिय   विषय है - हर कोई इसके साथ अपनी बातचीत साझा करता है या कई समस्याओं के बारे में उत्तर देता है। साथ ही लोग कोड लिखने की क्षमता के बारे में अपनी अंतर्दृष्टि साझा करते हैं - लेकिन हम इसके बारे में बात नहीं करने जा रहे हैं। इस ट्यूटोरियल में, हम ChatGPT का उपयोग करके एक वेबसाइट बनाएंगे। ChatGPT AI  और यदि आप चैटजीपीटी और अन्य महत्वपूर्ण तकनीकों पर आधारित एक ऐप बनाना चाहते हैं, तो आपको हमारे   में नामांकन करने पर विचार करना चाहिए। एआई हैकथॉन  तो... अधिक समय बर्बाद न करें और प्रवेश करें!  GPTChat के साथ एक वेबसाइट बनाएं  सबसे पहले, मैंने अपना संकेत डाला:    बूटस्ट्रैप उत्तरदायी डिजाइन और उत्तरदायी मेनू और मोबाइल पर भी काम करने वाले उत्तरदायी हैमबर्गर मेनू के साथ एक HTML कंकाल बनाएं। और क्लोजिंग बॉडी टैग से पहले सभी आवश्यक स्क्रिप्ट आयात करें, जैसे कि jquery, popper और bootstrap।  ऐसा लगता है कि हमें ChatGPT से एक सही प्रतिक्रिया मिली है, लेकिन यह सुनिश्चित करने के लिए कि इसे सुनिश्चित करने के लिए इसे केवल   में जांचें और इसके साथ काम करना जारी रखें।  उत्तर  हम देख सकते हैं कि यह काम कर रहा है लेकिन मोबाइल मेनू नहीं है। और ऐसा लगता है कि ChatGPT ने कंकाल को थोड़ा सा काट दिया और हमारे पास एक स्क्रिप्ट के लिए क्लोजिंग टैग नहीं है और अगर हम   देख रहे हैं तो हम उस बूटस्ट्रैप को देख सकते हैं स्क्रिप्ट गायब है। https://getbootstrap.com/docs/4.1/getting-started/introduction/  तो चलिए इसे ठीक करते हैं। ओह, और मैं बूटस्ट्रैप परिचय के आधार पर आयात को नवीनतम में भी बदल दूंगा।   <!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>  हुर्रे, यह काम कर रहा है! आइए सामग्री पर काम करें। मुझे एक पोर्टफोलियो साइट चाहिए।  शीर्षक क्या होना चाहिए?  सबसे पहले, शीर्षक क्या होना चाहिए? मैंने चैटजीपीटी से पूछा, क्योंकि यह काम कर रहा है 🙂    मेरे पोर्टफोलियो वेबसाइट का शीर्षक क्या होना चाहिए?  ठीक है, मैं जेन डो - शुरुआती एआई उपयोगकर्ता के साथ जाऊंगा  वेबसाइट के लिए परिचय     मेरी पोर्टफोलियो वेबसाइट के लिए एक परिचय लिखें। मैं एक नौसिखिया एआई उपयोगकर्ता और एक प्रोग्रामर हूं।  उस पृष्ठ पर एक छवि तत्व बनाएँ   मुझे बूटस्ट्रैप पृष्ठ के लिए पहाड़ के साथ एक छवि तत्व दिखाएँ।  मैं लोरेम्पिक्सम से एक पहाड़ी छवि का उपयोग करूंगा   <img src="https://picsum.photos/id/29/600/600" class="img-fluid rounded" alt="Mountain">  सरलता के लिए यह एक पृष्ठ होगा। आइए घर के हिस्से के लिए आईडी जोड़ें और अनुभागों के अनुरूप एंकर टैग में href जोड़ें।   <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>  के बारे में अनुभाग बनाना     किसी वेबसाइट के बारे में पेज के लिए मेरे बारे में टेक्स्ट बनाएं। मुझे रॉक क्लाइम्बिंग और सभी बाहरी खेल पसंद हैं और मुझे प्रोग्राम करना पसंद है। मैंने ऑटोमोटिव उद्योग में एक गुणवत्ता इंजीनियर के रूप में अपना करियर शुरू किया लेकिन प्रोग्रामिंग के बारे में हमेशा उत्सुक था। मैंने ऑटोमेशन और माइक्रोकंट्रोलर प्रोग्रामिंग के साथ शुरुआत की। मैं 7 साल पहले पोलैंड चला गया। मैंने 4 साल पहले एचटीएमएल और जावास्क्रिप्ट के साथ वेब विकास शुरू किया था। मैं अब फुल स्टैक डेवलपर के रूप में काम कर रहा हूं।  आइए इसे अपने अबाउट सेक्शन में पेस्ट करें   हमें इस सेक्शन को डिवाइस जितना ऊंचा बनाने की जरूरत है। इसलिए मैंने चैटजीपीटी से मुझे इसे करने का सही तरीका दिखाने के लिए कहा।    बूटस्ट्रैप में डिवाइस के रूप में तत्व को उच्च कैसे बनाया जाए?  मैं निर्देशों का पालन करूंगा और स्टाइल को हेड टैग में पेस्ट करूंगा और क्लास को उस div एलिमेंट में जोड़ूंगा जिसमें सेक्शन है।   एक प्रपत्र के रूप में संपर्क अनुभाग बनाना। (हम इसे इस ट्यूटोरियल में काम नहीं करेंगे)     निम्नलिखित इनपुट फ़ील्ड के साथ बूटस्ट्रैप के साथ एक संपर्क फ़ॉर्म बनाएँ। नाम, ईमेल, संदेश।   <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>  तो चलिए इसे कॉपी करते हैं और संपर्क फ़ॉर्म के लिए अनुभाग बनाते हैं और अंत में, वेबसाइट के लिए कुछ अच्छी पृष्ठभूमि बनाते    हैं एक HTML वेबसाइट पृष्ठभूमि के लिए एक अच्छा सीएसएस ग्रेडिएंट क्या है जो बहुत उज्ज्वल नहीं है?  मैंने पेस्टर विकल्प का इस्तेमाल किया और हेड टैग में स्टाइल टैग में चिपकाया।   body { background: linear-gradient(135deg, #f5f7fa, #c3cfe2); }  ठीक है, परिणाम देखें  [यहाँ]   https://replit.com/@Flafi87/LegitimatePrevailingScript?embedable=true  और यह तैयार है! मैं चकित हूं! सही नहीं है, लेकिन काम कर रहा है :)  हम चैटजीपीटी के साथ आपकी पूरी पोर्टफोलियो वेबसाइट बनाने का सुझाव नहीं दे रहे हैं, लेकिन निश्चित रूप से यह कुछ अच्छी टिप्स दे सकता है और आपके काम में सुधार कर सकता है। या कम से कम इसे आसान और कम समय लेने वाला बनाएं।  यदि आप अधिक एआई आधारित टूल सीखना चाहते हैं, तो हमारे   पर जाएं। और यदि आप अपने एआई कौशल को एक स्पिन देना चाहते हैं, तो हमारे   शामिल हों और 3 या 7 दिनों के समय में ऐप का एक कामकाजी मॉडल बनाएं जो आपके स्टार्ट अप की शुरुआत हो सकती है! जेनेरेटिव एआई ट्यूटोरियल पेज एआई हैकथॉन में  इस लेख की प्रमुख छवि हैकरनून के एआई इमेज जेनरेटर द्वारा प्रांप्ट "वेबसाइट" के माध्यम से तैयार की गई थी

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

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

जब आप वेबसाइट बनाने के लिए चैटजीपीटी का उपयोग करते हैं तो क्या होता है?

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

टेलीग्राम: क्रिप्टो द्वीप का मुख्य भूमि से पुल

इन 18 डेवलपर टूल के साथ अपनी उत्पादकता बढ़ाएँ 🚀🔥

HackerNoon लेखन प्रतियोगिता जीतना चाहते हैं? #crypto-api प्रतियोगिता के विजेताओं की सलाह यहाँ पढ़ें

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

टेलीग्राम: क्रिप्टो द्वीप का मुख्य भूमि से पुल

इन 18 डेवलपर टूल के साथ अपनी उत्पादकता बढ़ाएँ 🚀🔥

HackerNoon लेखन प्रतियोगिता जीतना चाहते हैं? #crypto-api प्रतियोगिता के विजेताओं की सलाह यहाँ पढ़ें

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps