Anonim

வலை அபிவிருத்தி பற்றிய பல வெறுப்பூட்டும் விஷயங்களில் ஒன்று, உங்கள் திட்டங்களை மற்றவர்களுடன் பகிர்ந்து கொள்ள எளிதான வழி இல்லை. பல சந்தர்ப்பங்களில், உங்கள் திட்டத்தை ஒரு வலை சேவையகத்தில் ஹோஸ்ட் செய்ய வேண்டும் அல்லது நீங்கள் உருவாக்கியதைப் பார்க்க விரும்பும் ஒருவருக்கு தொடர்புடைய எல்லா கோப்புகளையும் அனுப்ப வேண்டும். ஆனால் கோடெபென் எனப்படும் சுத்தமாக ஆன்லைன் கருவிக்கு நன்றி, நீங்கள் இனி அதைப் பற்றி கவலைப்பட வேண்டியதில்லை.

CodePen.io

கோட்பென் என்பது ஒரு இலவச கருவியாகும், இது உங்கள் திட்டங்களை ஆன்லைனில் ஒரு காசு கூட செலுத்தாமல் ஆன்லைனில் ஹோஸ்ட் செய்ய அனுமதிக்கும். தொடங்க, CodePen.io க்குச் சென்று இலவச கணக்கை உருவாக்கவும்.

நீங்கள் அதைச் செய்தவுடன், திரையின் மேல் வலது மூலையில் உள்ள “புதிய பேனா” பொத்தானைக் கிளிக் செய்வதன் மூலம் “பேனாவை” உருவாக்கலாம்.

அதன்பிறகு, நீங்கள் எந்த HTML, CSS மற்றும் ஜாவாஸ்கிரிப்டையும் அவற்றின் தொடர்புடைய பெட்டிகளில் சேர்க்க முடியும். நீங்கள் சில குறியீட்டில் சேர்க்கத் தொடங்கியதும், நீங்கள் உருவாக்குவதற்கான நேரடி முன்னோட்டத்தைப் பார்ப்பீர்கள். உங்கள் முதல் பேனாவை மேல் இடது மூலையில் தலைப்பு செய்யலாம். உங்கள் முதல் “சேமி” என்பதைக் கிளிக் செய்த பிறகு, நீங்கள் பக்கத்தின் URL ஐ நண்பர்கள், குடும்பத்தினர் மற்றும் சக ஊழியர்களுடன் பகிர்ந்து கொள்ள முடியும், இதன் மூலம் நீங்கள் என்ன செய்கிறீர்கள் என்பதை அவர்கள் காண முடியும்.

உங்கள் பேனா அதில் உள்ள சில குறியீடுகளுடன் இப்படித்தான் இருக்கும் (அஞ்சலி பக்கம் எனப்படும் இலவச குறியீடு முகாம் திட்டத்தின் மரியாதை):

உங்கள் சொந்த பேனாவை உருவாக்கும்போது, ​​தொடங்குவதற்கு முன் அமைப்புகள் வழியாக செல்ல விரும்புவீர்கள். “புதிய பேனா” பொத்தானைக் கிளிக் செய்யும்போது, ​​சில குறியீட்டை உள்ளிடுவதற்குத் தொடங்க ஒரு பென் வார்ப்புருவைப் பார்க்க வேண்டும். மேல் வலது மூலையில் “அமைப்புகள்” பொத்தான் இருக்கும். அதைக் கிளிக் செய்க (நீங்கள் கீழே உள்ள திரையைப் பார்க்க வேண்டும்).

இங்கே நீங்கள் குறிப்பிட்ட தகவல்களைச் சேர்க்க HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் தாவல்கள் வழியாக செல்ல முடியும். HTML தாவலில், நீங்கள் மெட்டா தகவல்களைச் சேர்க்க முடியும், அதில் செல்ல வேண்டிய விஷயங்கள் தாவல் மற்றும் பல. CSS இன் கீழ், நீங்கள் குறைந்த மற்றும் சாஸ் போன்ற CSS ப்ராப்ரோசஸர்களைச் சேர்க்க முடியும். அது மட்டுமல்லாமல், பூட்ஸ்டார்ப் மற்றும் அறக்கட்டளை போன்ற வெளிப்புற CSS இல் நீங்கள் சேர்க்கலாம். ஜாவாஸ்கிரிப்ட் தாவலின் கீழ், நீங்கள் பாபல் அல்லது காபிஸ்கிரிப்ட் போன்ற ஜாவாஸ்கிரிப்ட் ப்ரொபொசசரில் சேர்க்கலாம். கூடுதலாக, நீங்கள் கோணல், எதிர்வினை, லோடாஷ், டி 3 மற்றும் வெளிப்புற ஜாவாஸ்கிரிப்ட் கட்டமைப்பில் சேர்க்கலாம்.

இறுதியாக, நீங்கள் பார்க்கும் “பார்வை” ஐ மாற்ற கோட்பென் உங்களை அனுமதிக்கும். இயல்புநிலை பார்வை எடிட்டர் வியூ ஆகும், இது உங்கள் குறியீட்டை உள்ளிடவும், கீழேயுள்ள கன்சோலில் ஒரு சிறிய மாதிரிக்காட்சியைப் பெறவும் உங்களை அனுமதிக்கிறது. ஆனால், பிற விருப்பங்களும் உள்ளன, குறிப்பாக எளிமையான ஒன்று “முழு பக்கம்” பார்வை, அங்கு ஒரு திட்டத்தை ஒரு இணையதளத்தில் நேரடியாகப் பார்ப்பது போல் நீங்கள் காணலாம். மாறுவதற்கு ஒரு சில பிற காட்சிகள் உள்ளன, இது விளையாடுவது மதிப்பு!

கோட்பென் உண்மையில் ஒரு சுத்தமான கருவி, அதன் பயனின் மேற்பரப்பை மட்டுமே நாங்கள் தொட்டுள்ளோம். இது CodePen.io க்குச் சென்று ஒரு சில திட்டங்களில் பணிபுரிய அதைப் பயன்படுத்துவது மதிப்பு, பின்னர், நீங்கள் விரும்பினால், உங்கள் நண்பர்கள் அல்லது சக ஊழியர்களுடன் பகிர்ந்து கொள்ளுங்கள்.

கோட் பென் பற்றி நீங்கள் என்ன நினைக்கிறீர்கள்? நீங்கள் இதே போன்ற கருவியைப் பயன்படுத்தியிருக்கிறீர்களா? கீழே உள்ள கருத்துகள் பிரிவில் எங்களுக்குத் தெரியப்படுத்துங்கள்!

குறியீட்டுடன் உங்கள் குறியீட்டின் நேரடி முன்னோட்டத்தைப் பார்ப்பது எப்படி