AI द्वारा बनाए गए HTML और Markdown की विज़ुअल जांच करें और ठीक करें
तैयार कोड को मुफ़्त विज़ुअल एडिटर में खोलें, उपयोगकर्ता की नज़र से परिणाम देखें और बिना प्रोग्रामिंग के संपादित करें
- 1.ChatGPT या Claude खोलें और प्रॉम्प्ट की मदद से HTML कोड जनरेट करें। परिणाम कॉपी करें।
अगर सेवा आपके क्षेत्र में उपलब्ध नहीं है, तो VPN या Ollama के ज़रिए लोकल मॉडल का उपयोग करें।
ChatGPT ↗टूल के बारे मेंप्रॉम्प्ट[occasion: जैसे - स्वागत ईमेल, न्यूज़लेटर, सेल घोषणा] के लिए एक रिस्पॉन्सिव HTML ईमेल टेम्पलेट बनाएं। इनलाइन CSS, लोगो प्लेसहोल्डर के साथ हेडर, [main message] के साथ बॉडी कंटेंट सेक्शन, और अनसब्सक्राइब लिंक के साथ फ़ूटर शामिल करें। इसे मोबाइल-फ्रेंडली बनाएं जिसकी अधिकतम चौड़ाई 600px हो।
यह प्रॉम्प्ट क्या करता हैयह प्रॉम्प्ट AI से HTML ईमेल टेम्पलेट बनाने को कहता है। [occasion] को ईमेल के प्रकार से (जैसे - welcome email) बदलें, और [main message] को अपने टेक्स्ट से बदलें। AI तैयार HTML कोड इनलाइन स्टाइल्स के साथ लौटाएगा। - 2.CodePen खोलें - यह एक मुफ़्त ऑनलाइन HTML एडिटर है जिसमें लाइव प्रीव्यू मिलता है। ऊपर बाएं कोने में 'Pen' बटन दबाएं।
देखने के लिए रजिस्ट्रेशन ज़रूरी नहीं है, लेकिन सेव करने के लिए ज़रूरी है। मुफ़्त टियर में असीमित 'pen' बनाने की सुविधा है।
CodePen ↗ - 3.जनरेट किए गए HTML कोड को HTML पैनल (बायां कॉलम) में पेस्ट करें। अगर कोड में CSS है, तो उसे CSS पैनल (मध्य कॉलम) में ले जाएं। प्रीव्यू अपने आप दाएं कॉलम में दिखेगा।
अगर HTML में पहले से इनलाइन स्टाइल्स हैं, तो पूरा कोड HTML पैनल में डालें - CSS पैनल की ज़रूरत नहीं।
CodePen ↗ - 4.परिणाम की विज़ुअल जांच करें: हेडर, टेक्स्ट और बटन कैसे दिख रहे हैं। प्रीव्यू पैनल के ऊपर रिसाइज़ बटन दबाकर मोबाइल व्यू पर स्विच करें।
टेक्स्ट की पढ़ने की क्षमता, स्पेसिंग और एलिमेंट्स के अलाइनमेंट पर ध्यान दें।
CodePen ↗ - 5.अगर बदलाव करना है, तो बाएं पैनल में कोड एडिट करें। बदलाव तुरंत प्रीव्यू में दिखेंगे। Markdown डॉक्यूमेंट्स के लिए StackEdit (stackedit.io) का उपयोग करें - टेक्स्ट बाएं पैनल में पेस्ट करें और परिणाम दाएं पैनल में देखें।
StackEdit रियल-टाइम प्रीव्यू और HTML, PDF सहित कई फॉर्मेट में एक्सपोर्ट का समर्थन करता है।
StackEdit ↗ - 6.जब परिणाम संतोषजनक हो, तो एडिटर से फाइनल कोड कॉपी करें और अपने प्रोजेक्ट में उपयोग करें। HTML के लिए CodePen में HTML पैनल के ऊपर दाएं कोने में 'Copy' बटन दबाएं।
अगर आप बाद में वापस आना चाहते हैं तो CodePen में pen सेव करें - इसके लिए मुफ़्त रजिस्ट्रेशन ज़रूरी है।
CodePen ↗
- मुफ़्तChatGPT Freeमुफ़्त टियर GPT-4o mini तक पहुंच देता है, जिसमें प्रति घंटा संदेशों की संख्या की सीमा है।
- मुफ़्तCodePen Freeमुफ़्त टियर में लाइव प्रीव्यू के साथ असीमित प्रोजेक्ट बनाए जा सकते हैं, देखने के लिए रजिस्ट्रेशन की ज़रूरत नहीं।
- मुफ़्तStackEditपूरी तरह मुफ़्त ऑनलाइन Markdown एडिटर, जिसमें रियल-टाइम प्रीव्यू और कई फॉर्मेट में एक्सपोर्ट की सुविधा है।
AI सेवाएँ तेज़ी से बदलती हैं - इंटरफ़ेस और मुफ़्त सीमाएँ बताए गए से अलग हो सकती हैं।