🦐 🕒 🏒 अगर मैं आज फ्रंटेंड सिखाता। शुरुआती टिप्स 🌄 🤐 〽️

वेब विकास में मेरा पथ 5 साल पहले शुरू हुआ। इस समय के दौरान मैं कई तकनीकों का प्रयास करने में कामयाब रहा, और पिछले 3 वर्षों में मैं दृश्यपटल की दिशा में विकास कर रहा हूं।

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

तो आप एक Frontend Developer बनना चाहते हैं। इसके लिए क्या आवश्यक है?

HTML, CSS, जावास्क्रिप्ट सीखना

HTML और CSS

ये दो प्रौद्योगिकियां साइट लेआउट के लिए आवश्यक हैं। लेआउट एक पृष्ठ पर पाठ, चित्र, बटन और अन्य इंटरफ़ेस तत्वों की एक व्यवस्था है।

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

बिना सीएसएस और इसके साथ वेबसाइट

गुरु कैसे हो?

सबसे पहले, आपको इन तकनीकों के बारे में समीक्षा लेख या वीडियो पढ़ना चाहिए। तो आप उनके सार को समझें।

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

पहले तो यह मुश्किल होगा, और दूसरी समस्या के समाधान के लिए आपको अक्सर Google पर जाना होगा। लेकिन समय के साथ, आप तत्व के लेआउट के लिए अपने सिर को सही एचटीएमएल संरचना और आवश्यक सीएसएस गुणों में जल्दी से ढूंढना सीखेंगे।

लेआउट के लिए विचार और लेआउट कहाँ प्राप्त करें?

मैं इस्तेमाल किया Dribbble और CollectUI , लेकिन यह भी किया जा सकता है की खोज पर Behance और एक पृष्ठ प्यार ।

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

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

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

यदि हम HTML और CSS के साथ एक पेज बना रहे हैं, तो जावास्क्रिप्ट पृष्ठ के गतिशील भाग के लिए जिम्मेदार है: एनिमेशन, डेटा डिस्प्ले, क्रियाओं का प्रसंस्करण और बहुत कुछ।

मुझे इसकी ज़रूरत क्यों है?

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

यहाँ jQuery का उपयोग करके इस तरह के कार्यान्वयन का एक उदाहरण है :

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

गुरु कैसे हो?

आपका सबसे अच्छा शर्त learn.javascript.ru पर सीखना शुरू करना है । यह एक महान संसाधन है, जो शुरुआती और उन्नत डेवलपर्स दोनों के लिए ज्ञान का आधार है।

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

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

धीरे-धीरे नए प्लगइन्स और लाइब्रेरी सीखें। सबसे लोकप्रिय और समझने में आसान jQuery में से एक है।। इसके साथ पृष्ठ की सामग्री के साथ बातचीत करना बहुत आसान है, और इसे मूल स्तर पर जल्दी से महारत हासिल की जा सकती है।

आप अपनी परियोजनाओं में तीसरे पक्ष के पुस्तकालयों का उपयोग करने का सहारा लेंगे। यह समझने के लिए कि यह कैसे किया जाता है, मैं लुकन का उपयोग करने या उल्लू हिंडोला के माध्यम से एक हिंडोला बनाने की तारीखों को प्रारूपित करने की कोशिश करता हूं ।

आगे क्या होगा?

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

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

मेरा सुझाव है कि आप अपने आप को फ़्रंटेंड रोडमैप से परिचित कराएँ । यहां इंटरफ़ेस विकास प्रौद्योगिकियां हैं जिनकी आपको भविष्य में आवश्यकता होगी।

भविष्य में, आप शायद रिएक्ट या वीयू जैसे प्रतिक्रियाशील ढांचे में रुचि लेंगे ।। उन पर एप्लिकेशन बनाने के लिए, आप वेबपैक सीखेंगे , और लेआउट प्रक्रिया को गति देने के लिए, आप प्रीप्रोसेसर PUG और SASS सीखेंगे । या हो सकता है कि आप ग्राफिक्स में गहराई से जाना चाहते हैं और डी 3 या वेबजीएल के साथ काम करना सीखें ।

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

पुनश्च मैं इस लेख में प्रत्येक तकनीक के साथ प्रलेखन या उपयोग के उदाहरणों के लिंक के साथ। आप वेब विकास की व्यापक समझ प्राप्त करने के लिए अपने आप को उनके साथ परिचित कर सकते हैं।

अगर मैं आज फ्रंटेंड सिखाता। शुरुआती टिप्स

HTML और CSS

गुरु कैसे हो?

लेआउट के लिए विचार और लेआउट कहाँ प्राप्त करें?

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

मुझे इसकी ज़रूरत क्यों है?

गुरु कैसे हो?

आगे क्या होगा?

More articles: