अपना CSS और JavaScript.

अपना CSS, हेड, फ़ुटर, JavaScript

यदि आप HTML और CSS जानते हैं, तो दाएँ कॉलम में नीचे “उन्नत” के अंतर्गत “डेवलपर मोड” चालू करें। यह स्विच इसी ब्राउज़र पर लागू होता है; इसके बाद बाईं ओर “डेवलपर” क्षेत्र दिखाई देता है। वहाँ चार स्थान हैं: “CSS”, “हेड HTML”, “फ़ुटर HTML” और “JavaScript”, प्रत्येक अधिकतम 200 kB तक।

आपका CSS जनरेट की गई स्टाइलशीट के बाद आता है, इसलिए समान विशिष्टता (specificity) होने पर वही प्रभावी होता है। ताकि आप सटीक रूप से लक्ष्य कर सकें, हर सेक्शन का एक निश्चित एंकर होता है: हेडर #kt-hero, और सेक्शन अपने क्रम में #kt-s0, #kt-s1 … — यदि आप किसी सेक्शन को खिसकाते हैं, तो उसकी संख्या भी साथ बदल जाती है। किसी एंकर पर क्लिक करने से वह कर्सर की जगह पर जुड़ जाता है। बाहरी स्क्रिप्ट केवल https:// के ज़रिए ही जोड़ी जा सकती हैं।

सामग्री और संरचना का स्रोत डॉक्यूमेंट ही रहता है, और रूप-रंग तथा अतिरिक्त चीज़ों का स्रोत कोड: Kenji आपके कोड को कभी नहीं छूता, और आपका कोड किसी सेक्शन को दोबारा नहीं लिखता।

1. 1नीचे दाईं ओर “उन्नत” खोलें और “डेवलपर मोड” चालू करें।
2. 2बाईं ओर “डेवलपर” पर क्लिक करें और कोई स्थान चुनें, जैसे “CSS”।
3. 3अपना कोड लिखें और “ड्राफ़्ट सहेजें” पर क्लिक करें — या Ctrl+S दबाएँ।

ड्राफ़्ट, पूर्वावलोकन, प्रकाशन और पिछले संस्करण पर लौटना — इनमें से किसी में कोई AI बैलेंस नहीं लगता।

सैंडबॉक्स में पूर्वावलोकन

“प्रीव्यू” आपका पूरा पेज उस कोड के साथ दिखाता है जो इस समय एडिटर में है — बिना सहेजा हुआ भी — एक अलग फ़्रेम में पूरी तरह अलग-थलग: कुकीज़, सहेजे गए डेटा और जिस पेज के भीतर वह है, उन तक कोई पहुँच नहीं। यह दोहरी सुरक्षा है, क्योंकि दोनों अवरोधों में से हर एक अपने-आप में एक सेटिंग है जिसे कोई गलती से ढीला कर सकता है।

सामान्य संपादन दृश्य में केवल आपका CSS दिखता है। HTML और JavaScript आप इसी पूर्वावलोकन में और लाइव पेज पर देखते हैं।

1. 1“डेवलपर” क्षेत्र में “प्रीव्यू” पर क्लिक करें।
2. 2“ड्राफ़्ट कोड के साथ पूर्वावलोकन” के अंतर्गत पेज जाँचें और “बंद करें” से उसे बंद करें।

कोड के लिए अलग प्रकाशन और संस्करण

कोड का अपना ड्राफ़्ट और अपना प्रकाशन होता है। “डेवलपर” क्षेत्र में “प्रकाशित करें”, एक वैकल्पिक नोट के साथ, सहेजे गए ड्राफ़्ट को एक संस्करण बना देता है — और यह लाइव पेज पर तुरंत लागू हो जाता है, ऊपर हेडर में मौजूद “प्रकाशित करें” बटन से स्वतंत्र रूप से। यदि वेबसाइट ऑफ़लाइन है, तो कोड तब तक प्रतीक्षा करता है जब तक वह फिर से ऑनलाइन न हो जाए।

“संस्करण” के अंतर्गत हर संस्करण उसकी संख्या, समय, स्रोत — हाथ से, “Kenji का सुझाव” या वापसी —, आपके नोट और पिछले संस्करण से अंतर के साथ सूचीबद्ध होता है; जो इस समय लागू है, उस पर “लाइव” लिखा होता है। “इस संस्करण पर वापस जाएँ” पुरानी सामग्री के साथ एक नया संस्करण बनाता है, और ड्राफ़्ट तथा लाइव पेज तुरंत उसी स्थिति पर आ जाते हैं।

1. 1“प्रकाशित करें” पर क्लिक करें, आवश्यकता हो तो एक नोट लिखें और “अभी प्रकाशित करें” पर क्लिक करें।
2. 2“संस्करण” खोलें और अंतर देखने के लिए किसी संस्करण पर क्लिक करें।
3. 3“इस संस्करण पर वापस जाएँ” पर और फिर “हाँ, वापस जाएँ” पर क्लिक करें।

पुरानी स्थिति अपने-आप सही स्थिति नहीं होती — वापस जाने के बाद लाइव पेज जाँच लें।

Kenji का कोड सुझाव

कोड के नीचे वाले फ़ील्ड में आप एक वाक्य में बताते हैं कि कोड को क्या करना चाहिए, और Kenji एक सुझाव लिखता है। यह आपके ड्राफ़्ट के बगल में, व्याख्या और आपके कोड से अंतर के साथ दिखाई देता है — कभी भी सीधे उसके भीतर नहीं।

“लागू करें” सुझाव को ड्राफ़्ट में लिख देता है, “खारिज करें” उसे अलग रख देता है। प्रकाशन केवल अलग बटन से ही होता है: कोड के मामले में अंतिम “हाँ” आप ही कहते हैं। कोई खुला सुझाव पेज दोबारा लोड करने पर भी बना रहता है।

1. 1कोड के नीचे वाले फ़ील्ड में लिखें कि कोड को क्या करना चाहिए, और उसे भेजें।
2. 2व्याख्या और अंतर पढ़ें।
3. 3“लागू करें” या “खारिज करें” पर क्लिक करें।

सुझाव में AI बैलेंस खर्च होता है; लागू करने और हटाने में कोई AI बैलेंस नहीं लगता। यदि कोई सुझाव उपयोग योग्य नहीं है, तो उसे हटा दिया जाता है और कुछ भी चार्ज नहीं किया जाता।