HTML Tutorial: Installing VS Code & Live Server in Hindi | Web Development Part- 2

हमने पीछे के भाग में देखा की HTML , क्या होती है और HTML के बेसिक क्या होते है और html वेब डेवलपमेंट के लिए क्यों जरुरी है आप हम बात करेंगे की html और बाकि सभी कंप्यूटर languange लिखे कहा जहा हमारा कोड आसानी से लिख सकते है और कभी भी acess कर सकते है

वैसे हमने पिछले आर्टिकल में vs code के बारे में बात की थी आज हम उसी vs code को datils से जानेगे की vs code क्या है और आप इसमें code कैसे लिख सकते है तो बिना कोई टाइम गवाए हम सीधा जानते है की vs code क्या है और यह आपकी program लिखने में किस तरीके से हेल्प करता है

visual code studio क्या है ?

Visual code studio यानि vs code एक IDE है जो की कंप्यूटर के programs लिखने के लिए use की जाती है यह microsoft के द्वारा बनायीं गयी है

सीधे simple भाषा में जाने तो vs code एक ऐसा सॉफ्टवेर या application है जो हमे managing तरीके से कंप्यूटर language या program लिखने और उन्हें आसानी से मैनेज करने में हेल्प करता है यह Free और open source है यानि ऐसे कोई भी उसे कर सकता है यहाँ तक की अगर आपने कभी code लिखा है तो भी आप vs code में code लिख सकते हो

यही कारण है मैं सभी को recommend करता हु की vs code use करने के लिए

visual code studio डाउनलोड कैसे करे और इसमें कोड कैसे लिखे ?

vs code आप Visual studio की official वेबसाइट https://code.visualstudio.com/download से डाउनलोड कर सकते है यहाँ निचे आपकी हेल्प के लिए लिंक भी दे दूंगा आप वह से भी डाउनलोड कर सकते हो

install VS code & live server

open करने के बाद आपके पास कुछ इस तरह का interface आपको vs code का आपको दिखाई देगा अगर आप फुल टूर करने के लिए आप निचे दिए विडियो को देख सकते हो

डाउनलोड करने के बाद आपने pc में इसे install करले और जिस फोल्डर में आप को code लिखना है वह एक नया folder बनाये जिसे हम एस कोर्स की पूरी सीरीज में काम ले लेगे इस का नाम आप ” web development course bootcamp ” रखे or अपने माउस का right click >> करके इस folder को vs code स्टूडियो में ओपन करे

अब आप सोच रहे है की जब IDE की बात है तो मार्किट में बहुत से IDE ही है तो हम vs code का use क्यों करे

Visual code Studio Use क्यों करे ?

Visual code studio आपके प्रोग्राम को लिखना में बहुत आसन बना देता है जेसे की html की बात करते है html लिखने से पहले कुछ कोड और syntex इसे होते है जिन्हें हम लिखना जरुरी होती है इसे में जब हम प्रोग्राम लिखत है तो उन्हें स्टार्ट में जरुर लिखना पड़ता है

यहाँ पर vs code आपके काम को बहुत आसन बना देता है vs code में exclamation mark,(!) इंटर करते है ही हमारे पास Emmet abbreviations का option आता है जेसे ही आप इस पर क्लिक करते है आपका पूरा html का बेसिक code जिसे हम html boiler plate भी कहते है आपनी आप टाइप हो जाता है जो निचे दिया गया है

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  

</head>

<body>
  
</body>
</html>

यह हमने पीछे के पार्ट में बताया था की यह क्या होता है और हमने पिछले भाग में यह भी बात की थी की जब html लिखते है तो हमे open tag और close tag लगाना पड़ता है vs कोड आपको इस काम भी बहुत आसन बना देता है जब कोई आप tag को स्टार्ट का लिख देते हो तो vs कोड उसको अपने आप पूरा कर देता है

अब हम vs code के इंटरफ़ेस की बात करते है इसके sidebar में आपको 5 आइकॉन दिए है जो की Explorer, search,source Control, Run & debug, Extensions, दिए हुए है

  • explorer में हम फाइल को क्रिएट कर सकते है फोल्डर बना सकते है और मैनेज्ड तरीके से आपना कोड लिख सकते है
  • Search में हमारे code कई बार बहुत बड़ा हो जाता है तो उसको सर्च करने में काम आता है
  • Run & debug में आपने code को Run कर सकते है और अगर कोई बग आ जाये तो उसे भी फिक्स कर सकते है
  • Extensions यहाँ vs code का app store है हर काम के लिए आपको यहाँ पर extensions मिल जायेगे
    और यहाँ पर भी हम एक Extension का use करेंगे जिसे Live Server नाम है यह हमारे कोड को लाइव केसा काम करेगा हमको दिखायेगा की हमने जो कोड लिखा उससे हमारी वेबसाइट केसे दिखेगी

vs code में live Server install केसे करे ?

Live server को install करने के लिए एक्सटेंशन पर क्लिक करके सर्च में live server लिखे आपके सामने live server आ जायेगा जिसके आगे install का बटन दिया होगा उस पर क्लिक करके install करले

live Server आपके जो code लिखा है उसको लाइव दिखाने में हेल्प करता है आपने जो प्रोग्राम लिखा है वह असल वेबसाइट बनाने के बाद केसा दिखेगा इससे आपको प्रोग्राम लिखने में हेल्प मिलेगी ऐसे में आप अपना पूरा प्रोग्राम लिख लो बाद में आप चेक करो और आपकी वेबसाइट सही नहीं दिखे तब आपके हर कोड को चेंज करना पड़ेगा Live server की हेल्प से आप आपने टाइम बचा सकते है

Leave a Comment