Google AI Studio के साथ एक पूर्ण वेबसाइट बनाएँ — कोडिंग की ज़रूरत नहीं!
Google AI Studio से एक पूरी वेबसाइट बनाएँ — पहले आइडिया और डिज़ाइन से लेकर ऑनलाइन प्रकाशित एक काम करती साइट तक।
रोडमैप और संसाधन
वेबसाइट बनाएँ (Google AI Studio)
प्रारंभिक अवधारणा उत्पन्न करें
Google AI Studio खोलें, मुख्य प्रॉम्प्ट लिखें और अपनी "AI Life Planner" वेबसाइट का पहला संस्करण उत्पन्न करें।
उपयोग किया गया प्रॉम्प्ट – वेबसाइट निर्माण
"AI Life Planner" नामक एक आधुनिक, साफ़ और दृष्टिगत रूप से प्रभावशाली वेबसाइट बनाएँ…
Create a modern, clean, and visually impressive website called "AI Life Planner". The website should help users organize their goals, daily routines, habits, and personal growth. You have full creative freedom to choose the layout, colors, and visual style. Include: • Hero section • User input form • Personalized plan section Make the website fully responsive. Return everything in a single HTML file with embedded CSS and JavaScript.
UI में सुधार करें और अनुकूलित करें
डिज़ाइन और लेआउट को परिष्कृत करें
डिज़ाइन अपग्रेड लागू करें, हीरो सेक्शन को संशोधित करें और प्रीमियम लुक के लिए एक glassmorphism हेडर जोड़ें।
उपयोग किया गया प्रॉम्प्ट – Dark Theme और Weekly Planner
पूरी वेबसाइट को एक आधुनिक dark theme में बदलें…
Change the entire website to a modern dark theme with premium gradients. Add a "Weekly Planner" section below the Personalized Plan section. Ensure everything remains responsive and visually consistent.
उपयोग किया गया प्रॉम्प्ट – Glassmorphism Header
एक आधुनिक glassmorphism (liquid glass) हेडर जोड़ें…
Add a modern glassmorphism (liquid glass) header at the top of the website. Include: • "AI Life Planner" text logo on the left • Blurred glass background with soft shadows • Menu items on the right: Home, Features, Plans, Contact • Smooth hover animations • Sticky behavior on scroll Ensure full responsiveness.
उपयोग किया गया प्रॉम्प्ट – Hero Section रीडिज़ाइन
एक बड़ी बोल्ड हेडलाइन के साथ हीरो सेक्शन को फिर से डिज़ाइन करें…
Redesign the hero section with a large bold headline, subtle gradient shapes, and a modern premium call-to-action button. Keep the design clean and consistent with the site.
इंटरैक्टिव सुविधाएँ जोड़ें
कार्यक्षमता बढ़ाएँ
ऐप्लिकेशन को अधिक उपयोगी बनाने के लिए To-Do list जैसे अतिरिक्त घटक जोड़ें।
उपयोग किया गया प्रॉम्प्ट – To-Do List सुविधा
एक सरल To-Do List सेक्शन जोड़ें…
Add a simple To-Do List section below the hero section with checkboxes to mark tasks as completed. Keep the design minimal and clean.
वेबसाइट को ऑनलाइन प्रकाशित करें
Hostinger पर डिप्लॉयमेंट
वेबसाइट फ़ाइलें डाउनलोड करें, उन्हें Hostinger पर अपलोड करें और अपनी साइट को लाइव लॉन्च करें।
🎥 Google AI Studio वेबसाइट और वेब ऐप्स डिप्लॉय करें
Google AI Studio वेबसाइट और वेब ऐप्स डिप्लॉय करें
https://youtu.be/HGs-4QjyjHQ?si=Cs4oHKURdxp6J70E
मज़बूत त्रुटि हैंडलिंग लागू करें
सुनिश्चित करें कि आपका ऐप्लिकेशन डिप्लॉयमेंट त्रुटियों को सुचारू रूप से संभाल सकता है और उपयोगकर्ताओं को स्पष्ट प्रतिक्रिया प्रदान कर सकता है।
उपयोग किया गया प्रॉम्प्ट – त्रुटि हैंडलिंग और प्रतिक्रिया
सामान्य डिप्लॉयमेंट समस्याओं के लिए मज़बूत त्रुटि हैंडलिंग जोड़ें…
Implement a comprehensive error handling system for the website. If a user encounters an error (e.g., network failure, form submission error), display a friendly, clearly visible error message instead of a generic browser alert. Provide suggestions for fixing the issue (e.g., "Check your internet connection"). Also, ensure that successful actions display a confirmation message.
वैकल्पिक संसाधन
Prompt Writing मास्टरक्लास
AI से सर्वोत्तम परिणाम प्राप्त करने के लिए सरल लेकिन प्रभावी प्रॉम्प्ट लिखना सीखें।
🎥 Prompt Writing ट्यूटोरियल
Prompt Writing ट्यूटोरियल
https://youtu.be/UlkdOrr3RKM?si=rKQvhMqWmO1HakUp