वेब विकास के बारे में कई निराशाजनक चीजों में से एक को अपनी परियोजनाओं को दूसरों के साथ साझा करने का एक आसान तरीका नहीं है। कई मामलों में, आपको अपनी परियोजना को एक वेब सर्वर पर होस्ट करना होगा या सभी संबंधित फ़ाइलों को किसी ऐसे व्यक्ति को भेजना होगा जो यह देखना चाहता है कि आपने क्या बनाया है। लेकिन CodePen नामक एक साफ ऑनलाइन टूल के लिए धन्यवाद, आपको अब और किसी के बारे में चिंता करने की ज़रूरत नहीं है।
CodePen.io
कोडपैन एक नि: शुल्क उपकरण है जो आपको अपनी परियोजनाओं को बिना किसी शुल्क के ऑनलाइन होस्ट करने देगा। आरंभ करने के लिए, CodePen.io पर जाएं और एक निःशुल्क खाता बनाएं।
एक बार जब आप ऐसा कर लेते हैं, तो आप स्क्रीन के ऊपरी दाएं कोने पर "नया पेन" बटन पर क्लिक करके "पेन" बना सकते हैं।
उसके बाद, आप किसी भी HTML, CSS और जावास्क्रिप्ट को उनके संबंधित बॉक्स में जोड़ पाएंगे। एक बार जब आप किसी कोड में जोड़ना शुरू करते हैं, तो आप जो भी बना रहे हैं उसका लाइव पूर्वावलोकन देखने को मिलेगा। आप अपने पहले पेन को शीर्ष बाएं कोने में शीर्षक दे सकते हैं। अपने पहले "सेव" पर क्लिक करने के बाद, आप बस पेज के URL को दोस्तों, परिवार और सहकर्मियों के साथ साझा करने में सक्षम होंगे ताकि वे देख सकें कि आप क्या काम कर रहे हैं।
इस तरह से आपका पेन कुछ कोड के साथ दिखेगा (श्रद्धांजलि पृष्ठ नामक एक नि: शुल्क कोड शिविर परियोजना के सौजन्य से):
अपना स्वयं का पेन बनाते समय, आरंभ करने से पहले आप सेटिंग से गुजरना चाहेंगे। जब आप "नया पेन" बटन पर क्लिक करते हैं, तो आपको कुछ कोड दर्ज करना शुरू करने के लिए एक पेन टेम्पलेट तैयार करना चाहिए। शीर्ष दाएं कोने में "सेटिंग" बटन होगा। उस पर क्लिक करें (आपको नीचे स्क्रीन देखना चाहिए)।
यहां आप कुछ जानकारी जोड़ने के लिए HTML, CSS और जावास्क्रिप्ट टैब के माध्यम से जा सकेंगे। HTML टैब में, आप मेटा जानकारी, उन चीज़ों को जोड़ने में सक्षम होंगे जिन्हें अंदर जाना चाहिए
टैब, और इसी तरह। CSS के तहत, आप LESS और Sass जैसे CSS Preprocessors जोड़ पाएंगे। इतना ही नहीं, लेकिन आप बूटस्ट्रैप और फाउंडेशन जैसे बाहरी सीएसएस में जोड़ सकते हैं। जावास्क्रिप्ट टैब के तहत, आप बेबल या कॉफीस्क्रिप्ट जैसे जावास्क्रिप्ट प्रीप्रोसेसर में जोड़ सकते हैं। इसके अतिरिक्त, आप एंगुलर, रिएक्ट, लोदाश, डी 3, और इसी तरह बाहरी जावास्क्रिप्ट फ्रेमवर्क में जोड़ सकते हैं।
अंत में, CodePen आपको उस "दृश्य" को बदलने की अनुमति देगा जो आप देख रहे हैं। डिफ़ॉल्ट दृश्य संपादक दृश्य है, जिससे आप अपने कोड में प्रवेश कर सकते हैं और नीचे कंसोल में एक छोटा पूर्वावलोकन प्राप्त कर सकते हैं। लेकिन, अन्य विकल्प भी हैं, विशेष रूप से आसान "पूर्ण पृष्ठ" दृश्य के साथ, जहां आपको एक परियोजना देखने को मिलेगी जैसे कि यह एक वेबसाइट पर लाइव था। वहाँ स्विच करने के लिए उपलब्ध अन्य दृश्य के एक मुट्ठी भर कर रहे हैं, यह चारों ओर खेलने के लायक है!
कोडपेन वास्तव में एक साफ उपकरण है, और हमने केवल इसकी उपयोगिता की सतह को छुआ है। यह CodePen.io पर जाने लायक है और इसका उपयोग कुछ परियोजनाओं पर काम करने के लिए किया जाता है, और फिर, यदि आपको ऐसा लगता है, तो अपने दोस्तों या सहकर्मियों के साथ साझा करें।
आप कोडपेन से क्या समझते हैं? क्या आपने एक समान उपकरण का उपयोग किया है? नीचे टिप्पणी अनुभाग में हमें बताएं!
