Anonim

వెబ్ అభివృద్ధి గురించి చాలా నిరాశపరిచే విషయాలలో ఒకటి మీ ప్రాజెక్ట్‌లను ఇతరులతో పంచుకోవడానికి సులభమైన మార్గం లేదు. అనేక సందర్భాల్లో, మీరు మీ ప్రాజెక్ట్‌ను వెబ్ సర్వర్‌లో హోస్ట్ చేయాలి లేదా మీరు సృష్టించిన వాటిని చూడాలనుకునే వారికి అన్ని సంబంధిత ఫైల్‌లను పంపాలి. కానీ కోడ్‌పెన్ అనే చక్కని ఆన్‌లైన్ సాధనానికి ధన్యవాదాలు, మీరు ఇకపై దాని గురించి ఆందోళన చెందాల్సిన అవసరం లేదు.

CodePen.io

కోడ్‌పెన్ అనేది ఒక ఉచిత సాధనం, ఇది మీ ప్రాజెక్టులను ఆన్‌లైన్‌లో చెల్లించకుండా ఆన్‌లైన్‌లో హోస్ట్ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది. ప్రారంభించడానికి, CodePen.io కు వెళ్ళండి మరియు ఉచిత ఖాతాను సృష్టించండి.

మీరు దాన్ని పూర్తి చేసిన తర్వాత, స్క్రీన్ కుడి ఎగువ మూలలో ఉన్న “న్యూ పెన్” బటన్‌ను క్లిక్ చేయడం ద్వారా “పెన్” ను సృష్టించవచ్చు.

ఆ తరువాత, మీరు వాటి సంబంధిత బాక్సులకు ఏదైనా HTML, CSS మరియు జావాస్క్రిప్ట్‌లను జోడించగలరు. మీరు కొన్ని కోడ్‌లో జోడించడం ప్రారంభించిన తర్వాత, మీరు సృష్టిస్తున్న వాటి యొక్క ప్రత్యక్ష పరిదృశ్యాన్ని చూడవచ్చు. మీరు మీ మొదటి పెన్ను ఎగువ ఎడమ మూలలో టైటిల్ చేయవచ్చు. మీరు మీ మొదటి “సేవ్” పై క్లిక్ చేసిన తర్వాత, మీరు పేజీ యొక్క URL ను స్నేహితులు, కుటుంబం మరియు సహోద్యోగులతో పంచుకోగలుగుతారు, తద్వారా మీరు ఏమి చేస్తున్నారో వారు చూడగలరు.

మీ పెన్ దానిలోని కొన్ని కోడ్‌తో ఈ విధంగా కనిపిస్తుంది (ట్రిబ్యూట్ పేజ్ అని పిలువబడే ఉచిత కోడ్ క్యాంప్ ప్రాజెక్ట్ సౌజన్యంతో):

మీ స్వంత పెన్ను సృష్టించేటప్పుడు, మీరు ప్రారంభించడానికి ముందు సెట్టింగ్‌ల ద్వారా వెళ్లాలనుకుంటున్నారు. మీరు “న్యూ పెన్” బటన్‌పై క్లిక్ చేసినప్పుడు, మీరు కొన్ని కోడ్‌ను నమోదు చేయడం ప్రారంభించడానికి పెన్ టెంప్లేట్ సిద్ధంగా ఉండాలి. ఎగువ కుడి మూలలో “సెట్టింగులు” బటన్ ఉంటుంది. దానిపై క్లిక్ చేయండి (మీరు క్రింది స్క్రీన్ చూడాలి).

ఇక్కడ మీరు నిర్దిష్ట సమాచారాన్ని జోడించడానికి HTML, CSS మరియు జావాస్క్రిప్ట్ ట్యాబ్‌ల ద్వారా వెళ్ళగలుగుతారు. HTML టాబ్‌లో, మీరు మెటా సమాచారాన్ని జోడించగలరు టాబ్ మరియు మొదలైనవి. CSS కింద, మీరు తక్కువ మరియు సాస్ వంటి CSS ప్రిప్రాసెసర్‌లను జోడించగలరు. అంతే కాదు, మీరు బూట్స్ట్రాప్ మరియు ఫౌండేషన్ వంటి బాహ్య CSS లో జోడించవచ్చు. జావాస్క్రిప్ట్ టాబ్ కింద, మీరు బాబెల్ లేదా కాఫీస్క్రిప్ట్ వంటి జావాస్క్రిప్ట్ ప్రిప్రాసెసర్‌లో జోడించవచ్చు. అదనంగా, మీరు కోణీయ, రియాక్ట్, లోడాష్, డి 3 వంటి బాహ్య జావాస్క్రిప్ట్ ఫ్రేమ్‌వర్క్‌లలో జోడించవచ్చు.

చివరగా, మీరు చూస్తున్న “వీక్షణ” ని మార్చడానికి కోడ్‌పెన్ మిమ్మల్ని అనుమతిస్తుంది. డిఫాల్ట్ వీక్షణ ఎడిటర్ వ్యూ, ఇది మీ కోడ్‌లోకి ప్రవేశించడానికి మరియు దిగువ కన్సోల్‌లో చిన్న ప్రివ్యూను పొందడానికి మిమ్మల్ని అనుమతిస్తుంది. కానీ, ఇతర ఎంపికలు కూడా ఉన్నాయి, ప్రత్యేకించి “పూర్తి పేజీ” వీక్షణతో, వెబ్‌సైట్‌లో ప్రత్యక్షంగా ఉన్నట్లుగా మీరు ప్రాజెక్ట్‌ను చూడవచ్చు. మారడానికి కొన్ని ఇతర వీక్షణలు అందుబాటులో ఉన్నాయి, దీనితో ఆడటం విలువ!

కోడ్‌పెన్ నిజంగా చక్కని సాధనం, మరియు మేము దాని ఉపయోగం యొక్క ఉపరితలాన్ని మాత్రమే తాకింది. ఇది కోడ్‌పెన్.యోకి వెళ్లడం మరియు కొన్ని ప్రాజెక్ట్‌లలో పని చేయడానికి ఉపయోగించడం విలువైనది, ఆపై, మీకు అనిపిస్తే, మీ స్నేహితులు లేదా సహోద్యోగులతో భాగస్వామ్యం చేయండి.

కోడ్‌పెన్ గురించి మీరు ఏమనుకుంటున్నారు? మీరు ఇలాంటి సాధనాన్ని ఉపయోగించారా? దిగువ వ్యాఖ్యల విభాగంలో మాకు తెలియజేయండి!

కోడ్‌పెన్‌తో మీ కోడ్ యొక్క ప్రత్యక్ష ప్రివ్యూను ఎలా చూడాలి