एक पूर्ण शुरुआत के रूप में वेब विकास सीखें (2021)

एक शुरुआत के रूप में वेब विकास सीखना चाहते हैं, लेकिन सुनिश्चित नहीं हैं कि कहां से शुरू करें?

कोडिंग सीखने का सबसे अच्छा तरीका जानना कठिन है, क्योंकि वहाँ बहुत सारे संसाधन हैं। लेकिन अभी, आपको केवल वेब विकास की मूल बातों की आवश्यकता है- एक सामान्य स्पष्टीकरण जिसमें आगे जाना है कि कुछ दिशा है।

सबसे पहले, यहां वे चरण दिए गए हैं जिनका आपको एक शुरुआती वेब डेवलपर के रूप में पालन करना होगा।

वेब विकास मूल बातें सीखने के चरण:

1. वेबसाइट कैसे काम करती हैं, फ्रंट-एंड बनाम बैक-एंड, और कोड संपादक का उपयोग करने की मूल बातें जानें
2. मूल HTML, CSS और JavaScript सीखें
3. टूल सीखें:पैकेज मैनेजर, बिल्ड टूल्स, वर्जन कंट्रोल
4. सैस, रिस्पॉन्सिव डिज़ाइन, जावास्क्रिप्ट फ्रेमवर्क सीखें
5. बैक-एंड मूल बातें सीखें:सर्वर और डेटाबेस, प्रोग्रामिंग भाषाएं

मैं क्रम में चरण 1, 2, और 3 करने की सलाह देता हूं। फिर, इस पर निर्भर करते हुए कि आप अधिक फ्रंट-एंड या बैक-एंड पर ध्यान केंद्रित करना चाहते हैं, आप किसी भी क्रम में चरण 4ए या 4बी कर सकते हैं।

मुझे व्यक्तिगत रूप से लगता है कि फ्रंट-एंड वेब डेवलपर्स के लिए कम से कम बैक-एंड को जानना एक अच्छा विचार है, और इसके विपरीत। कम से कम, दोनों की मूल बातें सीखने से आपको यह पता लगाने में मदद मिलेगी कि क्या आप फ्रंट-एंड या बैक-एंड वेब डेवलपमेंट को बेहतर पसंद करते हैं 🙂

वेब विकास सीखने का रोडमैप (इन्फोग्राफिक)

यहां एक उपयोगी इन्फोग्राफिक है जो आपको एक शुरुआत के रूप में वेब विकास सीखने के लिए रोडमैप के सभी चरणों को दिखा रहा है!

अब, सीधे पहले चरण पर चलते हैं!

1:वेब डेवलपमेंट क्या है?

इससे पहले कि हम वास्तविक कोडिंग में उतरें, आइए पहले कुछ सामान्य जानकारी देखें कि वेब विकास क्या है:वेबसाइटें कैसे काम करती हैं, फ्रंट और बैक-एंड के बीच का अंतर और कोड संपादक का उपयोग करना।

वेबसाइट कैसे काम करती हैं?

सभी वेबसाइटें, अपने सबसे बुनियादी रूप में, फाइलों का एक समूह मात्र होती हैं जो एक कंप्यूटर पर संग्रहीत होती हैं जिसे सर्वर कहा जाता है। यह सर्वर इंटरनेट से जुड़ा है। फिर आप उस वेबसाइट को अपने कंप्यूटर या अपने फोन पर एक ब्राउज़र (जैसे क्रोम, फ़ायरफ़ॉक्स, या सफारी) के माध्यम से लोड कर सकते हैं। आपके ब्राउज़र को क्लाइंट . भी कहा जाता है इस स्थिति में।

इसलिए, हर बार जब आप इंटरनेट पर होते हैं, तो आप (क्लाइंट) सर्वर से डेटा (जैसे कैट पिक्स) प्राप्त कर रहे होते हैं और लोड कर रहे होते हैं, साथ ही डेटा को सर्वर पर वापस सबमिट कर रहे होते हैं (लोड मोर कैट तस्वीरें! ) क्लाइंट और सर्वर के बीच यह आगे और पीछे इंटरनेट का आधार है।

आप अपने ब्राउज़र में जो कुछ भी एक्सेस कर सकते हैं, वह कुछ ऐसा है जिसे एक वेब डेवलपर ने बनाया है। कुछ उदाहरण छोटी व्यावसायिक वेबसाइटें और ब्लॉग हैं, जो कि बहुत ही जटिल वेब ऐप्स जैसे AirBnb, Facebook और Twitter तक सरल हैं।

फ्रंट-एंड और बैक-एंड में क्या अंतर है?

शब्द "फ्रंट एंड," "बैक एंड," और "फुल स्टैक" वेब डेवलपर वर्णन करते हैं कि आप क्लाइंट/सर्वर संबंध के किस हिस्से के साथ काम कर रहे हैं।

"फ्रंट एंड" का अर्थ है कि आप मुख्य रूप से क्लाइंट साइड के साथ काम कर रहे हैं। इसे "फ्रंट एंड" कहा जाता है क्योंकि यह वही है जो आप ब्राउज़र में देख सकते हैं। इसके विपरीत, "बैक एंड" वेबसाइट का वह हिस्सा है जिसे आप वास्तव में नहीं देख सकते हैं, लेकिन यह बहुत सारे तर्क और कार्यक्षमता को संभालता है जो हर चीज के काम करने के लिए आवश्यक है।

इसके बारे में आप एक तरह से सोच सकते हैं कि फ्रंट-एंड वेब डेवलपमेंट एक रेस्तरां के "घर के सामने" भाग की तरह है। यह वह खंड है जहां ग्राहक रेस्तरां को देखने और अनुभव करने के लिए आते हैं- आंतरिक सजावट, बैठने की जगह, और निश्चित रूप से, खाना खा रहे हैं।

दूसरी ओर, बैक-एंड वेब विकास रेस्तरां के "घर के पीछे" भाग की तरह है। यह वह जगह है जहां डिलीवरी और इन्वेंट्री का प्रबंधन किया जाता है, और भोजन बनाने की प्रक्रिया होती है। पर्दे के पीछे बहुत सी चीजें हैं जो ग्राहक नहीं देखेंगे, लेकिन वे अंतिम उत्पाद का अनुभव करेंगे (और उम्मीद है कि आनंद लेंगे) - एक स्वादिष्ट भोजन!

मजेदार चित्रण एक तरफ, फ्रंट और बैक एंड वेब डेवलपमेंट दोनों अलग-अलग लेकिन बहुत महत्वपूर्ण कार्य करते हैं।

कोड संपादक का उपयोग करना

जब आप एक वेबसाइट बनाते हैं, तो आपके द्वारा उपयोग किया जाने वाला सबसे आवश्यक उपकरण आपका कोड संपादक या आईडीई (एकीकृत विकास पर्यावरण) होता है। यह टूल आपको वेबसाइट बनाने के लिए मार्कअप और कोड लिखने की अनुमति देता है।

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

अन्य कोड संपादक सब्लिमे टेक्स्ट, एटम और विम हैं।

हालांकि, अगर आप अभी शुरुआत कर रहे हैं, तो मेरा सुझाव है कि आप वीएस कोड देखें, जिसे आप उनकी वेबसाइट से डाउनलोड कर सकते हैं।

अब जबकि हमने वेब डेवलपमेंट क्या है, में कुछ व्यापक अवधारणाओं को शामिल कर लिया है, आइए अधिक विवरणों में शामिल हों- फ्रंट एंड से शुरू करते हुए।

2:बेसिक फ्रंट-एंड

वेबसाइट का फ्रंट-एंड तीन प्रकार की फाइलों से बना होता है:HTML, CSS और जावास्क्रिप्ट। ये फ़ाइलें क्लाइंट साइड पर ब्राउज़र में लोड की जाती हैं।

आइए उनमें से प्रत्येक पर करीब से नज़र डालें।

एचटीएमएल

HTML, या हाइपरटेक्स्ट मार्कअप लैंग्वेज, सभी वेबसाइटों की नींव है। जब आप किसी वेबसाइट को देखते हैं तो यह आपके ब्राउज़र में लोड होने वाली मुख्य फ़ाइल प्रकार है। HTML फ़ाइल में पृष्ठ की सभी सामग्री होती है, और यह विभिन्न प्रकार की सामग्री को दर्शाने के लिए टैग का उपयोग करती है।

उदाहरण के लिए, आप शीर्षक शीर्षक, अनुच्छेद, बुलेटेड सूचियाँ, चित्र आदि बनाने के लिए टैग का उपयोग कर सकते हैं। HTML टैग्स में अपने आप में कुछ शैलियाँ जुड़ी होती हैं, लेकिन वे बहुत ही बुनियादी हैं, जैसा कि आप किसी Word दस्तावेज़ में देखेंगे।

बस HTML के साथ शुरुआत कर रहे हैं? केवल HTML का उपयोग करके एक बहुत ही सरल वेबसाइट बनाने पर इस ट्यूटोरियल को देखें।

सीएसएस

CSS, या कैस्केडिंग स्टाइल शीट्स, आपको उस HTML सामग्री को स्टाइल करने देता है ताकि वह अच्छी और फैंसी दिखे। आप अपनी वेबसाइट के तत्वों को रंग, कस्टम फोंट और लेआउट जोड़ सकते हैं, हालांकि आप उन्हें देखना चाहते हैं। आप CSS के साथ एनिमेशन और आकार भी बना सकते हैं!

सीएसएस में बहुत गहराई है, और कभी-कभी लोग इसे चमकाते हैं ताकि वे जावास्क्रिप्ट जैसी चीजों पर आगे बढ़ सकें। हालाँकि, मैं यह समझने के महत्व को कम नहीं कर सकता कि CSS का उपयोग करके किसी डिज़ाइन को वेबसाइट लेआउट में कैसे परिवर्तित किया जाए। यदि आप फ्रंट-एंड में विशेषज्ञता हासिल करना चाहते हैं, तो वास्तव में ठोस CSS कौशल होना आवश्यक है।

जावास्क्रिप्ट

जावास्क्रिप्ट एक प्रोग्रामिंग भाषा है जिसे ब्राउज़र में चलाने के लिए डिज़ाइन किया गया था। जावास्क्रिप्ट का उपयोग करके, आप अपनी वेबसाइट को गतिशील बना सकते हैं, जिसका अर्थ है कि यह उपयोगकर्ता या अन्य स्रोतों से अलग-अलग इनपुट का जवाब देगी।

उदाहरण के लिए, आप "बैक टू टॉप" बटन बना सकते हैं कि जब उपयोगकर्ता इसे क्लिक करेगा, तो वे पृष्ठ के शीर्ष पर वापस स्क्रॉल करेंगे। या आप एक मौसम विजेट बना सकते हैं जो दुनिया में उपयोगकर्ता के स्थान के आधार पर आज के मौसम को प्रदर्शित करेगा।

खासकर यदि आप अपने कौशल को बाद में रिएक्ट जैसे जावास्क्रिप्ट ढांचे के साथ विकसित करना चाहते हैं, तो आप और अधिक समझेंगे यदि आप पहले नियमित वेनिला जावास्क्रिप्ट सीखने के लिए समय निकालते हैं। यह सीखने में वाकई मज़ेदार भाषा है, और आप इसके साथ बहुत कुछ कर सकते हैं!

एचटीएमएल, सीएसएस और जावास्क्रिप्ट कहां से सीखें

जब लोग मुझसे पूछते हैं कि वेब विकास कहां से सीखना है, तो मैं आमतौर पर उन्हें निम्नलिखित संसाधनों में से एक की जांच करने की सलाह दूंगा:

सिफारिश करने के लिए मेरे पसंदीदा स्थानों में से एक फ्रीकोडकैंप है। यह एक ऑनलाइन कोडिंग बूटकैंप है जो गैर-लाभकारी और पूरी तरह से मुफ़्त है! मुझे यह विकल्प पसंद है क्योंकि यदि आप एक शुरुआत कर रहे हैं और पूरी तरह से सुनिश्चित नहीं हैं कि कोडिंग आपके लिए है, तो यह एक कम दबाव है, यह देखने का जोखिम-मुक्त तरीका है कि आप इसे पसंद करते हैं या नहीं।

फ्रीकोडकैंप का एक नकारात्मक पहलू यह है कि उनके पास एक अंतर्निहित कोडिंग वातावरण के साथ एक अविश्वसनीय पाठ्यक्रम है, लेकिन उनके पास इसके हिस्से के रूप में संरचित वीडियो नहीं हैं।

इसलिए यदि आप वास्तव में वीडियो से सीखना पसंद करते हैं, तो यहां कुछ अन्य विकल्प दिए गए हैं:

ज़ीरो टू मास्टरी एकेडमी आंद्रेई नेगोई द्वारा बनाई गई है, जो उडेमी पर उच्चतम रेटेड कोडिंग प्रशिक्षकों में से एक है। आंद्रेई के पास अब फुल-स्टैक वेब डेवलपमेंट, जावास्क्रिप्ट, पायथन, रिएक्ट, और यहां तक ​​​​कि फ्रीलांसिंग और कोडिंग इंटरव्यू को कवर करने वाले पाठ्यक्रमों के साथ अपना खुद का कोर्स प्लेटफॉर्म है। इसका लाभ यह है कि आप ZTM प्लेटफॉर्म पर हर एक कोर्स तक पहुंचने के लिए मासिक या वार्षिक शुल्क का भुगतान करते हैं।

आंद्रेई जटिल विषयों की व्याख्या करने में उत्कृष्ट हैं, और मैं उनके संपूर्ण वेब डेवलपर बूटकैंप पाठ्यक्रम की जांच करने की अत्यधिक अनुशंसा करता हूं जो आपको वेब विकास में शुरुआती से उन्नत विषयों तक ले जाता है।

यदि आप एकबारगी वीडियो पाठ्यक्रमों के अधिक प्रशंसक हैं, तो कुछ निःशुल्क और सशुल्क विकल्प हैं:

Wes Bos के पास Flexbox, CSS Grid, और JavaScript सीखने पर निःशुल्क पाठ्यक्रम हैं जो उत्कृष्ट हैं। मैंने अभी-अभी उनके CSS Grid पाठ्यक्रम को पढ़ा, और यह वास्तव में संपूर्ण और मज़ेदार था। वेस एक महान शिक्षक हैं!

उडेमी एक ऑनलाइन लर्निंग प्लेटफॉर्म है जिसमें बहुत सारे बेहतरीन कोर्स भी हैं। एक विशेष रूप से जो आपको पसंद आ सकता है वह है जोनास श्मेड्टमैन द्वारा उन्नत सीएसएस और सैस पाठ्यक्रम- इस भुगतान पाठ्यक्रम में सीएसएस ग्रिड, फ्लेक्सबॉक्स, उत्तरदायी डिजाइन और अन्य सीएसएस विषयों को शामिल किया गया है!

एक बार जब आप मूल बातें सीख लेते हैं, तो अपने कौशल में सुधार करने के सर्वोत्तम तरीकों में से एक निर्माण परियोजनाओं का अभ्यास करना है! एक जगह जो आप कर सकते हैं वह है कोडमेंटर द्वारा DevProjects। उनके पास नि:शुल्क परियोजनाओं का एक संग्रह है, जिनका आप समाधान प्रस्तुत कर सकते हैं और मंच पर अन्य डेवलपर्स से प्रतिक्रिया भी प्राप्त कर सकते हैं!

YouTube पर एक टन मुफ़्त वीडियो संसाधन भी हैं:

ट्रैवर्सी मीडिया, संभवत:सबसे बड़ा वेब विकास चैनल है, जिसमें शुरुआती लोगों के लिए HTML क्रैश कोर्स और CSS क्रैश कोर्स है।

वेब डिज़ाइन और फ्रंट-एंड पर केंद्रित चैनल DesignCourse में शुरुआती लोगों के लिए भी एक HTML और CSS ट्यूटोरियल है।

FreeCodeCamp का अपना YouTube चैनल है, जिसमें शुरुआती पाठ्यक्रम और अन्य गहन पाठ्यक्रमों के लिए जानें जावास्क्रिप्ट जैसे वीडियो हैं।

और हां, मेरा अपना YouTube चैनल, कोडर कोडर है, जहां मैं फ्रंट-एंड वेब डेवलपमेंट ट्यूटोरियल पर वीडियो बनाता हूं! एचटीएमएल, एससीएसएस, और जावास्क्रिप्ट के साथ एक प्रतिक्रियाशील वेबसाइट बनाने पर मेरी 7-भाग वाली प्लेलिस्ट देखें:

वेब विकास पर पुस्तकें और लेख

यदि आप अधिक पढ़ने वाले व्यक्ति हैं, तो मैं निम्नलिखित की अत्यधिक अनुशंसा करता हूं:

एचटीएमएल और सीएसएस, और जावास्क्रिप्ट और jQuery पर अविश्वसनीय रूप से लोकप्रिय जॉन डकेट किताबें। ये किताबें आपकी घनी, रन-ऑफ-द-मिल पाठ्यपुस्तकें नहीं हैं। वे खूबसूरती से डिज़ाइन किए गए हैं, वास्तव में अच्छी तरह से लिखे गए हैं, और सामग्री सिखाने में मदद करने के लिए उनके पास बहुत सारी तस्वीरें और चित्र हैं।

वाक्पटु जावास्क्रिप्ट एक और किताब है जो मुझे वास्तव में पसंद है। आप इसे उनकी वेबसाइट पर मुफ्त में पढ़ सकते हैं, या यदि आप भौतिक पुस्तकें पसंद करते हैं तो अमेज़ॅन से एक पेपर कॉपी खरीद सकते हैं। मेरे पास यह स्वयं है, और मुझे यह बहुत पसंद है!

और अंतिम लेकिन कम से कम, कुछ वेबसाइटें जिनमें बेहतरीन लेख और अन्य संसाधन हैं:

• मोज़िला डेवलपर नेटवर्क
• सीएसएस ट्रिक्स
• स्मैशिंग मैगज़ीन

3:टूल

आइए अब कुछ अन्य फ्रंट-एंड तकनीकों में आते हैं। जैसा कि हमने बताया, एचटीएमएल, सीएसएस और जावास्क्रिप्ट फ्रंट-एंड वेब डेवलपमेंट के बुनियादी बिल्डिंग ब्लॉक हैं। उनके अलावा, कुछ अन्य टूल भी हैं जिन्हें आप सीखना चाहेंगे।

पैकेज प्रबंधक

पैकेज मैनेजर सॉफ्टवेयर के ऑनलाइन संग्रह हैं, जिनमें से अधिकांश ओपन सोर्स हैं। सॉफ़्टवेयर का प्रत्येक भाग, जिसे पैकेज कहा जाता है, आपके अपने प्रोजेक्ट में स्थापित करने और उपयोग करने के लिए उपलब्ध है।

आप उनके बारे में प्लगइन्स की तरह सोच सकते हैं- शुरुआत से सब कुछ लिखने के बजाय, आप उपयोगी उपयोगिताओं का उपयोग कर सकते हैं जो अन्य लोगों ने पहले ही लिखा है।

सबसे लोकप्रिय पैकेज मैनेजर को npm या नोड पैकेज मैनेजर कहा जाता है, लेकिन आप यार्न नामक एक अन्य मैनेजर का भी उपयोग कर सकते हैं। दोनों ही जानने और उपयोग करने के लिए अच्छे विकल्प हैं, हालांकि npm से शुरुआत करना शायद सबसे अच्छा है।

यदि आप अधिक जानने के लिए उत्सुक हैं, तो आप इस लेख को npm का उपयोग करने की मूल बातें पढ़ सकते हैं।

टूल बनाएं

मॉड्यूल बंडलर और वेबपैक, गल्प या पार्सल जैसे बिल्ड टूल, फ्रंट-एंड वर्कफ़्लो का एक और अनिवार्य हिस्सा हैं।

बुनियादी स्तर पर, ये उपकरण कार्य चलाते हैं और फ़ाइलों को संसाधित करते हैं। आप उनका उपयोग अपनी Sass फ़ाइलों को CSS में संकलित करने के लिए कर सकते हैं, बेहतर ब्राउज़र समर्थन के लिए अपनी ES6 JavaScript फ़ाइलों को ES5 तक ट्रांसपाइल कर सकते हैं, एक स्थानीय वेब सर्वर चला सकते हैं, और कई अन्य उपयोगी कार्य कर सकते हैं।

गल्प , एक कार्य धावक, के पास npm संकुल का एक सूट होता है जिसका उपयोग आप अपनी फ़ाइलों को संकलित और संसाधित करने के लिए कर सकते हैं।

वेबपैक एक सुपर शक्तिशाली बंडलर है जो वह सब कुछ कर सकता है जो गल्प कर सकता है और साथ ही और भी। यह जावास्क्रिप्ट वातावरण में एक टन का उपयोग करता है, विशेष रूप से जावास्क्रिप्ट फ्रेमवर्क के साथ (जो हम थोड़ी देर में प्राप्त करेंगे)। वेबपैक का एक पहलू यह है कि इसे उठने और चलाने के लिए बहुत अधिक कॉन्फ़िगरेशन की आवश्यकता होती है, जो शुरुआती लोगों के लिए निराशाजनक हो सकता है।

पार्सल वेबपैक की तरह एक नया बंडलर है, लेकिन यह बॉक्स से पहले से कॉन्फ़िगर किया गया है, इसलिए आप सचमुच इसे कुछ ही मिनटों में चालू कर सकते हैं। और आपको सब कुछ कॉन्फ़िगर करने के बारे में ज्यादा चिंता करने की आवश्यकता नहीं होगी।

व्यक्तिगत रूप से मैं अपने स्वयं के फ्रंट-एंड वर्कफ़्लोज़ के लिए गुलप का उपयोग करना पसंद करता हूं, जहां मैं सिर्फ अपनी एसएएस और जावास्क्रिप्ट फाइलों को संकलित करना चाहता हूं और बहुत कुछ नहीं करना चाहता। यहां मेरे ट्यूटोरियल के साथ गल्प वर्कफ़्लो सेट करने का तरीका जानें।

यदि आप वेबपैक के बारे में अधिक जानना चाहते हैं तो निम्न YouTube वीडियो देखें:

• डिज़ाइन कोर्स द्वारा वेबपैक में क्रैश कोर्स
• कोल्ट स्टील द्वारा वेबपैक पर 10-भाग श्रृंखला

संस्करण नियंत्रण

संस्करण नियंत्रण (जिसे स्रोत नियंत्रण भी कहा जाता है) एक ऐसी प्रणाली है जो आपके द्वारा अपनी प्रोजेक्ट फ़ाइलों में किए जाने वाले प्रत्येक कोड परिवर्तन का ट्रैक रखती है। यदि आप कोई गलती करते हैं तो आप पिछले परिवर्तन पर वापस भी जा सकते हैं। यह लगभग आपके प्रोजेक्ट के लिए अनंत बचत अंक होने जैसा है, और मैं आपको बता दूं, यह एक बहुत बड़ा जीवन रक्षक हो सकता है।

सबसे लोकप्रिय संस्करण नियंत्रण प्रणाली एक ओपन सोर्स सिस्टम है जिसे गिट कहा जाता है। Git का उपयोग करके, आप अपनी सभी फ़ाइलों और उनके परिवर्तन इतिहास को संग्रहों में संग्रहीत कर सकते हैं जिन्हें रिपॉजिटरी कहा जाता है।

आपने GitHub के बारे में भी सुना होगा, जो कि Microsoft के स्वामित्व वाली एक ऑनलाइन होस्टिंग कंपनी है, जहाँ आप अपने सभी Git रिपॉजिटरी को स्टोर कर सकते हैं।

Git और GitHub सीखने के लिए, GitHub.com के पास कुछ ऑनलाइन गाइड हैं जो बताते हैं कि कैसे उठना और चलना है। ट्रैवर्सी मीडिया में एक YouTube वीडियो भी है जिसमें बताया गया है कि Git कैसे काम करता है।

4a:अतिरिक्त फ्रंट-एंड

एक बार जब आपके पास फ्रंट-एंड डाउन की मूल बातें हो जाती हैं, तो कुछ और मध्यवर्ती कौशल होते हैं जिन्हें आप सीखना चाहेंगे। मेरा सुझाव है कि आप निम्नलिखित को देखें:Sass, उत्तरदायी डिज़ाइन, और एक JavaScript फ़्रेमवर्क।

सास

Sass CSS का एक विस्तार है जो लेखन शैलियों को अधिक सहज और मॉड्यूलर बनाता है। यह वास्तव में शक्तिशाली उपकरण है। Sass के साथ, आप बेहतर संगठन के लिए अपनी शैलियों को कई फाइलों में विभाजित कर सकते हैं, रंगों और फोंट को स्टोर करने के लिए चर बना सकते हैं, और आसानी से शैलियों का पुन:उपयोग करने के लिए मिक्सिन और प्लेसहोल्डर का उपयोग कर सकते हैं।

यहां तक ​​कि अगर आप नेस्टिंग जैसी कुछ बुनियादी सुविधाओं का उपयोग करते हैं, तो भी आप अपनी शैलियों को अधिक तेज़ी से और कम सिरदर्द के साथ लिखने में सक्षम होंगे।

आप Sass के बारे में इस Scotch.io ट्यूटोरियल के साथ-साथ देव एड के YouTube वीडियो में और जान सकते हैं।

रिस्पॉन्सिव डिज़ाइन

रिस्पॉन्सिव डिज़ाइन यह सुनिश्चित करता है कि आपकी शैलियाँ सभी डिवाइस- डेस्कटॉप, टैबलेट और मोबाइल फ़ोन पर अच्छी लगेंगी। उत्तरदायी डिजाइन की मुख्य प्रथाओं में तत्वों के लिए लचीले आकार का उपयोग करना, साथ ही विशिष्ट उपकरणों और चौड़ाई के लिए शैलियों को लक्षित करने के लिए मीडिया प्रश्नों का उपयोग करना शामिल है।

उदाहरण के लिए, अपनी सामग्री को स्थिर 400px चौड़ा सेट करने के बजाय, आप मीडिया क्वेरी का उपयोग कर सकते हैं और सामग्री को डेस्कटॉप पर 50% चौड़ाई और मोबाइल पर 100% पर सेट कर सकते हैं।

रिस्पॉन्सिव CSS के साथ अपनी वेबसाइट बनाना इन दिनों बहुत जरूरी है, क्योंकि कई मामलों में मोबाइल ट्रैफ़िक डेस्कटॉप ट्रैफ़िक से आगे निकल रहा है।

उत्तरदायी डिज़ाइन और अपनी वेबसाइटों को उत्तरदायी बनाने के बारे में अधिक जानकारी के लिए, इस लेख को देखें। मैं अपने YouTube चैनल पर लाइव कोडिंग स्ट्रीम भी करता हूं, जहां मैं शुरुआत से एक प्रतिक्रियाशील वेबसाइट बनाता हूं।

JavaScript फ़्रेमवर्क

एक बार जब आपके पास वेनिला जावास्क्रिप्ट की मूल बातें हो जाती हैं, तो आप जावास्क्रिप्ट ढांचे में से एक सीखना चाहेंगे (विशेषकर यदि आप एक पूर्ण-स्टैक जावास्क्रिप्ट डेवलपर बनना चाहते हैं)।

ये फ़्रेमवर्क पूर्व-निर्मित संरचनाओं और घटकों के साथ आते हैं जो आपको शुरुआत से शुरू करने की तुलना में अधिक तेज़ी से ऐप्स बनाने की अनुमति देते हैं।

वर्तमान में, आपके पास तीन मुख्य विकल्प हैं:प्रतिक्रिया, कोणीय और Vue।

प्रतिक्रिया (तकनीकी रूप से एक पुस्तकालय), फेसबुक द्वारा बनाया गया था और अभी सबसे लोकप्रिय ढांचा है। आप React.js वेबसाइट पर जाकर सीखना शुरू कर सकते हैं। यदि आप एक प्रीमियम रिएक्ट कोर्स में रुचि रखते हैं, तो टायलर मैकगिनिन्स और वेस बोस दोनों के पास शुरुआती लोगों के लिए बेहतरीन कोर्स हैं।

कोणीय पहला बड़ा ढांचा था, और इसे Google द्वारा बनाया गया था। यह अभी भी बहुत लोकप्रिय है, भले ही हाल ही में रिएक्ट ने इसे पीछे छोड़ दिया हो। आप उनकी वेबसाइट पर एंगुलर सीखना शुरू कर सकते हैं। DesignCourse के गैरी का YouTube पर एक एंगुलर क्रैश कोर्स भी है।

व्यू एक पूर्व एंगुलर डेवलपर इवान यू द्वारा बनाया गया एक नया ढांचा है। जबकि यह रिएक्ट और एंगुलर की तुलना में उपयोग में छोटा है, यह तेजी से बढ़ रहा है और इसे उपयोग में आसान और मजेदार भी माना जाता है। आप Vue वेबसाइट पर इसके साथ उठ सकते हैं और चल सकते हैं।

आपको कौन सा ढांचा सीखना चाहिए?

अब आप सोच रहे होंगे, "ठीक है, कौन सा ढांचा सबसे अच्छा है?"

सच तो यह है, वे सभी अच्छे हैं। वेब विकास में, लगभग कभी भी कोई एक विकल्प नहीं होता है जो हर व्यक्ति और हर स्थिति के लिए 100% सबसे अच्छा विकल्प हो।

आपकी पसंद सबसे अधिक संभावना आपकी नौकरी से निर्धारित होगी, या बस जिसके द्वारा आप सबसे अधिक आनंद लेते हैं। यदि आपका अंतिम लक्ष्य नौकरी प्राप्त करना है, तो शोध करने का प्रयास करें कि संभावित नौकरी लिस्टिंग में कौन सा ढांचा सबसे आम है।

इस बारे में ज्यादा चिंता न करें कि कौन सा ढांचा चुनना है। यह अधिक महत्वपूर्ण है कि आप उनके पीछे की अवधारणाओं को सीखें और समझें। साथ ही, एक बार जब आप एक फ्रेमवर्क सीख लेते हैं तो अन्य फ्रेमवर्क (प्रोग्रामिंग भाषाओं के समान) को सीखना आसान हो जाएगा।

आइए अब अपने अंतिम खंड पर चलते हैं:बैक-एंड वेब डेवलपमेंट!

4b:बेसिक बैक-एंड

वेब विकास का बैक-एंड, या सर्वर-साइड, तीन मुख्य घटकों से बना है:सर्वर, सर्वर-साइड प्रोग्रामिंग भाषा और डेटाबेस।

सर्वर

जैसा कि हमने शुरुआत में उल्लेख किया है, सर्वर वह कंप्यूटर है जहां सभी वेबसाइट फाइलें, डेटाबेस और अन्य घटक संग्रहीत होते हैं।

पारंपरिक सर्वर लिनक्स या विंडोज जैसे ऑपरेटिंग सिस्टम पर चलते हैं। उन्हें "केंद्रीकृत" माना जाता है क्योंकि सब कुछ- वेबसाइट फाइलें, बैक-एंड कोड और डेटा सर्वर पर एक साथ संग्रहीत होते हैं।

आजकल सर्वर रहित आर्किटेक्चर भी हैं, जो एक अधिक विकेन्द्रीकृत प्रकार का सेटअप है। इस प्रकार का एप्लिकेशन उन घटकों को विभाजित करता है और उनमें से प्रत्येक को संभालने के लिए तीसरे पक्ष के विक्रेताओं का लाभ उठाता है।

नाम के बावजूद, कम से कम अपनी वेबसाइट फ़ाइलों को संग्रहीत करने के लिए, आपको अभी भी किसी प्रकार के सर्वर की आवश्यकता है। सर्वर रहित प्रदाताओं के कुछ उदाहरण AWS (अमेज़न वेब सेवाएँ) या Netlify हैं।

सर्वर रहित सेटअप लोकप्रिय हैं क्योंकि वे तेज़, सस्ते हैं, और आपको सर्वर रखरखाव के बारे में चिंता करने की आवश्यकता नहीं है। वे साधारण स्थिर वेबसाइटों के लिए बहुत अच्छे हैं जिन्हें पारंपरिक सर्वर-साइड भाषा की आवश्यकता नहीं होती है। हालांकि, बहुत जटिल अनुप्रयोगों के लिए पारंपरिक सर्वर सेटअप एक बेहतर विकल्प हो सकता है।

सर्वर रहित सेटअप के बारे में अधिक जानने के लिए, Netlify के पास एक सूचनात्मक ब्लॉग पोस्ट है जो आपको एक स्थिर वेबसाइट को परिनियोजन के साथ सेटअप करने के लिए सभी चरणों में ले जाती है।

प्रोग्रामिंग भाषा

सर्वर पर, आपको अपने एप्लिकेशन के लिए फ़ंक्शन और तर्क लिखने के लिए प्रोग्रामिंग भाषा का उपयोग करने की आवश्यकता है। सर्वर तब आपके कोड को संकलित करता है और परिणाम को वापस क्लाइंट को बताता है।

वेब के लिए लोकप्रिय प्रोग्रामिंग भाषाओं में PHP, Python, Ruby, C# और Java शामिल हैं। सर्वर-साइड जावास्क्रिप्ट का एक रूप भी है- Node.js, जो एक रन-टाइम वातावरण है जो सर्वर पर जावास्क्रिप्ट कोड चला सकता है।

ऐसे ढांचे भी हैं जिनका उपयोग आप इनमें से प्रत्येक सर्वर-साइड भाषा के साथ कर सकते हैं। फ़्रंट-एंड JavaScript फ़्रेमवर्क की तरह, ये बैक-एंड फ़्रेमवर्क सहायक टूल हैं जो वेब ऐप्स को बहुत तेज़ी से बनाते हैं।

आइए वेब विकास के लिए सबसे अधिक उपयोग की जाने वाली प्रोग्रामिंग भाषाओं की सूची देखें:

सी#

C# को जावा के Microsoft के प्रतियोगी के रूप में विकसित किया गया था। इसका उपयोग .NET ढांचे, गेम विकास के साथ वेब ऐप्स बनाने के लिए किया जाता है, और यहां तक ​​कि मोबाइल ऐप्स बनाने के लिए भी इसका उपयोग किया जा सकता है।

सी # सीखने के लिए स्थान:
रॉब माइल्स द्वारा सी # प्रोग्रामिंग येलो बुक
C# उदमी पर शुरुआती के लिए मूल बातें

जावा

Java सबसे लोकप्रिय प्रोग्रामिंग भाषाओं में से एक है, और इसका उपयोग वेब ऐप्स के साथ-साथ Android ऐप्स बनाने के लिए भी किया जाता है।

जावा सीखने के स्थान:
हेलसिंकी विश्वविद्यालय के MOOC
उदमी पर पूरा जावा डेवलपर कोर्स

नोड.जेएस

Node.js एक बहुत लोकप्रिय तकनीक है (स्टैक ओवरफ्लो के 2019 डेवलपर सर्वेक्षण के अनुसार)। एक बात ध्यान देने योग्य है:यह तकनीकी रूप से सर्वर-साइड भाषा नहीं है- यह जावास्क्रिप्ट का एक रूप है जो Express.js ढांचे का उपयोग करके सर्वर पर चलता है।

Node.js सीखने के स्थान:
Mosh . के साथ प्रोग्रामिंग द्वारा Node.js ट्यूटोरियल
वेस बॉस द्वारा नोड सीखें

PHP

PHP वह भाषा है जो वर्डप्रेस को शक्ति प्रदान करती है, इसलिए यह एक अच्छा विकल्प हो सकता है यदि आपको लगता है कि आप छोटी व्यावसायिक वेबसाइटों के साथ काम करेंगे, क्योंकि उनमें से कई वर्डप्रेस का उपयोग करते हैं। आप Laravel ढांचे के साथ वेब ऐप्स भी बना सकते हैं।

PHP सीखने के लिए स्थान:
mmtuts द्वारा PHP का परिचय
उदमी पर एडविन डियाज़ द्वारा शुरुआती के लिए PHP

पायथन

पायथन लोकप्रियता में बढ़ रहा है, खासकर जब इसका उपयोग डेटा साइंस और मशीन लर्निंग में किया जाता है। इसे शुरुआती लोगों के लिए भी अच्छा माना जाता है, क्योंकि इसका सिंटैक्स कुछ अन्य भाषाओं की तुलना में सरल है। यदि आप वेब ऐप्स बनाना चाहते हैं, तो आप Django या फ्लास्क फ्रेमवर्क का उपयोग कर सकते हैं।

पायथन सीखने के लिए स्थान:
उडेमी पर कोल्ट स्टील द्वारा आधुनिक पायथन 3 बूटकैंप
LearnPython.org

रूबी

रूबी एक और भाषा है जिसमें एक सिंटैक्स है जिसे शुरुआती-अनुकूल और सीखने में मजेदार माना जाता है। आप रूबी ऑन रेल्स फ्रेमवर्क के साथ वेब ऐप्स बना सकते हैं।

रूबी सीखने के लिए स्थान:
ओडिन परियोजना
माइकल हार्टल द्वारा रूबी ऑन रेल्स ट्यूटोरियल

जावास्क्रिप्ट फ्रेमवर्क की तरह ही, कोई # 1 सर्वश्रेष्ठ प्रोग्रामिंग भाषा नहीं है। आपकी पसंद आपकी व्यक्तिगत रुचि और वरीयता के साथ-साथ संभावित नौकरियों पर आधारित होनी चाहिए- इसलिए थोड़ा शोध करें जो आपके लिए एक अच्छा विकल्प हो सकता है आपके लिए ।

डेटाबेस

डेटाबेस, जैसा कि नाम से ही स्पष्ट है, आप अपनी वेबसाइट के लिए जानकारी संग्रहीत करते हैं। अधिकांश डेटाबेस SQL ​​नामक भाषा का उपयोग करते हैं (उच्चारण "अनुक्रम") जो "संरचित क्वेरी भाषा" के लिए है।

डेटाबेस में, डेटा को तालिकाओं में संग्रहीत किया जाता है, जिसमें पंक्तियाँ जटिल एक्सेल दस्तावेज़ों की तरह होती हैं। फिर आप डेटा बनाने, पढ़ने, अपडेट करने और हटाने के लिए SQL में क्वेरी लिख सकते हैं।

डेटाबेस सर्वर पर चलाया जाता है, विंडोज सर्वर पर माइक्रोसॉफ्ट एसक्यूएल सर्वर और लिनक्स के लिए MySQL जैसे सर्वर का उपयोग करता है।

NoSQL डेटाबेस भी हैं, जो पारंपरिक तालिकाओं के विपरीत JSON फ़ाइलों में डेटा संग्रहीत करते हैं। एक प्रकार का NoSQL डेटाबेस MongoDB है, जिसका उपयोग अक्सर रिएक्ट, एंगुलर और Vue अनुप्रयोगों के साथ किया जाता है।

वेबसाइटों पर डेटा का उपयोग कैसे किया जाता है, इसके कुछ उदाहरण हैं:

यदि आपकी वेबसाइट पर संपर्क फ़ॉर्म है, तो आप फ़ॉर्म का निर्माण कर सकते हैं ताकि हर बार जब कोई फ़ॉर्म सबमिट करे, तो उनका डेटा आपके डेटाबेस में सहेजा जा सके।

आप डेटाबेस पर उपयोगकर्ता लॉगिन भी कर सकते हैं, और लॉग इन की जाँच और प्रमाणीकरण को संभालने के लिए सर्वर-साइड भाषा में तर्क लिख सकते हैं।

SQL की मूल बातें सीखने के लिए कुछ संसाधन हैं:

• उडेमी पर जोस पोर्टिला द्वारा पूर्ण SQL बूटकैंप
• एसक्यूएलबोल्ट

आपको छोड़ने के लिए कुछ टिप्स...

पढ़ने के लिए धन्यवाद! मुझे पूरी उम्मीद है कि यह मार्गदर्शिका आपको वेब विकास सीखना शुरू करने में मदद करेगी।

यदि आप स्व-शिक्षित मार्ग पर जा रहे हैं तो मेरे पास कुछ सुझाव हैं:

1. एक ही बार में सब कुछ सीखने की कोशिश न करें। एक बार में सीखने के लिए एक कौशल चुनें।
2. ट्यूटोरियल से ट्यूटोरियल तक इधर-उधर न करें। जैसा कि आप सीख रहे हैं, यह देखने के लिए विभिन्न संसाधनों की जांच करना ठीक है कि आपको कौन सा सबसे अच्छा लगता है। लेकिन फिर से, किसी एक को चुनें और उसे पूरा करने का प्रयास करें।
3. जानें कि वेब विकास सीखना एक लंबी अवधि की यात्रा है। उन कहानियों के बावजूद आपने पढ़ा होगा कि लोग शून्य से 3 महीने में वेब देव की नौकरी पर जा रहे हैं, अगर आप शुरुआत से ही शुरुआत कर रहे हैं, तो मैं नौकरी के लिए तैयार होने के लिए 1 से 2 साल और अधिक का लक्ष्य रखूंगा।
4. सिर्फ वीडियो कोर्स देखने या किताब पढ़ने से आप अपने आप विशेषज्ञ नहीं बन जाएंगे। सामग्री सीखना सिर्फ पहला कदम है। वास्तविक वेबसाइट और प्रोजेक्ट बनाना (यहां तक ​​कि केवल अपने लिए डेमो वाले भी) आपको वास्तव में अपने सीखने को मजबूत करने में मदद करेगा।

वेब डेवलपमेंट सीखना शुरू करने के लिए शुभकामनाएँ!