Transcript for:

[संगीत] हेलो जी वेलकम टू कोड हेल्प तो आज हम स्टार्ट करने वाले हैं लेक्चर नंबर 13 को और यहां पर हम बात करने वाले हैं सीएसएस के बारे में कैस्केडिंग स्टाइल शीट्स के बारे में ठीक है अभी तक आपने एचटीएमएल वाला पार्ट पूरा कंप्लीट कर लिया है आपको एचटीएमएल के बारे में इन डेप्थ नॉलेज हो चुकी है लास्ट के 13 लेक्चर से आपने कुछ प्रोजेक्ट भी खुद से डेवलप कि आपको होमवर्क में भी दिए गए थे और आपको लेक्चर में भी हमने कंप्लीट सारे के सारे प्रोजेक्ट करवाए हैं लेट्स से कि आपको देखना है कि कहां पर बातें हो रही है भैया मैं तो नया स्टूडेंट हूं मुझे तो पता ही नहीं है तो कुछ भी नहीं आपको जाना है youtube2 वाली प्लेलिस्ट और यहां पर आप सारे के सारे लेक्चर को एक्सेस कर पाएंगे ठीक है जी तो यहां से आप सारे के सारे लेक्चर को एक्सेस कर सकते हैं अगर आपने अभी तक एटीएल वाला पार्ट कंप्लीट नहीं किया तो कृपा करके जाएं और कंप्लीट करें ठीक है तो आज हम स्टार्ट करने वाले हैं सीएसएस के बारे में और बहुत इन डेप्थ डिस्कशन यहां पर करेंगे सीएसएस होता क्या है डिफरेंट वेज टू ऐड सीएसएस क्या-क्या अवेलेबल है कैसे इंटरनल सीएसएस बनती है कैसे इनलाइन सीएसएस बनती है कैसे एक्सटर्नल सीएसएस आप ऐड कर सकते हो हम बात करेंगे एलिमेंट्स के ऊपर जो भी टैग्स हमने अब तक सीखे हैं उनके ऊपर सीएसएस में कैसे डिफरेंट डिफरेंट तरीके से अप्लाई कर सकता हूं कैसे-कैसे डिफरेंट डिफरेंट प्रॉपर्टीज के बारे में बात करने वाले हैं तो बहुत सारी चीजें सीखने को है स्टार्ट करते हैं फटाफट से आज के लेक्चर को और सबसे पहला क्वेश्चन हमारा हमारे सामने आने वाला है जो कि है व्हाट इज सीएसएस चलो मैंने कहा व्ट वाला पार्ट तो डिस्कस करेंगे पर पहले क्या पढ़ चुके हो आपने बोला भैया एचटीएमएल पढ़ चुके हैं तो मैंने कहा चलो एचटीएमएल पढ़ लेते हैं ठीक है सो एटीएमएल की बात करते हैं एचटीएमएल में अगर आपसे पूछूं एचटीएमएल क्या होता है इसका क्या फायदा है क्यों यूज करते हैं इसको तो आपका जवाब क्या होगा भैया इससे मैं अपने वेब पेज को एक स्केलेटन प्रोवाइड करता हूं मैंने कहा ठीक है इससे मैं अपने वेब पेज को एक स्ट्रक्चर प्रोवाइड करता हूं मैंने कहा ठीक है इससे मैं अपने वेब पेज को एक डिस्क्रिप्शन प्रोवाइड करता हूं मैंने कहा ठीक है इससे मैं अपने वेब पेज में सेंटिक्स ऐड करता हूं मैंने कहा ठीक है तो ये सारी की सारी चीजें हम एटीएमएल की जब बात करते हैं तो हम ऐसे कह सकते हैं कि हां भाई इससे मैं ये पर्टिकुलर काम करता हूं पर जब सीएसएस की बात आती है तो मैं क्या कहूं कि सीएसएस क्यों यूज करते हैं नाम से क्या पता लग रहा है स्टाइल शीट तो यहां पे थोड़ी-थोड़ी चीजें मुझे क्लियर हो रही है कि भाई सीएसएस जो है उसका काम क्या होगा जब भी मुझे कुछ अपीयरेंस रिलेटेड चीजों पर वर्क करना है मुझे अपने पेज की अपीयरेंस को एनहांस करना है इंप्रूव करना है कलर चेंज करना है टेक्स्ट को अलाइन करना है टेक्स्ट को सेंटर में प्लेस करना है बैकग्राउंड कलर चेंज करना है ठीक है तो ऐसी कुछ प्रॉपर्टीज जिससे आप स्टाइलिंग कर रहे हो जिससे आप विजुअल अपीयरेंस के अंदर कोई चेंजेज ला रहे हो ठीक है जिससे आप अपनी वेबसाइट को जैसी वो दिखती है उससे और इंप्रूव कर रहे हो कुछ और विजुअल चेंजेज उसमें ऐड कर रहे हो तो वो सारी की सारी जिम्मेदारी कौन लेता है वो सारी की सारी जिम्मेदारी सीएसएस लेता है कैस्केडिंग स्टाइल शीट्स ठीक है सो नाम थोड़ा सा ऐसा ड्राव सा है इसका कैस्केडिंग स्टाइल शीट समझते हैं ब्रेक करते हैं इसको कोई बड़ी बड़ी चीज नहीं है स्टाइल शीट से हमें क्या समझ में आता है कि मान लो एक प्रकार का डॉक्यूमेंट होगा या एक प्रकार की शीट होगी जहां पर कुछ स्टाइल की कॉन्फ़िगरेशन एडेड होगी ठीक है तो आपने कुछ प्रॉपर्टीज यहां पर बता रखी होगी और उन प्रॉपर्टीज से कुछ ना कुछ वैल्यूज आपने असाइन कर रखी होगी एग्जांपल के लिए आपने बोल रखा होगा कि भाई बैकग्राउंड कलर जो है ना ये मेरी एक प्रॉपर्टी हो गई और इसकी वैल्यू क्या असाइन कर दी मैंने रेड कर दी या मैंने बोला मैं टेक्स्ट का कलर जो है ना टेक्स्ट के कलर की वैल्यू मैंने क्या कर दी येलो कर दी ये मैंने बोला मेरा बॉर्डर है ना मेरा बॉर्डर मैंने क्रिएट कर दिया वन पिक्सेल का ठीक है तो इस प्रकार से मैं कुछ प्रॉपर्टीज असाइन कर सकता हूं इस प्रकार से मैं कुछ प्रॉपर्टीज और उनकी वैल्यू असाइन कर सकता हूं एक पर्टिकुलर डॉक्यूमेंट के अंदर या फिर एक पर्टिकुलर एरिया के अंदर जिसको मैंने कह दिया स्टाइल शीट्स ठीक है अब बात आती है कैस्केडिंग की कैस्केडिंग का क्या मतलब है मैंने बोला कैस्केडिंग का यहां पर कांटेक्ट सिर्फ इतना है कि मान लो आपने एक एलिमेंट चूज किया पैराग्राफ ठीक है और अब इसको स्टाइल करना चाहते हैं अब लेट्स से आपने तीन डिफरेंट तरीके से इसको स्टाइल कर दिया एक तीन लोकेशन है जहां पे आपने सेम प्रॉपर्टी को स्टाइल कर दिया पैराग्राफ की एक जगह पे आपने बोल दिया कि इस बैक इसका बैकग्राउंड कलर ना आप ऐसा करो येलो रख दो एक जगह पे आपने बोल दिया इसका बैकग्राउंड कलर ना ऐसा करो रेड रख दो एक जगह आपने बोल दिया इसका बैकग्राउंड कलर ना ऐसा करो ब्लू रख दो अब सवाल है तीन डिफरेंट जगहों पे आपने सेम प्रॉपर्टी को असाइन करने की कोशिश किया तो मैं कौन सी पर्टिकुलर प्रॉपर्टी को पिक करूं ठीक है तो वहां पर इसका नाम कैस्केडिंग पड़ता है ठीक है एक होमवर्क आपके लिए यहां पर ये है फटाफट से आ google2 मिनट का काम है बस आपको ये फाइंड आउट करना है कि जो कैस्केडिंग स्टाइल शीट्स हैं सीएसएस है ये किन चार फैक्टर्स के ऊपर डिपेंड करती है अगर ऐसे मेरे पास मल्टीपल जगह पे असाइनमेंट हुआ पड़ा होता है तो किन चार फैक्टर्स के आधार पर यह बताती है कि मुझे कौन सी प्रॉपर्टी को पिक करना है कौन सी प्रॉपर्टी को पिक नहीं करना है तो आपको चार फैक्टर ढूंढ के लाने हैं फटाफट से ढूंढना है इस चीज को ठीक है तो अभी तक इस पूरे डिस्कशन का तात्पर्य सिर्फ इतना निकला है कि भाई कैस्केडिंग स्टाइल शीट कुछ ऐसा मेरे पास एक टेक्स्ट है ऐसे कुछ कन कॉफिगुड्डा टेक्स्ट सेक्शन होगा एक ऐसा एरिया होगा ऐसा पार्ट ऑफ कोड होगा जहां पर मैंने अपने वेब पेज को कैसे स्टाइल करना है ऐसे कुछ कॉन्फिन ऐड की होगी आई थिंक थोड़ा सा क्लियर हुआ होगा ठीक है अब बात करते हैं कि मेरे पास सीएसएस ऐड करने के डिफरेंट डिफरेंट तरीके कौन-कौन से अवेलेबल है मैंने कहा ज्यादा मुश्किल नहीं है बहुत सिंपल सिंपल चीज है मैंने कहा मेरे पास तीन डिफरेंट टाइप्स एजिस्ट करते हैं सीएसएस को ऐड करने के मैंने कहा मैं चाहूं तो मैं इनलाइन सीएसएस ऐड कर सकता हूं मैंने कहा मैं चाहूं तो मैं इंटरनल सीएसएस भी ऐड कर सकता हूं और मैंने कहा मैं चाहूं तो मैं एक्सटर्नल सीएसएस भी ऐड कर सकता हूं ठीक है जनरली आपको ऐसा लगेगा अभी थोड़ी देर में कि यार यह वाला तरीका सबसे बेस्ट है पर ये वाला तरीका सबसे बेस्ट नहीं है आपको लगेगा कि यार ये वाला तरीका मजा नहीं आ रहा पर यही वाला तरीका मेजॉरिटी केसेस में यूज किया जाता है ठीक है तो फटाफट समझते हैं क्या-क्या है डिफरेंट तरीके सीएसएस को ऐड करने के लिए उसके लिए फटाफट अपना आज की क्लास का एक फोल्डर क्रिएट कर लेते हैं लेक्चर नंबर 13 ठीक है और लेक्चर नंबर 13 के अंदर फटाफट अपने एक एटीएमएल फाइल क्रिएट कर लेते हैं हम index.htm और हमने क्या बोला कि यहां पर अपना बॉयलर प्लेट कोड फटाफट से ऐड कर लेते हैं बहुत बढ़िया इतना काम हमने कर लिया ठीक है अब मैंने क्या कहा अब मैंने कहा कि लेट्स से मैं यहां पे कुछ एक रैंडम से कुछ टैग्स ऐड कर लेता हूं उसके बाद आगे बढ़ेंगे मैंने बोला जी ये मेरी हेडिंग हो गई हेडिंग के अंदर हमने क्या लिख दिया वेलकम टू कोड हेल्प बहुत बढ़िया पहला काम डन और सेकंड मैंने क्या बोला कि मैं एक पैराग्राफ ऐड कर देता हूं और पैराग्राफ के अंदर मैंने बोल दिया कुछ टेक्स्ट ऐड करता हूं कितने वर्ड मैंने बोला लोरम 20 तो यहां पे 20 वर्ड्स ऐड हो जाएंगे हो गए चलो बहुत बढ़िया मैंने बोला यार मेरे को ना एक और पैराग्राफ ऐड करना है इस बार पर 30 वर्ड रखूंगा मैं मैंने कहा ठीक है तो मैंने बोला लॉरेम 30 30 वर्ड्स आ गए मेरे पास अब मैंने बोला एक पैराग्राफ और ऐड करना है जहां मैंने बोला कि मैं 50 वर्ड रखूंगा लोरम 50 चलो तो ये मैंने अपने एक वेब पेज क्रिएट कर लिया जहां पर एक हेडिंग नजर मुझे आ रही है जहां पर तीन पैराग्राफ मुझे नजर आ रहे हैं ठीक है यहां पर मैंने लेट्स से एक फुटर भी ऐड कर दिया मैंने बोला फुटर अब मैंने बोल दिया आई एम फुटर ठीक है तो मैंने ऐसा कुछ-कुछ क्रिएट कर दिया कुछ भी ऐसा रैंडम सा क्रिएट कर दिया अब मैंने इस पूरे के पूरे कोड को एक बार रन किया गो लाइव किया लाइव सर्वर पे चलाते हैं इसको फटाफट तो ऐसा कुछ-कुछ बन के आ रहा है ठीक है ये मेरी हेडिंग आ गई ये मेरे तीन पैराग्राफ आ गए और ये मेरा फूटर आ गया चलो इतनी बात समझ में आती है पर ये तो html5 है आपने मैंने कहा बिल्कुल सही तो हमने क्या किया हमने क्या किया हमने बोला कि इसकी सीएसएस ऐड करना मैं आपको सिखा रहा था तो मैंने सबसे पहले क्या बोला था हम इनलाइन सीएसएस की बात करेंगे मैंने आपको सबसे पहले क्या बोला कि बेटा हम बात करेंगे इनलाइन सीएसएस के बारे में तो हमने यहां पर क्या किया इसको कमेंट कर दिया और मैंने कहा मुझे इनलाइन सीएसएस ऐड करनी है कैसे करते हैं कुछ भी नहीं आपको यहां पर स्टाइल का यूज करना है आपने बोला स्टाइल और आपने स्टाइल के अंदर लेटस से यहां पर ऐड कर दिया बैकग्राउंड कलर आपने बोल दिया बैकग्राउंड कलर येलो तो आपने बेसिकली क्या किया आपने टैग के अंदर ही आपने इस टैग के अंदर ही स्टाइलिंग अप्लाई कर दी है आपने इस पैराग्राफ टैग के अंदर ही स्टाइलिंग अप्लाई कर दी है आपने बोला कि इस वाले पैराग्राफ के लिए ये वाली कॉन्फिन आप एक्टिवेट कर दो तो यानी यह वाला पैराग्राफ जो है इसका बैकग्राउंड कलर अब येलो हो जाएगा चेक करते हैं एक बार क्या येलो हुआ हां बिल्कुल हुआ दिस इज एन एग्जांपल ऑफ इनलाइन सीएसएस ठीक है ऐसे ही लेट्स से मैं यहां पे जाऊं सेकंड वाले पैराग्राफ में मैं यहां पे जाके लिख दूं स्टाइल और मैंने बोल दिया यहां पे मैंने टेक्स्ट का कलर है ना भाई उसको आप ऐसे कर दो एक्वा तो सेकंड वाले पैराग्राफ के अंदर मेरे टेक्स्ट का कलर एक्वा हो जाना चाहिए क्या हुआ बिल्कुल हो गया तो हमने दो बार देख लिया कैसे आप इनलाइन सीएसएस ऐड कर सकते हो चलो ये बात क्लियर हो गई हमें सेकंड पार्ट कौन सा था हमारे पास इनलाइन समझ में आ गई अब इंटरनल सीएसएस देखना है ये भी आसान तरीका है इसके लिए हम क्या कर सकते हैं लेट्स से मैं यहां पे गया और मैंने बोला कि यहां पर स्टाइल टैग का यूज़ कर लेता हूं तो मैंने यहां पर हेड टैग के अंदर स्टाइल टैग का यूज़ कर लिया और मैंने सिंपल सी एक बात बोली मैंने सिंपल सी एक बात बोली कि यार जो भी मेरा h1 टैग है ना जो भी मेरा h1 टैग है उस h1 टैग के लिए मुझे यहां पे प्रॉपर्टीज ऐड करनी है मैंने सिंपल सी एक बात बोली मेरे h1 टैग के लिए आप क्या करें मेरे h1 टैग का लिए टेक्स्ट का कलर ग्रीन कर दें मैंने कहा ठीक है तो हमने यहां पर कलर को ग्रीन कर दिया चलो चेक करते हैं तो हमने बोला इस प्रकार से जो आप स्टाइलिंग डिफाइन करते हैं हैड टैग के अंदर स्टाइल टैग का यूज करके कह रहे हैं कि h1 टैग की कलर वाली प्रॉपर्टी यानी टेक्स्ट की प्रॉपर्टी ग्रीन मार्क कर दो तो क्या मेरी हेडिंग ग्रीन कलर की हो गई जी हां बिल्कुल हो गई तो आपने जस्ट अभी सीखा कैसे आप इंटरनल सीएसएस ऐड कर सकते हैं यह वाला जो तरीका है इनलाइन सीएसएस इसको ज्यादा यूज़ नहीं करना चाहिए इसको अच्छी प्रैक्टिस नहीं माना जाता है क्योंकि इसमें बहुत कंफ्यूजन क्रिएट होगी भैया नहीं हमें तो कंफ्यूजन नहीं हो रही मैंने कहा क्यों नहीं हो रही क्योंकि अभी आपने सिर्फ एक ही प्रॉपर्टी और वैल्यू पेयर ऐड किया हुआ है लेट्स से कल को आप कुछ कॉम्प्लेक्टेड नहीं है तो ये प्रॉपर्टीज यहां पर बहुत बढ़ती जाएंगे और जैसे-जैसे बढ़ते जाएंगे आपका कोड उतना कॉम्प्लेक्टेड वाइज बिलकुल ज़ीरो कोड हो जाएगा ठीक है सो वी विल मेक श्यर कि हम इस तरीके से ना ऐड करें पर हां मेरा मेरे को बताना पड़ेगा आपको क्या-क्या डिफरेंट वेज है दैट व मैंने आपको बताया कि इनलाइन सीएसएस कैसे ऐड कर सकते हैं पहला तरीका डन समझ में आया बहुत अच्छी बात है सेकंड तरीका मैंने क्या बोला कि यार ये हैड टैग के अंदर मैं स्टाइल टैग को अगर ऐड करके उसके अंदर कॉन्फिन ऐड करूं तो क्या होगा तो हम उसके द्वारा भी सीएसएस अप्लाई कर सकते हैं पर सवाल ये है भैया ये सिंटेक्स समझ में नहीं आया मैंने कहा अभी समझ में आएगा अभी समझ में आएगा सिंटेक्स क्या है मैंने लिखा कि h1 और मैंने कुछ ब्रैकेट्स लगाए और ब्रैकेट के अंदर मैंने लिख दिया जी कलर जो है वो ग्रीन कर देना ये कैसे इंटेक्स हुआ भैया मैंने कहा अभी समझाते हैं यहां पर जो ये वाट है जो बता रहा है कि किस एलिमेंट के ऊपर स्टाइल करना है इसको देख के मुझे अभी क्या पता लग रहा है मुझे पता लग रहा है कि h1 वाले एलिमेंट को स्टाइल करना है तो ये वाले पार्ट को मैं कहता हूं सिलेक्टर इसके बारे में बात करेंगे अभी चिंता मत करो तो इससे मुझे पता लग रहा है कि मुझे किस एलिमेंट को स्टाइल करना है मेरा टारगेट एलिमेंट क्या है जिसके ऊ स्टाइलिंग अप्लाई करूं ये जो ब्रैकेट्स हैं ये दर्शाते हैं कि भाई इनके अंदर जो भी लिखा हुआ है इनके अंदर जो भी लिखा हुआ है उस सारे पार्ट को आप कंसीडर करेंगे स्टाइलिंग के लिए ठीक है अब यहां यहां पर जो लेफ्ट साइड में लिखा हुआ है इसको आप कहते हैं प्रॉपर्टी कि भाई मेरी टेक्स्ट कलर की प्रॉपर्टी की बात कर रहा हूं और राइट साइड में लिखा हुआ है इसको आप कहते हैं वैल्यू तो इस प्रकार से आप ये स्टाइलिंग कॉन्फिन ऐड करते हैं कि भाई इस एलिमेंट के ऊपर इस प्रॉपर्टी के लिए ये वाली वैल्यू सेट कर दो ठीक है तो आपको कुछ कुछ कुछ समझ में आया किसको कुछ कुछ समझ में आया कैसे चीजें काम कर रही है ठीक है अब एक कंफ्यूजन आती है मन में कि भैया गलती से अगर मैंने यहां पर भी बैकग्राउंड कलर ऐड कर दिया और लेट्स से मैंने यहां पर भी बैकग्राउंड कलर स्टाइल टैग के अंदर ऐड कर दिया होता मैंने कहा कैसे लेट्स से देखो मैंने बोला एक पैराग्राफ है और पैराग्राफ का जो बैकग्राउंड कलर है वो आप मार्क कर दो वो आप मार्क कर दो ब्लू वॉयलेट अब मुझे बताओ कि इस वाले पैराग्राफ के लिए बैकग्राउंड कलर येलो पिक होगा या फिर बैकग्राउंड कलर ब्लू वॉलेट पिक होगा क्योंकि आपने यहां पे सिंपल सा बोला स्टाइल टैग के अंदर कि पैराग्राफ की अब बात कर रहे हैं पैराग्राफ तो ये तीनों के तीनों हैं पर इस वाले के लिए तो बैकग्राउंड कलर येलो ऐड किया हुआ है तो येलो आएगा या ब्लू वायलेट आएगा मैंने कहा चलो देखते हैं नीचे वाले में तो ब्लू वॉलेट आ रहा है पर इसमें येलो ही आ रहा है नीचे वाले में ब्लू वॉलेट क्यों आया क्योंकि नीचे वाला में तो और कोई बैकग्राउंड कलर की प्रॉपर्टी का क्लैश ही नहीं हुआ यहां पे कोई बैकग्राउंड कलर प्रॉपर्टी थी नहीं तो सिंगल ये वाली अप्लाई हो गई अगेन यहां पर भी कोई बैकग्राउंड कलर प्रॉपर्टी अप्लाई की नहीं है तो सिंगल ये वाली अप्लाई हो गई तो नीचे वाले दो में आपका ब्लू वॉलेट कलर आ रहा है ठीक है ये बात समझ में आती है पर यहां पर येलो क्यों आ रहा है तो इससे हमें ये समझ में आता है कि जब भी कंपटीशन होगा कि स्टाइल टैग के अंदर आपने कोई सेम प्रॉपर्टी मेंशन कर रखी है और इनलाइन सीएसएस के अंदर भी आपने कोई सेम प्रॉपर्टी मेंशन कर रख है तो हमेशा जीत किसकी होगी जो भी आपने इनलाइन सीएसएस के अंदर ऐड किया होगा हमेशा वो जीतेगा तो यहां पर कंपटीशन किसका था कि पैराग्राफ में ब्लू वॉलेट बैकग्राउंड बनाओ और पैराग्राफ में येलो बैकग्राउंड बनाओ तो हमने बोला कि भाई इनलाइन सीएसएस जीते ग तो येलो बैकग्राउंड बन गया इस चीज का ध्यान रखना हमेशा ठीक है पर लेट्स से नहीं भैया मेरे को तो यही जिताना है आपका रूल कहता होगा कि इनलाइन सीएस को जिताऊ पर मेरे को तो इसी पैराग्राफ को जिताना है मैंने कहा ये भी हो जाएगा आपको क्या करना है आपको यहां पर जाके इंपॉर्टेंट मार्क करना है आपने लिख दिया एक्सक्लेमेशन मार्क के साथ इंपोर्टेंट अब जो आपका येलो बैकग्राउंड था वो हट जाएगा और ये ब्लू वॉलेट ही लगेगा आपने बोल दिया इंपॉर्टेंट लिख के कि भाई यही बैकग्राउंड कलर ही सुप्रीम है आपको इसको ही अप्लाई करना पड़ेगा जितने भी आपने रूल देखे हुए हैं सारे के सारे रूल भूल जाओ आप बस ये वाला बैकग्राउंड कलर अप्लाई करो ठीक है तो हमने देखा ये भी ब्लू वॉलेट हो गया बढ़िया तो रूल वाइज हमें पता है कि इनलाइन सीएसएस जीतेगी ओवर इंटरनल सीएसएस बट हां इफ वी वांट के इंटरनल सीएसएस को जिताना है जबरदस्ती तो हम इंपॉर्टेंट का यूज कर सकते हैं क्या बात समझ में आती है बहुत बढ़िया ये समझ में आ गया तो इनलाइन सीएसएस की बात हो गई ठीक है और इंटरनल सीएसएस की भी बात हो गई बहुत बढ़िया अब एक्सटर्नल सीएसएस की बात हम करना चाहते हैं मैंने कहा ठीक है तो एक्सटर्नल सीएसएस के लिए मुझे यहां पर एक सीएसएस फाइल क्रिएट करनी पड़ेगी तो मैंने यहां पर एक फाइल क्रिएट कर दी मैंने नाम रख दिया जी इसका नाम बबर ड सीएए ठीक है ऐसा करके मैंने एक फाइल क्रिएट कर दी पर अगेन जब भी मुझे एक्सटर्नल सीएसएस अप्लाई करनी है आई हैव टू मेक श्यर कि मैं दो स्टेप्स फॉलो कर रहा हूं कौन से दो स्टेप्स है वो बात कर लेते हैं फटाफट उनके बारे में तो मैंने कहा जब भी मैं एक्सटर्नल की बात करूंगा दो स्टेप्स मुझे फॉलो करने हैं पहला कि आपको सीएसएस फाइल क्रिएट करनी पड़ेगी आपने एक सीएसएस फाइल क्रिएट कर ली सेकंड आपको लिंक करना पड़ेगा उस सीएसएस फाइल को आपकी एचटीएमएल फाइल के साथ ठीक है तो यह दो स्टेप आपको फॉलो करने पड़ेंगे पहला स्टेप हमने अभी कंप्लीट कर लिया कि भाई ये बड सीएस फाइल हमने कंप्लीट कर ली ठीक है आपको कुछ और नाम देना हो तो आप नाम दे सकते हैं कोई इशू नहीं सेकंड स्टेप क्या है मुझे इसको लिंक करना है तो लिंक करना तो रेडी आपको लास्ट क्लास में सिखाया था मैंने आपने लिखा लिंक और लिंक सीएसएस करके आपने ये लिंक कर दी बस यहां पे नाम चेंज कर देना स्टाइल की जगह आपने क्या लिख दिया बबर ड सीएए बहुत बढ़िया तो इस प्रकार से आपने यह एक्सटर्नल सी सस की फाइल को लिंक कर दिया अपनी एचटीएमएल की फाइल के साथ अगेन ये भी आपको हेड टैक के अंदर ही करना है जैसे आपको लास्ट क्लास में सिखाया था तो आपने यहां पर क्या बोला आपने यहां पर बोला कि h1 टैग की मैं बात कर रहा हूं तो हमने यहां पर फॉन्ट साइज चूज कर लिया ठीक है और फॉन्ट साइज के अंदर मैंने क्या बोल दिया कि भाई स्मॉलर मैंने बहुत स्मॉल कर दिया इसको चेक करते हैं फटाफट तो ये स्मॉल हो गया ठीक है तो इस प्रकार से इस प्रकार से हमने सीखा कैसे मैं एक्सटर्नल सीएसएस का यूज करके भी चेंजेज कर सकता हूं या फिर लेट्स से मैंने यहां पर क्या बोल दिया टेक्स्ट अलाइन मैंने बोल दिया सेंटर तो आपका जो भी टेक्स्ट है उसको सेंटर में अलाइन करो तो इससे क्या हुआ इससे मेरा वेलकम टू कोड हेल्प सेंटर में अलाइन हो गया ठीक है बहुत सारी प्रॉपर्टीज ऐसी होती है जो आपको पता भी नहीं है अभी टेक्स्ट लाइन तो हमें पता ही नहीं था फॉन्ट साइज तो हमें पता ही नहीं याद करना पड़ेगा क्या मैंने कहा नहीं अभी कोड करते करते करते हमें आदत पड़ जाएगी हम सीख जाएंगे इन सारी सारी प्रॉपर्टीज के बारे में ठीक है तो अभी आपने क्या सीखा कि आपने एक एक्सटर्नल फाइल के अंदर सीएसएस अप्लाई कर दी है और आपने सीएसएस फाइल को लाइन नंबर एट पे लिंक कर दिया है और आप अकॉर्डिंग चेंजेज यहां पर यूआई पर देख पा रहे हैं ठीक है ये बात समझ में आती है ठीक है अब फिर से वही डाउट आता है कि मान लो आपने इस वाले में बैकग्राउंड कलर मेंशन किया हुआ है और आपने इंटरनल सीएसएस के अंदर भी मेंशन किया हुआ है और आपने मान लो एक्सटर्नल सीएसएस के अंदर भी बैकग्राउंड कलर मेंशन किया हुआ है पैराग्राफ का तो इस केस में क्या होगा मैंने कहा ट्राई कर लेते हैं तो हमने बो पैराग्राफ ऑफ बैकग्राउंड कलर हमने लेट्स से एक्वा एक्वा कर दिया एक्वा मरीन कर दिया चलो ठीक है तो मेरे पास तीन कलर हो गए ये वाला इनलाइन सीएसएस कहता है कि भाई येलो कलर करना इंटरनल सीएसएस कहता है कि ब्लू वायलेट कलर करना और एक्सटर्नल सीएसएस कहता है कि भाई एक्वा मरीन कलर करना चेक करते हैं यूआई को यूआई पर ब्लू वॉलेट आ रहा है क्यों आ रहा है ब्लू वॉलेट क्योंकि भैया आपने इसको इंपॉर्टेंट मार्क करा हुआ है मैंने कहा चलो ठीक है इंपोर्टेंट हटा देता हूं अब बताओ ये कहता है येलो करो ये कहता है ब्लू वॉलेट करो और ये वाला क्या कहता है ये कहता है कि भाई एक्वा मरीन करो अब चेक करते हैं क्या आ रहा है भैया येलो ही आ रहा है तो हमें क्या पता लगा जीत किसकी हो रही है हमेशा जीत तो भैया येलो की हो रही है तो मैंने कहा चलो ऐसा करो येलो हटा दो फिर देखते हैं कि इनलाइन सीएसएस का तो मुझे पता है कि चलो ये सबसे पास है मेरे ट के तो मैं इनलाइन शे अप्लाई कर दूंगा पर लेट्स से कि ये एजिस्ट नहीं कर रहा होता तब तब क्या होता तब क्या होता लेट्स से मैंने इसको कमेंट कर दिया अब देखते हैं यहां पर क्या होता है अ इस वाले पैराग्राफ की बात कर लेता हूं तीसरे वाले पैराग्राफ की ठीक है तो मैंने बोला कि यहां पर कुछ भी डेड नहीं है आपने बस सीधा-सीधा बोला पैराग्राफ में ब्लू वॉलेट कलर ऐड करो और यहां पे आपने बोला पैराग्राफ के अंदर एक्वा मरीन कलर ऐड करो तो ब्लू वॉलेट और एक्वा मरीन में से कौन जीतेगा हमने बोला कि ब्लू वॉलेट जीत गया क्यों क्योंकि भैया आपका क्या हुआ ये अगर ऑर्डर वाइज अगर हम देखें ऑर्डर वाइज अगर हम देखें सबसे पहले आपने यहां पर चेंज करने की कोशिश की तो कलर हो गया बैकग्राउंड का एक्वा मरीन जैसे आपने सेट किया हुआ है फिर आपने यहां पे सेट करने की कोशिश की तो कलर आपका हो गया ब्लू वॉलेट बट अगर यहां पर मैं इसकी ऑर्डरिंग चेंज कर दूं इसको हटा के अगर मैं नीचे लिख देता तो इसको हटा के अगर नीचे लिखता तो तो ये एक्वा मरीन हो गया तो ऑर्डरिंग वाइज आपका सीएसएस यहां पर चल रहा है कि भाई पहले आपने इसको रन कर दिया तो आपका कलर ब्लू वॉलेट हो गया फिर आपने इसको रन कर दिया तो आपका कलर एक्वा मरीन हो गया इस प्रकार से आपका काम चल रहा है अगेन आपको पता है ऑलरेडी अगर आपको इसको स्पेसिफिकली मार्क करना है कि भाई इसको ही मुझे कलर को यूज करना तो आप वहां पे इंपोर्टेंट का यूज कर सकते हैं ठीक है तो यहां पे कुछ-कुछ चीजें आपने सीखी फटाफट से चलते हैं यहां पे हमने तीनों प्रकार से सीएसएस ऐड करने के तरीके को सीखा दोबारा से एक बार रिवाइज करते हैं कैसे ठीक है अगर नहीं समझ में आया तो अभी आ जाएगा तो हमने बोला कि हम सबसे पहले बात कर रहे थे इनलाइन सीएसएस के बारे में कि इनलाइन सीएसएस क्या होता है तो हमने यहां पे क्या सीखा कुछ भी नहीं है जो भी आपका टैग है जैसे यहां पे कुछ भी आपने टेक्स्ट लिखा हुआ है लोरम इज गुड ऐसा कुछ भी आपने एक टेक्स्ट लिखा हुआ है ठीक है आपका ये पैराग्राफ टैग यहां पर एंड हो गया तो इसके अंदर आप ऐसे स्टाइल का यूज करते हैं स्टाइल प्रॉपर्टी का यूज करते हैं यहां पर आप मेंशन कर देते हैं कि भाई मेरा जो कलर होगा वो रेड होगा या जो भी आप कॉलन का यहां पर यूज कर रहे हैं एक बार देख लेते हैं कॉलन है कि नहीं ठीक है ऑटो ऑटो सजेशन यूज करने का यही शो है हां तो यहां पे आप इक्वल टू साइन का ही यूज कर रहे हैं यहां पर कॉलन का ही यूज कर रहे हैं बढ़िया वापस चलते हैं नास चलते हैं तो हमने कहा कि यहां पर कॉलन और रेड और हमने इस प्रकार से बता दिया तो जब इस प्रकार से आप ऐड करते हैं अपनी स्टाइलिंग कॉन्फिन तो इसको मैं कहता हूं इनलाइन सीएसएस कि आपने एलिमेंट के अंदर ही बता दिया क्या सीएसएस ऐड करनी है सेकंड तरीका मैंने बात करी मैंने बोला इंटरनल सीएसएस इंटरनल सीएसएस के अंदर आप क्या करते हैं इंटरनल सीएसएस के अंदर आप जाते हैं हेड टैग के अंदर और हेड टैग के अंदर आप क्या करते हैं हेड टैग के अंदर आपके पास एक स्टाइल टैग होगा य आप क्रिएट करेंगे और उस स्टाइल टैग के अंदर उस स्टाइल टैग के अंदर आप अपनी प्रॉपर्टी स्पेसिफाई करते हैं कि भाई इस पैराग्राफ के लिए या फिर इस हेडिंग के लिए मैं ये कुछ प्रॉपर्टी ऐड करना चाहता हूं खत्म ठीक है इस प्रकार से आपने अगर ऐड किया है तो इसको मैं क्या कहता हूं इसको मैं कहता हूं इंटरनल सीएसएस ठीक है तो आपको इनलाइन सीएसएस समझ में आती है आप एलिमेंट के अंदर ही सीएसएस ऐड कर रहे हैं आपको इंटरनल सीएसएस समझ में आती है आप अपने स्टाइल टैग के अंदर जो कि हेड टैग के अंदर है उसमें सीएसएस ऐड कर रहे हैं एंड एट दी एंड जो लास्ट तरीका हमने सीखा वो था एक्सटर्नल सीएसएस जहां पे आप किस प्रकार से रिकर्ड कर रहे हैं आपने बोला कि यह रही मेरी एक्सटर्नल सीएसएस और यहां पर मैंने क्या किया मैंने अलग से एक फाइल क्रिएट की डॉट सीएसएस फाइल अलग से क्रिएट की यहां पर मैंने अपना सारा का सारा लॉजिक लिख दिया जो भी प्रॉपर्टी वैल्यू पेयर मुझे ऐड करने हैं ठीक है और मैंने क्या बोला इस सीएसएस फाइल को मैंने अपनी एचटीएमएल फाइल के साथ मैंने अपनी एचटीएमएल फाइल के साथ लिंक कर दिया यूजिंग लिंक टैग ठीक है खत्म आपको जो भी प्रॉपर्टीज मेंशन करनी है आप यहां पे करो जनरली ये वाला तरीका बहुत ज्यादा फॉलो किया जाता है क्योंकि यहां पर सेपरेशन ऑफ कंसर्न मेंटेन है ठीक है सीएसएस की सारी कॉन्फिन आपने अलग रख दी है और एटीएमएल की सारी कॉन्फिन आपने अलग रख दी है आपका सेपरेशन ऑफ कंसर्न वाला प्रिंसिपल यहां पर बिल्कुल बिंदास बैठ रहा है ठीक है जी तो ये तीन तरीके आपने देखे किस प्रकार चीजें ऐड कर सकते हैं और भी चीजें आप अभी एक्सप्लोर करेंगे अभी पहली वीडियो है सीएसएस इसकी तो एकदम से आपको राजा नहीं बना सकते थोड़ा टाइम लगेगा अभी प्रजा बनो थोड़ा सा अभी आगे बढ़ते हैं आगे बढ़ते हैं आगे बढ़ते हुए मैंने क्या बोला अब जो नेक्स्ट टॉपिक हमें स्टडी करना है उसका नाम है सिलेक्टर्स जो अभी थोड़ी देर पहले समझाया था उसी को और इन डेप्थ समझने वाले हैं किस-किस प्रकार से आप एलिमेंट्स को टारगेट कर सकते हैं मैंने बोला सिलेक्टर्स होता क्या है व्हाट इज सिलेक्टर मैंने बोला सिलेक्टर एक ऐसा तरीका है एक ऐसा तरीका है जिसके द्वारा आप किसी भी एचटीएमएल एलिमेंट को टारगेट कर सकते हैं सिलेक्टर एक ऐसा तरीका है जिसके द्वारा किसी भी एचटीएमएल एलिमेंट को टारगेट कर सकते हैं और उसको स्टाइल कर सकते हैं जो भी सीएसएस कॉन्फिन आप उसके ऊपर अप्लाई करना चाहे कर सकते हैं दोबारा समझते हैं सिलेक्टर मेरे पास एक ऐसा तरीका है जिसके द्वारा मैं किसी भी एचटीएमएल एलिमेंट को या मल्टीपल एचटीएमएल एलिमेंट को टारगेट कर सकता हूं और उनके ऊपर अपनी मनचाही सीएसएस को अप्लाई कर सकता हूं मैंने कहा कैसे मैंने कहा मेरे पास यहां पर भी बहुत सारे तरीके हैं मेरे पास यहां पर एलिमेंट सिलेक्टर है जहां पर लेट्स से मैं कुछ टैग स्पेसिफिक टैग्स की बात करें अगर टैग के नाम के आधार पर बेसिकली मैं सिलेक्ट कर सकता हूं टैग्स को एलिमेंट्स को कि पैराग्राफ पकड़ लिया पी टैग का यूज़ करके अ h1 पकड़ लिया h1 टैग का यूज़ करके आर्टिकल पकड़ लिया आर्टिकल टैग का यूज़ करके इनको स्पेसिफिकली स्टाइल कर सकता हूं अभी समझ में अच्छे से आएगा जब कोड करेंगे मेरे पास एलिमेंट सिलेक्टर है मेरे पास आईडी सिलेक्टर है लेट्स से मैंने किसी एलिमेंट के ऊपर आईडी अप्लाई कर रखी है उस आईडी का यूज़ करके कैसे मैं सीएसएस ऐड कर सकता हूं मेरे पास एक क्लास सिलेक्टर है कि मैंने कोई एलिमेंट क्रिएट किया हुआ है उस एलिमेंट को मैंने क्लास असाइन की हुई है कैसे मैं क्लास का यूज़ करके उसमें सीएसएस अप्लाई कर सकता हूं ठीक है और मेरे पास ग्रुप सिलेक्टर भी है ठीक है तो मैं इन चार का यूज करके इन चारों का यूज करके आपके किसी भी एलिमेंट को स्टाइल कर सकता हूं ठीक है तो वन बाय वन समझते हैं एलिमेंट्स का मतलब बेसिकली हम टैग्स का नाम यूज करने वाले हैं मैंने पी का यूज कर लिया h1 का यूज कर लिया मैंने आर्टिकल का यूज कर लिया मैंने सेक्शन का यूज कर लिया मैंने h1 का यूज कर ले तो ऐसे टैग्स का सीधा-सीधा मैं नाम लूंगा ऐसे टैग्स का सीधा-सीधा मैं नाम लूंगा और स्टाइल कर दूंगा इससे क्या होगा मेरे एचटीएमएल डॉक्यूमेंट के अंदर जहां जहां भी पैराग्राफ टैग यूज हुआ है उस हर पैराग्राफ के ऊपर वो स्टाइल कॉन्फिन ऐड हो जाएगी जहां भी मेरे एचटीएल डॉक के अंदर आर्टिकल टैग यूज हुआ है हर आर्टिकल टैग के ऊपर वो स्टाइलिंग कॉन्फिन ऐड हो जाएगी जहां-जहां सेक्शन यूज हुआ है हर सेक्शन के ऊपर वो स्टाइलिंग कॉन्फिन ऐड हो जाएगी समझते हैं कैसे समझते हैं कैसे वैसे समझ में थोड़ा सा आया होगा पर चलो फिर से एक बार समझते हैं तो मैंने क्या किया मैंने अभी के लिए ये सारा का सारा कमेंट कर दिया मैंने अभी के लिए सारा का सारा कमेंट कर दिया कि चलो शुरू से कर रहे हैं और आगे बढ़ते हैं मैंने यहां पर भी कमेंट कर दिया देखो यहां पर कमेंट करने का तरीका एचटीएमएल के अंदर ऐसा होता है अगर सीएसएस की बात करें तो लेट्स से मैंने यहां कुछ बोल दिया हेलो जी और इसको मुझे कमेंट करना है तो अगेन तरीका तो वही है आप इसको सिलेक्ट करके कमांड स्लैश कर द बट हां तरीका थोड़ा सा डिफरेंट है ठीक है ऐसे आप कमेंट ऐड कर सकते हैं बहुत बढ़िया तो कमेंट्स का हमने देख लिया अब हम करना क्या चाहते हैं हम अलग से एक डॉक्यूमेंट दोबारा से क्रिएट कर रहे हैं मैंने फिर से एक बार दोबारा से क्रिएट करने की कोशिश करी मैंने बोला यहां पर मेरे पास आ गया एक एव टैग जहां मैंने बोल दिया वेलकम टू कोड हेल्प 2.2 और मैंने यहां पर टू यूज कर लिया एक पैराग्राफ जहां मैंने बोल दिया लर 50 करके टेक्स्ट है मेरे पास मैं मैंने यहां पर यूज कर लिया एक आर्टिकल जहां मैंने बोल दिया कि मेरे पास लर एम 51 करके टेक्स्ट है अरे ठीक है तो ऐसे करके पैराग्राफ यूज कर लिया ऐसे करके आर्टिकल यूज कर लिया लेट्स से मैंने दो पैराग्राफ और ऐड कर दिए यहां पर ठीक है लेट्स से दो पैराग्राफ और ऐड कर दिए मैंने बोला एक और पैराग्राफ यहां लिख दिया माय नेम इज बबर ठीक है भाई और मैंने यहां पर एक और पैराग्राफ ऐड कर दिया मैंने यहां पर बोल दिया माय नेम इज बबर अल्ट्रा प्रो मैक्स ठीक है तीन पैराग्राफ मैंने यहां पर ऐड कर दिए फटाफट से यूआई पर चेक करते हैं यूआई पर कैसा विजिबल है तो यूआई पर ऐसा कुछ कुछ टेक्स्ट आ रहा है अभी के लिए मैंने क्या किया अभी के लिए मैंने ये पूरा का पूरा कमेंट कर दिया अभी के लिए मैंने पूरा का पूरा कमेंट कर दिया ठीक है और मैंने ये भी कमेंट कर दिया अभी के लिए ठीक है चलो तो अभी क्या आ रहा है मेरा यूआई पे यूआई पे कुछ ऐसा आ रहा है एक मेरे पास हेडिंग आ रही है तीन मेरे पास पैराग्राफ आ रहे हैं और एक मेरे पास आर्टिकल आ रहा है बढ़िया अभी सबसे पहले हम क्या सीखने वाले हैं सबसे पहले हम एलिमेंट सिलेक्टर सीखने वाले हैं जहां पर मैंने आपको बताया कि मैं टैग्स के नाम का यूज करके स्टाइलिंग कर सकता हूं तो मैंने कहा सिंपल है अभी कर देता हूं फटाफट तो मैंने सिंपल सी बात बोली कि मेरे पास यहां पर तीन पैराग्राफ है मैंने बोला मैं हर पैराग्राफ का टेक्स्ट रेड कलर का चाहता हूं जितने पैराग्राफ मुझे दिख रहे हैं मेरे पूरे वेब पेज के अंदर सबका कलर रेड कर दो सिंपल सी बात है मैंने यहां पर क्या किया अभी मैं तुम्हें इंटरनल सीएसएस के द्वारा समझाने की कोशिश कर रहा हूं ठीक है वैसे हम एक्सटर्नल सीएसएस यूज़ करेंगे तो मैंने क्या बोला कि मैंने सिंपल सी बात बोली जितने भी पैराग्राफ है तो p टैग का यूज कर लिया एलिमेंट सिलेक्टर हो गया पी यहां पे एलिमेंट सिलेक्टर का काम कर रहा है इसका मतलब सिर्फ ये है कि जितने भी पी टैग यूज हुए हैं मेरे एटीएमएल डॉक्यूमेंट के अंदर उन सभी की प्रॉपर्टी यहां पर डिफाइन कर रहा हूं तो मैंने बोला p के अंदर मैंने स्पेसिफाई कर दिया कि भाई जो भी मेरा कलर है ना वो हमने मार्क कर कर दिया ब्राउन मार्क कर दिया लेट्स से ठीक है हमने ब्राउन मार्क कर दिया तो देखो सारे पैराग्राफ का कलर ब्राउन हुआ कि नहीं हुआ मैंने चेक किया क्या सभी का कलर ब्राउन हुआ बिल्कुल भैया इस वाले का नहीं हुआ बेटा ये आर्टिकल था ये पैराग्राफ नहीं था ये आर्टिकल है ये तीन पैराग्राफ है हमने खुद डिफाइन किया भूल गए तो इस प्रकार हमने सीखा एलिमेंट सिलेक्टर तो एलिमेंट सिलेक्टर ऐसे आप यूज कर सकते हो ये हो गया आपका सिलेक्टर ये हो गया आपकी प्रॉपर्टी और ये हो गई आपकी वैल्यू ठीक है मेरा गला खराब है कल बोलने वाली हालत भी नहीं थी दैट्ची वीडियो से क र कर लेना भाई तो हमने बोला ठीक है ये मैं एलिमेंट सिलेक्टर में सीख गया अब सीखते हैं सेकंड तरीका अब सीखते हैं सेकंड तरीका मैंने बोला सेकंड जो तरीका मेरे पास है वो है आईडी सिलेक्टर का आईडी सिलेक्टर कैसे काम करता है मैंने कहा बहुत सिंपल है लेट्स से आपने किसी एलिमेंट को आईडी असाइन कर रखी है आपने किसी एलिमेंट को आईडी असाइन कर रखी है ठीक है तो आप उस आईडी का यूज करके उसे स्टाइल कर सकते हैं बस रूल यह रहेगा कि अगर आप आईडी के द्वारा स्टाइल करना चाहते हैं तो आईडी से पहले आप एक हैशटैग का यूज करेंगे तो आपने बोला हैशटैग आईडी क्या है ए स और आप फिर अपनी स्टाइलिंग कॉन्फिन ऐड कर देना तो इसका मतलब क्या हुआ जिस भी एलिमेंट की आईडी ए बी सी है उसके अंदर ये सारी स्टाइलिंग कॉन्फिन ऐड कर दो तो इस पैराग्राफ की आईडी ए बीसी है तो इसके ऊपर ये सारी की सारी स्टाइलिंग कॉन्फिन अप्लाई करेगी तो मैंने कहा कैसे देखो ऐसे मैंने बोला देखो ये रहा आर्टिकल और लेट्स से इसकी आईडी मैंने ऐड कर दी मैंने बोला इसका नाम रख दिया मैंने आर्टिकल आर्टिकल वन ऐसे करके मैंने इसकी आईडी बना दी अब मैं आर्टिकल वन के ऊपर कुछ स्टाइल अप्लाई करना चाहता हूं यूजिंग आईडी सिलेक्टर तो मैंने कहा बहुत आसान है आईडी कॉपी करो आईडी कॉपी करो और आपने यहां पे जाके सिंपल सी बात बोल दी देखो आईडी का यूज करके स्टाइल कर रहे हो हां फिर तो आपको हैशटैग यूज करना पड़ेगा तो हैशटैग लगाया आईडी लगाई और आपने अपने ब्रैकेट्स ऐड कर दिए कि भाई इस प्रकार से अपनी कॉन्फिन यहां पर ऐड करेंगे मैंने बोला क्या करना चाहते हैं आपने बोला कि बैकग्राउंड कलर ग्रीन करना चाहते हैं मैंने कहा कर लो ठीक है तो इस प्रकार आपने बोला कोई भी ऐसा एलिमेंट जिसकी आईडी यहां से आपको हैशटैग से पता लगा कि आईडी की बात हो रही है हैशटैग से आपने ये पता लगा लिया कि आईडी की बात हो रही है तो आपने कोई भी एलिमेंट जिसकी आईडी आर्टिकल वन हो उसमें ये प्रॉपर्टी असाइन कर देना तो मैं फटाफट घूम के गया मैंने देखा कि आईडी तो सिर्फ इसी की हैय आर्टिकल वन ठीक है आईडी सबकी यूनिक ही होगी तो आपने क्या किया इस आर्टिकल के ऊपर आपने बैकग्राउंड कलर ग्रीन लगा दिया चेक कर लेते हैं क्या बैकग्राउंड कलर ग्रीन लग गया हां बिल्कुल लग गया बिल्कुल लग गया बैकग्राउंड कलर ग्रीन तो इस प्रकार से आपका आईडी सिलेक्टर काम कर रहा होता है इस प्रकार से आपका आईडी सिलेक्टर काम कर रहा होता है तीसरे सिलेक्टर की बात करते हैं हम बात कर रहे हैं क्लास सिलेक्टर के बारे में चलो देख लेते हैं एक बार क्लास सिलेक्टर के बारे में तो अगेन बहुत सिंपल है क्लास जो होती है आपको ऑलरेडी मैंने बताया हुआ है कि अगर आप चाहे तो मल्टीपल जैसे आईडी तो है तो आप आईडी एक एलिमेंट की यूनिक आईडी बनाएंगे ठीक है पर बहुत सारे एलिमेंट्स की सेम क्लास हो सकती है बहुत सारे एलिमेंट्स की सेम आईडी नहीं हो सकती पर बहुत सारे एलिमेंट्स की सेम क्लास तो हो सकती है तो मैंने बोला मेरे पास यहां पर तीन पैराग्राफ है पहला दूसरा तीसरा मैंने तीनों को एक क्लास से एक तीनों के अंदर एक क्लास इंसर्ट कर दी मैंने बोला पैरा क्लास तो पैरा क्लास मैंने ऐड कर दी और एक रूल है भाई एक रूल है अगर आप क्लास का यूज करके क्लास सिलेक्टर का यूज करके स्टाइल करना चाहते हैं तो डॉट का यूज करना तो आपने लिखा डॉट फिर जो भी आपका क्लास का नाम आपने रखा है पैरा क्लास और आपने यहां पर अपनी सीएसएस कॉन्फिन अप्लाई कर दी तो इससे क्या हुआ कि जिसकी भी क्लास पैरा क्लास है जो कि इसकी है और इसकी है और इसकी है उन तीनों के अंदर आप ये अप्लाई कर देंगे कॉन्फिन तो मैंने कहा अा ठीक है फटाफट कर लेते हैं इसको भी तो हम यहां पे गए मैंने बोला पैराग्राफ्स के अंदर क्लास साइन करो मैंने बोला जी क्लास दे दी मैंने पैरा क्लास ठीक है और सेम मैंने बोला कि भाई यह जो क्लास है पैरा क्लास ये मैंने बाकी दो पैराग्राफ के अंदर भी इंसर्ट करनी है तो मैंने बाकी दो के अंदर भी इसको इंसर्ट कर दिया तो पैरा क्लास के मेरे पास ये तीन पैराग्राफ्स आ गए ये तीन पैराग्राफ्स आ गए ठीक है तो अगर मैं अब जाके क्लास के द्वारा स्टाइल करने की कोशिश करूं तो मुझे डॉट का यूज करना पड़ेगा डॉट देख के मुझे क्या पता लगता है कि क्लास की बात हो रही है तो मैंने बोला डॉट पैरा क्लास और आपने डॉट पैरा क्लास में क्या बोला कि भाई साहब आपका बैकग्राउंड कलर जो है वो येलो होगा ठीक है सो इस प्रकार से आपने डिफाइन कर दिया कोई भी ऐसी अ एलिमेंट या टैग तुम्हें मिलता है जहां पर क्लास डॉट को देख के पता क्लास कोई भी ऐसा एलिमेंट तुम्हें मिले जहां पर क्लास जो है वो पैरा क्लास डिफाइंड हो वहां पे बैकग्राउंड कलर येलो कर देना तो इन तीनों में क्लास पैरा क्लास डिफाइंड है तो आपने इन तीनों का बैकग्राउंड कलर येलो कर दिया चेक कर लो क्या हुआ बैकग्राउंड कलर येलो बिल्कुल हुआ लेट्स से मैंने तीसरे वाले में से हटा दिया होता तो यहां पर पैरा क्लास सिर्फ इन दोनों पैराग्राफ की है तो इन दोनों के अंदर ही आपका ये येलो कलर अप्लाई होगा तो चेक कर लो सिर्फ इन दोनों के अंदर अप्लाई हो रहा है बहुत बढ़िया तो इस प्रकार से आपको क्लास इलेक्टर के बारे में पता लगा कि जिन जिनन एलिमेंट्स में क्लास डिफाइंड होगी ये पर्टिकुलर क्लास उन सभी के ऊपर ये प्रॉपर्टीज असाइन हो जाएंगी भैया सिर्फ एक ही प्रॉपर्टी असाइन कर सकते हैं मैंने कहा नहीं बहुत सारी कर सकते हैं लेट्स से मैंने इसी को तीन बार कर दिया क्या हुआ कुछ एरर आएगा मैंने कहा नहीं चल रहा है अभी भी चल रहा है कोई इशू नहीं है मैंने कहा लेट से मैंने तीनों प्रॉपर्टीज जो वो डिफरेंट डिफरेंट कर दी मैंने बोल दिया रेड और मैंने बोल दिया एक्वा अब क्या होगा अब कौन सा आएगा भैया देखो पहले येलो बना होगा फिर रेड बना होगा और एक्वा बना होगा तो एटन हमें एक्वा देखने को मिलेगा मैंने कहा चेक करो क्या एक्वा दिख रहा है बिल्कुल सही तो ये सब भी आप कर सकते सते हो पर हां थोड़ा अवॉइड करेंगे इन चीजों को हम ठीक है चलो ये बात समझ में आती है तो एलिमेंट सिलेक्टर समझ में आया आईडी सिलेक्टर समझ में आया क्लास सिलेक्टर समझ में आया अब बात करते हैं ग्रुप सिलेक्टर के बारे में अब बात करते हैं ग्रुप सिलेक्टर के बारे में ठीक है जी तो मैंने क्या किया मैंने बोला कि मुझे पैराग्राफ और आर्टिकल मुझे दोनों को जो है वो स्टाइल करना है ठीक है तो मैंने सिंपल सी बात बोली कि पैराग्राफ कॉमा आर्टिकल कॉमा लगा के हम बेसिकली ग्रुप सिलेक्टर अप्लाई कर सकते हैं मैंने बोला पैराग्राफ कॉमा आर्टिकल तो मैंने बोला जितने भी पैराग्राफ है मेरे एचटीएमएल डॉक के अंदर जितने भी आर्टिकल्स टैग्स हैं एलिमेंट्स हैं मेरे पास एचटीएल डॉक के अंदर उन सभी के लिए मैंने प्रॉपर्टी डिफाइन करी मैंने बोला इन सबकी विड्थ ना आप ऐसा कर दो मैक्स विड्थ आप ऐसे करो इन सब के विड्थ जो है इन सबको विड्थ असाइन कर दो सिर्फ 500 पिक्सल की खत्म तो अब ये एनटायर विड्थ नहीं लेंगे सिर्फ 500 पिक्सल की विड्थ लेंगे चेक करते हैं ठीक है तो ये ध्यान से देखो ये इस पे भी अप्लाई हुआ ये इस पे भी अप्लाई हुआ इस पे भी अप्लाई हुआ इस पे भी अप्लाई हुआ इस पे भी अप्लाई हुआ चारों पे अप्लाई हुआ क्यों क्योंकि आपने बोला कि पैराग्राफ के ऊपर विड्थ 500 पिक्सेल करना तो तो इससे इन तीनों के ऊपर विड्थ 500 पिक्सेल आ गई फिर आपने बोला कि भाई इस आर्टिकल के ऊपर भी 500 पिक्सल करना तो दैट्ची ओवरलैप कर रही है आप दोनों के ऊपर सेम प्रॉपर्टीज अप्लाई करना चाहते हैं तो आप ऐसे ग्रुपिंग कर सकते हैं कॉमा का यूज करके ठीक है ये एक बात समझ में आती है पर लेट्स से मैं इसको थोड़ा और और अच्छे से समझ सकता हूं लेट्स से कि मैं इस पैराग्राफ की इस क्लास की बात कर रहा हूं लेट्स से मैं कोई पैराग्राफ की क्लास स्पेसिफिक क्लास की बात करूं तो मैंने कहा हो जाएगा मैंने कहा हो जाएगा तो सिंपल सी बात करेंगे प डॉट पैरा क्लास पी डॉट पैरा क्लास को अब यहां पर आप स्टाइल कर रहे हैं ठीक है मान लो आपने पैरा क्लास जो है आर्टिकल को भी दे रखी है अब आपको समझ में अच्छे से आएगा लेट्स से आपने ये जो क्लास है पैरा क्लास आर्टिकल को भी दे रखी है पर मैंने क्या बोला मैं किसको स्टाइल कर रहा हूं मैं सिर्फ पी की पैरा क्लास को स्टाइल कर रहा हूं सिर्फ पी की पहरा क्लास को मैं स्टाइल कर रहा हूं और मैंने यहां पे बोला टेक्स्ट अलाइन सेंटर तो इससे क्या होगा इससे सारा टेक्स्ट जो है सेंटर में अलाइन कर गया इससे सारा टेक्स्ट जो है सेंटर में अलाइन कर गया पहले वाले में कर गया दूसरे वाले में कर गया पर हां नीचे वाले दो में नहीं हुआ क्यों क्योंकि भाई देखो पहले वाले में पैराग्राफ था और पैरा क्लास थी तो ये आपने पैराग्राफ और पैरा क्लास के लिए किया है दूसरे वाले में पैराग्राफ था पैरा क्लास थी ये आपने पैराग्राफ और पैरा क्लास के लिए किया ठीक है दोनों में चल गया तीसरे वाले में सिर्फ पैराग्राफ है पैरा क्लास मेंशन नहीं है डैट्समे वाले में ये पैराग्राफ है ही नहीं आर्टिकल है इसलिए इसमें नहीं चला तो अगर आप चाहे तो ऐसे भी एक्सेस कर सकते हैं चीजों को ठीक है थोड़ा सा कंफ्यूजन लग सकता है कि भाई ये कैसे हो रहा है वो कैसे हो रहा है पर हां जितनी प्रैक्टिस आप करोगे उतना क्लियर आपको होता चला जाएगा अभी तक हमने क्या देखा फटाफट से एक बार रिवाइज करते हैं फिर आगे बढ़ेंगे ठीक है अभी हमने सबसे पहले सीखा कि बेटा व्हाट इज सीएसएस हमने बात की कि एचटीएमएल जो होता है हमारा स्ट्रक्चर प्रोवाइड करने के लिए यूज होता है स्केलेटन प्रोवाइड करने के लिए यूज़ होता है डिस्क्रिप्शन प्रोवाइड करने के लिए यूज होता है सिटिक्स प्रोवाइड करने के लिए यूज होता है वैसे ही सीएसएस हमारे पास यहां पर स्टाइलिंग ऐड करनी हो अपीयरेंस में चेंजेज करने हो विजुअली थोड़ा और अपीलिंग बनाना हो अपने वेब पेज को तो मैं सीएसएस का यूज़ करता हूं उसकी फुल फॉर्म क्या होती है के स्केडिंग स्टाइल शीट क स्केडिंग का यहां पर क्या तात्पर्य है आपको समझा दिया है और कौन से चार फैक्टर इंपॉर्टेंट फैक्टर्स होते हैं जिनके द्वारा मैं बताऊंगा कि अगर सेम एलिमेंट के ऊपर मल्टीपल सेम प्रॉपर्टी अप्लाई करके कौन सी वाली चूज करूं तो चार फैक्टर आपको फाइंड आउट करके लाने हैं मुझे बताने कमेंट सेक्शन के अंदर ठीक है आजकल कमेंट बहुत कम आ रहे हैं नींद में हो गया आजकल थोड़ा मेहनत करो भाई यहां पर आदमी का गला खराब है तब भी पढ़ा रहा है पर तुम तुम कमेंट नहीं कर पा रहे हो थोड़ा-थोड़ा ट्राई करो करने का आगे चलते हैं सीएसएस के ऊपर मैंने बोला क्या-क्या तरीके मेरे पास अवेलेबल है सीएसएस अप्लाई करने के हमने बोला इनलाइन सीएसएस जहां पर आप ऐसे स्टाइल एटिबल का यूज करके ऐसे प्रॉपर्टीज डिफाइन कर सकते हैं ठीक है सेकंड की बात करते हैं इंटरनल सीएसएस जहां पे आप हेड टैग के अंदर जाएंगे हेड टैग के अंदर स्टाइल टैग बनाएंगे और स्टाइल टैग के अंदर अपनी प्रॉपर्टीज ऐड करेंगे मैंने कहा बहुत बढ़िया और थर्ड एंड द लास्ट एक्सटर्नल सीएसएस का की बात करेंगे जहां पर मेरे पास दो स्टेप्स हैं पहला स्टेप है कि सीएसएस फाइल क्रिए क्रिएट करो और फिर उस फाइल को लिंक करो एटीएमएल फाइल के साथ वो भी हमने आपको करके दिखा दिया और वहां पर आप इस सीएसएस फाइल के अंदर अपने कॉफिगुड्डा टैग का नाम है उस टैग के स्पेसिफिक नाम को मैं यूज़ करके स्टाइलिंग अप्लाई कर सकता हूं आईडी सिलेक्टर मैं अपने टैग को एक आईडी दूंगा और जब मैं स्टाइलिंग कर रहा हूंगा तो स्टाइलिंग करते उस आईडी से पहले एक हैशटैग लगा दूंगा और कॉन्फ़िगरेशन ऐड कर दूंगा बहुत बढ़िया क्लास सिलेक्टर मैं अपने टैग को एक क्लास दूंगा और जब भी स्टाइल कर रहा हूं स्टाइल करने से पहले एक डॉट लगा दूंगा इसे डॉट पहला क्लास करके और स्टाइल कर दूंगा ग्रुपिंग सिलेक्टर इसके अंदर क्या करेंगे आप मल्टीपल एलिमेंट्स को एक साथ स्टाइल कर सकते हैं यूजिंग कॉमा कॉमा कॉमा लगा के आप मल्टीपल एलिमेंट्स को मल्टीपल टैग्स को एक साथ स्टाइल कर सकते हो ठीक है आप चाहो तो मल्टीपल एलिमेंट्स ऐसे सिंपल सिंपल अ सीधा-सीधा टैग के नाम भी हो सकते हैं आप चाहो तो क्लासेस के नाम भी हो सकते हैं कि भाई आपने बोला p डॉट पैरा क्लास ऐसे भी आप कर सकते हो तो मल्टीपल वेरिएंट्स आपके पास अवेलेबल है अभी अगर तो आपको उतनी भयंकर अंडरस्टैंडिंग नहीं है बेसिक बेसिक आईए तो भी चलेगा जैसे-जैसे आगे बढ़ते जाएंगे और प्रोजेक्ट क्रिएट करते जाएंगे तो आपके अंडरस्टैंडिंग और क्लियर होती चली जाएगी ठीक है तो इस क्लास में इतना ही दोस्त मिलेंगे आपसे नेक्स्ट क्लास के अंदर आई थिंक समझ में चीजें आई होंगी और कृपा करके कमेंट्स करा करें यार बहुत बहुत फर्क पड़ता है उससे मेरे को बहुत ज्यादा फर्क पड़ता है मैं एक्ट नहीं करूंगा कि मेरे को फर्क नहीं पड़ता मेरे को बहुत फर्क पड़ता है तो कृपा करके अगर आपको समझ में आई अगर आपको लगता है कि यार इस बंदे का एफर्ट है वर्थ इट है आपको समझ में आ रहा है आपको थोड़ा सा भी 1 पर भी फायदा हो रहा है तो आपका कमेंट करने में कुछ जाएगा नहीं दोस्त ठीक पर मेरे को बहुत कुछ मिल जाएगा उस कमेंट से धन्यवाद एवरीवन मिलेंगे आपसे आपके नेक्स्ट क्लास के अंदर और अगर अपने दोस्तों को भी बता दोगे कि यहां पर एक वेब डव का कोर्स चल रहा है जो कि समझ में अच्छे से आ रहा है तो इससे मेरी बहुत सहायता होगी और मजा आएगा दोस्त ठीक है साथ-साथ ग्रो करेंगे आप भी ग्रो करो हम भी ग्रो करेंगे इस क्लास में इतना ही मिलेंगे आपसे नेक्स्ट सेशन के अंदर और धन्यवाद बाय बाय गुड नाइट यहां पर हम बात करने वाले हैं बहुत ही बेसिक पर बहुत ही इंपॉर्टेंट कांसेप्ट के बारे में जिसका नाम है फॉट्स एंड कलर्स हम बात करेंगे कैसे आप अपने प्रोजेक्ट के अंदर अपने वेब पेज के अंदर डिफरेंट स्टाइल ऑफ फॉन्ट ऐड कर सकते हैं कैसे आप डिफरेंट फॉन्ट प्रॉपर्टीज में चेंजेज कर सकते हैं क्या-क्या फ्रंट प्रॉपर्टीज एजिस्ट करती हैं क्या-क्या कैपेबिलिटीज आपके पास हैं जो आप अपडेट कर पाएंगे कैसे आप अपने प्रोजेक्ट के अंदर कलर्स ऐड कर सकते हैं क्या-क्या डिफरेंट वेज हैं कलर ऐड करने के क्या लोग ज्यादा यूज करते हैं क्या लोग कम यूज करते हैं और कैसे आप डेवलपर टूल्स का यूज करके अपने प्रोजेक्ट को इनसाइड आउट देख सकते हैं क्या चल रहा है कैसे आप उसे अपडेट कर सकते हैं सो बहुत पावरफुल चीजें आपको आज सिखाने वाले हैं और ये कुछ ऐसे कांसेप्ट है जो कि है तो बहुत बेसिक पर हर एक प्रोजेक्ट के अंदर डेफिनेटली यूज़ होते हैं तो अगर आपके वे बेसिक स्ट्रांग है तो आपका प्रोजेक्ट जब आप बना रहे होंगे तो बहुत कॉन्फिडेंटली बना रहे होंगे ठीक है तो शुरुआत करते हैं विदाउट वेस्टिंग एनी टाइम फटाफट चलते हैं हमारी विजुअल स्टूडियो कोड विंडो पर हम गए यहां पर हमने पे अपना कोड करने के लिए फटाफट से फोल्डर क्रिएट कर लिया लेक्चर नंबर 14 का मैंने कहा लेक्चर 14 अगर आप इस कोर्स के अंदर नए हैं तो आप जा सकते हैं हमारे youtube2 कोर्स की मन स्टैक का यूज़ करके एक प्लेलिस्ट चल रही है आप यहां पर जाकर इसे फॉलो कर सकते हैं अगर आपको सहायता मिल रही है अगर आपको मजा आ रहा है आपको लग रहा है कि सामने वाले की मेहनत वर्थ ट आपको समझ में आ रहा है आपका फायदा हो रहा है तो आप हमारी सहायता कर सकते हैं इन वीडियोस को लाइक करके इन वीडियोस प कमेंट करके और आज का टारगेट इस वीडियो का 1000 कमेंट्स रहने वाला है देखते हैं कितना टाइम में अचीव होगा अचीव तो हो जाएगा ब समय लग सकता है चलो शुरू करते हैं हम आगे लेक्चर नंबर 14 पर यहां पर हमने अपनी फाइल क्रिएट कर दी इसका नाम हमने रख दिया index.htm ठीक है और यहां पे हमने हमारा बॉयलर प्लेट कोड ऐड कर दिया ठीक है बहुत बढ़िया मैंने बोला चलो यहां पे अपना एक हेडिंग ऐड कर देता हूं तो मैंने बोला कि एक हेडिंग ऐड कर दी मैंने और हेडिंग का नाम मैंने रख दिया वेलकम टू कोड हेल्प ठीक है पहला काम डन मैंने यहां पे कुछ पैराग्राफ्स ऐड कर दिए मैंने बोला जी पहला पैराग्राफ ऐड करते हैं रम 20 अ फिर उसके बाद मैं गया मैंने सेकंड पैराग्राफ ऐड किया रम 30 और उसके बाद फिर मैं गया मैंने थर्ड पैराग्राफ ऐड किया रम 40 ठीक है तो मैंने ऐसे तीन पैराग्राफ्स ऐड कर दिए फटाफट से अपने इस वेब पेज को लाइव करते हैं गो लाइव करते हैं लाइव सर्वर का यूज करके तो ऐसा कुछ कुछ मुझे नजर आ रहा है ठीक है तो मेरी हेडिंग ये रही मेरे तीन पैरा यहां पर आ रहे हैं ठीक है बहुत बढ़िया अब सबसे पहले मैं क्या देख रहा हूं कि यहां पे ये कुछ डिफॉल्ट फॉन्ट स्टाइल है जो कि यूज़ हो रहा है ठीक है अगर मैं कुछ भी अपने एंड से मेंशन नहीं कर रहा कि मुझे किस कैसे लुक में मेरा फॉन्ट चाहिए अभी जो फॉन्ट का लुक है ऐसा कुछ-कुछ आ रहा है ठीक है अगर लेट्स से मैं ये लुक चेंज करना चाहता हूं मैं फॉन्ट के लुक की बात कर रहा हूं उसे मैं फॉन्ट स्टाइल कह रहा हूं लेट्स से मैं इस लुक को चेंज करना चाहता हूं कि ये दिख कैसा रहा है मुझे तो उसके लिए मैं क्या कर सकता हूं लेट्स से मैंने बोला कि मैंने पैराग्राफ टैग लिया यहां पे स्टाइल टैग के अंदर अभी इंटरनल सीएसएस का यूज़ कर रहे हैं ठीक है मैंने यहां पैराग्राफ टैग कुछ प्रॉपर्टीज ऐड कर दी मैंने कहा कि यार जिस तरीके से फॉन्ट दिख रहा है ना ये जिस तरीके से मैं इस टेक्स्ट को देख रहा हूं मुझे ये वाला जो लुक है ना इस टेक्स्ट का मजा नहीं आ रहा मुझे इसको चेंज करना है मैंने कहा ठीक है तो हमने क्या बोला मैं फॉन्ट लिखता हूं एक बार और देखो कितनी सारी प्रॉपर्टीज आ गई मेरे पास फॉन्ट की फॉन्ट साइज आ गया फॉन्ट फैमिली आ गई फॉन्ट वेट आ गया फॉन्ट स्टाइल आ गया ठीक है तो मैंने फॉन्ट स्टाइल का यूज कर लिया और मैंने बोला इटैलिक तो अब इसका लुक थोड़ा चेंज हो गया होगा यस और नो क्या लुक चेंज हुआ बिल्कुल सही तो आप ऐसे फॉन्ट स्टाइल का प्रयोग करके इसको भिन्न-भिन्न प्रकार से चेंज कर सकते हैं तो मैंने इसको इटैलिक मार्क कर दिया अभी के लिए ठीक है और देखते हैं कि और क्या-क्या कैपेबिलिटीज है हमारे पास ठीक है अब मैं उतना बेसिक में नहीं जाऊंगा ठीक है अब हम उतना लिखेंगे नहीं हमारे कैनवस के ऊपर अब हम ज्यादा प्रैक्टिकल करेंगे ज्यादा अप्लाई करके सीखने की राह पर चल चुके हैं ठीक है तो अब हमने सीखा कि फॉन्ट स्टाइल कैसे काम कर रहा ऐसे ही मैंने फिर से लिखा फॉन्ट मेरे को दिखा फॉन्ट साइज तो फॉन्ट साइज के अंदर मैंने क्या बोल दिया मैंने बोला फॉन्ट साइज में ऐसा करो इसको आप कर दो 50 पिक्सेल जितना बड़ा अभी पिक्सल क्या होता है बता एंगे तो हमने क्या बोला चेक करते हैं क्या साइज हमारा इंक्रीज हुआ हां देखो कितना बड़ा साइज हो गया तो ऐसे फंट साइज प्रॉपर्टी का यूज करके आप अपने टेक्स्ट को बड़ा कर सकते हैं अभी के लिए मैंने इसको वापस लेट्स से 20 पिक्सेल कर दिया ठीक है तो इतना कर दिया मैंने इसको ठीक है तो अभी हमें एक और चीज समझ में आई फॉन्ट स्टाइल से मैं लेट्स से इसको इटैलिक कर सकता हूं कैसे मेरा फॉन्ट या टेक्स्ट दिख रहा है उसको मैं उसके लुक को चेंज कर सकता हूं अगर मैं उसके साइज को इंक्रीज करना चाहूं तो मैं इसके द्वारा फंट साइज प्रॉपर्टी के द्वारा कर सकता हूं पिक्सल की बात करते हैं ठीक है अब पिक्सल जो है इसको ऐसे समझने की कोशिश करते हैं लेट्स से मैंने बोला अ कि मैं एक कार ड्राइव कर रहा हूं हाईवे पे ठीक है और उसकी एक स्पीड है तो मैं क्या बोलूंगा मेरी कार की स्पीड 20 है ऐसे मजा नहीं आ रहा ना ऐसे बोलूं कि मेरी कार की स्पीड 20 किमी प्रति प्रति प्रति मेरे कार की स्पीड 20 किमी पर आ र है तो अब समझ में आ रहा है यानी एक यूनिट है स्पीड की या फिर मैंने बोला मेरे घर से मेरे कॉलेज का डिस्टेंस 5 किमी है किलोमीटर यहां पर एक यूनिट है राइट मैंने बोला कि मुझे 2 किलो दूध लेकर आना है किलो यहां पर एक यूनिट हो गई वेट की ठीक है सो तो ऐसे ही जब मैं यहां पर बताना चाहता हूं कि मेरा फॉन्ट का साइज कितना बड़ा होना चाहिए तो उसको मैं पिक्सेल की टर्म से बताता हूं जैसे डिस्टेंस को किलोमीटर की टर्म से हमने बताया स्पीड को हमने किलोमीटर पर आर के टर्म में बताया अ वेट को हमने किलोग्राम के टर्म में बताया वैसे ही हम यहां पे फॉन्ट साइज को पिक्सेल के टर्म्स में बताते हैं अगर हम फ फिजिकल पिक्सेल की बात करें तो एक फिजिकल पिक्सेल 1 बा 96 ऑफ एन इंच होता है ठीक है तो चेक कर लेते हैं एक बार फिजिकल पिक्सेल की अ जो 1/6 हम आपको एक फार्मूला बता रहे हैं क्या वो सही है कि नहीं हमने बोला वन फिजिकल पिक्सेल इज इक्वल टू 1 बा 96 ऑफ एन इंच बढ़िया तो 0.26 ममी का आपका एक फिजिकल पिक्सेल होता है ठीक है यहां पर भी दो चीजें होती हैं दोस्त ऐसा नहीं होता कि मैंने यहां पर बोल दिया 1 बा 96 तो 1/6 ही रहने वाला है दो प्रकार से आपके पिक्सेल एजिस्ट करते हैं एक आपका फिजिकल पिक्सेल होता है एक आपका डिजिटल पिक्सेल होता है उनके बारे में हम बात करेंगे प्र बलिए तुम समझ सकते हो कि यहां पर पिक्सेल का क्या मतलब है 1/9 6 ऑफ एन इंच दैट इज 0.26 एए तो आपने 20 को मल्टीप्लाई कर दिया 0.26 एए से जो भी आपका आंसर आएगा उतना बड़ा आपने टेक्स्ट बना दिया उतना बड़ा आपने अपना फॉन्ट क्रिएट कर दिया क्या बात समझ में आती है बहुत बढ़िया तो हमने फॉन्ट स्टाइल बता दिया हमने फॉन्ट का साइज बता दिया और क्या-क्या प्रॉपर्टीज है मेरे पास मैंने बोला फॉन्ट फैमिली करके भी कुछ मेरे पास है तो बहुत सारी फॉन्ट फैमिलीज मेरे पास आ गई लेट्स से हमने ये वाली सुनी हुई है बचपन में राइट टाइम्स न्यू रोमन वाली हमने एमएस वर्ड कभी चलाया होगा बचपन में कभी ना कभी पक्का आप सभी बच्चों ने भी चलाया होगा तो आपने सुना होगा लेट्स से मैंने ये वाली फंट फैमिली यूज़ कर ली इससे क्या हुआ इससे अगेन मेरा लुक चेंज हो गया इससे अगेन मेरा लुक चेंज हो गया चेक करते हैं तो हमने क्या किया हमने बोला कि अभी के लिएना इसको कमेंट कर देता हू हूं अभी के लिए कमेंट कर दिया और इसको मैं अभी के लिए हटा देता हूं देखते हैं कैसा दिख रहा है फिर अभी के लिए ऐसा दिख रहा है ठीक है तो मैंने क्या किया मैंने यहां पर ये मेंशन कर दिया मैंने यहां पर मेंशन कर दिया अभी तो भैया कोई भी चेंज नहीं दिख रहा तो ऐसे करते हैं कुछ ऐसा लेते हैं जहां पर थोड़ा सा चेंज विजिबल हो तो ऐसा कोई फैमिली चूज करते हैं जहां पर चेंज थोड़ा विजिबल हो अभी विजिबल नहीं हो रहा तो हमने ढूंढा ढूंढा कर्सिव ले लेते हैं चलो तो कर्सिव लिया हमने और कर्सिव के बाद हम चेक करने गए क्या मुझे कर्सिव दिख रही है ये फॉन्ट बिल्कुल सही तो इस प्रकार से मैं फंट फैम चूज कर सकता हूं हर एक फॉन्ट फैमिली क्या होती है बेसिकली आपके टेक्स्ट को किस प्रकार से शो करना है हर एक फॉन्ट फैमिली में हर एक लेटर जो है अलग तरीके से लिखा जाता है अलग तरीके का लुक होता है उसका राइट तो इस प्रकार से जैसे ए हम नॉर्मली बाय डिफॉल्ट देखते तो अलग लुक होता बट यहां पे ए देख रहे हैं तो ऐसा लुक आ रहा है तो अगेन मैं अपने टेक्स्ट को कौन सी फॉन्ट फैमिली असाइन करना चाहता हूं वो मैं यहां से डिसाइड कर सकता हूं इस प्रॉपर्टी के द्वारा ठीक है ये बात भी समझ में आती है अब मैं चलता हूं आगे फॉन्ट साइज हो गया फॉन्ट फैमिली हो गया फॉन्ट वेट की बात कर लेते हैं ठीक है अब लेट से फंट वेट को मैंने बोल दिया 900 तो इससे क्या हुआ इससे क्या हुआ इससे मेरा टेक्स्ट थोड़ा सा तुम अगर ध्यान से देखो तो और डार्क हो गया और डार्क हो गया ठीक है और थोड़ा सा ऐसा थिक हो गया राइट तो अगर मैं इसको हटाऊ तो मैं दोबारा से चेंस विजिबल होंगे ठीक है तो अभी के लिए हम क्या करते हैं अभी के लिए हम ऐसा करते हैं इन विंडोज को साथ में लगा देते हैं ताकि थोड़ा सा और क्लेरिटी मिले आपको तो हमने इन विंडोज को साथ में लगा दिया ठीक है और अब ध्यान से देखो अब लेट्स से फंट वेट को मैंने यहां से कट कर दिया तो क्या हो रहा है तो ये टेक्स्ट नॉर्मल हो गया थोड़ा सा अब मैंने इसको वापस लगा दिया तो क्या हुआ ये टेक्स्ट थोड़ा सा थिक हो गया राइट तो फॉन्ट वेट के द्वारा मैं ये ये थिकनेस वगैरह हैंडल कर सकता हूं लेट्स से मैं यहां पे कुछ और वैल्यू इंसर्ट करता हूं मैंने बोला 100 तो इससे क्या हुआ इसे देखो कितना ज्यादा लाइट हो गया ये कितना ज्यादा लाइट हो गया राइट तो इस प्रकार से आप फॉन्ट वेट के द्वारा ये सब हैंडल कर सकते हैं ठीक है जी डिग्री ऑफ ब्लैकने क्या होने वाली है आपके टेक्स्ट की आप यहां से डिसाइड कर सकते हैं या फिर डिग्री ऑफ थिकनेस क्या होने वाली है आप यहां से डिसाइड कर सकते हैं ठीक है इसी के बाद अगर मैं आगे जाऊं मैं फिर से लिखूं फॉन्ट तो और क्या-क्या देख पा रहा हूं मैं हमने फंट साइज देख लिया फैमिली देख लिया वेट देख लिया स्टाइल देख लिया आई थिंक इतना काफी है इसके अलावा एक और चीज हम देख सकते हैं वो होती है लाइन हाइट ठीक है तो हम लाइन हाइट नाम की एक चीज है इसको यूज कर सकते हैं ये डिफाइन करते है कि आपके दो लाइंस के बीच में जहां पर आपका फ्ट रिटर्न है उनके बीच में गैप कितना होना चाहिए तो मैंने बोल दिया दो लाइंस के बीच में गैप आप ले लो अ ऐसा कर लो ये ले लो आप 30 पिक्सल का तो इससे क्या हुआ क्या तुम गैप देख पा रहे हो भै अभी तक तो नहीं दिख रहा मैंने कहा ठीक है तो ऐसा करो इसको ले लो आप 90 पिक्सल का अब क्या देख पा रहे हो दो लाइंस के बीच में गैप कितना बढ़ गया है इन दोनों लाइंस के बीच में गैप कितना बढ़ गया है ठीक है अगर मैं इसी को कम कर दूं लेट्स से 10 पिक्सेल कर लिया तो क्या होगा तो इस प्रकार से गैप बहुत कम हो गया है तो अगर आपको दो लाइंस के बीच में गैप डिफाइन करना तो आप लाइन हाइट प्रॉपर्टी के द्वारा वो गैप डिफाइन कर सकते हैं क्या बात समझ में आती है बहुत बढ़िया तो हमने अभी तक क्या सीखा फॉन्ट स्टाइल सीखा जिसे हम लुक में चेंज कर सकते हैं फॉन्ट के फंट साइज के बारे में बात करी फॉन्ट को बड़ा छोटा कर सकते हैं फंट फैमिली के बारे में बात करी कि एक हर एक एक पर्टिकुलर लेटर को जो रेंडर करने का तरीका होता है हर एक फॉन्ट फैमिली में वो अलग होता है तो आप यहां से वो डिफाइन कर सकते हैं ठीक है जी मैंने बोला फॉन्ट वेट की बात करी डिग्री ऑफ थिकनेस डिग्री ऑफ ब्लैकने की यहां पर आप चेंज कर सकते हैं लाइन हाइट की बात करी दो लाइंस के बीच में कितना गैप होना चाहिए वो हमने यहां पे चेंज कर लिया ठीक है तो ये बात समझ में आती है अगेन ये चीजें आपको याद करने की नीड नहीं है दोस्त ऐसे याद करने की नीड नहीं है ठीक है जैसे जैसे हम आगे बढ़ते जाएंगे तो हमें ये अपने आप चीजें दिमाग में रहेंगी पर लेट्स से मैं भूल जाता हूं मेरा दिमाग कमजोर है तो अभी कोई भी इशू नहीं है है जो डेवलपमेंट होती है यह डीएससी की तरह नहीं होती कि आपको हर चीज पता होनी चाहिए आप यहां पर इंटरनेट का यूज कर सकते हैं ठीक है वैसे ये तो बहुत बेसिक चीजें हैं ये आपको करते करते करते करते अपने आप याद हो जाएंगे ठीक है खुद से करने की एफर्ट मारने की नीड नहीं रटा लगाने की नीड नहीं है बट हां मेरा जो यहां पे क्रक्स पॉइंट जो मैं आपको बताना चाह रहा हूं वो ये है कि जैसे-जैसे हम आगे बढ़ते जाएंगे चीजें अपने आप हमें हमारी ग्रास अच्छी होती चली जाएगी इन चीजों के ऊपर और रेफरेंस हम इंटरनेट का हमेशा ले सकते हैं इंटरनेट को हमेशा हम यूज कर सकते हैं इन चीजों को देखने के लिए कि सिंटेक्स कैसा था ठीक है आज भी अगर मुझे कोई बोले कि पूरा सिंटेक्स याद है कैसे करते हैं नहीं भूल जाता हूं मैं सिंटेक्स आज भी पर कोई इशू है उसमें कोई भी इशू नहीं है रेफरेंस लो इंटरनेट से कोई भी इशू नहीं है डेवलपमेंट है डीए से नहीं है यहां पर आप इंटरनेट का यूज करके अपना प्रोजेक्ट क्रिएट कर सकते हैं कोई भी ऐसा इशू नहीं है क्या बात समझ में आती है चलो बहुत बढ़िया अब यहीं पर फिर दोबारा फंट फैमिली के बारे में बात करते हैं एक बार ठीक है तो मैंने बोला कि यहां पर कुछ फॉन्ट फैमिलीज बाय डिफॉल्ट आ रही है तो ये सारे जो फ्ट्स होते हैं जो यहां पे आप देख पा रहे हो जैसे यहां पे पूरी लिस्ट पूरी की पूरी लिस्ट आ गई राइट तो मैंने यहां पे देखा कि पूरी की पूरी लिस्ट आ गई इस लिस्ट के अंदर देखो 1 2 3 4 पा ऐसे करके पांच मेरे पास फॉन्ट फैमिलीज आ गई राइट तो ये फॉल बैक सिस्टम होता है कि अगर मान लो ये वाला फॉन्ट किसी एक्स वाईजी रीजन से अवेलेबल नहीं है तो आप ये वाली फैमिली यूज़ कर लो अगर मान लो ये वाली फैमिली अवेलेबल नहीं है आप अगली फैमिली यूज़ कर लो ये अवेलेबल नहीं है अगली फैमिली यूज़ कर लो ये अवेलेबल नहीं है अगली फैमिली यूज़ कर लो ठीक है तो इस प्रकार से आप अगली अगली फैमिली यूज कर सकते हैं लेट्स से अगर कोई एक्स वाईज रीजन से आपका फॉन्ट फैमिली अप्लाई नहीं हो पाया है ठीक है इसे कहते हैं फॉल बैक सिस्टम अगेन जो भी आप ये फंट देख पा रहे हैं ठीक है जो आपके ब्राउजर्स के अंदर जो आपके डिवाइसेसपोर्ट वेब सेफ फॉन्ट ठीक है तो यह फॉन्ट जो होता है हमारे अ ब्राउजर्स में यूनिवर्सलीस कर रहा होता है ठीक है तो ये पहले से अवेलेबल होता अवेलेबल होता है हमारे पास पर लेट्स से कि भैया मुझे मजा नहीं आया इस फंट में मुझे अपनी खुद की कोई फॉन्ट फैमिली यूज करनी है ठीक है मुझे कुछ और चाहिए जो लेट्स से अवेलेबल नहीं है मेरे ब्राउजर में पर मुझे पसंद आ गया है तो मैंने कहा ठीक है एक अच्छी वेबसाइट है जो कि बहुत मेजर्ली यूज होती है जिसे हम कहते हैं आपको अभी सिखाने वाले हैं हम ठीक है तो हम आ गए यहां पे यहां पे डिफरेंट प्रकार के फॉन्टस आपको दिख रहे हैं ये देखो फॉन्ट ये देखो फॉन्ट ये फॉन्ट बहुत-बहुत भिन्न-भिन्न प्रकार के फॉन्ट है यहां पे ठीक है अब हमें जो फंट पसंद आ रहा है वो कौन सा फॉन्ट है लेट्स से मुझे ये वाला फॉन्ट पसंद आ गया मैंने इस पे क्लिक कर दिया तो जैसे ही मैंने इस पे क्लिक कर दिया हमने बोला कि अपने को चाहिए यह वाला फंट मैंने प्लस पे क्लिक किया तो मेरे पास यहां पे कुछ डाटा आ गया ठीक है यहां पे ध्यान से देखो तुम्हें एक ये लिंक टैग दिख रहा होगा तुम्हें एकय लिंक टैग दिख रहा होगा मैंने क्या किया मैंने इसे कॉपी कर लिया इसे कॉपी करके मैंने यहां पर पेस्ट कर दिया अपने हेड टैग के अंदर ठीक है तो एक तरीके से मैं कह सकता हूं मैंने इंपोर्ट करवा लिया मेरे एक्सटर्नल फंट को मैं एक तरीके से कह सकता हूं कि मैंने अपने एक्सटर्नल फंट को इंपोर्ट करवा लिया ठीक है यह बात समझ में आती है ठीक है यह बात समझ में आती है अब मैंने क्या बोला कि यहां पर तुम्हें फॉन्ट फैमिली दिख रही है इसको कॉपी कर लो इसको कॉपी करके तुमने यहां से इसको रिप्लेस करवा दिया कि भाई मैं तो दूसरा फंट यूज करूंगा तो फटाफट अपने डॉक्यूमेंट में चलते हैं मैंने यहां पे इसको रिप्लेस करवा दिया मैंने यहां पे इसको रिप्लेस करवा दिया तो क्या हम चेंजेज देख पा रहे हैं क्या हम चेंजेज देख पा रहे हैं बिल्कुल सही तो इस प्रकार से हमने एक एक्सटर्नल फॉन्ट का यूज करना भी सीख लिया प्रोसेस बहुत सिंपल है जाओ google2 ग के अंदर अपनी आपकी फॉन्ट फैमिली वहां पर जनरेट हो जाएगी उससे कॉपी पेस्ट कर दो यहां पे साइल टैग के अंदर या जहां पर भी आपने अपनी सीएसएस राइट डाउन की हुई है ठीक है तो अभी तक हमने क्या सीखा फ्ट्स के अंदर एक बार रिवाइज करवा देता हूं फटाफट हमने सीखा कि यार फॉन्ट स्टाइल कैसे ऐड करते हैं फॉन्ट साइज कैसे ऐड करते हैं फॉन्ट फैमिली कैसे ऐड करते कैसे एक्सटर्नल फट फैमिली आप ऐड कर सकते हो क्या होता है फॉल बैक सिस्टम क्या होते हैं वेब सेफ फंट फंट वेट क्या होता है डिग्री ऑफ डार्कनेस की हम बात कर रहे हैं लाइन हाइट क्या होता है लाइन के बीच गैप की बात कर रहे हैं ठीक है तो ये सब हमने सीख लिया पिक्सल क्या होता है इसके बारे में थोड़ी सी बात कर ली पर हां इन डिटेल हम आगे जाके पढ़ने वाले हैं जितने भी यूनिट्स अवेलेबल है पिक्सल है या ईम है ठीक है उन सार की सारी चीजों के बारे में सारे की सारी यूनिट के बारे में आगे जाके हम पढ़ने वाले हैं पर ठीक है यहां पर हमने कुछ हद तक हमारे पहले पार्ट को कंप्लीट कर लिया जहां पर हम फट्स के बारे में पढ़ने वाले थे ठीक है अब इसके बाद हम कलर्स के बारे में बात करेंगे फिर रैप अप कर देंगे इस क्लास को ठीक है तो हमने पढ़ा कि फंट साइज आप कैसे चेंज कर सकते हैं हमने पढ़ा कि फंट फैमिली कैसे आप बाय डिफॉल्ट वाली जो अवेलेबल फैमिलीज है उनको यूज कर सकते हैं और कैसे आप एक्सटर्नल फैमिलीज को यूज कर सकते हैं हमने पढ़ा कि लाइन हाइट जो है उसको कैसे आप यूज कर सकते हैं हमने पढ़ा कि फंट स्टाइल जो है उसको आप कैसे यूज कर सकते हैं हमने पढ़ा फंट वेट जो है उसको कैसे यूज कर सकते हैं डिग्री ऑफ डार्कनेस लुक में चेंज लाइन के बीच का गैप टेक्स्ट का साइज क्या होने वाला है फंट फैमिली द वे एवरी अल्फाबेट लुक्स डिफाइंड एक पर्टिकुलर फैमिली के अंदर तो आप यहां पे वो ऐड कर रहे हैं ठीक है जी बहुत बढ़िया तो इतना आपने सीख लिया है इतना आपने सीख लिया अब हम बात करने वाले हैं हमारे सेकंड कांसेप्ट के बारे में जो कि है कलर्स कलर्स के बारे में बात करने वाले ठीक है तो डिफरेंट डिफरेंट तरीके हैं मेरे पास है कलर्स ऐड करने के भी लेट्स से मैं कलर्स की बात कर रहा हूं तो यहां पर मेरे पास डिफरेंट तरीके हैं कलर ऐड करने के लिए मैं चाहूं तो मैं नेम कलर्स का यूज कर सकता हूं वाइट ब्राउन ब्लू येलो ऐसे करके मैं चाहूं तो मैं आरजीबी वैल्यू का यूज कर सकता हूं मैं चाहूं तो मैं कोई हेक्साडेसिमल वैल्यू का यूज कर सकता हूं मैं चाहूं तो मैं कोई एचएसएल ह्यूज सैचुरेशन लाइट वैल्यू का यूज कर सकता हूं तो इन चारों तरीके से आपको सिखाएंगे कलर्स कैसे ऐड किए जा सकते हैं अभी के अभी ज्यादा वेट नहीं करना पड़ेगा अभी समझ में आ जाएगा दो मिनट कांसेप्ट है ठीक है तो हम फटाफट गए यहां पे हमने क्या किया हमने इसको कर दिया मैक्सिमाइज और हमने बोला कि भाई साहब आप इसके साथ ऐसे आके मिल जाओ बढ़िया तो इस प्रकार से अभी ऐसा कुछ कुछ दिख रहा है ठीक है सो हमने क्या बोला कि चलो इतना हमने कोड कर लिया कलर्स की हम बातें कर रहे हैं हमने क्या बोला कि इसको एक आईडी देता हूं हमने बोला इसका नाम हो गया आईडी दे दी इसको हमने आईडी फर्स्ट पैरा ठीक है इसको मैंने आईडी क्या दे दी इसको मैंने आईडी दे दी सेकंड पैरा ठीक है और इसको मैंने क्या आईडी दे दी इसको मैंने आईडी दे दी थर्ड पैरा ठीक है ऐसे मैंने तीन पैराग्राफ क्रिएट कर लिए तीन आईडी मैंने बता दी है तो मैंने क्या बोला जो मेरा पहला पैरा है ना उसको मैं स्टाइल करता हूं तो मैंने लिखा फर्स्ट पैरा फर्स्ट प को मैंने यहां पे स्टाइल करने के लिए कह दिया मैंने बोला कलर मुझे ऐड करना है सबसे पहला तरीका कलर ऐड करने का क्या है मैंने बोला कि मैं नेम कलर्स का यूज कर सकता हूं तो मैंने बोला यहां पर कि बैकग्राउंड कलर जो है मेरे पहले पैराग्राफ का उसको मैंने बोल दिया तुम रख दो येलो तो क्या नेम कलर मुझे ऐड करना आ गया भैया ये तो पहले से आता था मैंने कहा फिर दोबारा सीख लिया या फिर मैंने बोला जो मेरा टेक्स्ट का कलर है जो मेरा टेक्स्ट का कलर है उसको आप कर दो ब्राउन तो इस प्रकार से मैंने कलर ऐड करना सीख लिया राइट तो ये नेम कलर का मैं इस प्रकार से करता हूं आपको रेडी सिखा रखा है कुछ नई चीज नहीं थी आपके लिए ठीक है सेकंड मैंने क्या बोला मुझे आरजीबी वैल्यूज का यूज करना है मैंने कहा ठीक है तो सेकंड पैराग्राफ की बात करते हैं मैंने क्या बोला कि सेकंड पैरा को यहां पर लेके आओ यह रहा आपका सेकंड पैरा आपका सेकंड पैरा यहां पर आ गया है और आपने बोला कि यहां पर मैं चाहता हूं कि जो मेरा बैकग्राउंड कलर है उसका आरजीबी वैल्यू असाइन करूं तो आरजीबी वैल्यू मैंने असाइन करी ठीक है अभी मुझे नहीं पता क्या वैल्यू असाइन करो मैंने 00 दे दिया ठीक है तो यहां पर जी जीरो का मतलब क्या है रेड का कॉम्पोनेंट भी जीरो है ग्रीन का कॉम्पोनेंट भी जीरो है ब्लू का कॉम्पोनेंट भी जीरो है सो बेसिकली यहां पर आपकी जो वैल्यूज है वो जीरो से लेकर 255 तक जा सकती है ठीक है और आरजीबी का मतलब है रेड ग्रीन ब्लू और इन तीनों की वैल्यूज को आप ऐसे चेंज कर सकते हैं यहां पर इन तीनों न्यूमेरिक वैल्यूज के द्वारा और अकॉर्डिंग आप कलर क्रिएट कर पाएंगे एग्जांपल के लिए लेट्स से मैं यहां पर ऐसे इसको चेंज कर रहा हूं तो मैं क्या देख पा रहा हूं ऊपर कि आरजीबी की वैल्यू चेंज हो रही है देखो 255 से ऊपर नहीं जा पा रही है 255 से ऊपर आप नहीं जा सकते चाहे कहीं भी चले जाओ ठीक है सो मैंने बोला मुझे थोड़ी सी ब्लू शेड चाहिए ब्लू शेड दे दो दे दो दे दो भाई मिल नहीं रही भैया ब्लू शेड मैंने कहा कोई बात नहीं ऐसा करो यहां पे आते हैं हम आए यहां पे यह आ गए ब्लू शेड अब मैंने बोला थोड़ा लाइट ब्लू चाहिए बढ़िया और लाइट चाहिए बढ़िया तो ये मेरी आरजीबी वैल्यू के र थ लाइट ब्लू कलर क्रिएट कर लिया मैंने r की वैल्यू 100 है ग्रीन की वैल्यू 109 एंड ब्लू की वैल्यू 192 तो ऐसे आरजीबी वैल्यूज के द्वारा भी मैं आरजीबी वैल्यूज के द्वारा भी मैं क्रिएट कर सकता हूं कलर आपने एक र्व करी होगी जब मैंने यहां पे आरजी भी लिखा था मेरे पास एक और सजेशन आया था मेरे पास एक सजेशन और आया था एग्जांपल मैं दिखाता हूं कैसे थर्ड पैरा को स्टाइल करते हैं तो मैंने बोला कि थर्ड पैरा को स्टाइल करते हैं अगेन आरजीबी का यूज करते हैं तो मैंने बोला कि जब मैंने आरजीबी लिखा यहां पर ए भी आया था ये ए का मतलब क्या है ये अल्फा वैल्यू है इससे क्या होता है मैंने कहा देखो यहां पर अगर तुम ध्यान से देखोगे यहां पर अगर तुम ध्यान से देखोगे तुम्हारे पास फिर दोबारा कुछ चार वैल्यूज आ गई तो मैंने बोला कि चार वैल्यूज है कौन सा कलर बन रहा है ब्लैक कलर बन रहा है अगेन यहां पर देखो लेट्स से मैं लाइट ग्रीन की कोई शेड चाहता हूं मैं लाइट ग्रीन की कोई शेड चाहता हूं तो मैंने बोला यह मैं लाइट ग्रीन की कोई शेड में चला गया तो ऐसा कोई कलर बन गया पर यहां पर तो कुछ आ ही नहीं रहा भैया यहां पर तो कलर ही नहीं आ रहा मैंने कहा क्यों क्योंकि आपने अल्फा की वैल्यू को जीरो किया हुआ है अगर मैं अल्फा की वैल्यू को वन कर दूंगा तो तो यहां पर ग्रीन कलर आ गया सो इसका मतलब अल्फा की वैल्यू जो है वो डिसाइड कर रही है वो यह डिसाइड कर रही है कि भाई मेरा जो कलर है उसकी ट्रांसपेरेंसी लेवल कितना मैं रखूं ठीक है अगर लेट्स से मैं यहां पे इसको थोड़ा खेलने की कोशिश करता हूं वैल्यू के साथ ये मेरी अल्फा की वैल्यू है इसको अगर मैं यहां पर देखो बीच में ले आऊ तो यहां पर ग्रीन कलर थोड़ा ट्रांसपेरेंट हो गया थोड़ा लाइट हो गया राइट जैसे अल्फा की वैल्यू के साथ मैं कलर की ट्रांसपेरेंसी को सेट कर सकता हूं तो आरजी बी ए का यूज करके मैंने ये r की वैल्यू है ये ग्रीन की वैल्यू है ये बी की ब्लू की वैल्यू है और ये अल्फा की वैल्यू है तो अकॉर्डिंग अल्फा की वैल्यू को चेंज करके मुझे कितना ट्रांसपेरेंट रखना है अपने कलर को वो मैं डिसाइड कर सकता हूं क्या बात समझ में आती है बहुत बढ़िया तो यह बात हमें समझ में आती है इतना हमने सीख लिया तो अभी तक हमने क्या सीखा कैसे हम नेम कलर्स का यूज़ कर सकते हैं कैसे हम आरजीबी वैल्यूज का यूज़ कर सकते हैं ठीक है अब लेट्स से मैंने यहां पे क्या बोला कि लेट्स से मैं एक और पैराग्राफ क्रिएट कर देता हूं मैं एक और पैराग्राफ क्रिएट कर देता हूं और मैंने इस पैराग्राफ के अंदर लेट्स से कोई क्लास ऐड कर दी मैंने बोला क्लास इज इक्वल्स टू इसका नाम रख दिया फर्स्ट क्लास और यहां पे कुछ वैल्यूज ऐड कर दी मैंने बोला लर एम 25 तो हमने यहां पर ये पैराग्राफ क्रिएट कर लिया इसके क्लास हमने फर्स्ट क्लास सेट कर रखी है फटाफट चलते हैं हमारे स्टाइलिंग पे तो हमने बोला क्लास है तो डॉट का यूज करना पड़ेगा हमने इसका नाम रखा है फर्स्ट क्लास तो हमने बोला इसको मुझे स्टाइल करना है अगेन हमने नेम कलर का यूज़ सीख लिया आरजीबी कलर का यूज़ सीख लिया फटाफट हेक्साडेसिमल वैल्यूज का यूज़ कर लेते हैं हेक्साडेसिमल वैल्यूज कुछ भी नहीं होता अगेन मैं तुम्हें यहां पर दिखा देता हूं कैसे चीजें एजिस्ट करती है यहां पर हेक्साडेसिमल वाले केस के अंदर तो मैंने क्या बोला मैंने बोला हेक्साडेसिमल कलर पिकर ठीक है जी तो हमने यहां पर इसको देख लिया तो तुम क्या ऑब्जर्व कर पा रहे हो अगर ध्यान से इसको देखोगे ज़ूम कर देता हूं यहां पर एक हेक्साडेसिमल वैल्यू आ रही है और तुम जैसे ऐसे इसको चेंज कर रहे हो एक नया कलर क्रिएट होता जा रहा है कलर क्रिएट होता जा रहा है अकॉर्डिंग यहां पर वैल्यूज चेंज होती जा रही है ठीक है तो यहां पे इक्विवेलेंट आरजीबी वैल्यूज भी देख पा रहे हो तुम इक्विवेलेंट यहां पे एचएसएल वैल्यू भी देख पा रहे हो ठीक है यहां पर एचएसएल वैल्यू भी क्रिएट हो रही है और एचएसवी वैल्यू भी क्रिएट हो रही है तो इस प्रकार तुम इस कलर पिगर को यूज करके ऐसे हेक्साडेसिमल वैल्यू क्रिएट कर सकते हो तो फटाफट यहां पर अगर मैं जाऊं और मैं बोलूं कि जो मेरा पैराग्राफ नंबर फोर है जिसका नाम मैंने फर्स्ट क्लास रखा हुआ है इसको अगर मुझे स्टाइल करना है लेट्स से बैकग्राउंड कलर की बात करूं और एक हेक्साडेसिमल वैल्यू की शुरुआत कर दू मुझे यहां पे हैशटैग का यूज करना पड़ता है मैंने बोल दिया एफएफ एफएफ तो इससे क्या हुआ इससे क्या हुआ इससे इसका बैकग्राउंड कलर जो है वो वाइट हो गया इससे इसका बैकग्राउंड कलर वाइट हो गया यहां पर स्टार्टिंग के दो अल्फाबेट जो हैं वो दर्शाते हैं क्या दर्शाते हैं आर कॉम्पोनेंट रेड का कॉम्पोनेंट बीच के दो जो अल्फाबेट हैं वो दर्शाते हैं ग्रीन का कॉम्पोनेंट और लास्ट के दो अल्फाबेट जो है वो दर्शाते हैं ब्लू का कॉम्पोनेंट लेट्स से मैंने यहां पे कुछ भी रैंडम लिख दिया मैं लिख दिया यहां पे एएफ ए और यहां पे लिख दिया 23 तो यहां पे एएफ ए 23 से ऑरेंज कलर जनरेट हो गया मुझे भी नहीं पता था ऑरेंज बनेगा बट इसे रैंडम में मैंने लिख दिया एफएफ यहां पर दर्शा रहा है r का का कॉम्पोनेंट ए दर्शा रहे हैं यहां पे जी का कॉम्पोनेंट और अ 23 दर्शा रहे है यहां पे ब्लू का कॉम्पोनेंट अगेन यहां पर भी मैं इस कलर पिकर के द्वारा अपना कलर जनरेट कर सकता हूं लेट्स से मैंने बोला यहां पे मुझे चाहिए थोड़ा अ ऐसा पिंकिश का शेड चाहिए पर्पल का थोड़ा लाइट पर्पल का शेड चाहिए तो मैंने इस प्रकार से अपनी एक हेक्साडेसिमल वैल्यू जनरेट कर ली जो कि लाइट पर्पल कलर काइंड ऑफ देता है ठीक है तो आप इस प्रकार सीख चुके हैं कैसे हेक्साडेसिमल वैल्यू का कलर भी आप ऐड कर सकते हैं अगेन यहां पर भी भैया हमने एक चीज ऑब्जर्व करी मैंने कहा क्या ये जो वैल्यू यहां पर भी तो है ये ओपेसिटी के लिए सो लेट्स से इसको मैं कम कर दूं तो क्या होगा तो अगेन मेरा कलर लाइट होता चला गया लेट्स से इसको बिल्कुल ज़ीरो कर दूं तो बिल्कुल ज़ीरो करोगे तो कलर एजिस्ट ही नहीं करेगा एकदम लाइट हो चुका होगा ना कलर मैंने कहा बिल्कुल सही बात कर रहे हो तो मैं यहां पे गया और मैंने यहां पे जाके बोला इसको बिल्कुल ज़ीरो कर दो कलर हट चुका होगा कलर हट गया और लेट्स से इसको मैंने बिल्कुल ऊपर कर दिया तो कलर अपनी पीक पे होगा जो भी उसकी पीक वैल्यू है इससे हो क्या रहा है इससे हो क्या रहा है समझने की कोशिश करो लेट्स से मैंने यहां पर इसको मिडल में सेट कर दिया तो मैं क्या देखता हूं कि मेरा कलर जो है उसके अंदर दो डिजिट और ऐड हो गई स्टार्टिंग के दो रेड के हैं 67 जो है ग्रीन का है बी बी जो है वो ब्लू का है और 59 यहां पर अल्फा वैल्यू की तरह ही काम कर रहा है कि मेरे को कलर की ओपेसिटी कलर की ट्रांसपेरेंसी क्या रखनी है ठीक है तो उस प्रकार से आपने हेक्साडेसिमल वैल्यू के द्वारा भी कलर ऐड करना सीख लिया अब बात करते हैं लास्ट तरीके के बारे में एचएसएल ह्यू सैचुरेशन एंड लाइटनेस ह्यू के द्वारा आप बता रहे हैं कलर के बारे में कि रेड का कॉम्पोनेंट क्या लूं ब्लू का कॉम्पोनेंट क्या लूं ग्रीन का कॉम्पोनेंट क्या लूं सैचुरेशन के द्वारा आप थोड़ा सा डार्कनेस के बारे में बता रहे हैं तोब हम बात कर रहे हैं एचएसएल के बारे में पर पर लेट्स से हमें पता ही नहीं एचएसएल होता क्या है तो हम क्या करेंगे डॉक्यूमेंटेशन फॉलो कर लेंगे तो हमने बोला एचएसएल कलर एचएसएल कलर ठीक है यहां पे हम आ ग हमें मिल गया w3 स्कूल्स हमने क्या ऑब्जर्व किया यहां पर भी एक कलर पेकर बना पड़ा है कि अगर h की वैल्यू को मैं यहां पे ऐसे रिवॉल्व कराऊं s की वैल्यू को मैं यहां पर ऐसे पीछे की तरफ ले आऊं राइट और ये लाइटनेस को तो है थोड़ा और कम कर दूं मैं तो ऐसे करके मेरा ये एक कलर बन जाता है जिसकी वैल्यू ऐसी बन रही है एचएसएल 172 27 पर एंड 79 पर ठीक है तो इस प्रकार से आप कलर क्रिएट कर पा रहे हैं एचएसएल का यूज़ करके अगेन एचएसएल का मतलब क्या होता है यहां पे आपका एक व्हील है 0 से 360 तक इसकी वैल्यू जो है वो लाइक करती है जो कलर के बारे में बताती है जो कलर के बारे में बताती है ज जीरो यहां पे रेड को रिफ्लेक्ट करता है 120 यहां पे ग्रीन को रिफ्लेक्ट करता है 240 यहां पे ब्लू को रिफ्लेक्ट करता है ठीक है सैचुरेशन बताता है कि उस कलर की इंटेंसिटी क्या है जो आप कलर यूज करना चाह रहे हैं आपने ह्यू से जो अपना कलर यूज किया है उस कलर की इंटेंसिटी क्या रखी इंटेंसिटी आप जीरो से जीरो से लेके 100% के बीच में कुछ भी लाई कर सकते हैं जो भी आप रखना चाहे रख सकते हैं 100% का मतलब है कि पूरा का पूरा कलर % का मतलब है कि आप हाफ इंटेंसिटी प उसको यूज़ कर रहे हैं 0 पर का मतलब कलर एजिस्ट ही नहीं कर रहा ठीक है और लाइटनेस की बात कर रहे हैं आप कितना लाइट करना चाहते हैं उस कलर को वो भी आप यहां से लाइटनेस के द्वारा कर सकते हैं तो ये भी वैल्यू आपके रो से 100% के अराउंड लाई करेगी 100% का मतलब क्या है कि पूरी की पूरी लाइट आपने यूज कर ली यानी कलर एजिस्ट ही नहीं कर रहा है 0 पर का मतलब क्या है कि आपने बिल्कुल भी लाइट यूज नहीं किया यानी कलर बिल्कुल डार्क हो चुका है तो इस प्रकार से आप क्रिएट कर सकते हैं तो फटाफट से एक बार करके देखते हैं इसे क्रिएट हमने बोला कि एक पैराग्राफ और ऐड करने की नीड पड़ेगी मुझे तो मैंने क्या किया मैंने एक पैराग्राफ ऐड किया रम 40 और इस पैराग्राफ को मैंने नाम दे दिया फोर पैरा तो मैंने आईडी क्रिएट कर ली अ फोर पैरा के नाम से ठीक है तो फोर पैरा को मैंने स्टाइल कर लिया फटाफट से मैं स्टाइलिंग के लिए गया मैंने बोला आईडी है तो हैशटैग का यूज करो और फटाफट स्टाइल करा मैंने बोला बैकग्राउंड कलर जो है ना भाई का वो हम यूज कर रहे हैं एचएसएल वैल्यू तो मैं गया एचएसएल अगेन यहां पर भी तुम एचएसएल के साथ ए वैल्यू देख पा रहे हो राइट तो इसको होमवर्क में लो कि ए वैल्यू यहां पे क्या करती होगी मैं तुम्हें एचएसएल बताता हूं क्या करता है ठीक है तो हमने यहां पे एचएसएल वैल्यू को ऐड किया फटाफट से मैं विंडो थोड़ी सी अपने हिसाब से स्ट्रेच कर लेता हूं ठीक है तो मैंने बोला लास्ट वाला पैराग्राफ है इसको मुझे स्टाइल करना है तो मैंने बोला कि यार लेट्स से मुझे इसके अंदर रेड कॉम्पोनेंट रखना है तो मैंने बोला रेड कॉम्पोनेंट जीरो का मतलब रेड होता है तो मैंने यहां पे लेट्स से अभी जीरो रेड रख लिया सैचुरेशन मैंने बोला 100% इंटेंसिटी चाहिए मुझे रेड की तो लो 100% इंटेंसिटी ले ली रेड की मैंने ठीक है कॉमा लगाना पड़ेगा यहां पे और लेट्स से मैंने बोला लाइटनेस कितनी चाहिए मैंने बोला लाइटनेस 50 पर चाहिए मुझे चलो तो इससे मैंने रेड कलर क्रिएट कर लिया ऐसे ही हमें क्या बताया गया था कि जीरो जो है रेड को दर्शाता 120 ग्रीन को दर्शाता है तो अगर मैं इसको 120 कर लेता तो अगर मैं रो की जगह 120 कर लेता तो तो ये ग्रीन कलर बन गया राइट और ऐसे ही मुझे क्या बताया था 240 ब्लू को दर्शाता है अगेन आपके दिमाग में आ रहा होगा भैया याद करना पड़ेगा क्या कि 240 ये है ग्रीन ये है मैंने कहा मुझे खुद याद नहीं है मुझे खुद याद नहीं है क्या मुझे कोई नुकसान हुआ इससे कोई नुकसान नहीं हुआ ये वैल्यू क्या मैंने यूज़ भी करी आज तक मैंने तो कभी यूज़ नहीं करी हम तो हमेशा कोई हेक्साडेसिमल वैल्यू यूज़ कर रहे होते हैं या फिर कोई अ कलर पिकर का यूज़ कर लेते हैं या फिर कभी में डिफरेंट कलर्स बने होते हैं आप उसको ऐसे देख रहे होते हैं कौन सा कलर करवाऊं मम्मी ये वाला करवाऊं वो वाला करवाऊं हर कलर के नीचे ऐसे ही मान लो एक पैलेट बना पड़ा होगा हर कलर के नीचे उसका कोड लिखा होगा तो वो कोड हेक्साडेसिमल कोड होता है उसको तुम यहां पर ऐड कर सकते हो ठीक है तो सेम हमने बोला कि यहां पर इन वैल्यूज के साथ मैं खेल सकता हूं मैंने इसका नाम रख दिया लेट्स से 140 100% की जगह मैंने लिख दिया यहां पे 80 पर 50 की जगह मैंने यहां पे लिख दिया लेट्स से 30 पर तो इस प्रकार से आपने कलर क्रिएट कर लिया राइट तो ऐसे वैल्यूज के साथ खेल खेल के लेट्स से आप यहां से भी खेलना चाहे तो यहां से भी आप खेल सकते हैं कोई भी इशू नहीं है लेट्स से आपको थोड़ी सी येलो की शेड चाहिए तो येलो की शेड भी यहां पे क्रिएट कर सकते हैं आप गए येलो में यहां पे और येलो में आपने थोड़ा सा डाक डार्कर शेड में जाना है लो बना लिया आपने येलो ठीक है तो इस प्रकार से आपने सीखा नेम कलर का यूज कैसे करें आरजीबी वैल्यूज का यूज कैसे करें ट्रांसपेरेंसी कैसे ऐड करें हेक्साडेसिमल वैल्यूज का यूज कैसे करें और एचएसएल वैल्यूज का यूज कैसे करें मेजॉरिटी केसेस के अंदर आपके दो ही चीजें ज्यादा यूज होती हैं वो होती है आपकी आरजीबी वैल्यूज एंड हेक्साडेसिमल वैल्यूज और जनरली यह देखा जाता है कि आप अपने खुद के कलर्स बना के लाते हैं उनको अपनी कॉन्फिन फाइल के अंदर ऐड करते हैं और उनका आप यूज कर रहे होते हैं और हर एक कलर की आप डिफरेंट डिफरेंट रेंजेस बना रहे होते हैं कि जैसे आपने रेड कलर का अपना खुद का एक वेरिएंट बनाया तो आप उसकी रेंज बना के ला रहे हैं कि एक 100 वेट वाला रेड कलर ये समझाऊ मैं तुम्हें ठीक है हम आगे प्रोजेक्ट क्रिएट करेंगे तब तुम्हें ये समझाऊं अभी बताऊंगा तो कॉम्प्लेक्टेड कर रहे होंगे तो मैं तुम्हें बताऊंगा उसके बारे में बड़ी अच्छी प्रैक्टिस है जो कि इंडस्ट्री इंडस्ट्री लेवल पर फॉलो होती है तो तुम्हें मजा आएगा अभी के लिए नीड नहीं है अभी के लिए जो मैं समझना था उसे रिवाइज करवा देता हूं फटाफट एक बार तो हमने क्या पढ़ा अभी हमने पढ़ा कि फट्स फ फ्ट्स के बारे में और कलर्स के बारे में फ्ट्स के बारे में हमने पढ़ा कि भाई फॉन्ट के साइज को हम अप डाउन कर सकते हैं फंट के लुक को हम अप डाउन कर सकते हैं कि भाई मुझे डिफरेंट कार्टून टाइप का एक फॉन्ट चाहिए तो उसकी एक फैमिली होगी वो फैमिली हमने अटैच कर दी लाइंस के बीच के गैप को हम चेंज कर सकते हैं फॉन्ट स्टाइल इटैलिक करना है इटैलिक में कर सकता हूं फंट वेट डिग्री ऑफ थिकनेस कितना थिक करूं कितना बोल्ड करूं इसके द्वारा डिसाइड कर सकता हूं और कलर ऐड करने के चार तरीके हम देखें नेम के द्वारा कर सकते हो आरजीबी फंक्शन के द्वारा कर सकते हो हेक्साडेसिमल वैल्यू के द्वारा कर सकते हो और एचएसएल फंक्शन के द्वारा भी कर सकते हो हो वर्क में हमने आपको दिया कि एच एस एल ए इस फंक्शन को एक्सप्लोर करो कि ये फंक्शन कैसे काम करता होगा ये बात समझ में आती है तो अभी तक हमने इतना कुछ देखा फटाफट चलते हैं हमारे प्रोजेक्ट के ऊपर जो हमने क्रिएट किया है छोटा सा प्यारा सा इसको हमने मैक्सिमाइज कर लिया और मैंने बोला कि मैं तुम्हें कुछ डेवलपर टूल्स के बारे में बताने वाला था आज राइट तो फटाफट से अगर मैं इसको इंस्पेक्ट एलिमेंट करूं आप जिस भी एलिमेंट को देखना चाहते हैं कि कैसे क्रिएट हुआ होगा या इसके ऊपर कौन सी प्रॉपर्टी अप्लाई कर रही है उसको आप इंस्पेक्ट कर सकते हो तो मैंने क्या किया तो मैंने यह जो अपना येलो वाला पैराग्राफ है इसके ऊपर इंस्पेक्ट कर दिया इससे मेरी ये विंडो ओपन हो गई ठीक है तो इसको मैं थोड़ा स्ट्रेच करना चाहता हूं मैंने इसे स्ट्रेच कर लिया मैंने क्या बोला कि ध्यान से देखो ये मेरा पैराग्राफ कौन सा था फर्स्ट पैरा था तो यहां पर जो हाइलाइटेड पैरा दिख रहा है कौन सा है वो फर्स्ट पैरा ही है लेट्स से मैंने एरो पे क्लिक किया और मैंने बोला मुझे ये थर्ड पैरा देखना है थर्ड पैरा पे क्लिक कर दिया तो हाइलाइटेड पैरा कौन सा आ रहा है थर्ड पैरा आ रहा है तो एटीएमएल कोड आप यहां पे एलिमेंट्स टैब के अंदर देख पा रहे हैं कि देखो इसके अंदर ये पूरा कंटेंट लिखा हुआ है ये इसकी आईडी है बहुत बढ़िया ठीक है कंसोल में अभी कंसोल की बात हम करेंगे जब मैं तुम्हें जावास्क्रिप्ट पढ़ाऊंगा तो कंसोल टैब के बारे में डिस्कस करेंगे कैसे यहां पर मैं कमांड लिख सकता हूं ठीक है तो मैंने यहां पे लेट्स से डॉक्यूमेंट लिख दिया तो यहां पे पूरा तुम्हारा डॉक्यूमेंट जनरेट होके आ गया होगा भाई ये रहा मेरा हेड टैग ये रहा मेरा बॉडी टैग ठीक है तो इसके बारे में बात करेंगे अभी उतना लोड लेने की नीड नहीं है पर हां ठीक है सोर्स के बारे में बात करें तो यहां पर तुम्हारा डॉक्यूमेंट पूरा पूरा आ चुका होगा जो भी हमारा बना पड़ा है जो भी हमने पूरा राइट डाउन किया पूरा का पूरा डॉक्यूमेंट यहां पर है ये तुम्हारे फॉन्ट जो तुमने इंपोर्ट किए थे वो सारे यहां पर आ रहे हैं और नेटवर्क के बात करें तो लेट्स से मैं कोई भी नेटवर्क नेटवर्क रिक्वेस्ट मान रहा हूं तो वो सारी की सारी यहां पर विजिबल होगी ठीक है इनके बारे में बात करेंगे नेटवर्क के बारे में बात करेंगे आगे जाके सोर्स के बारे में भी करेंगे कंसोल के बारे में बात करेंगे और बाकी जितना भी देख पा रहे हो जो भी नीडेड है उनके बारे में आगे बात करेंगे अभी तक हमने जितना भी पढ़ा है पिछले 14 लेक्चर के अंदर हमें सिर्फ एलिमेंट्स वाला टैब देखना है ठीक है यहां मेरा पूरा का पूरा कोड मुझे दिख रहा है और जिस भी पर्टिकुलर पैराग्राफ के ऊपर मैं होवर कर रहा हूं वो पैराग्राफ मुझे यहां पर दिख रहा है जैसे मैंने मान लो अभी मैं क्या करूंगा अभी मैं फटाफट फोर्थ पैरा के ऊपर यानी ये जो येलो फोर पैरा इसकी आईडी थी ये येलो वाला जो आपको ये पैराग्राफ दिख रहा है इसके कोड के ऊपर होवर करूंगा तो ये तुम्हें हाइलाइटेड दिखेगा देखो मैं गया फोर पैरा पैरा पे होवर किया देखो हाइलाइटेड दिख रहा है वहां पे लेफ्ट साइड में वाटन में ये हाईलाइट देखेगा अभी देखना हो रहा है हाईलाइट हो रहा है ये बिल्कुल हो रहा है तो ऐसे तुम देख पा रहे हो अब मैंने क्या बोला मुझे देखना है कि ये फर्स्ट पैरा जो है जो ये फर्स्ट पैरा है इसकी सीएसएस प्रॉपर्टीज क्या-क्या लगी हुई है तो मैं क्या देख पा रहा हूं फर्स्ट पैरा आईडी के ऊपर दो प्रॉपर्टी लगी है बैकग्राउंड कलर येलो है और कलर ब्राउन है मैंने कहा यार मुझे चेंज करना है मैंने येलो पे क्लिक किया मैंने बोला येलो नहीं चाहिए ग्रीन चाहिए ऐसे ग्रीन कर दिया मैंने तो क्या मैं देख पा रहा हूं क्या मैं ऑब्जर्व कर पा रहा हूं यहां पे ग्रीन कलर आ गया बिल्कुल आ गया तो तुम चाहो तो यहां से चेंज कर सकते हो पर इशू ये है कि ये तुम अपनी टेस्टिंग के लिए तो कर सकते हो पर अगर गलती से रीलोड हो गया तो सब कुछ पहले जैसा हो जाएगा इन शॉर्ट लेट्स से मैं तुम्हें ले गया कोड हेल्प की वेबसाइट के ऊपर कि मैं कोड हेल्प की वेबसाइट प लेके चलता हूं अब तुमने बोला कि यहां पर लिखा हुआ है लर्न विद लव यार मुझे तो ये चेंज करना है या फिर ऐसे लिखा हुआ है द अल्टीमेट गाइड टू एस एसडी इंटरव्यूज यार एसडी इंटरव्यू नहीं यूपीएस इंटरव्यूज कर देते हैं तो तुम गए यहां पे तुमने इसे किया इंस्पेक्ट और इंस्पेक्ट करके तुमने क्या बोला यार मुझे ना मुझे क्या करना है ये जो यहां पर एसडी ई लिखा हुआ है ना एसडी ई इसको चेंज करना है तो मैंने देखा कोई हाइलाइटेड यहां पर आ रहा है इसको ओपन करो यहां पर लिखा है लिखा है एसडी ई तो मैंने डबल क्लिक किया और इसको मैंने लिख दिया यूपीएससी और मैंने किया एंटर तो क्या हम यहां पर यूपीएससी इंटरव्यू देख पा रहे हैं हां बिल्कुल देख पा रहे हैं यूपीएससी इंटरव्यू विजिबल हो गया तो इसका मतलब जो भी कोड हेल्प सर्च करेगा सबको यूपीएससी इंटरव्यू दिखेगा अगर ऐसे होने लगता ना बेटा तो तो इंटरनेट की बैंड बच जाती तो ऐसा नहीं होगा ये जो तुमने चेंज किए तुम्हारे ब्राउजर पर तुम्हारी इस विंडो पर ये विजिबल है पर लेट्स से मैं एक नई विंडो पे इसको दोबारा से रीलोड करता हूं दोबारा से इस पर्टिकुलर वेबसाइट को विजिट करता हूं तो क्या मुझे यूपीएससी लिखा हुआ दिख रहा है नहीं नहीं दिख रहा वापस अपनी वाली विंडो पे आता हूं यहां दिख रहा है हां यहां दिख रहा है तो यहां ये तब तक दिख रहा है जब तक तुमने इस टैब को रीलोड नहीं किया जैसे तुम इस टैब को रीलोड कर लोगे ये वापस एचडी इंटरव्यूज बन जाएगा ये वापस एचडी इंटरव्यूज बन जाएगा ठीक है वापस एचडी बन गया समझे तुम चाहो तो ऐसे अपने टेस्टिंग पर्पस के लिए यहां पर ऐसे ऐड कर सकते हो इन टेक्स्ट को तुम यहां पे बहुत सारी सीएसएस भी देख पा रहे हो लेट्स से मैं यहां पे गया मैंने होव किया नप बार के ऊपर और मैंने देखा देखो कितनी सारी सीएस यहां पर लगी पड़ी है राइट तो तुम इसे पूरा का पूरा देखना चाहो तो देख सकते हो ऐसे ही हम बात कर रहे थे हमारे पर्टिकुलर वेब पेज के बारे में तो हम यहां पे चाहे तो टेक्स्ट को चेंज करना चाहे टेक्स्ट को चेंज कर सकते हैं कलर चेंज करना चाहे कलर चेंज कर सकते हैं लेट्स से मैंने बोला कलर को मुझे ब्राउन कलर को अप्लाई नहीं करना है मैंने इसको अनटिक कर दिया अब ब्राउन कलर की जगह वापस बाय डिफॉल्ट ब्लैक कलर बन गया ठीक है तो तुम सारी यहां पर सीएसएस देख पा रहे हो यहां फर्स्ट पैरा के ऊपर सीएसएस लगी हुई है पैराग्राफ टैग के ऊपर सीएसएस लगी हुई है ठीक है तो इस प्रकार से ये तुमने सीएसएस अप्लाई करी है फर्स्ट पैरा वाली और पैराग्राफ वाली यहां पर तुम क्या देख पा रहे हो यूजर एजेंट स्टाइल शीट यहां पर कुछ-कुछ बाय डिफॉल्ट सीएसएस लगी पड़ी है कि डिस्प्ले ऐड की हुई है मार्जिन ऐड किया हुआ है ये हमने नहीं की ये बाय डिफॉल्ट आपके इस ब्राउजर ने ऐड कर दी है ये बाय डिफॉल्ट आपके ब्राउजर ने ऐड कर दी हमने ऐड नहीं की हमारी जो एडेड सीएसएस है वो ये रही index.htm और index.htm 1912 वाली ठीक है ये जो यूजर एजेंट स्टाइल शीट है ये ब्राउजर ने ऐड की हमने नहीं की है बात करते हैं इस बॉक्स के बारे में इस बॉक्स के बारे में हम बात करेंगे जब आपको दो वीडियोस के बाद इसके बारे में डिस्कशन भी हम करेंगे चिंता ना करें पर हां अभी के लिए आपको थोड़ा बहुत समझ में आए कि मैं चाहूं तो मैं किसी भी एलिमेंट को ऐसे सेलेक्ट करके देख सकता हूं कोड वाइज कहां पर एजिस्ट करता है वो ठीक है उसके पर्टिकुलर अटैच सीएसएस प्रॉपर्टीज कौन सी है वो भी मैं यहां पर देख सकता हूं ठीक है तो थोड़ा सा आपको आईडिया दिया है हमने इस चीज के बारे में बहुत यूज़फुल चीज है आगे जाके आपको समझ में आएगा इसके बारे में कैसे इसको डिफरेंटली हम यूज़ कर सकते हैं पर हां मजेदार है अभी के लिए हमने बहुत कुछ सीखा अगेन छोटा सा लेक्चर था फॉट्स के बारे में पढ़ा और कलर्स के बारे में पढ़ा बट हां मज आया होगा और अगर मजा आया होगा तो बिल्कुल शरमाना नहीं है कमेंट करते हुए दोस्त हम सब मेहनत करते हैं आप देख के मेहनत करते हो हम बना के मेहनत करते हैं तो थोड़ा सा मेहनत का फल अगर कमेंट्स के फॉर्म में मिल जाए तो बहुत अच्छा लगेगा हम टारगेट रखते हैं आज आज की वीडियो का 1000 कमेंट्स का अगर हम 1000 कमेंट्स करते हैं तो आपकी नेक्स्ट वीडियो कंसिस्टेंटली कल मिल जाएगी ऐसा कोई मतलब ऐसा कोई ये वो नहीं है कंडीशन वैसे भी मिलेगी पर अगर 1000 होंगे तो मैं शायद आज ही शूट कर लूं उनको कि आज ही बना देता हूं यार बच्चों ने पहली बार में बात मान ली आज ही शूट कर लेता हूं नहीं तो मैं तो ऑन द स्पॉट शूट करके एडिट करके अपलोड करवाता हूं ठीक है सो धन्यवाद एवरीवन मिलेंगे आपसे आपके अगले सेशन के अंदर इस सेशन में इतना ही बाय बाय गुड नाइट आज की क्लास में एक बहुत ही फंडामेंटल एंड इंपोर्टेंट कांसेप्ट हम डिस्कस करने वाले हैं जिसका नाम है बॉक्स मॉडल बहुत सारे माइन्यूट माइन्यूट कांसेप्ट लाइक मार्जिन पैडिट हाइट विड्थ बॉर्डर्स ये सारे के सारे कांसेप्ट हम आज की वीडियो में कवर करने वाले हैं और बहुत ज्यादा ज्ञान इसमें मिलने वाला है फटाफट से शुरू करते हैं विदाउट वेस्टिंग एनी टाइम तो सारी बातें हटाते हैं अभी थ्योरी के बारे बातें बाद में करेंगे मॉक्स मॉडल की बातें बाद में करेंगे सबसे पहले हम समझने वाले हैं बॉर्डर्स के बारे में कि आप बॉर्डर्स कैसे ऐड कर सकते हैं ठीक है तो विदाउट वेस्टिंग एनी टाइम फटाफट से अपने विजल स्टूडियो विंडो पे चलते हैं यहां पे क्रिएट करते हैं एक नया फोल्डर नाम मैंने रख दिया लेक्चर नंबर 15 एंड यहां पर मैंने अपनी html5 क्रिएट कर दी मैंने बोला index.htm एंड यहां पर मेरा बॉयलर प्लेट कोड मैंने ऐड कर दिया है सो फटाफट से यहां पर मैं एक हेडिंग क्रिएट कर देता हूं मैंने कहा जी हेडिंग के अंदर हमने लिख दिया वेलकम टू कोड हेल्प एंड लेट्स से मैंने यहां पे एक पैराग्राफ क्रिएट कर दिया और पैराग्राफ में लिख दिया जी लर एम 40 और लेट्स से एक और पैराग्राफ क्रिएट कर दिया वहां लिख दिया रम 50 और लेट्स से एक और पैराग्राफ क्रिएट कर दिया वहां लिख दिया रम 25 ठीक है तो इस प्रकार से हमने कुछ डमी डाटा क्रिएट कर लिया फटाफट से अपना लाइव सर्वर जो है उसे एक बार क्रिएट करते हैं एक्टिवेट करते हैं यहां पर मेरा यह ऐसा कुछ विंडो में टेक्स्ट आ रहा है यह मेरी हेडिंग हो गई यहां पर मेरे तीन पैराग्राफ्स हो गए ठीक है तो फटाफट से इनको एक बैकग्राउंड कलर असाइन करते हैं थोड़ा सा दिखने में और अच्छा लगेगा यहां पर स्टाइल टैग का यूज़ करते हैं अभी के लिए समझने के लिए इंटरनल सीएसएस का यूज़ कर रहे हैं जैसे-जैसे हम आगे बढ़ते जाएंगे हम एक्सटर्नल सीएस में शिफ्ट कर जाएंगे तो हमने बोला कि लेट्स से यहां पर मैं h1 की बात कर रहा हूं तो मैंने बोला जी इसका नाम मैंने रख दिया h1 h1 के अंदर मैं क्या चाहता हूं h1 का बैक ग्राउंड कलर जो है मैं रखना चाहता हूं एक्वा मरीन ठीक है और ऐसे ही मैंने यहां पर क्लासेस ऐड कर दी कि भाई इस वाले पैराग्राफ का नाम मैंने रख दिया फर्स्ट पैरा ठीक है एंड इसी क्लास को मैंने कॉपी कर दिया और मैंने यहां पर पेस्ट कर दिया और यहां पर पेस्ट कर दिया इसका नाम चेंज कर देते हैं मैंने बोला सेकंड पैरा और मैंने बोल दिया यहां पर इसका नाम थर्ड पैरा ठीक है बहुत बढ़िया अगर लेट्स से मैं फर्स्ट पैरा को यहां पे कुछ कलर असाइन करना चाहूं तो मैंने बोला फर्स्ट प और मैंने यहां बोला बैकग्राउंड कलर और लेट्स से बैकग्राउंड कलर मैं थोड़ा लाइट शेड में देना चाहता हूं तो मैंने बोला कि यह कोई कलर है इसको फटाफट से ऐड कर देते हैं मैंने ऐसे ही यहां पर सेकंड पैरा इंसर्ट किया और सेकंड पैरा के अंदर कुछ बैकग्राउंड कलर ऐड कर दिया मैंने कहा यहां पर हम देना चाहते हैं बेज कलर ठीक है और लास्ट मैंने यहां पर ऐड कर दिया थर्ड पैरा और यहां पर मैं कुछ कलर ऐड करना चाहता हूं कलर के नाम भी तो अजीब से हैं इनके सिंपल कलर नहीं है इनके पास ठीक है सो इस प्रकार से मैंने यहां पर हेडिंग के अंदर पैराग्राफ्स के अंदर सबके अंदर मैंने यहां पर एक कलर ऐड कर दिया है जानबूझ के कलर ऐड किया थाकि थोड़ा डिफरेंशिएबल मैं बॉर्डर ऐड करना चाहता हूं सो लेट्स से मैंने बोला मैं इस वेलकम टू कोड हेल्प वाला जो मेरा टेक्स्ट है इसमें बॉर्डर ऐड करना चाहता हूं ठीक है अ तो बॉर्डर ऐड करने के बारे में देखते हैं मैंने बोला कि यार इस हेडिंग के अंदर मैं बॉर्डर ऐड करना चाहता हूं मैंने लिखा बॉर्डर और मेरे को यहां बहुत सारे ऑप्शन दिख रहे हैं बॉर्डर रेडियस बॉर्डर बॉटम बॉर्डर कलर बॉर्डर टॉप बॉर्डर लेफ्ट विड्थ राइट स्टाइल ठीक है सो मैंने यहां पर क्या बोला मैंने बोला कि बॉर्डर के अंदर हम चाहते हैं कि बॉर्डर का स्टाइल कैसा है तो बॉर्डर का स्टाइल मैंने यहां पर बोल दिया कि यार मेरे को जो चाहिए सॉलिड बॉर्डर चाहिए ठीक है तो मैंने यहां पर सॉलिड बॉर्डर ऐड कर दिया ठीक है पहली बात खत्म हो गई मैंने बोला बॉर्डर और मैंने बोला बॉर्डर जो है उसकी विड्थ कितनी चाहिए मुझे मैंने बोला जी मुझे ऐसा दो पिक्सेल का बॉर्डर चाहिए मैंने ठीक है और मैंने बोला बॉर्डर बॉर्डर कलर कौन सा चाहिए मैंने बोला कलर अपने को चाहिए लेट्स से ब्राउन कलर का बॉर्डर चाहिए ठीक है तो मैंने यहां पर तीन चीजें डिफाइन की मैंने बोला सॉलिड बॉर्डर चाहिए बॉर्डर की विड्थ जो होगी दो पिक्सेल होगी और बॉर्डर का कलर जो होगा ब्राउन होगा तो इससे क्या हुआ इससे अगर मैं देखूं यूआई पर तो क्या मेरा बॉर्डर जनरेट हो चुका है क्या हम ये बॉर्डर देख पा रहे हैं ब्राउन कलर का जो क्रिएट हुआ है हां तो जो हमने अभी तक कोड चेंज किया है उससे यह बॉर्डर हम क्रिएट कर पाए हैं उससे हम ये बॉर्डर क्रिएट कर पाए हैं लेट्स से भैया मैं इतना सारा कोड ही नहीं लिखना चाहता मैं चाहता हूं अ लेट्स से सॉलिड नहीं चाहता मैं कुछ और चाहता हूं तो मैंने कहा ठीक है बाकी ऑप्शन देख लेते हैं एक्सप्लोर कर लेता हूं और क्या ऑप्शन है मेरे पास तो मैंने बोला यहां पर डॉटेड बॉर्डर का ऑप्शन भी है तो मैंने डॉटेड मार्क कर दिया इससे क्या हुआ इससे मेरा बॉर्डर डॉटेड हो गया राइट पर मुझे सॉलिड अच्छा लगता है मैं तो सॉलिड ही यूज करूंगा ठीक है एक डैश भी होता है तो डैश भी अगर आप चाहे तो वो भी देख सकते हैं तो ये डैश बॉर्डर आपका हो तो ऐसे डिफरेंट काइंड ऑफ वेरिएशंस आपके पास एजिस्ट करती है आपको जोन सा भी बॉर्डर अच्छा लगे आप वो यूज कर सकते हैं ठीक है एक शॉर्ट हैंड नोटेशन मेरे पास है शॉर्ट हैंड नोटेशन क्या होती है जहां पर आप एक ही फील्ड के अंदर मल्टीपल वैल्यू स्पेसिफाई कर सकते हैं और बॉर्डर क्रिएट कर पाएंगे तो बॉर्डर की हम शॉर्ट हैंड नोटेशन का यूज कर रहे हैं लेट्स से मैंने इसे कमेंट कर दिया मैंने लिखा बॉर्डर और मैंने लिखा कि सॉलिड ब्राउन फाइ पिक्सल तो इससे ब्राउन कलर का सॉलिड टाइप का पांच पिक्सेल का बॉर्डर जनरेट हो जाएगा चेक कर लेते हैं क्या पांच पिक्सेल का बॉर्डर जनरेट हुआ बिल्कुल हुआ लेट्स से मैंने इसको पांच की जगह कर दिया 15 पिक्सल क्या 15 पिक्सेल का बॉर्डर जनरेट हुआ बिल्कुल हो गया तो इस प्रकार से आपको क्रिएट करना आ गया बॉर्डर कि भैया बॉर्डर कैसे क्रिएट किया जाता है राइट कल को आपसे कोई पूछे कि भाई साहब बॉर्डर क्रिएट करना है तो आपको आसान लगेगा वो ऐसा मुश्किल नहीं लगेगा आप शॉर्ट हैंड नोटेशन का यूज करना चाहे वो यूज कर सकते हैं आप अलग-अलग प्रॉपर्टी को स्पेसिफाई करना चाहे विड्थ क्या है कलर क्या है स्टाइल क्या वो कर सकते हैं राइट तो इस प्रकार से आपने देखा कैसा बॉर्डर ऐड कर सकते हैं आपके पास और भी चॉइस है लेट से यहां पर बॉर्डर लिखूं मैंने खा बॉर्डर रेडियस यहां पे आप एक चीज देख पा रहे हो तो बॉर्डर रेडियस से बेसिकली क्या होता है आप अगर ये जो कॉर्नर्स आप देख रहे हैं यहां पर ये जो कॉर्नर देख रहे ना ये पॉइंटेड है शार्प कॉर्नर्स बने पड़े हैं इनको मैं थोड़ा राउंड करना चाहता हूं इनको गोलाई देना चाहता हूं तो मैंने क्या बोला कि मैंने यहां पर मार्क कर दिया कि भाई पांच पिक्सेल ठीक है तो मैंने पांच पिक्सेल यहां पर ऐड कर दिया चेक करते हैं क्या गोलाई दी हमने बिल्कुल सही तो यहां पर जो पॉइंटेड एजेस थी अब वो गोलाई में कन्वर्ट हो गई है मैं यहां पे वैल्यू और इंक्रीज कर सकता हूं लेट्स से मैंने यहां 50 पिक्सल कर दिया तो ये ज्यादा गोला हो जाएगा देखो हमारा टेक्स्ट भी बाहर निकल गया इस गोले से ठीक है तुम्हें इसकी भी नीड पड़ेगी बहुत ज्यादा आगे जाकर हमने बटंस में इसको बहुत ज्यादा यूज़ करेंगे बॉर्डर रेडियस को पर ठीक है अभी के लिए क्या समझ में आता है बॉर्डर रेडियस का यूज़ करके जो मेरे कॉर्नर्स है उनको मैं राउंडेड कर सकता हूं उनको मैं राउंडेड कर सकता हूं क्या बात समझ में आती है तो मैंने इनको ऐसा राउंडेड करा दिया अभी थोड़े सी कम है थोड़ा सा और इंक्रीज करते हैं इसको मैंने बोला जी यहां पर फाइव पिक्सल कर दो राउंडेड क्रिएट कर दिया ठीक है ये बात समझ में आती है अब मैंने क्या बोला कि यार पर मैं तो ये तो बॉर्डर रेडियस लिखने से सारे के सारे कॉर्नर राउंडेड हो रहे हैं मैं तो सिर्फ एक कॉर्नर करना चाहता हूं मैंने कहा अच्छा जी तो हमने इसको कर दिया कमेंट मैंने कहा जी एक करना चाहते हो तो आ जाओ तो हमने यहां पर क्या बोला बॉर्डर हमने बोला टॉप लेफ्ट को करना चाहते हैं बॉर्डर टॉप लेफ्ट रेडियर टॉप लेफ्ट तो इसको आपने बोला सिर्फ इस वाले को मैं राउंडेड करूंगा बाकी सारा का सारा कॉर्नर रहेगा तो देखो ये वाला राउंडेड हो गया बाकी तीनों के तीनों जो कॉर्नर्स हैं ये वाला हो चाहे ये वाला हो चाहे ये वाला शार्प है सिर्फ ये वाला राउंडेड हुआ है तो आप ऐसे ऐड करना चाहे अलग से तो ऐसे अलग से ऐड भी भी कर सकते हैं और भी ऑप्शन आपके पास यहां पर एजिस्ट करते हैं थोड़ा सा आपको एक्सप्लोर करना पड़ेगा आपका टॉप लेफ्ट है टॉप राइट है बॉटम लेफ्ट है बॉटम राइट है ये सब आप कर सकते हो ठीक है अगेन लेट्स से भैया बॉर्डर मुझे इस प्रकार से ऐड नहीं करना होता और मैंने बोला कि मुझे सिर्फ एक ही डायरेक्शन में बॉर्डर ऐड करना है मैंने बोला कि मुझे सिर्फ एक ही डायरेक्शन में बॉर्डर ऐड करना है लेट से मैं चाहता हूं सिर्फ जो टॉप वाली लाइन है टॉप वाली एज है सिर्फ उसी में बॉर्डर ऐड करूं तो मैंने कहा ये भी पॉसिबल है तो आपने लिख दिया जी बॉर्डर टॉप और यहां पर आपने बता दिया जी सॉलिड और लो और फ पिक्सल तो ऐसा आपने मार्क कर दिया कि सिर्फ मुझे टॉप में बॉर्डर चाहिए तो चेक करते हैं क्या सिर्फ टॉप में बॉर्डर जनरेट हो रहा है बिल्कुल सही बात है लेट्स से इसको टॉप की जगह मैंने बोला था यार टॉप में नहीं चाहिए अपने को अपने को बॉटम में चाहिए और अपने को चाहिए ऐसा ब्लैक कलर का बॉर्डर चाहिए ठीक है तो बॉटम में चाहिए चेक करते हैं क्या बॉटम में आ गया हां बिल्कुल बॉटम में आ गया मैंने बोला बॉटम में नहीं चाहिए अपने को राइट में चाहिए चेक कराओ क्या राइट में बॉर्डर आ गया हां राइट में बॉर्डर आ गया मैंने बोला राइट में नहीं चाहिए अपने को लेफ्ट में चाहिए चेक कराओ क्या लेफ्ट में बॉर्डर आ गया हां लेफ्ट में बॉर्डर आ गया तो इस प्रकार से आपने सीखा कैसे आप ऐसे अलग-अलग प्रॉपर्टीज का यूज करके बॉर्डर डिफाइन कर सकते हैं कैसे आप शॉर्ट हैंड प्रॉपर्टी का यूज करके बॉर्डर डिफाइन कर सकते हैं कैसे आप सिंगल सिंगल एज पे टॉप लेफ्ट बॉटम राइट कहीं पर भी बॉर्डर डिफाइन करना चाहे वहां पर कर सकते हैं कैसे आप बॉर्डर रेडियस ऐड कर सकते हैं और कैसे आप कि स्पेसिफिक स्पेसिफिक कॉर्नर को बॉर्डर रेडियस असाइन करना चाहे तो वो भी आप कर सकते हैं राइट तो ये आप ने कुछ चीजें सीखी बॉर्डर के बारे में और इसके बाद आप थोड़े से कंफर्टेबल हो गए होंगे बॉर्डर को लेके कि हां या ये चीज तो हम कर लेंगे ठीक है सो अभी के लिए मैंने क्या किया अभी के लिए मैंने क्या किया मैंने सब कुछ कमेंट कर दिया ताकि आप बाद में इसको रेफर कर पाए और मैंने सिंपल सी एक चीज बोली कि भाई इसमें एक बॉर्डर ऐड कर दो और मैंने कहा जी वो बॉर्डर क्या होगा हमने बोला जी सॉलिड होगा और ब्लैक होगा और ऐसा तीन पिक्सेल का होगा मैंने कहा ठीक है तो हमने ये बॉर्डर जो है यह सब में ऐड कर दिया यह सब में ऐड कर दिया यह सब में ही ऐड कर दिया हमने अब देखेंगे यूआई पर क्या फर्क पड़ेगा इससे तो हमने इन सभी के अंदर बॉर्डर ऐड कर दिया बहुत बढ़िया मैंने बोला सुंदर तो नहीं लग रहा है ऐसा करो जो बॉर्डर रेडियस है ना आपकी ज बॉर्डर रेडियस है वो भी सब में ऐड कर दो मैंने कहा वो भी सब में ऐड कर दो एक शॉर्टकट तरीका बताया था मैंने डिफरेंट प्लेसेस पे एक साथ कर्सर रन करने का मैं यहां पे बार-बार पेश कर रहा हूं अगर मैं चाहता तो मैं सिंगल शॉर्ट में चार लाइन पर टाइप कर सकता था मुझे बताना वो शॉर्टकट क्या बताया था मैंने कमेंट सेक्शन के अंदर तो फटाफट चेक करते हैं ठीक है अब थोड़ा सुंदर लग रहा है यह चार बॉक्सेस मेरे पास क्रिएट हो गए तो बॉर्डर्स के बारे में मैंने थोड़ा सीख लिया अब मैंने क्या बोला चलो थोड़ा विड्थ के बारे में पढ़ लेते हैं र विड्थ के बारे में थोड़ा सा ज्ञान ले लेते हैं मैंने कहा वेलकम टू कोड पैसा पूरी की पूरी अ विंडो की विड्थ ले रहा है व्यू पोर्ट की पूरी की पूरी विड्थ ले रहा है 100% पर मैं ये चाहता नहीं हूं मैं क्या चाहता हूं मैं चाहता हूं कि यार विड्थ मैं अपने हिसाब से डिफाइन करूं तो मैं गया हाइट के अंदर और मैंने क्या बोला कि भाई विड्थ जो है ना ऐसा करो 500 पिक्सेल ले लो ऐसा करो 500 पिक्सेल ले लो तो इससे क्या हुआ इससे आप देख पा रहे हो इसकी विट 500 पिक्सेल हो गई है तो अगर आप ऐसे चाहो तो अपने एलिमेंट्स की विड्थ को भी आप स्पेसिफाई कर सकते हो क्या ये बात समझ में आती है बहुत बढ़िया ये बात हमें समझ में आ गई मैंने बोला 500 तो ज्यादा लग रही है ऐसा करो और कम करो इसे हमने इसे बोला 400 पिक्सल ले लो यहां पे चेक किया अभी भी ज्यादा लग रही है ऐसा करो और कम करो इसे हमने बोला 300 पिक्सल ले लो अब थोड़ी ठीक लग रही है नहीं थोड़ी ज्यादा करनी पड़ेगी हमने बोला 300 नहीं इसको ऐसा करो 350 पिक्सल ले लो अब दिखाओ अब ठीक लग रही है तो मैंने बोला अगर ऐसे मैं चाहूं तो ऐसे मैं विड्थ भी डिफाइन कर सकता लेट्स से मैंने सभी के अंदर सेम विड डिफाइन कर दी कि भाई सभी के सभी लोग यह विड्थ को फॉलो करेंगे ठीक है तो चेक करते हैं यूआई पर कैसा बन गया ऐसा कुछ कुछ बन गया यूआई पर ठीक है इसको मैं थोड़ा ज़ूम आउट कर लेता हूं अभी 200 पर हमने कर रखा है 175 पे ले आ तो ऐसा करके मेरा यूआ कुछ-कुछ नजर आ रहा है ठीक है ये बात समझ में आती है मैंने बोला ठीक है विड्थ के बारे में थोड़ा सा पता लग गया पर मैं चाहता हूं कोड हेल्प वाले की हाइट थोड़ी सी इंक्रीज हो जाए जैसे ये सारे तो मोटे-मोटे बॉक्सेस बन रहे हैं मोटे-मोटे बॉक्सेस बन रहे हैं पर कोड हेल्प का बॉक्स छोटा है तो मैंने इसमें क्या किया हाइट भी इंक्रीज कर दी मैंने बोला कि हाइट को मैंने असाइन कर दिया अगेन अ 200 पिक्सल लेट्स से मैंने दे दिया तो इससे u आ पर क्या फर्क पड़ेगा ऐसे इसकी हाइट इंक्रीज हो गई तो ये वाला जो बॉक्स है इसकी हाइट मैंने इंक्रीज कर दी राइट तो इस प्रकार से अगर तुम चाहो तो बॉक्सेस की हाइट को इंक्रीज कर सकते हो लेट्स से सेकंड वाला जो बॉक्स है इसको भी मैंने बोल दिया कि इसकी हाइट मुझे 200 पिक्सल चाहिए तो इससे क्या फर्क पड़ेगा मेरे यूआई पर इससे मेरे यूआई पर ये फर्क पड़ेगा यह ऐसे और एक्सटेंड हो गया तो आपको अभी आ चुका है कि कैसे बॉर्डर असाइन करते हैं कैसे हाइट असाइन कर सकते हैं कैसे विड्थ असाइन कर सकते हैं ठीक है हाइट और विड्थ के बारे में जसे और आगे बढ़ते तो और भी हम सीखते रहेंगे पर ठीक है अभी के लिए इतना काफी है आगे हम ब्लॉक इनलाइन एलिमेंट के कंपेरिजन की बातें करेंगे वहां पर डिस्कशन करेंगे हाइट का और विड्थ का पर चलो ठीक है अच्छा और मेरा एक मन कर रहा है कि एक काम और किया जाए तो हमने यहां पर क्या किया मैंने लेट से इस हेडिंग के बाद यहां पर एक स्पैन टैग का यूज कर लिया मैंने बोला स्पैन मैंने बोला स्पैन वेलकम टू बर्स वेब डेब कोर्स मैंने येय स्पैन टैग के अंदर डाल दिया ठीक है और लेट्स से मैंने यहां पर स्पैन टैग को जो है वो कुछ प्रॉपर्टीज भी असाइन कर दी मैंने बोला स्पैन और मैंने बोला जी इसका बैकग्राउंड कलर जो है सेम यह रख दो हमने पेस्ट कर दिया और मैंने क्या बोला कि इसके अंदर भी यही सेम बॉर्डर और बॉर्डर रेडि से ऐड कर देना मैंने कहा ठीक है ये भी ऐड कर देते हैं अब यई प देखते हैं कैसा लग रहा है यूआई प कुछ ऐसा लग रहा है अच्छा अच्छा ठीक है भैया बाकी सबसे अलग है थोड़ा सा अच्छा ऐसा करते हैं जितनी विड्थ हमने कोड हेल्प वाले हाइट h1 टैग को दी थी उतनी ही विड्थ इसको देके देखते हैं तो मैं गया मैंने विड्थ को यहां से कॉपी किया और मैंने विड्थ को यहां पर ऐड किया अच्छा भई इतना पॉज क्यों दे रहे हो सस्पेंस क्यों बना रहे हो ये विड्थ तो ऐड ही नहीं हुई विड्थ से तो कुछ फर्क ही नहीं पड़ा मैंने कहा चलो ठीक है ऐसा करता हूं ये हाइट लेता हूं इस हाइट को यहां पर ऐड कर देता हूं भैया सस्पेंस फिर से बना रहे हो मैंने कहा देखो अरे इससे भी हाइट पे कोई फर्क नहीं पड़ा तो इस पैन टैग के अंदर मैंने कुछ टेक्स्ट डाला है उस पे मैंने कुछ हाइट और कुछ विड्थ असाइन करने की कोशिश की है आपका होमवर्क यह है फाइंड आउट करना कि इस पैन टैग के ऊपर ये हाइट या विड्थ अप्लाई क्यों नहीं हो रही है इस पैन टैग के ऊपर ये हाइट या विड्थ अप्लाई क्यों नहीं हो रही है तो इसको होमवर्क में फाइंड आउट करके लाना ठीक है एक प्यारी सी इंटरेस्टिंग सी प्रॉब्लम मैंने आपको दीी है बहुत बेसिक सी चीज है परट हां फाइंड आउट करके लाना इसको क्या बात समझ में आती है बहुत बढ़िया तो यह हमारा अभी तक का यूआई है ये हमारा अभी तक का यूआई है और मैं वापस से यहां से हाइट हटा देता हूं थोड़ा सा बेकार लग रहा है दिखने में हाइट को मैंने यहां पे कमेंट कर दिया ठीक है तो ऐसा मेरा यूआई नजर आ रहा है चलो ठीक है हमने ट विड्थ के बारे में पढ़ लिया हाइट के बारे में पढ़ लिया स्पैन टैग के अंदर विड्थ और हाइट काम नहीं कर रही है इसके बारे में पढ़ा होमवर्क आपको पकड़ाया बॉर्डर्स के बारे में पढ़ लिया अब बात करते हैं बॉक्स मॉडल के बारे में ठीक है और भी चीजें डिस्कस करेंगे यूनिवर्सल सेक्टर के बारे में बात भी करेंगे मार्जिन के बारे में बात करेंगे पैडिट के बारे में बात करेंगे मजा आएगा पर उससे पहले बॉक्स मॉडल की बातें करते हैं तो यहां पे मैंने क्या देखा कि बॉक्स मॉडल ऐसा कुछ कुछ अंग्रेजी में डिफाइन कर रखा है इन लोगों ने पर हम तो हिंदी पढ़ रहे हैं तो बॉक्स मॉडल की मैंने बात जब करी तो मैंने क्या बोला बॉक्स मॉडल कुछ भी नहीं है नाम थोड़ा फैंसी सा लगता है थोड़ा-थोड़ा सा पर ये सिर्फ इतना कहना चाहता है कि आप कोई भी कंटेंट रेंडर करोगे अपने व्यू पोर्ट पर तो आपका ब्राउजर आपके कंटेंट को चाहे वो टेक्स्ट हो चाहे वो सर्कुलर इमेज हो चाहे चाहे वो ट्रायंगुलर इमेज हो कुछ भी हो आपका ब्राउजर उस कंटेंट को एक रेक्टेंगल के अंदर ही रेंडर करने वाला है जैसे कि यहां पे आप देख पा रहे हो साफ-साफ कि ये आपका कंटेंट है यह वाला आपका कंटेंट है और कंटेंट आप आपका इस रेक्टेंगल बॉक्स के अंदर ही रेंडर हो रहा है नो मैटर आपके कंटेंट की शेप क्या है नो मैटर आपके कंटेंट की शेप क्या है आपका कंटेंट चाहे वो टेक्स्ट हो चाहे वो इमेज हो चाहे वो लोगो हो चाहे वो ग्राफिक्स हो वो एक रेक्टेंगल बॉक्स के अंदर ही रेंडर होगा डिस्प्ले होगा यह पूरा का पूरा जो है आपको ये बॉक्स मॉडल दर्शाया हुआ है तो मैंने क्या बोला जब भी आप डिजाइनिंग की बात करेंगे वेब पेज में जब भी आप सीएसएस की बात करेंगे सीएसएस का यूज करके डिजाइनिंग की बात करेंगे लेआउट की बात करेंगे आपको बॉक्स मॉडल अपने दिमाग में रखना है यू हैव टू कीप इन माइंड अबाउट द बॉक्स मॉडल जब भी आप डिजाइन कर रहे हैं अपने पेज को जब भी आप लेआउट फाइनलाइज कर रहे हैं अपने पेज का आपको अपने दिमाग में बॉक्स मॉडल को बिल्कुल एक्टिवेट रखना है कि हां भाई जो भी चीज मैं रेंडर करवाना चाहता हूं मेरे वेब पेज पर वो एक बॉक्स की फॉर्म में ही होगी वो एक रेक्टेंगल की फॉर्म में ही होने वाली है ज्यादा कुछ भी फैंसी नहीं है फिर से रिपीट करता हूं मैंने सिर्फ इतना बोला आप इस पेज में जाओ इस पेज की अगर बात करूं हर एक चीज एक ट एंगल है हर चीज एक बॉक्स में ही रेंडर हुई है यह एक बॉक्स में रेंडर हुआ है यह एक बॉक्स में रेंडर हुआ है यह एक बॉक्स में रेंडर हुआ है यह एक बॉक्स में रेंडर हुआ है ये इमेज एक बॉक्स में रेंडर हुई है यह ऐड एक बॉक्स में रेंडर हुई है यह वाली ऐड नीचे वाली ऐड भी एक बॉक्स में रेंडर हुई है यह वाली ऐड भी एक बॉक्स में रेंडर हुई है बटन भी बॉक्स में रेंडर हुआ है यह सब कुछ सब कुछ सब कुछ हर चीज एक बॉक्स के अंदर ही रेंडर हुई है तो बॉक्स मॉडल सिर्फ इतना कहता है कि कोई भी कंटेंट तुम मुझसे अपने ब्राउजर पर रडर करवा लो मैं हर हर एक कंटेंट को एक रेक्टेंगल बॉक्स के अंदर ही रेंडर करूंगा डिस्प्ले करूंगा क्या बात समझ में आती है सिर्फ इतना ही अब एक बॉक्स मॉडल के चार पार्ट्स होते हैं अब एक बॉक्स मॉडल के चार पार्ट्स होते हैं उनके बारे में बात करते हैं मैंने बोला एक बॉक्स मॉडल के चार पार्ट हैं फटाफट से उनके बारे में बात करते हैं अभी के लिए मैंने सिर्फ इतना समझा कि भाई साहब किसी भी प्रकार का कंटेंट जो अपने यूआई पर या अपनी ब्राउजर विंडो पर रेंडर करवाना चाहते हैं वो सारा का सारा कंटेंट एक रेक्टेंगल बॉक्स के अंदर ही रेंडर हो रहा होता है ठीक है कोई सर्कुलर बॉक्स नहीं बनने वाला कोई ट्रायंगुलर बॉक्स नहीं बनने वाला कोई भी शेप हो नो मैटर कौन सी शेप आप रेंडर कर रहे हैं सब कुछ एक रेक्टेंगल बॉक्स के अंदर ही रेंडर होगा रेंडर मतलब डिस्प्ले होगा अभी के लिए ठीक है अब इसके अंदर चार पार्ट्स हैं इसके अंदर चार पार्ट्स हैं तो बेसिकली इस बॉक्स के अंदर क्या-क्या होने वाला है मैंने बोला इस बॉक्स के अंदर सबसे पहले तो मेरे पास कंटेंट होने वाला है फिर मेरे पास एक वर्ड है पैडिट पैडिट होने वाली है फिर मेरे पास एक वर्ड है बॉर्डर बॉर्डर होने वाला है और फिर मेरे पास एक वर्ड है मार्जिन मार्जिन होने वाला है तो इसके बारे में बात करते हैं इस इस इस पूरे स्टफ के बारे में बात करते हैं तो मैंने कहा चलो इसे समझने की कोशिश करते हैं बहुत इजी चीज है ठीक है ऐसा कुछ हार्ड नहीं है आसान है जो भी है तो हमने सिंपल सी एक बात करी सबसे पहले मैंने कुछ कंटेंट रखा लेट्स से मैंने बोला मेरा कंटेंट यहां पर पड़ा हुआ है बब्बर सो बब्बर नाम का एक टेक्स्ट है तो मैंने कहा ये मेरा बब्बर नाम का टेक्स्ट है तो यह मेरी लेयर नंबर वन हो गई यह मेरा कंटेंट का बॉक्स हो गया जी यह मेरा कंटेंट का बॉक्स हो गया लेयर नंबर वन हो गई इस लेयर के बाद क्या आता है इस लेयर के बाद पैडिट आती है इस लेयर के बाद पैडिट आती है तो मैंने बोला इस लेयर के बाद जो इतना एरिया ये बन रहा है ये पैडिट का एरिया है इसको मैंने क्या बोल दिया ये मेरी लेयर नंबर टू हो गई इसको मैंने बोल दिया पैडिट कि भाई तुम पैडिट हो इसको मैंने क्या बोल दिया कंटेंट कि भाई तुम कंटेंट हो अब इस लेयर के बाद एक लेयर आती है इस लेयर के बाद यह वाली एक लेयर आती है इस लेयर को मैंने क्या बोला कि भाई यह कौन सी लेयर है यह लेयर है आपकी बॉर्डर कि भाई तुम बॉर्डर हो ठीक है अब इस लेयर के बाद एक लास्ट लेयर और आती है उस लेयर को मैंने क्या बोला मैंने बोला भाई यह वाली लेयर जो है इसको मैंने बोला कि भाई साहब आप मार्जिन हो तो ऐसे चार लेयर्स के अंदर आपका एक बॉक्स रेंडर हो रहा होता है मैं इसको और अच्छे से समझाऊं अभी चिंता ना करें थोड़ा और सुंदरता के साथ इसको समझने की कोशिश करेंगे तो मैंने बोला कि सबसे पहले मेरे पास क्या आ रहा है सबसे पहले मेरे पास एक मेरे पास एक बॉक्स आ रहा है जो कि कंटेंट को दर्शाता है बहुत बढ़िया उसके बाद मेरे पास एक बॉक्स आ रहा है जो कि पैडिट को दर्शाता है मैंने कहा बहुत बढ़िया उसके बाद मेरे पास एक बॉक्स आता है जो कि बटर को दर्शा रहा है मैंने कहा बहुत बढ़िया और उसके बाद मेरे पास एक बॉक्स आ रहा है जो कि मार्ज को दर्शा रहा है मैंने कहा बहुत बढ़िया इस प्रकार से हमने क्या कहा हमने कहा कि यहां पर आपका आएगा कंटेंट इस वाली लेयर के अंदर और यह वाली जो लेयर है इस वाली लेयर को मैंने क्या बोल दिया इसको मैंने बोल दिया यह है आपकी पडि मैंने कहा बहुत बढ़िया उसके बाद मैंने कहा जी यह वाली जो लेयर है इस वाली लेयर को मैंने क्या बोल दिया इसको मैंने कह दिया बॉर्डर बहुत बढ़िया और उसके बाद मैंने क्या बोला जी यह वाली जो लेयर है यह वाली लेयर है आपकी लास्ट लेयर इसको मैंने कह दिया मार्जिन ठीक है यह बात समझ में आती है अब इसको समझने की कोशिश करते हैं कि है क्या चीजें ये सारी की सारी उसे एक बार थोड़ा समझने की कोशिश करते हैं तो मैंने बोला कि अभी के लिए ऐसा करो हेडिंग को कर दो तुम कमेंट कमेंट करने के बाद मैंने बोला लेट्स से कि अभी आप सेकंड वाले पैराग्राफ में से हाइट को भी कमेंट कर दो ठीक है तो अभी मेरा यूआई कैसा दिख रहा है अभी मेरा यूआई ऐसा दिख रहा है और मैंने सिंपल सी एक बात करी कि अभी के लिए मैं ये कह सकता हूं अभी के लिए मैं ये कह सकता हूं कि भाई यहां से लेकर यहां तक ये मेरा क्या है ये मेरा कंटेंट है ठीक है तो पहली लेयर तो मुझे नजर आ रही है जो मैंने पूरा का पूरा टेक्स्ट लिखा हुआ है ये मेरा कंटेंट है अब पैडिट करते हैं कंटेंट बेसिकली आपने जो भी चीज ऐड किया ग्राफिक्स हो चाहे इमेज हो चाहे लोगो हो चाहे टेक्स्ट हो जो भी हो इसे आप कंटेंट कह रहे हैं सेकंड लेयर की बात कर रहे हैं पैडिट की तो ये समझ में तब आएगा जब मैं थोड़ी पडि ऐड करके दिखाऊंगा तो मैंने बोला पडि और मैंने बोला इसको 10 पिक्सेल तो इससे क्या हुआ इससे क्या हुआ अरे स्पेस बना भैया समझ में नहीं आया दोबारा बताना दोबारा बताना मैंने कहा देखो अभी समझ में आएगा तो मैंने बोला अभी मैंने पैडिया अब मैंने पैडिया 20 पिक्सल तो इससे क्या पढ़ रहा है भैया स्पेस बढ़ रहा है इस बॉर्डर के और कंटेंट के बीच का स्पेस बढ़ रहा है मैंने कहा लेट से मैंने इसे कर दिया 50 पिक्सेल अब फिर से भैया इस कंटेंट के इस कंटेंट की जो मैं बात कर रहा हूं इस कंटेंट की मैं बात कर रहा हूं कि इस कंटेंट के बीच में और इस बॉर्डर के बीच में आपका जो यह वाला स्पेस है यह वाला स्पेस है यह वाला स्पेस है यह वाला स्पेस है ये स्पेस इंक्रीज कर रहा है इसी स्पेस को पैडिया रहा हूं मैं तो जो कंटेंट और बॉर्डर के बीच का जो स्पेस है ना उसी को पैडिट क्या कह रहा हूं उसी को पेडिंगटन में आ रही है लेट्स से मैंने इससे 50 की जगह ऐसा 90 पिक्सल कर दिया तो क्या होगा तो और स्पेस बढ़ गया तो मुझे क्या समझ में आया अभी तक मुझे यह समझ में आया कि भाई साहब हमारे पास यह जो कंटेंट है इसे कंटेंट वाला बॉक्स में कहूंगा यह जो है आप आउटलाइन देख पा रहे हैं इसे मैं बॉर्डर कहूंगा इस बॉर्डर के बीच में और कंटेंट के बीच में जो यह स्पेस मुझे नजर आ रहा है इस स्पेस को मैं पडि कह रहा हूं यह बात समझ में आती है तो पैडिट थोड़ी बहुत समझ में आई मुझे कि मेरे पास एक बॉर्डर की लेयर है मेरे पास एक कंटेंट की लेयर है उनके बीच में जो लेयर एजिस्ट करती है वो पैडिया पैडिट जीरो भी हो सकती है पैडिट जीरो भी हो सकती है लेट्स से मैंने यहां पे इसको रीलोड कर दिया और मैंने बोला कि यार पैडिट को ना ऐसा करो जीरो पिक्सेल कर दो तो इससे क्या हुआ ये जीरो पिक्सेल पैडिया गई ठीक है तो इस प्रकार से आपकी पैडिट एजिस्ट करती है अब मैंने यहां पे क्या बोला चलो ठीक है मैंने आपको पैटिंग के बारे में थोड़ा समझा दिया कि दो लेयर्स हैं कंटेंट के लेयर और बॉर्डर के लेयर उनके बीच के लेयर को पैटिंग कहता हूं मैं अब मैंने क्या बोला मैंने बोला मार्जिंस की बात करते हैं अगर लेट्स से अभी ज्यादा एक्सप्लेन करे बिना अगर सिंपल मार्जिन को मैं यहां पे ऐड कर दूं मार्जिन 10 पिक्सल तो क्या देख पा रहे हो क्या देख पा रहे हो ये थोड़ा खिसका भैया ये जो बॉक्स है थोड़ा राइट में खिसका मैंने कहा इसको थोड़ा सा और बढ़ाऊ अगर वैल्यू को 20 पिक्सल अच्छा ओके मैंने बोला इसको कर दूं मैं 60 पिक्सल ओके मैंने बोला इसे मैं कर दूं 90 पिक्सल तो क्या देख पा रहे हो भैया बहुत गैप्स बढ़ रहे हैं मैं मैं यहां पे क्या ऑब्जर्व कर पा रहा हूं मैं यहां पे ये ऑब्जर्व कर पा रहा हूं कि यहां पे कोई गैप था ये ये वाला गैप बढ़ गया यहां पे कोई गैप था ये वाला गैप बढ़ गया यहां पे कोई गैप था ये वाला गैप बढ़ गया और ओबवियसली यहां पर भी बढ़ा हो अगर यहां पे कुछ होता तो आपको विजिबल होता अभी नहीं विजिबल है तो मैंने क्या बोला कि दो बॉक्सेस के बीच में जो गैप है दो बॉक्सेस ये मेरा एक बॉक्स है और ये मेरा एक बॉक्स है दो बॉक्सेस के बीच का जो गैप है दो बॉक्सेस के बीच का जो गैप है इसे मैं मार्जिन कह सकता हूं और जब मैं ऐसे शॉर्ट हैंड प्रॉपर्टी के द्वारा अप्लाई करता हूं मार्जिन तो ये चारों दिशाओं में होता है टॉप में भी होता है राइट में भी होता है बॉटम में भी होता है और लेफ्ट में भी होता है राइट तो ये शॉर्ट हैंड नोटेशन है जब आप ऐसे लिखते हो मार्जिन तो चारों दिशाओं में मार्जिन ऐड होता है जब ऐसे लिखते हो पैडिट तो चारों दिशाओं में पैडिट होती है ठीक है तो ये थोड़ा बहुत समझ में आया अभी वापस चलते हैं हमारे नोट्स पर थोड़ा और समझने की कोशिश करते हैं ठीक है तो मैंने क्या बोला तो मैंने सिंपल सी एक बात करी तो मैंने सिंपल सी एक बात करी कि मान लो मान लो मेरे पास यहां पे कुछ बॉक्सेस हैं कि एक बॉक्स मेरे पास यह रहा एक बॉक्स मेरे पास यह रहा एक बॉक्स मेरे पास यह रहा ठीक है और मैंने बोला कि यहां से यहां तक मेरा कंटेंट है यहां मैंने कंटेंट डाला हुआ है यहां मैंने कंटेंट डाला हुआ है यहां मैंने कंटेंट डाला हुआ ध्यान से देखना मैं तुम्हें पूरा अभी समझाऊ गेम कैसी है तो मैंने सिंपल सी एक चीज बोली मैंने बोला कि यहां पर यह मेरा कंटेंट पड़ा हुआ है ए ठीक है यहां कंटेंट पड़ा है बी यहां कंटेंट पड़ा है सी तो मैंने इस वाले बॉक्स को क्या मार्क कर दिया कंटेंट मार्क कर दिया मैंने यह वाली लाइंस को क्या मार्क कर दिया इनको बॉर्डर बोल दिया मैंने इस वाली लाइन को क्या मार्क कर दिया इसको बॉर्डर बोल दिया मैंने इस वाली लाइन को इसको क्या बोल दिया कि कांट कट बोल दिया मैंने c को क्या बोल दिया कंटेंट बोल दिया मैंने इस लाइंस को क्या बोल दिया इस लाइन की बात करूं चाहे इस लाइन की बात करूं चाहे ये वाली लाइन की बात करो चाहे ये वाली लाइन की बात करो ये सारे के सारे बॉर्डर कहलाएंगे ठीक है अब मैंने क्या बोला कि यार इस कंटेंट के डब्बे में और इस बॉर्डर के डब्बे के बीच में जो ये ग्रीन वाला स्पेस आप देख पा रहे हो जो ये ग्रीन वाला गैप आप देख पा रहे हो ग्रीन वाला गैप क्या है ये बॉर्डर और कंटेंट के बीच में इस गैप को पैडिया हूं मैं इस गैप को पडि कह रहा हूं मैं ये जो बॉर्डर है यह जो कंटेंट है इनके बीच का जो यह गैप है ग्रीन वाला इसको मैं पैट कह रहा हूं इसको मैं पैट कह रहा हूं ये जो कंटेंट है यह जो बॉर्डर है इनके बीच का जो गैप है ये इसे मैं प हैडिंग कह रहा हूं पडि क्लियर हो गई होगी अब ऐसी मैंने बात की मार्जिन की तो मैं यहां पर क्या कह सकता हूं मैं यहां पर क्या कह सकता हूं लेट्स से जो मेरी विंडो है लेट्स से जो मेरी विंडो है वो ऐसी है लेट्स से कि मेरे कंप्यूटर स्क्रीन पर ये तीन बॉक्सेस ऐसे आ रहे हैं ठीक है ऐसे आ रहे हैं तो मैंने सिंपल सी एक बात करी मैंने बोला यहां से यहां तक का जो ये आप देख पा रहे हैं डिस्टेंस यहां से यहां तक का डिस्टेंस इसे मैं क्या कह सकता हूं इसे मैं कह सकता हूं कि मार्जिन है लेफ्ट साइड का यहां से यहां तक का जो डिस्टेंस देख पा रहे हैं इसे मैं कह सकता हूं ये है मार्जिन टॉप साइड का ठीक है यहां से यहां तक का जो गैप आप देख पा रहे हैं इसे मैं कह सकता हूं मार्जिन है राइट साइड का और यहां से यहां तक का जो डिस्टेंस आप देख पा रहे हैं इसे मैं कह सकता हूं यह मार्जिन है बॉटम का ठीक है तो इस प्रकार से चारों दिशाओं में आपका मार्जिन एजिस्ट कर रहा होता है कि भाई इस डिस्टेंस को लेफ्ट बोल दिया इसको टॉप बोल दिया इसको राइट बोल दिया इसको बॉटम बोल दिया इस प्रकार से मार्जिन काम कर रहा होता है थोड़ा और क्लेरिटी लेते हैं इस बारे में थोड़ा और क्लेरिटी लेते हैं लेट्स से मैं डेवलपर टूल्स का यूज करके इसको समझना चाहता हूं उसका यूज भी कर लेते हैं वहां से समझने की कोशिश भी कर लेते हैं तो मैंने क्या किया मैंने किया इंस्पेक्ट एलिमेंट मैंने एरो पे क्लिक करके इस पर क्लिक कर दिया तो आप ध्यान से एक ऑब्जर्व करना है इसको मैं ऊपर लेके जाता हूं क्या आप सभी यह बॉक्सेस देख पा रहे हैं जहां बीच का बॉक्स ब्लू कलर का है 350 बा 110 लेफ्ट साइड में देखो तुम्हें ये हाइलाइटेड दिखेगा पूरा का पूरा टेक्स्ट अभी देखना हाइलाइटेड हुआ बिल्कुल हुआ ये क्या है कंटेंट का बॉक्स है अब मैं जा रहा हूं पैडिट पे ये जो ग्रीन कलर का बॉक्स है जो लेफ्ट में तुम्हें ग्रीन कलर से हाइलाइटेड दिख रहा है ये सारी की सारी पैडिट है ठीक है तुम यहां पे देख पा रहे हो 90 पिक्सल की पैडिट है चारों दिशाओं के अंदर बहुत बढ़िया अब मैं गया बॉर्डर में अब जो तुम ये ग्रेइश कलर में या डार्क बेज कलर में तीन पिक्सल का यहां पर ये ब्लैक कलर जो है इसको देखते रहना ब्लैक कलर को चेंज होगा अभी तो ये ब्लैक कलर चेंज हो गया ये बॉर्डर को दर्शा रहा है न पिक्सल का यहां पर लिखा हुआ है बॉर्डर है और लास्ट में जो तुम ये ऑरेंजिश पार्ट देख पा रहे हो ये मार्जिन है 90 पिक्सल का तो इस प्रकार से हमें पता लग रहा है कि हमारा कंटेंट 350 बा 1110 पिक्सल का है पैडिट चारों दिशाओं में 90 पिक्सल की है बॉर्डर चारों दिशाओं में तीन पिक्सेल का है मार्जिन चारों दिशाओं में 90 पिक्सल का है अगेन लेट्स से मैं इस वाले बॉक्स की बात करता तो तो इस वाले बॉक्स में कंटेंट 350 146 का है पैडिट तुम्हारे पास एडेड ही नहीं है और मार्जिन सॉरी बॉर्डर तीन पिक्सेल का है मार्जिन ऊपर और नीचे है 16 पिक्सेल का लेफ्ट और राइट में मार्जिन डेड ही नहीं है ठीक है इस प्रकार से है तो हमने थोड़ा बहुत सीखा कि बॉक्स मॉडल कैसे काम करता है मैंने कहा कि और समझाता हूं तुम्हे अभी और समझाता हूं चिंता मत करो सब सिखाऊंगा यार आया हूं तो पढ़ा के जाऊंगा और जब बब्बर भैया आते हैं तो सिंपल शब्दों में समझा के जाते हैं नहीं यकीन तो कमेंट सेक्शन पढ़ लेना मेरी वीडियोस का पता लग जाएगा तुम्हे तो हमने क्या कहा हमने कहा कि मैं थोड़ा और क्लेरिटी समझना चाहता हूं एकएक करके समझाओ मैंने कहा ठीक है अभी प पैडिट और मार्जिन को यहां से हटाओ और एक-एक करके तुम्हें समझाता हूं एक-एक करके समझाता हूं मैंने बोला कि यार मैं ना लेफ्ट साइड में पैडिट करना चाहता हूं कि पैडिट साइड में कितने पिक्सेल करूं ऐसे करो 10 पिक्सेल कर दो तो इससे क्या फर्क पड़ा देखा तुमने लेफ्ट साइड में थोड़ा स्पेस बढ़ा बहुत बढ़िया मैंने बोला पैडिट टॉप में ऐड करना चाहता हूं पैडिट में ऐड करना चाहता हूं 20 पिक्सल इससे तुम्हारा स्पेस ऊपर की तरफ से बढ़ेगा बढा बिल्कुल बढ़ा मैंने बोला कि पैडिट की डायरेक्शन में करना चाहता हूं लेट्स से 30 पिक्सल इससे तुम्हारा राइट की दिशा में स्पेस बढ़ गया बॉर्डर और कंटेंट के बीच में ऐसे मैंने बोला डि ऐड करना चाहता हूं मैं बॉटम में तो इसमें मैंने बोल दिया 40 पिक्सल तो नीचे स्पेस बढ़ा तो मैंने लेफ्ट में 10 टॉप में 20 राइट में 30 बॉटम में 40 इस प्रकार से ऐड किया चेक करते हैं यूआई अगर मैं इंस्पेक्ट करूं इसको तो मैंने बोला कि इस वाले एलिमेंट की बात कर रहे हैं यहां पे लिखा है लेफ्ट में 10 टॉप में 20 राइट में 30 और बॉटम में 40 वेरीफाई कर लो अगेन सेम चीज हमने यहां पर लिखी है मैंने बोला लेट्स से मुझे ऐसे काम नहीं करना था मैंने बोला कि मेरे पास कोई शॉर्ट हैंड नोटेशन है क्या जहां पर मैं चारों को स्पेसिफाई कर पाऊ मैंने कहा बिल्कुल है तो अगर तुम स्पेसिफाई करना चाहो मेरे पास एक शॉर्ट हैंड नोटेशन एजिस्ट करती है ठीक है मैंने बोला पैडिया कि टॉप में कितनी रखनी है मैंने बोला टॉप में ऐसा करो 15 पिक्सल रख दो राइट में ऐसा करो 25 पिक्सल रख दो बॉटम में ऐसा करो 35 पिक्सेल रख दो और लेफ्ट में ऐसा करो 45 पिक्सल रख दो अब चेक करो यूआई पे चेक करो यूआई पे रिफ्लेक्ट हो रहा है क्या यूआई पे हां बिल्कुल हो रहा है एक बार इसको इंस्पेक्ट कर लो इंस्पेक्ट करके बॉक्स मॉडल में गए देखो लेफ्ट में 45 बिल्कुल सही देखो टॉप से शुरू करते हैं टॉप में 15 बिल्कुल सही राइट में 2 बिल्कुल सही बॉटम में 35 बिल्कुल सही लेफ्ट में 45 बिल्कुल सही तो तुम चाहो तो पैडिट को ऐसे भी ऐड कर सकते हो भैया कोई और तरीका है मैंने कहा बिल्कुल एक और तरीका है तुम चाहो तो इसे कमेंट कर लो और एक तरीका और है तुम्हारे पास उसे यूज कर लो तुमने यहां पर दो वैल्यूज ऐड करी तुमने बोला कि अगर मैं सिर्फ दो वैल्यूज ऐड करता हूं लेटस से 20 पिक्सेल और 40 पिक्सेल तो इसका मतलब क्या है 20 पिक्सेल का मतलब है वा एक्सिस में यानी कि टॉप और बॉटम की बात कर रहे हो और 40 पिक्सल यानी जो सेकंड आर्गुमेंट आप यहां पे दे रहे हो सेकंड वैल्यू जो आप दे रहे हो वो हॉरिजॉन्टल एक्सिस में यानी कि लेफ्ट और राइट तो 20 पिक्सेल आपका लगा होगा टॉप में और बॉटम में और 40 पिक्सेल आपका लगा होगा लेफ्ट में और राइट में वेरीफाई कर लेते हैं इंस्पेक्ट करके मैंने इंस्पेक्ट किया चेक करो 20 लगा है टॉप में और बॉटम में और लेफ्ट और राइट में 40 लगा है तो तुमने भिन्न-भिन्न प्रकार से पैडिट करने के तरीके सीख लिए तुम चाहो तो सिंगल हैंडेडली ऐड कर दो इस प्रकार चारों दिशाओं में अलग-अलग दिशाओं में ऐड करना चाहते हो अलग दिशाओं में ऐड कर लो ऐसे चारों दिशाओं को स्पेसिफाई करना चाहते हो एक लाइन में ये भी कर सकते हो और तुम ये भी कर सकते हो यहां पर जो पहली वैल्यू है ये दर्शाती है टॉप और बॉटम की पैडिट दूसरी वैल्यू दर्शाती है लेफ्ट और राइट की पडि तो इस प्रकार से पडि काम करती है तो इस प्रकार से पडि काम करती है तुम्हारी तो तुम्हारी पैडिट अब तक क्लियर हो जानी चाहिए पैडिट वाली चीजें समझ में आनी चाहिए कैसे ऐड करते हैं ठीक है तो हमें बॉक्स मॉडल समझ में आया कि बॉक्स मॉडल क्या कहता है कि आपकी हर एक चीज ब्राउजर विंडो पे रेंटर होगी ए रेक्टेंगल बॉक्स और जब भी आप डिजाइनिंग कर रहे हैं लेआउट कर रहे हैं सीएसएस का यूज़ कर रहे हैं यू हैव टू मेक श्यर आपके दिमाग में बॉक्स मॉडल एजिस्ट कर रहा है कि भाई सब कुछ रेक्टेंगल बॉक्सी फॉर्म में आएगा अगेन उसके बाद आपने सीखा पैडिट कैसे ऐड कर सकते हैं आप यहां पर और अब आप सीखेंगे मार्जिंस के बारे में मार्जिन के बारे में मैंने अभी तक आपको क्या सिखाया मैंने बताया कि यार ये जो गैप है इसे मार्जिन कहते हैं ये जो गैप है इसे मार्जिन कहते हैं ये जो गैप है इसे मार्जिन कहते हैं ये जो गैप है इसे मार्जिन कहते हैं सो बेसिकली बॉर्डर से लेकर बाहर की तरफ आउटर साइड में जो गैप है बॉर्डर से इनर गैप बॉर्डर से इनसाइड गैप की बात करोगे वो पडि कहलाएगा बॉर्डर से आउटसाइड गैप की बात करोगे वो मार्जिन कहलाएगा तो हमने यहां पर क्या किया मैंने यहां पे मार्जिन ऐड करना शुरू किया मैं चाहूं तो मैं मार्जिन सीधा ऐड कर सकता हूं कि मार्जिन 50 पिक्सेल तो इससे क्या होगा 40 पिक्सल लेट्स से तो चारों दिशाओं में ड वेरीफाई कर लो इंस्पेक्ट किया हमने देखा कि मार्जिन वाले ब्लॉक्स में 40 40 40 40 चारों दिशाओ में 40 पिक्सल का मार्जिन ड हो गया लेट से मैंने इसे बोल दिया जी 30 तो इससे क्या हुआ इससे क्या हुआ चारों दिशाओं में लेफ्ट राइट लेफ्ट टॉप राइट बॉटम चार दिशा में 30 पिक्सल का मार्जिन ड हो गया आपने बोला नहीं यह नहीं चाहिए मेरे को मेरे को क्या करना है सिर्फ एक दिशा में मार्जिन ड करना है मैंने कहा वो भी ट्राई कर लेते हैं आ जाओ व भी ट्राई कर लेते हैं तो हमने सिंपल सी एक बात बोली हमने बोला मार्जिन टॉप तो मैंने टॉप से मार्जिन दे दिया यहां पर कितना 100 पिक्सल तो क्या यूआई पर फर्क पड़ा बिल्कुल टॉप से मार्जिन बढ़ गया तो यह जो गैप तुम यहां पर देख पा रहे हो यह टॉप का मार्जिन है यह टॉप का मार्जिन है अगर तुम यहां पर इंस्पेक्ट करोगे और तुम यहां पर होवर करोगे और तुम यहां पर होवर करोगे तो तुम ये गैप देख पाओगे ठीक है लेट्स से मैं इस इसको सिलेक्ट कर लेता हूं तो मैं यहां प देख पा रहा हूं कि टॉप में मार्जिन ड 100 राइट में और लेफ्ट में कुछ भी डेड नहीं हुआ है ठीक है बहुत बढ़िया तो टॉप में मार्जिन आपने ऐड कर लि लेट्स से मार्जिन कर ऐड करना चाहता हूं लेफ्ट में लेफ्ट में मैंने ऐड कर दिया लेट्स से 20 पिक्सेल तो इससे क्या हुआ सिंटेक्स कलते है तो मैंने यहां पे 20 पिक्सेल ऐड कर दिया तो लेफ्ट में भी यहां पर मार्जिन ऐड हो गया अगेन तुम ऐसे ही चाहो तो मार्जिन राइट भी कर सकते हो तुम्हारा मार्जिन राइट भी एजिस्ट करता है यहां पर मैं एक मि से हटा देता हूं मार्जिन राइट भी एजिस्ट करता है और मार्जिन लेफ्ट भी एजिस्ट करता है टॉप भी एजिस्ट करता है बॉटम भी एजिस्ट करता है ठीक है तो तुम्हारे पास ये चारों के चारों मार्जिन एजिस्ट करते हैं ये बात समझ में आती तुम चाहो तो सिंगल हैंडेडली यहां पर चारों दिशाओ में मार्जिन ऐड कर लो चाहो तो ऐसे अलग-अलग करके हैंडल कर लो और तुम्हें फाइंड आउट करना है क्या पैडिट की तरह ऐसी शॉर्ट हैंड प्रॉपर्टीज मार्जिन के लिए भी एजिस्ट करती है अगर हां तो वो तुम्हें प्रैक्टिस करनी है ठीक है सो आज की क्लास में हमने सीखा बहुत सारी चीजों के बारे में हमने पढ़ा अ बॉर्डर्स के बारे में कि भैया बॉर्डर कैसे क्रिएट कर सकते हैं क्या-क्या प्रॉपर्टीज वैल्यूज मेरे पास एजिस्ट करती है क्या शॉर्ट एंड नोटशन एजिस्ट करती है हमने पढ़ा हाइट्स के बारे में विट के बार हाइट के बारे में वि विड्थ के बारे में और हमने आपको होमवर्क दिया कि स्पैन टैग के अंदर वो हाइट और विड्थ अप्लाई क्यों नहीं कर पा रहे हम हमने आपको बोला बॉक्स मॉडल के बारे में कि भैया बॉक्स मॉडल क्या होता है क्यों हमें अपने दिमाग में रखना चाहिए बॉक्स मॉडल डिंग के बारे में एंड मार्जिन के बारे में अगेन पैडिट और मार्जिन बहुत ज्यादा हम यूज करने वाले हैं तो अच्छे से समझ ले इस चीज को मैं दोबारा से एक बार रिपीट कर देता हूं क्या करना है तो मैंने सिंपल सी एक आपको प्रॉब्लम स्टेटमेंट दी आप मुझे बताना यहां पर मार्जिन लगेगा कि नहीं लगेगा मैंने बोला कि ये मेरे पास एक बॉक्स है और ये मेरे पास एक बॉक्स है इन दोनों बॉक्स के बीच का गैप मुझे बड़ा करना है और इनको मुझे ऐसा कुछ कर देना है कि यह बॉक्स यहां पे आ जाए और यह बॉक्स यहां पे आ जाए इस गैप को बड़ा करना है तो बताओ मुझे मार्जिन इंक्रीज करने की पैट भैया क्योंकि आप दो बॉक्सेस के बीच की बात कर रहे हैं यह बॉर्डर है बॉर्डर के बाहरी तरफ की बात कर रहे हैं बॉर्डर है बॉर्डर के बाहरी तरफ की बात कर रहे हैं तो बॉर्डर के आउटसाइड की बात करेंगे इसका मतलब क्या है हम मार्जिन की बात कर रहे हैं मुझे मार्जिन मार्जिन इंक्रीज करना पड़ेगा अब लेट्स से मैंने एक प्रॉब्लम स्टेटमेंट आपको दी जहां पर मैंने आपको बोला कि मेरे पास एक बॉक्स है यहां पर और इस बॉक्स के अंदर यह मेरा कुछ कांटेक्ट पड़ा हुआ है मैं चाहता हूं कि यह वाला जो गैप है इस गैप को मैं और इंक्रीज कर दूं इस गैप को मैं ऐसा कर दूं कि भाई यह मेरा कंटेंट यहीं पर पड़ा हुआ है पर ये गैप इंक्रीज कर गया इसमें क्या करूं भैया ये जो गैप आप इंक्रीज करने के लिए कह रहे हो ना ये बॉर्डर के इनसाइड का गैप है तो बॉर्डर के इनसाइड के गैप को हम क्या बोलते हैं इसको हम पैडिट कहते हैं तो मुझे पेडिंगटन क्रीज करना पड़ेगा तो बिल्कुल भी कंफ्यूज मत होना बॉर्डर के आउटसाइड गैप की बात करोगे तो मार्जिन की बात कर रहे हो बॉर्डर के इनसाइड गैप की बात करोगे तो पेडिंगटन तो आपको ऑलरेडी पता ही है क्या होता है और बॉर्डर भी आपको क्रिएट करना ऑलरेडी आ चुका ठीक है अब बात करते हैं कुछ बेस्ट प्रैक्टिस इसके बारे में तो जनरली आपने अगर अच्छे कोड्स देखे हो अगर नहीं भी देखे तब आप देखने वाले हैं कुछ ही समय के अंदर तो अच्छे कोड्स के अंदर एक चीज फॉलो की जाती है उसमें यह फॉलो किया जाता है कि यूनिवर्सल सिलेक्टर के अंदर मार्जिन और पैडिट को बाय डिफॉल्ट ज जीरो किया जाता है कि जब भी आपको कोई पेज स्टार्ट कर रहे हैं आपने बाय डिफॉल्ट मार्जिन और पैडिट को जीरो मार्क कर दिया बाय डिफॉल्ट वो जरो होता है ठीक है आपको खुद से स्पेसिफाई करना पड़ेगा क्या वैल्यू आप यूज़ करना चाहते हो आप डिफॉल्ट वैल्यूज पर रिलाई नहीं कर सकते एग्जांपल के लिए लेट्स से मैंने यहां पे सारे के सारे मार्जिन सारे के सारे अह मार्जिंस को हटा दिया ठीक है सारी की सारी पैडिट को मैंने हटा दिया तो मेरा यूआई कैसा नज़र आ रहा है मुझे तो मेरा यूआई मुझे कुछ इस प्रकार का नजर आ रहा है ठीक है अब यहां पे ध्यान से देखो लेफ्ट में तुम्हें यह थोड़ा सा मार्जिन दिख रहा है अगर तुम ध्यान से देखोगे तो तुम्हें लेफ्ट में यहां पर यहां से लेके यहां तक छोटा सा मार्जिन दिख रहा है यह डिफॉल्ट मार्जिन है मैंने कहा मुझे यह भी नहीं चाहिए तो बेस्ट प्रैक्टिस हमेशा क्या होती है कि हमने बोल दिया कि भाई साहब मुझे बाय डिफॉल्ट कोई मार्जिन कोई बैटिंग नहीं चाहिए मैं खुद से ऐड कर लूंगा मैं समझदार हूं ठीक है तो एक चीज़ होती है य वर्सल सिलेक्टर कि जितने भी एलिमेंट्स है जितने भी टैग्स मैं यूज कर रहा हूं जितने भी आईडी क्लासेस मेरे पास एजिस्ट कर रही है मेरे कोड के अंदर सभी के ऊपर यह प्रॉपर्टी लागू होगी उसे कहते हैं यूनिवर्सल सिलेक्टर अभी तक आपने पढ़ा एलिमेंट सिलेक्टर क्लास सिलेक्टर आईडी सिलेक्टर ग्रुप सिलेक्टर एक और सिलेक्टर होता है यूनिवर्सल सिलेक्टर जिसका सिंपल तात्पर्य ये है कि मैंने जितने भी टैग्स का यूज किया है जितने भी एलिमेंट्स का यूज किया है वहां पर ये प्रॉपर्टी जो भी मैं स्पेसिफाई करूंगा इसके अंदर वो अप्लाई करेगी तो लेट्स से मैंने यहां पे यूनिवर्सल सिलेक्टर का यूज किया कैसे लिखते हैं इसको कुछ भी नहीं आपने लिखना है स्टार स्टार खत्म यह हो गया आपका यूनिवर्सल सिलेक्टर आपने अंदर क्या बोल दिया कि भाई साहब पैडिप को चाहिए जीरो और मार्जिन जो है अपने को चाहिए जीरो तो इससे क्या हुआ देखो u आई पे क्या वो गैप खत्म हो गया जो मैं तुम्हें दिखा रहा था दोबारा ऑब्जर्व करना अभी अभी क्या हुआ मैंने इसको कर दिया कट तो तुम लेफ्ट साइड में गैप देख पाओगे क्या लेफ्ट साइड में गैप आ रहा है बिल्कुल आ रहा है क्या टॉप टॉप में ये गैप आ रहा है बिल्कुल आ रहा है बट अगर मैं यहां पर यूनिवर्सल सिलेक्टर ऐड कर दूं तो क्या होगा ये गैप हट जाएगा देख देखो लेफ्ट से भी गैप हट गया और टॉप से भी गैप हट गया और जो बॉक्सेस के बीच में गैप था वो वाला गैप भी हट गया तो ये एक अच्छी प्रैक्टिस होती है हम बाय डिफॉल्ट इनको सेट कर दें पैडिट और मार्जिन को जीरो एंड अकॉर्डिंग अपने खुद के हिसाब से पर् पडि नहीं पडि पडि एंड मार्जिंस ऐड कर दें ठीक है तो ये एक अच्छी चीज है एक होमवर्क मुझे आपको और देना है एक होमवर्क मुझे आपको और देना है जिससे आप पढ़ के आएंगे मैं वैसे कंप्लीट करूंगा इसको नेक्स्ट क्लास के अंदर पर फिर भी एक पढ़ के आना आपको फाइंड आउट करना है आपको फाइंड आउट करना है और मुझे बताना है कमेंट सेक्शन के अंदर कि बॉक्स साइजिंग नामक एक प्रॉपर्टी होती है उससे क्या होता है आपको फाइंड आउट करना है कि बॉक्स साइजिंग नाम की एक प्रॉपर्टी है उससे क्या होता है और बेस्ट प्रैक्टिस क्यों है बॉक्स साइजिंग को बॉर्डर बॉक्स रखना कि इस प्रॉपर्टी को बॉर्डर बॉक्स की वैल्यू क्यों असाइन करनी चाहिए ये आपकी वैल्यू है ये आपकी प्रॉपर्टी आपको फाइंड आउट करना है बॉक्स साइजिंग से होता क्या है एंड व्हाई इट इज कंसीडर्ड एज अ गुड प्रैक्टिस कि भाई बॉक्स साइजिंग को बॉर्डर बॉक्स रख दो ये आपका होमवर्क है फाइंड आउट करके लाना कमेंट सेक्शन के अंदर मुझे बताना हम तो क कवर करेंगे ही करेंगे इसको ठीक है सो इस क्लास में इतना दोस्त आपने पढ़ा बहुत सारी चीजों के बारे में अगर फटाफट रिवाइज कर लेते हैं रिवीजन कर लेते हैं वोही बहुत इंपोर्टेंट है तो हमने सबसे पहले पढ़ा यहां पर आते ही कि बॉक्स मॉडल क्या होता है तो बॉक्स मॉडल शुरू करने से पहले हम गए हमारे कोड में हमने आपको छया कि बॉर्डर्स कैसे ऐड कर सकते हैं हमने सिखाया कि अगर आप सिंगल सिंगल प्रॉपर्टी का यूज़ करना चाहे स्टाइल कैसे ऐड करोगे डॉटेड बॉर्डर चाहिए डैश बॉर्डर चाहिए सॉलिड बॉर्डर चाहिए कलर क्या चाहिए बॉर्डर का कितने विड्थ चाहिए बॉर्डर की तो आपने हर चीज यहां से डिफाइन कर ली एक शॉर्ट हैंड नोटेशन आपको बताई कि आप सिंपल बॉर्डर का यूज़ करके तीनों वैल्यू भी यहां पर असाइन कर सकते हैं आप चाहे तो बॉर्डर में जो कॉर्नर्स बन रही है शार्प शार्प उनको राउंड भी कर सकते हैं बॉर्डर रेडियस प्रॉपर्टी का यूज करके आप चाहे तो किसी पर्टिकुलर कॉर्नर को पकड़ के सिर्फ उसको भी राउंड कर सकते हैं ये भी फंक्शनैलिटी आपके पास अवेलेबल है आप चाहे तो किसी पर्टिकुलर एज पे किसी पर्टिकुलर लाइन पर बॉर्डर दे सकते हैं चाहे टॉप में दे चाहे लेफ्ट में दे चाहे राइट में दे चाहे बॉटम में दे ऐसे आप किसी पर्टिकुलर डायरेक्शन के अंदर बॉर्डर अप्लाई कर सकते हैं ठीक है तो बॉर्डर आपने समझा उसके बाद आप गए आपके बॉक्स मॉडल के ऊपर जहां पर आपने सीखा कि भैया मेरा ब्राउजर किसी भी टाइप के कं टेंट को एक रेक्टेंगल बॉक्स के अंदर ही रेंडर करता है डिस्प्ले करता है इसे बॉक्स मॉडल कहते हैं जब भी मुझे डिजाइनिंग करनी है लेआउट फाइनलाइज करना है यूजिंग सीएसएस तो मैं हमेशा दिमाग में रखूंगा कि भाई बॉक्स मॉडल जो है वो ऐसे बिहेव करता है कि हर चीज रेक्टेंगल बॉक्स की फॉर्म में रेंडर होगी और बॉक्स मॉडल के अंदर ये चार कंपोनेंट्स होते हैं क्या कंटेंट पैडिट बॉर्डर और मार्जिन तो हमने हम यहां पर गए और आपको जानबूझ के हमने यहां पर इंस्पेक्ट एलिमेंट करके दिखाया और इंस्पेक्ट एलिमेंट करके हमने आपको दिखाया कि यह चार चीजें हम कैसे देख सकते हैं अपने डेवलपर टूल्स का यूज़ करके कि कंटेंट की क्या डायमेंशन है पैडिट कितनी डेड है बॉर्डर कितना बड़ा है क्या डायमेंशन है बॉर्डर की विड्थ क्या है बॉर्डर की मार्जिन की वैल्यू क्या है तो आप सारी चीजें यहां से देख सकते हैं ठीक है इसके बाद हमने आपको सिखाया कि आप खुद से कैसे पैडिट ऐड कर सकते हैं क्या-क्या डिफरेंट नोटेशंस आपके पास अवेलेबल है उसके बाद हमने आपको सिखाया कि मार्जिन आप खुद से कैसे ऐड कर सकते हैं आपको होमवर्क दिया कि खुद से दो-तीन शॉर्ट हैंड नोटेशन को फाइंड आउट करके लाएं और मार्जिन के बारे में पढ़ के आए बेसिकली ठीक है एक और सी होती है इनलाइन मार्जिन चलो उनके बारे में बाद में पढ़ेंगे भाई अगले जितना पढ़ा है उतना आप पढ़ के आए अगेन आपको थोड़ी चीजें और सिखाई हमने कि हाइट और विड्थ आप कैसे ऐड कर सकते हैं अपने बॉक्स के लिए जो भी आपने बॉक्स क्रिएट किया चाहे वो h1 हो चाहे वो पैराग्राफ टैग हो जो भी हो और एक चीज आपको होमवर्क दिया हमने कि स्पैन टैग में जब मैंने हाइट और विड्थ ऐड करी तो वो रिफ्लेक्ट नहीं हुई यूआई में तो स्पैन टैग के ऊपर मेरा हाइट और विड्थ एप्लीकेबल क्यों नहीं हो रहा है क्यों नहीं चल रहा है तो आपको फाइंड आउट करके लाना है और आज हम बात करने वाले एक बहुत ही इंपोर्टेंट कांसेप्ट के बारे में जिसका नाम है डिस्प्ले प्रॉपर्टी सीएसएस की सीरीज हमारी चल रही है लेक्चर नंबर 16 तक आप पहुंच चुके हैं और हम डिस्प्ले प्रॉपर्टी के बारे में बात करने वाले हैं क्या होता है सीएसएस डिस्प्ले प्रॉपर्टी क्या-क्या डिफरेंट ऑप्शंस आपके पास अवेलेबल है डिस्प्ले टाइप को सेट करने के लिए और कैसे हम इसको अप्लाई करके डिफरेंट डिफरेंट फॉर्म ऑफ यूआई क्रिएट कर सकते हैं ठीक है सबसे पहले आपके बहुत सारी नाराजगी होगी कि भैया 20 दिन से कहां थे दोस्त थोड़ी सी पर्सनल इश्यूज थे ठीक है भाने नहीं मारू का पर्सनल इश्यूज थे उनको हैंडल कर रहे थे तो अब से हमने एक टारगेट लिया है कि हम आगे एक बफर बना के चलेंगे तो लेट्स से मैं कभी भी इंपैक्ट होता हूं हेल्थ वाइज तो उस केस के अंदर आप बफर में से वीडियोस आपको रेगुलरली मिलते और आपकी पढ़ाई इंपैक्ट ना हो ठीक है बहुत बढ़िया और बहुत बच्चों के मेरे पास डाउट थे कि भैया ये बीच में से सीरीज बन रही है क्या या फिर अपने पास कोई पूरी प्लेलिस्ट अवेलेबल है तो हमारे पास यहां पर youtube-dl को एक्सेस कर कर सकते हैं एंड ये सारे के सारे लेक्चर आप पढ़ सकते हैं और आपको बहुत मजा आएगा इस बात की गारंटी है ठीक है बहुत सारी डॉक्यूमेंटेशन हम फॉलो करते हैं इस पूरे कोर्स में चाहे हम बात करें w3 स्कूल्स की ट्यूटोरियल वेबसाइट है चाहे हम बात करें आपके एमडीएन की जहां पर ये पूरी डॉक्यूमेंटेशन आपके पास अवेलेबल है तो एक अच्छी प्रैक्टिस हम साथ-साथ फॉलो करते हैं कोड करने के अलावा भी ठीक है तो आज हम बात करने वाले हैं सीएसएस डिस्प्ले प्रॉपर्टी के बारे में पढ़ेंगे क्या होता है कैसे-कैसे टाइप्स अवेलेबल हैं कौन सा एलिमेंट ब्लॉक एलिमेंट कहलाता है कौन सा इनलाइन एलिमेंट कहलाता है और 50 अलग चीजें ठीक है तो शुरुआत करते हैं शुरुआत करते हैं सबसे पहली चीज के साथ कि व्हाट इज डिस्प्ले प्रॉपर्टी होता क्या है इस प्रॉपर्टी से मैंने कहा ये तो बड़ा आसान काम है एक बार समझाते हैं तुम्हें सिंपल भाषा के अंदर तो हमने कहा कि आपके पास डिफरेंट डिफरेंट एलिमेंट्स अवेलेबल हैं अ आपके पास डिफरेंट डिफरेंट एलिमेंट्स अवेलेबल हैं चाहे वो आपका डिव हो चाहे वो आपका एंकर टैग हो चाहे वो आपका पैराग्राफ हो चाहे वो आपका हेडिंग हो तो इन डिफरेंट डिफरेंट टैग्स को किस प्रकार डिस्प्ले किया जाए हर किसी टैग का एक अलग डिस्प्ले बिहेवियर होता है हर कोई टैग एक अलग तरीके से रेंडर होता है आपकी वेबसाइट पर हर कोई टैग एक अलग तरीके से विजिबल होता है आपके व्यू पोर्ट पर आपके वेब पेज के ऊपर तो वो किस प्रकार से डिस्प्ले हो रहा है कौन-कौन सी प्रॉपर्टी उस पर अप्लाई करेगी कौन-कौन सी प्रॉपर्टी उस पर अप्लाई नहीं करेगी उन सभी के बारे में बात करने वाले हैं अगर सिंपल भाषा में बात करूं मैं तो मैंने बोला कि मेरे पास मान लो कि यहां पर दो प्रकार के डिस्प्ले प्रॉपर्टी है एक का नाम मैंने x रख दिया एक का नाम मैंने y रख दिया मान लो एक नॉर्मल फिजिक वाला आदमी है ठीक है ठीक-ठाक फिजिक है इसकी इतना पतला भी नहीं है उतना मोटा भी नहीं है पर अगर मैं डिस्प्ले प्रॉपर्टी x का यूज य करूं तो ये कैसा दिखता है तो ये बहुत बल्की दिखता है कि भाई ये तो भैया अंडरटेकर बन गया बढ़िया बॉडी बन गई इसकी ठीक है अगर मैं डिस्प्ले प्रॉपर्टी वा का यूज़ करू तो बहुत पतला सूखा सा लगता है ये ऐसा मरियल सा तो हमने कहा कि डिस्प्ले प्रॉपर्टी के द्वारा किसी एक एलिमेंट को डिस्प्ले पर या व्यू पोर्ट पर या वेब पेज पर कैसे रेंडर करना है कैसे विजिबल करवाना है वो दर्शाया जाता है वो लॉजिक यहां पर इस प्रॉपर्टी के अंदर डिफाइंड है अब मेरे पास डिफरेंट डिफरेंट प्रकार के डिस्प्ले प्रॉपर्टीज अवेलेबल हैं अगर मैं कुछ एग्जांपल्स की बात करूं तो यहां पर मेरे पास एक इनलाइन प्रॉपर्टी अवेलेबल है मेरे पास एक ब्लॉक प्रॉपर्टी अवेलेबल है मैं मार्क करना चाहूं नन तो नन भी कर सकता हूं मैं मार्क करना चाहूं इनलाइन ब्लॉक तो वो भी कर सकता हूं तो ये सारी की सारी चीजें मेरे पास अवेलेबल है इन सभी के बारे में पढ़ने वाले हैं और एक होमवर्क भी हमने आपको लास्ट क्लास के अंदर दिया था जहां पर हमने बात की थी कि आपको पढ़ के आना है कि बॉक्स साइजिंग बॉर्डर बॉक्स जो है उससे क्या होता है और हमें क्यों वो करना चाहिए एक अच्छी प्रैक्टिस क्यों मानी जाती है तो अगर आपने होमवर्क किया है तो बताएंगे कमेंट सेक्शन के अंदर कि हां भईया कंप्लीट करके आए हैं नहीं किया तो वेट करो इसी क्लास के अंदर आपको सलूशन देंगे उसका ठीक है बढ़िया चलते हैं एक बार w3 स्कूल्स पर और वहां पर पढ़ते हैं कि क्या मतलब है डिस्प्ले प्रॉपर्टी का तो मैंने कहा देखो सिंपल चीज है डिस्प्ले प्रॉपर्टी का मतलब क्या है कि आपके पास बहुत प्रकार के एलिमेंट है एलिमेंट को आपके यूआई पर आपके वेब पेज पर किस प्रकार से रेंडर करना है हर किसी का तरीका डिफरेंट होगा कैसे डिफरेंट होगा भी समझ में आएगा पर हां वो डिफाइन करना आपका डिस्प्ले प्रॉपर्टी का काम है अब मैं हर एक लाइन को इंग्लिश 20 कन्वर्ट तो नहीं करूंगा वो तोहे खुद से पढ़नी है राइट मैं आपको बताऊंगा कि ऐसे ऐसे कर लो इसका मतलब ये है इसका मतलब मत है आपका भी फायदा नहीं मेरा भी फायदा नहीं है तो अपन अपनी लैंग्वेज में समझाएंगे आपको आपको कोड करके दिखाएंगे आपको अप्लाई करके दिखाएंगे सारी की सारी चीजें ठीक है तो तुम चाहो तो खुद से डॉक्यूमेंटेशन पढ़ सकते हो इससे भी तुम्हारी नॉलेज बहुत बढ़ जाएगी तो आते हैं फटाफट अपने कोड के ऊपर तो लेक्चर 16 मैंने क्रिएट कर लिया इक्स html5 क्रिएट कर ली मैंने यहां पर अपना बॉयलर प्लेट कोड ऐड कर दिया यहां पर अब मैं लेट्स से कुछ शो करना चाहता हूं मैंने बोला जी अ कुछ आपको ब्लॉक एलिमेंट्स हम दर्शा चाहते हैं ठीक है हम सबसे पहले बात करते हैं यहां पे सबसे पहले बात करते हैं यहां पे कुछ ब्लॉक एलिमेंट्स के बारे में ठीक है कुछ ब्लॉक एलिमेंट्स के बारे में बात करने वाले हैं एग्जांपल के लिए मैंने बोला मेरे पास अ डिव एक ब्लॉक एलिमेंट है पैराग्राफ एक ब्लॉक एलिमेंट है h1 एक ब्लॉक एलिमेंट ऐसे भिन्न-भिन्न प्रकार के मेरे पास ब्लॉक एलिमेंट एजिस्ट करते हैं अगर मैं बात करूं इनकी प्रॉपर्टीज के बारे में कि क्या-क्या प्रॉपर्टीज इनकी होती है तो यहां पे चाहे तो हम चार प्रॉपर्टीज के अंदर इनको फटाफट समरा इज कर सकते हैं समझेंगे वन बाय वन अभी एक बार क्रिएट करते हैं तो मैंने क्या बोला कि यहां पर ऐसे किया मैंने कि एक डिव लिख लिया और मैंने बोला वेलकम टू कोड हेल्प ठीक है लेट्स से मैंने एक और डेव यूज कर लिया ठीक है मैंने बोला यहां पे के वेलकम टू कोड हेल्प 2.2 तो अगर मैं इनको यहां पे लाइव सर्वर के द्वारा रन कर दूं ठीक है पुराना वाला सर्वर डिस्पोज करते हैं और नया सर्वर इनिशिएटिव मेरी ये क्रिएट हो चुकी है सेकंड डिव मेरी यहां पर क्रिएट हो चुकी है सबसे पहला बिहेवियर मैंने क्या देखा सबसे पहला बिहेवियर मैंने देखा कि दो डिप्स डिफरेंट डिफरेंट लाइंस पर आ रही है तो फटाफट यहां पे राइट डाउन कर लेते हैं तो मैंने बोला जो भी मेरा ब्लॉक एलिमेंट है वह हमेशा न्यू लाइन पर आ रहा होता है सवाल है क्यों सवाल है क्यों एक बार इनके विड्थ चेक करते हैं लेट्स से मैंने यहां पे स्टाइल टैग का यूज कर लिया और मैंने बोला जो मेरे पास डिव अवेलेबल है उसकी प्रॉपर्टी ऐड कर दो आप बॉर्डर की वन पिक्सेल सॉलिड रेड ठीक है तो इससे क्या होगा इससे मैं ऑब्जर्व कर पा रहा हूं कि दोनों की दोनों डिब्स में रेड कलर का बॉर्डर बन गया मैं विड्थ की बात कर रहा था कि दोनों डिव जो है नेक्स्ट लाइन में क्यों आए हैं क्योंकि ध्यान से ऑब्जर्व करो कि दोनों डिव ने लेफ्ट से राइट तक पूरा का पूरा स्पेस ले लिया है तो जो सेकंड वाला टेप था उसके लिए यहां पर स्पेस अवेलेबल नहीं था राइट तो मैं कह सकता हूं तो मैं कह सकता हूं कि मेरे पास एक और प्रॉपर्टी आ गई कि भाई साहब जो भी आपके ब्लॉक एलिमेंट हैं वो हमेशा न्यू लाइन के अंदर आते हैं जो भी आपके ब्लॉक एलिमेंट है हमेशा वो डिफॉल्ट विड्थ क्या लेते हैं आपके एक्सट्रीम लेफ्ट से लेकर व्यू पोर्ट के एक्सट्रीम लेफ्ट से लेकर एक्सट्रीम राइट राइट तक जितना भी स्पेस अवेलेबल है विड्थ वाइज वो सारा का सारा स्पेस विड्थ ले लेते हैं सेकंड प्रॉपर्टी समझ में आ गई थर्ड प्रॉपर्टी मैंने क्या बोला कि यार मैं इनको ना अपनी कस्टम विड्थ और हाइट भी दे सकता हूं तो मैंने बोला कि यार इसकी विड्थ जो है वो तुम 300 पिक्सल मार्क कर दो 300 पिक्सल मार्क कर दो और तुम इसकी हाइट जो है वो भी 300 पिक्सल मार्क कर दो तो क्या ये कस्टम विड्थ हाइट रिस्पेक्ट करेगा बिल्कुल कर रहा है तो हमने बोला थर्ड पॉइंट हमें क्या मिल गया कि भाई साहब ये आपकी जो कस्टम विड्थ और हाइट दी हुई हो होती है उसको रिस्पेक्ट करता है और बड़ी अच्छी बात है करना भी चाहिए ठीक है तो आप अपनी हाइट और विड्थ यहां पर चेंज कर सकते हैं एलिमेंट्स की अगली प्रॉपर्टी की बात करते हैं मैंने बोला कि मैं चाहूं तो मैं यहां पे मार्जिन दे सकता हूं चारों दिशाओं के अंदर तो मैंने बोला मार्जिन दे दिया मैंने लेट्स से 25 पिक्सल चारों दिशाओं में चेक करते हैं यूआई पर बढ़िया चारों दिशाओं में मार्जिन ऐड हो चुका है लेट्स से मैं यहां पे कुछ पैट देना चाहूं तो पैटिंग भी दे सकता हूं मैं लेट्स से पांच चारों दिशाओं के अंदर ठीक है तो यह भी चेक कर लो एक बार क्या पैडिंडी है बढ़िया तो इसका मतलब आपका जो ब्लॉक एलिमेंट्स हैं ये आपके कस्टम मार्जिंस एंड पेडिंगटन में आ गया कि आपके ब्लॉक एलिमेंट्स कौन से होते हैं जो कि हमेशा नई लाइन में आते हैं ये आपके कंटेंट के ऊपर डिपेंड नहीं करते कि कंटेंट इतने फिट हो जाएगा तो इतने विट ले लेता हूं ये हमेशा बाय डिफॉल्ट एक्सट्रीम लेफ्ट से लेकर एक्सट्रीम राइट तक सारे के सारी विट ले लेते हैं अगर मैं अपने हिसाब से विथ और हाइट को चेंज करना चाहूं तो कर सकता हूं अगर मैं मार्जिन और पैडिट ऐड करूंगा तो ये उसको भी रिस्पेक्ट कर रहे होंगे बहुत बढ़िया यह बात समझ में आती है तो ये जो हमने डिव के अंदर देखा यही सेम अप्लाई करेगा आपके पैराग्राफ के ऊपर यही सेम अप्लाई करेगा आपके h1 के ऊपर आपको होमवर्क ये है कि आपको आज पढ़ना है कि 10 डिफरेंट ब्लॉक एलिमेंट्स कौन-कौन से अवेलेबल है आपकी एचटीएमएल में ठीक है एक होमवर्क आप ये कंप्लीट करके लाना अब बढ़ते हैं आगे हमने आपको होमवर्क दिया था हमने बात की थी बॉक्स साइजिंग बॉर्डर बॉक्स के बारे में इसके बारे में बात कर लेते हैं ठीक है तो बहुत अच्छी प्रैक्टिस है इसको यूज करना चाहिए सवाल है कि इससे होता क्या है वो एक बार डिस्कस कर लेते हैं मैंने कहा कि लेट्स से मान लो कि मेरे पास एक ये बॉक्स अवेलेबल है ठीक है मान लो कि मेरे पास एक ये बॉक्स अवेलेबल है और मैंने बोला कि मान लो इसकी जो अभी डायमेंशन है लेट्स से ये 100 पिक्सल है ये डायमेंशन जो है लेट्स से ये भी 100 पिक्सल है अभी कोई मार्जिन डेड नहीं है ठीक है अभी कोई मार्जिन डेड नहीं है अभी कोई पैडिट डेड नहीं है और अभी मैंने क्या किया ये विदाउट बॉर्डर बॉक्स के चल रहा है आपने इसमें बॉक्स साइजिंग बॉटर बॉक्स अप्लाई नहीं किया तीनों में कुछ भी अप्लाई नहीं किया आपने अब लेट्स से मैं कहता कि मार्जिन ऐड कर दो चारों दिशाओं में वन पिक्सेल का तो यहां वन पिक्सेल यहां वन पिक्सेल यहां वन पिक्सेल यहां वन पिक्सेल तो आपके डायमेंशन चेंज हो गई 100 और न 102 पिक्सल बन गई बहुत बढ़िया सेम फॉर दिस ये भी चेंज हो गई 100 एंड व यह भी 102 पिक्सेल बन गई बढ़िया ऐसे अगर मैं कह दूं कि इसमें पैडिट कर दो आप 10 पिक्सेल की तो इससे क्या होगा चारों दिशाओं में 10 पिक्सेल की चारों दिशाओं में 10 पिक्सल की पडि ऐड हो गई तो आपकी विड्थ में क्या हुआ यह 10 और यह 10 ऐड हो गया तो ये बन गया 122 पिक्सल सेम फॉर दिस ये बन गया 122 पिक्सल इन शॉर्ट जब आप विदाउट बॉर्डर बॉक्स चला रहे होते हैं अपने कोड को तो वहां पर आपका बॉक्स जो होगा ये वाला उसका साइज पुराना साइज क्या था 100 पिक्सल और उसका नया साइज बन गया 122 पिक्सल बाय 122 पिक्सल तो इन शॉर्ट मैं कह सकता हूं विदाउट बॉर्डर बॉक्स साइजिंग के आपका एक्चुअल बॉक्स की विड्थ इंक्रीज कर जाती है आपके एक्चुअल बॉक्स की विड्थ इंक्रीज कर जाती है एक बार चला के देखते हैं इस चीज को एक बार एक बार रन करके देखते हैं ठीक है तो मैंने अभी के लिए इनको कमेंट कर दिया मैंने अभी के लिए इनको कमेंट कर दिया मैंने बोला एक बॉक्स क्रिएट करो फटाफट मैंने बोला एक बॉक्स क्रिएट करो डॉट बॉक्स तो इससे आपका एक डिव क्रिएट हो गया जिसका क्लास का नाम जो है वो बॉक्स सेट हो चुका है ठीक है और मैंने क्या बोला मैंने बोला कि यहां पर लिख दो वेलकम टू कोड हेल्प ठीक है अब चेक करते हैं यूआई पर यूआई पर कैसा दिख रहा है ऐसा वेलकम टू कोड हेल्प लिखा हुआ है एक अच्छी प्रैक्टिस फॉलो करते हैं हमने कहा कि यूनिवर्सल सिलेक्टर नाम की एक चीज होती है जिसको हम स्टार से डिनोट करते इसका मतलब क्या है जितने भी एलिमेंट्स अवेलेबल है मेरे पूरे डॉक्यूमेंट के अंदर उन सभी पर ये प्रॉपर्टीज अप्लाई करनी है जो मैं यहां पर मेंशन करने वाला हूं तो मैंने कहा कि मार्जिन जीरो ऐड कर देना एंड पडि जीरो ऐड कर देना पढ़िया तो इससे क्या हुआ बाय डिफॉल्ट पूरा का पूरा मार्जिन पूरा का पूरा पैडिट जीरो हो गया तो आपका कोड हेल्प बिल्कुल कॉर्नर के अंदर आ गया विदाउट मार्जिन विदाउट पडि ठीक है ऑब्जर्व करते हैं इसका एक बार साइज क्या बन रहा है तो ऑब्जर्व करो इसका साइज आपका बन रहा है कितना बन रहा है यह आ गया आपका ए 871 मल्टीप्ला 18.5 अच्छा ठीक है 871 मल्ला 18.5 ऐसा कुछ कुछ बन रहा है ठीक है अभी ये देख लेते कंटेंट का साइज आ रहा है 871 म 18.5 मैंने क्या किया मैंने क्या किया मैंने बोला कि यार इसके अंदर ना कुछ कस्टम विड्थ ऐड करते हैं पहले तो पहले इसको अपने हिसाब से चेंज कर लेते हैं तो मैंने बोला इसकी जो विड्थ है ना इसकी जो विड्थ है इस डिव की इसका नाम हमने बॉक्स रखा हुआ है ना तो बॉक्स की विड्थ हमने अपने हिसाब से चेंज कर दी हमने बोला कि विड्थ दे दो इसको 300 पिक्सल और इसको हाइट दे दो 300 पिक्सल ठीक है अब कैसा दिख रहा है ये अब कै दिख तो वैसे ही रहा है पर हां कंटेंट का जो डब्बा है वो चेंज हो गया 300 बा 300 का हो गया जानबूझ के किया है ताकि हम देख पाए अभी मार्जिन और पैडिट का क्या खेल होता है अगर अब मैं अभी देखो मैंने बॉक्स साइजिंग बॉर्डर बॉक्स अप्लाई नहीं की है तो यहां मैंने इसकी विड्थ और हाइट 300 बा 300 पिक्सल सेट कर दी है अब चलते हैं यहां पे क्या मैं ऑब्जर्व कर पा रहा हूं क्या मैं ऑब्जर्व कर पा रहा हूं 300 बा 300 बिल्कुल ऑब्जर्व कर पा रहा हूं ठीक है अभी अच्छे से समझने के लिए मैं यहां पे एक बॉर्डर ऐड कर देता हूं ठीक है बॉर्डर की विड्थ इंक्लूड हो जाएगी य भी ध्यान रखना दोस्त तो तुमने यहां पे एक बॉर्डर ऐड कर दिया वन पिक्सल सॉलिड ब्लैक तो तुम्हारा 302 बा 302 हो जाएगा अ 302 बा 302 हो गया क्योंकि तुम्हारे बॉर्डर वन पिक्सल वन पिक्सेल ऐड हो गया ना दैट्ची बॉक्स का साइज इंक्रीज कर जाएगा अगर मैं पैटिंग मार्जिन ऐड करूंगा तो मैंने कहा ठीक है तो अभी 302 बा 302 है ना मैंने कहा हां बिल्कुल अगर मैं यहां पर सेट कर देता हूं पैडिट 100 पिक्सल तो लेफ्ट में राइट में टॉप में बॉटम में हर जगह 100 पिक्सल ऐड हो जाएगी तो आपका 502 बा 502 बन जाएगा इस बॉक्स का साइज चेक कर लो क्या बॉक्स का साइज 502 बा 502 बन गया बिल्कुल बन गया ऑब्जर्व कर र तुम्हारा बॉक्स का साइज देखने में पता लग गया बढ़ गया है राइट तो जब तुम बॉक्स साइजिंग बॉर्डर बॉक्स सेट नहीं करते ते हो और तुम पैडिट करते हो इस प्रकार से इंपैक्ट हो जाता तुम्हारे बॉक्स का साइज बट अगर लेट्स से यहां पर मैंने मेंशन किया होता बॉक्स साइजिंग बॉटर बॉक्स ठीक है तो इससे क्या होता इससे कभी भी आपका जो एक्चुअल बॉक्स है उसके डायमेंशन में चेंज नहीं आएगा कभी भी आपके एक्चुअल बॉक्स के डायमेंशन में चेंज नहीं आएगा आपका कंटेंट श्रिंक हो जाएगा कैसे मैंने कहा देखो ध्यान से तो आपने बोला कि यह रहा मेरा बॉक्स और मैंने कहा जी यहां पर यहां से यहां तक ये बन गया 100 पिक्सल और यहां से यहां तक ये बन गया 100 पिक्सल मैंने बोला अभी कोई मार्जिन ऐड नहीं किया पडि ऐड नहीं किया बट मैंने इसके अंदर बॉक्स साइजिंग बॉर्डर बॉक्स ऐड कर दिया है तो बॉक्स साइजिंग बॉर्डर बॉक्स ऐड करने से अगर लेट्स से अब मैं यहां पे बोलूं आके कि बेटा पैडिट मैंने दे दी 10 पिक्सल तो उससे क्या होगा उससे आपका ये साइज इंपैक्ट नहीं होने वाला ये साइज इंपैक्ट नहीं होने वाला हां यहां पे 10 पिक्सेल की पैडिट आ गई हां यहां पे 10 पिक्सेल की पेडिंगटन पे 10 पिक्सेल की पडि आ गई तो आपका कंटेंट श्रिंक हो गया पहले आपका जो कंटेंट था वो यहां से लेके यहां तक पड़ा हुआ था पर अब पैडिट के कारण आपका कंटेंट इतने बॉक्स में श्रिंक हो गया पर ओवरऑल डायमेंशन रिमन सेम तो आपके ब्लॉक की ओवरऑल डायमेंशन सेम हो जाएगी तो मैंने यहां पर क्या बोला विड्थ हाइट 300 पिक्सल दे रखी है एक आपका बॉर्डर दे रखा है चेक करते हैं यूआई पे क्या बना इससे तो यूआई पे देखते हैं तो ध्यान से देखो तुम्हारे बॉर्डर से भी डायमेंशन चेंज नहीं हुई है 300 बा 300 ही है अगर लेट्स से मैं यहां पे पैडिट ऐड कर दूं एक अब पैडिट ऐड कर दी मैंने यहां पे 20 पिक्सल की अभी भी कोई चेंज नहीं होगा 300 बा 300 ही रहेगा तो तुम्हारा बॉक्स अभी भी 300 बा 300 ही है क्या बात समझ में आ आती है तो बॉक्स साइजिंग बॉर्डर बॉक्स करने से आपका एक्चुअल बॉक्स अपना साइज रिटेन करता है और बॉक्स साइजिंग बॉर्डर बॉक्स ना करने से आपका बॉक्स अपना एक्चुअल साइज रिटेन नहीं कर पाता है एक्सपेंड कर जाता है ठीक है तो अभी हमने जस्ट समझा एक कांसेप्ट के बारे में जो कि था तुम्हारा बॉक्स साइजिंग बॉर्डर बॉक्स ठीक है तुम चाहो तो डॉक्यूमेंटेशन वाइज भी पढ़ सकते हो यहां पर क्या-क्या चीजें लिखी हुई हैं ठीक है और तुम्हें अच्छे से क्लेरिटी के वाइज समझ में आ जाएगा तुम डिस्प्ले डेट देखना चाहो यहां पे देख सकते हो अब बात करते हैं हमारी सेकंड डिस्प्ले प्रॉपर्टी के बारे में जिसका नाम है इनलाइन जिसका नाम है इन लाइन अगेन तुम्हें ब्लॉक समझ में आ चुका है तो तुम्हें ये भी समझ में आ जाएगा कैसे मैंने कहा बहुत सारे एग्जांपल्स यहां पर अवेलेबल है तुम्हारा एंकर टैग जो होता है वो एक इनलाइन एलिमेंट होता है ठीक है तुम्हारा स्पैन जो होता है वो एक इनलाइन एलिमेंट होता है ठीक है ठीक है तो इन सारे के सारे एलिमेंट्स का यूज करके तुम देख सकते हो बिहेवियर कैसा है मैंने कहा कैसे देखो ऐसे तो हम आए यहां पे और मैंने सिंपल सी एक चीज बोली कि एक स्पैन का यूज करते हैं आ जाओ स्पैन का यूज किया मैंने बोला दिस इज लव बबर लेट से मैंने एक और स्पैन का यूज किया मैंने बोला दिस इज लव बबर 2.0 ऐसा लिख दिया मैंने ठीक है और मैंने स्पैन को यहां पर एक बार मॉडिफाई कर दिया स्टाइलिंग अप्लाई कर दी मैंने बोला स्पैन के अंदर आप एक बॉर्डर अप्लाई कर द वन पिक्सेल सॉलिड ग्रीन वन पिक्सेल का थ्री पिक्सेल कर लेते हैं टू पिक्सल कर लेते ठीक है तो मैंने बोला चेक करो य आ प एक बार क्या बना है तो हम य आ प गए हमने ऑब्जर्व किया ऐसा कुछ कुछ नजर आ रहा है कैसा कि यहां पर दो बॉक्सेस सेम लाइन में आ गए हैं तो इसका मतलब पता है क्या है इसका मतलब हम कह सकते हैं हम कह सकते हैं इनलाइन प्रॉपर्टी की जब भी बात होगी कि पहली प्रॉपर्टी क्या होगी ये हमेशा सेम लाइन में आने का ट्राई करते हैं ऐसा भी हो सकता है कि वहां पे स्पेस अवेलेबल ना हो राइट एग्जांपल के लिए मान लो कि मैंने इसको इस कोड को कॉपी पेस्ट कर दिया मैंने इसको करा कॉपी मैंने किया कॉपी पेस्ट पेस्ट पेस्ट पेस्ट तो मैंने यहां पर 10 लव बबर वाली लाइंस लिख दी इतनी विड्थ तो है ही नहीं यहां पर तो अगर विड्थ अवेलेबल नहीं है तो बाकी सारी लाइंस अपने आप रैप करके सेकंड लाइन के अंदर आ गए राइट दिस इज का स्पेस था दिस इज लिख दिया पर बाकी लव बबर जो है वो सेकंड लाइन के अंदर आ गया क्या ये बात समझ में आती है इस प्रकार से तो अगर विड्थ अवेलेबल है तो सेम लाइन में रहने का ट्राई करेंगे बट अगर विड्थ अवेलेबल नहीं है तो सेम लाइन में नहीं रहेगा क्या बात समझ में आती है क्या बात समझ में आती है इस प्रकार से ठीक है आई थिंक हमने कंट्रोल जड करते करते हमारा कलर भी हटा दिया नहीं कलर तो लगा हु बॉर्डर वन पिक्सल नहीं टू पिक्सल ठीक है बढ़िया तो सेम लाइन में आने का ट्राई करते हैं अगर स्पेस अवेलेबल है तो सेम लाइन में आ जाएगा नहीं है तो नहीं आ पाएगा जितना तुम्हारा सेकंड चीज हमने क्या ऑब्जर्व की बॉर्डर को देख के क्या पता लगा कि इसकी विड्थ कितनी है बाय डिफॉल्ट जितनी भी मेरे कंटेंट की विड्थ होगी उतनी ही विड्थ आपका ये इनलाइन एलिमेंट लेगा ऐसा नहीं कि पूरा एक्सट्रीम लेफ्ट से एक्सट्रीम राइट तक जाएगा ऐसा नहीं होता जितना कंटेंट है दिस इज लव ब जो है वो लेट्स से 100 पिक्सेल की विट लेता है तो हां 100 ही पिक्सल लगेगा अगर लेट्स से दिस इज लव बबर सिर्फ 50 पिक्सेल की वेट लेता तो हां 50 पिक्सेल के ही वेट लेता आपका इनलाइन एलिट ठीक य बात समझ में आ गई थर्ड क्या यहां पर मैं कस्टम विड्थ या कस्टम हाइट अप्लाई कर सकता हूं मैंने कहा देखते हैं एक बार क्या कस्टम विड्थ या कस्टम हाइट यहां पर अप्लाई कर सकते हैं मैंने कहा चेक कर लेते हैं तो मैं गया मैंने बोला कि यार इसकी विड्थ और हाइट इंक्रीज कर दो इसकी विड्थ कर दो 800 पिक्सेल क्या इसकी विड्थ 800 पिक्सेल हुई नहीं हुई बिल्कुल भी नहीं हुई मैंने बोला कि ऐसा करो विड्थ नहीं हो रही ना चलो हाइट तो कर दो हाइट कर भाई साहब हाइट मैंने कर दी इसकी लेट्स से 400 पिक्सेल क्या 400 पिक्सेल इसकी हाइट हुई चेक करते हैं नहीं हुई तो इससे मुझे क्या पता लगा कि यहां पर इनलाइन एलिमेंट्स के ऊपर मैं कस्टम विट या कस्टम हाइट अप्लाई नहीं कर सकता चौथी चीज क्या यहां पर मार्जिन और पैंग अप्लाई हो सकती है मैंने कहा चेक करते हैं मैंने कहा चेक करते हैं मैंने बोला कि यार यह वाला जो मेरे पास लाइन है ना दोनों दोनों स्पैन है इन दोनों के ऊपर मैं 10 10 पिक्सल का मार्जिन लगा देता हूं तो मैंने बोला स्पैन के ऊपर ऐसा करो मार्जिन लगा दो 10 पिक्सल का ठीक है तो हम गए यहां पे मैंने क्या ऑब्जर्व किया अरे लेफ्ट और राइट में मार्जिन आ रहा है हॉरिजॉन्टल मार्जिन आ रहा है वर्टिकल मार्जिन कहां गया ऑब्जर्व करो यह देखो यह जो तुम यह थोड़ा ऑरेंजेस देख पा रहे हो शेड यह मार्जिन दर्शा रहा है सिर्फ हॉरिजॉन्टल मार्जिन आ रहा है बाकी मार्जिन नहीं आ रहा यहां पर तुम्हें दिख रहा है लगा हुआ पर नजर नहीं आ रहा भैया अगर ऊपर मार्जिन होता तो यह इस वाले ब्लॉक से दूर होता ना भाई सेम फॉर दिस सेम फॉर दिस मार्जिन तो नहीं दिखा पैट की बात करें एक बार चलो पैडिट ट्राई करते हैं तो पैडिट जो है मैंने यहां पे लेट्स से 15 पिक्सल सेट कर दी ठीक है अब यूआई पर ऑब्जर्व करते हैं एक बार हमने देखा कि क्या हुआ यहां पे एक बार ऑब्जर्व करते हैं तो पैडिट जो है पैडिट मुझे यहां पर फिर भी विजिबल है ध्यान से देखो कंटेंट के चारों दिशाओं में हम पैडिट देख पा रहे हैं पैडिव पर विजिबल है पर हां मार्जिन विजिबल नहीं है तो मुझे समझ में आ गया कि यहां पर कस्टम मार्जिन जो है कस्टम मार्जिंस आप अप्लाई नहीं कर पा रहे हो कस्टम अप्लाई नहीं कर पा रहे हो आपके इनलाइन एलिमेंट के केस के अंदर ठीक है सो अब चलते हैं एक बार डिफरेंस के बीच में कि इनलाइन एलिमेंट के बीच में और आपके ब्लॉक एलिमेंट के बीच में क्या-क्या डिफरेंस है ब्लॉक और इन लाइन तो मैंने बोला बड़ा सिंपल केस है दो तो हमने बोला जी भाई यह जो है हमेशा न्यू लाइन के अंदर रेंडर होता है यह हमेशा सेम लाइन के अंदर रेंडर होने का ट्राई कर रहा होता है सेकंड हमने बोला ये जो है बाय डिफॉल्ट वेट लेता है आपका एक्सट्रीम लेफ्ट से एक्सट्रीम राइट की तरफ जितनी विड्थ अवेलेबल है यह बाय डिफॉल्ट आपकी विड्थ जो कंटेंट होता है उसके विड्थ पर डिपेंड करता है जितना कंटेंट विड्थ वाइज होगा उतनी विड्थ आपकी बाय डिफॉल्ट लग जाएगी तीसरा यहां पर मैं कस्टम विड्थ और कस्टम हाइट अप्लाई कर सकता हूं यहां पर कस्टम विड्थ और कस्टम हाइड अप्लाई नहीं कर सकता चौथा यहां पर मैं मार्जिन और पैडिट चारों दिशाओ में अप्लाई कर सकता हूं जबकि यहां पर मैं हॉरिजॉन्टल डायरेक्शन के अंदर ही अप्लाई कर पा रहा हूं मार्जिन को वर्टिकल डायरेक्शन के अंदर नहीं कर पा रहा तो ये कुछ आपने डिफरेंस देखे डिस्प्ले ब्लॉक और डिस्प्ले इनलाइन के पर क्या कन्वर्जन पॉसिबल है जो मैंने अभी स्पैन लिखा जो कि बाय डिफॉल्ट इनलाइन होता है क्या मैं इसको ब्लॉक में कन्वर्ट कर सकता हूं कि मैंने इसको ब्लॉक एलिमेंट बना दिया बिल्कुल कर सकते हो बिल्कुल कर सकते हो देखो कैसे कुछ भी मुश्किल नहीं है तो आप गए आपने बोला यार स्पैन है ना तो आपने बोला यह दोनों स्पैन तो है इनलाइन है मैं सिंपल सा यहां पर गया मैंने जाके बोला कि बेटा डिस्प्ले ब्लॉक अब स्पैन एक ब्लॉक एलिमेंट की तरह बिहेव करेगा बाय डिफॉल्ट जो मर्जी होता हो मैंने यहां पर एक्सप्लीसिटली सेट कर दिया ब्लॉक एलिमेंट अब ये नई लाइन के अंदर भी आएगा क्या ऑब्जर्व कर पा रहे हो मार्जिन भी आ गए चारों दिशाओं में पैडिया गई विड्थ हाइट भी कस्टम सेट हो गई और नई लाइन के अंदर भी आ गया तो हर चीज अब चल रही है कस्टम विड्थ हाइट भी चल रही है कस्टम मार्जिन भी चल रहे हैं कस्टम पैडिट भी चल रही है सब कुछ बिंदास बढ़िया सुंदर शल चल रहा है ठीक है तो ऐसे तुम चाहो तो एक्सप्लीसिटली ब्लॉक एलिमेंट को इनलाइन में कन्वर्ट कर सकते हो इनलाइन एलिमेंट को ब्लॉक में कन्वर्ट कर सकते हो ठीक है लेट्स से कि मैंने बोला कि डिव जो है यह वाला इसके मैंने क्योंकि ब्लॉक एलिमेंट मैंने इसकी विड्थ हाइट सेट की थी 300 300 पिक्सल पर गलती से मैंने यहां पर जाकर गलती से क्या मैंने सेट ही कर दिया इसको इन लाइन तो इससे क्या होगा अब ये विड्थ हाइट सेट नहीं होगी इसकी 300 300 अब नहीं होगी सेट अब जो बाय डिफॉल्ट कंटेंट की विट ता उतना ही आएगा चेक कर लो है ना देखो पहले एक हमने 400 400 पिक्सल की विड सेट करी थी पहले हमने क्या किया था पहले हमने पहले हमने इसकी विड्थ 400 बा 400 रखी थी इतनी थी ठीक है अब हमने इसको इनलाइन कर दिया अब ये बस कंटेंट की विड्थ के आधार पर इतनी मीटर लेके बैठा हुआ खत्म ऐसा कुछ चल रहा है ठीक है तो अभी तक तुमने क्या सीखा अभी तक तुमने सीखा दोस्त के डिस्प्ले प्रॉपर्टी क्या होती है कि एलिमेंट रेंडर कैसे हो रहा होता आपके यूआई पर डिप डिस्प्ले प्रॉपर्टी दर्शाए गी आपको ठीक है हमने एग्जांपल देखे ब्लॉक एलिमेंट्स के ये एग्जांपल्स है हमने इनको ट्राई करके देखा ये चारों पॉइंट्स हमने वेरीफाई कर लिए हमने होमवर्क दिया आपको 10 एलिमेंट आप ढूंढ के लाएंगे ब्लॉक एलिमेंट्स के हमने बॉक्स साइजिंग बॉर्डर बॉक्स के बारे में पढ़ा एग्जांपल देखे कोड करके हमने पढ़ा इनलाइन एलिमेंट के बारे में कुछ एग्जांपल्स देख होमवर्क आपका यहां पर भी है यहां पर 10 एलिमेंट आप सर्च करके लाएंगे जो कि इनलाइन एलिमेंट्स हैं अ सेम यहां पे कुछ प्रॉपर्टीज हमने फाइंड आउट करी राइट डाउन कर ली हमने एक डिफरेंस फाइंड आउट कर लिया ब्लॉक एलिमेंट इनल एलिमेंट के बीच में या फिर डिपल ब्लॉक के डिस्प्ले इन लाइन के बीच में और हमने कन्वर्जन सीख लिया कैसे हम इनलाइन एलिमेंट को ब्लॉक में कन्वर्ट कर सकते हैं एंड वाइस वर्सा तो यहां पे आपको बस ऐसे मेंशन करना होता कि डिस्प्ले इन लाइन और अकॉर्डिंग आपकी प्रॉपर्टी चेंज हो जाएगी आप डिस्प्ले प्रॉपर्टी इस प्रकार से मेंशन कर सकते हो अब सवाल एक मन में उठ के आता है कि यार ऐसा कुछ है जिसमें दोनों का मिक्सचर हो मैंने कहा बिल्कुल है जैसे ब्लॉक के अंदर मुझे पता है कि यह अगर मेरी स्क्रीन है तो यह पूरी की पूरी विड्थ खाएगा और जैसे इनलाइन के अंदर मुझे पता है कि अगर यह मेरी स्क्रीन है तो यह कंटेंट जितनी विड्थ खाएगा पर मैं दोनों कॉमिनेशन चाहता हूं मैंने कहा बिल्कुल एक प्रॉपर्टी एजिस्ट करती है और उसका नाम है इनलाइन ब्लॉक तो इसका मतलब क्या है यह कैसे बिहेव करती है यह बिहेव करती है एगजैक्टली इनलाइन की तरह पर आप यहां पर अपनी कस्टम प्रॉपर्टीज कस्टम विड्थ कस्टम हाइट सेट कर सकते हैं बिहेव करेगी इनलाइन की तर पर यहां पर कस्टम विड्थ कस्टम हाइट आप सेट कर सकते हैं कैसे चलो आ जाओ तो मैंने बोला तो मैंने बोला अभी के लिए स्पैन में 800 बा 400 का साइज मैंने बोला है क्या तुम्हें यूआई पर विजिबल है एक बार चेक करते हैं तो यूआई पर मैं गया यूआई पर मुझे तो नहीं दिख रहा कुछ भी विजिबल ठीक है अभी लेट्स से मैं कुछ मार्जिन ऐड करता हूं ताकि दिखने में थोड़ा सा अच्छा लग जाए तो मैंने बोला मार्जिन ऐसा करो 10 पिक्सेल दे दो ठीक है ऐसा दिख रहा है यूआई पे ठीक है अब मैंने क्या बोला कि यार मेरे को इनलाइन ब्लॉक करना है इस एलिमेंट को कौन सा एलिमेंट है ये अभी यह स्पैन है स्पैन की हाइट और विट मैंने सेट कर रखी है यहां पे 800 बा 400 पर नहीं दिख रही मुझे यूआई पे बट जैसे ही मैं इसको कर दूंगा इनलाइन ब्लॉक जैसे ही मैं यहां पर गया और मैंने बोला डिस्प्ले कर दी मैंने इनलाइन ब्लॉक तो ऑब्जर्व करो अब यह 800 बा 400 के विड्थ ले गया लेट्स से मैंने बोला कि यार 400 थोड़ा ज्यादा विड्थ लग रही है इसको 200 कर दो और और ये मार्जिन पर्जिंग थोड़ी कम कर दो भाई इसको पांच पिक्सेल कर दो और इसको भी पांच पिक्सेल कर दो तो इससे क्या हुआ ऑब्जर्व करो ऐसा बन गया म बोला हाइट भी कम कर दो यार हाइट भी इसकी 200 कर दो 300 कर लो चलो ठीक है तो ऐसा कर दो एक बॉक्स ऐसा बन गया तो हम इनलाइन एलिमेंट के ऊपर कस्टम विड्थ हाइट ऐड कर पा रहे हैं कस्टम विड्थ हाइट ऐड कर पा रहे हैं ठीक है तो इस प्रकार से हम इसके ऊपर कस्टम विड्थ हाइट ऐड कर पा रहे हैं ध्यान से देखो पैटिंग भी चारों दिशाओं में चल रही है और मार्जिन भी चारों दिशाओं में चल रहा है सब कुछ बढ़िया चल रहा है अभी तक ठीक है लेट्स से मैंने एक और एलिमेंट को एक्टिव कर दिया मैंने एक और एलिमेंट को एक्टिव कर दिया u पर क्या हुआ सेम लाइन के अंदर आ गया वो सेम लाइन के अंदर क्यों आया क्योंकि मैंने बोला क्या था आपको कोड के अंदर अभी कि ये इनलाइन एलिमेंट ही है इनलाइन एलिमेंट मतलब सेम लाइन में आएगा इनलाइन एलिमेंट मतलब बाय डिफॉल्ट कंटेंट की जितनी विड्थ है उतनी ही विड्थ लेगा इनलाइन एलिमेंट मतलब कस्टम विड्थ साड नहीं चलेगी इनलाइन एलिमेंट मतलब हॉरिजॉन्टल मार्जिन वगैरह ऐड हो जाएगा पर वर्टिकल नहीं चल पाएगा पर मैंने क्या बोला इनल एलिमेंट तो है यह बिल्कुल सही है पर कस्टम विड्थ हाइट मार्जिन पडि अलाउड मैंने कर दी है इनलाइन ब्लॉक करके ठीक है तो ये एगजैक्टली इनलाइन एलिमेंट की तरह ही बिहेव करेगा आपका इनलाइन ब्लॉक डिस्प्ले प्रॉपर्टी बट विद अ एडिशन के कस्टम विड्थ हाइट मार्जिन पडि आप ऐड कर पाओगे जो कि आप यहां पर देख पा रहे हो ठीक है तो इस प्रकार से आपने सीखा कैसे इनलाइन ब्लॉक एलिमेंट काम करता है या कैसे इनलाइन ब्लॉक इनलाइन ब्लॉक डिस्प्ले आप यूज कर सकते हो तो आज की क्लास में आपने यार बहुत कुछ सीखा ठीक है आज की क्लास में आपने बहुत कुछ सीखा आपने सबसे पहले पढ़ा कि आपकी सीएसएस की डिस्प्ले प्रॉपर्टी होती क्या है तो एक एलिमेंट किस प्रकार से रेंडर हो सकता है आपके यूआई के ऊपर वो आपका सीएसएस की डिस्प्ले प्रॉपर्टी दर्शाती है ठीक है तो आपने वट वाला पार्ट सीखा पहले इसके अंदर आपने बोला कि यार तीन इंपॉर्टेंट चीजें डिस्कस करने के लिए तो हमने बात करी ब्लॉक डिस्प्ले ब्लॉक के बारे में डिस्प्ले इनलाइन के बारे में और डिस्प्ले इनलाइन ब्लॉक के बारे में तो हमने बोला ब्लॉक पले से क्या होता है अगेन चार प्रॉपर्टीज मैंने बताई थी आपको पहले प्रॉपर्टी न्यू लाइन पर आपका एलिमेंट रेंडर होगा एलिमेंट बाय डिफॉल्ट एक्सट्रीम लेफ्ट से एक्सट्रीम राइट तक के विड जितनी भी अवेलेबल हो सारी की सार लेगा कस्टम वेट ट आप यहां पे अप्लाई कर सकते हो कस्टम मार्जिन पैटिंग चार दिशाओ में अप्लाई कर सकते हो इनलाइन के अंदर हमने क्या फाइंड आउट किया कि भाई ये न्यू लाइन पर ंडर नहीं होता है सेम लाइन पर ंडर होने की कोशिश करता है अगर सेम लाइन प स्पेस अवेलेबल नहीं है तो न्यू लाइन पे जाएगा अ सेकंड यहां पर कंटेंट की जितनी विड्थ है उतनी ही विड्थ ली जाती है ठीक ऐसा नहीं कि एक्सट्रीम लेफ्ट से एक्सट्रीम राइट तक आप चले जाओगे कस्टम विड्थ हाइट यहां पर सेट नहीं कर सकते हो और हॉरिजॉन्टल मार्जिन ऐड कर सकते हो वर्टिकल मार्जिन नहीं हो पा रहा है ऐड तो मार्जिन पडि आपने देख ली यहां पे इनलाइन ब्लॉक के अंदर हमने क्या बोला कि यहां पर सारी इनलाइन की प्रॉपर्टीज चलेगी विद एन एडिशन कि यहां पर आप ब्लॉक की कस्टम विड्थ हाइट मार्जिन पैंग चेंज करने की प्रॉपर्टी को आपने ऐड कर दिया तो ये हमने बना ली इनलाइन ब्लॉक वाला डिस्प्ले प्रॉपर्टी ठीक है जी तो यह था आपका सीएसएस डिस्प प्रॉपर्टी जो कि बहुत ज्यादा इंपॉर्टेंट है आगे जाएंगे प्रोजेक्ट के अंदर तो इसकी नीड हमें पता लगेगी कहां पर क्या यूज करना है ठीक है और आपने सीखा यह छोटे से प्यारे से कोड के द्वारा ज्यादा कोड वाइज कुछ भी नहीं था पर हां क्लेरिटी तुम्हें मिली होगी छोटे से कांसेप्ट के ऊपर आपने एक चीज और पढ़ी आज की क्लास में जो कि था तुम्हारा बॉक्स साइजिंग बॉर्डर बॉक्स ठीक है बहुत इंपॉर्टेंट कांसेप्ट है एक बार उसको अप्लाई करना उसके बाद खेलने की कोशिश करना और इस लेक्चर में इतना ही दोस्त मिलेंगे आपसे नेक्स्ट लेक्चर के अंदर धन्यवाद न बाय बाय गुड नाइट लव यू ऑल और यहां पर हम पढ़ने वाले हैं सीएसएस की पोजीशन प्रॉपर्टी के बारे में कि इस प्रॉपर्टी के द्वारा आप कैसे डिफरेंट डिफरेंट एलिमेंट्स को पोजीशन कर सकते हैं स्क्रीन पर कि टॉप से कितनी दूरी पर रखना है लेफ्ट से कितनी दूरी पर रखना है बॉटम से कितनी दूरी पर रखना है राइट से कितनी दूरी पर रखना है पोजीशंस एलिमेंट को दूसरे एलिमेंट पे ओवरलैप करवाना है डाउन रखना है राइट रखना है तो सारी की सारी चीजें पोजिशनिंग से रिलेटेड आप इस लेक्चर के अंदर सीखने वाले हैं और भिन्न-भिन्न प्रकार के पोजीशन प्रॉपर्टी के टाइप्स हो सकते हैं हम अगर बात करें तो हमारे पास स्टैटिक एक टाइप है हमारे पास रिलेटिव एक वैल्यू है हमारे पास एब्सलूट एक पोजीशंस फिक्स्ड एक पोजीशन वैल्यू है हमारे पास स्टिकी एक पोजीशन वैल्यू है तो मेरे पास भिन्न-भिन्न प्रकार की पोजीशन प्रॉपर्टी वैल्यूज हैं और किस पर्टिकुलर वैल्यू से क्या बिहेवियर आप अचीव कर सकते हैं वह सब कुछ हम देखने वाले हैं एक बहुत ही प्यारे से एग्जांपल के थ्रू अभी सबसे पहला टारगेट है हमारा समझना कि सीएसएस पोजीशन प्रॉपर्टी होती क्या है व्हाट इज सीएसएस पोजीशन प्रॉपर्टी तो अगेन जैसे नाम से ही साफ-साफ पता लग रहा है कि मेरे पास बहुत सारे एलिमेंट्स हैं बहुत सारे कंपोनेंट्स आगे हम पढ़ने वाले हैं तो लेट्स से मैंने चार डिव बना दिए लेट्स से मैंने चार इमेजेस बना दी तो उन चार इमेजेस को मुझे कैसे पोजीशन करना है बाय डिफॉल्ट मुझे पता है बाय डिफॉल्ट मुझे पता है कि बाय डिफॉल्ट जो पोजिशनिंग प्रॉपर्टी होती है अप्लाई उसका नाम होता है स्टैटिक ठीक है तो स्टैटिक बाय डिफॉल्ट होती है इसमें आप बता नहीं सकते कि भाई लेफ्ट से कितना दूर राइट से कितना दूर बॉटम से कितना दूर टॉप से कितना दूर वो सारी की सारी चीजें आप इसमें z इंडेक्स भी अप्लाई नहीं कर सकते z इंडेक्स क्या होता है आगे जाके कुछ लेक्चर के अंदर हम सीखने वाले हैं z इंडेक्स क्या होता है ट्रांसफॉर्मेशन के बारे में पढ़ेंगे एनीमेशंस के बारे में जब पढ़ेंगे तो आपको z इंडेक्स के बारे में बताएंगे अभी के लिए आपको सिर्फ इतना जानना है कि पोजीशन प्रॉपर्टी का तात्पर्य सिर्फ इतना है कि मेरे पास बहुत सारे टैग्स हैं बहुत सारे एलिमेंट्स हैं इनको मुझे अपने वेब पेज पर कैसे पोजीशन करना है क्या जो नॉर्मल फ्लो होता है पोजीशन का वैसे ही नॉर्मली पोजीशन करना है या फिर मुझे ओवरलैप करवाना है या फिर अपने हिसाब से मुझे डिसाइड करना है कि इसको बॉटम लेफ्ट में दिखाओ इसको बॉटम राइट में दिखाओ इस प्रकार से तो मैं जब खुद से डिसाइड करना चाहता हूं किसी एलिमेंट की पोजीशन कि भाई इसको कहां पर दिखाए हमारे वेब पेज के ऊपर तो मैं यह पोजीशन प्रॉपर्टी का यूज डेफिनेटली करने वाला हूं इस पोजीशन प्रॉपर्टी का यूज मैं डेफिनेटली करने वाला हूं अभी आपको बहुत एग्जांपल्स हम दिखाएंगे उससे आपको आईडिया लगेगा कि आप जो डे टू डे वेबसाइट यूज करते हैं उनके अंदर ये सारी पोजीशन प्रॉपर्टी कहां-कहां यूज हो हुई होंगी तो आपको एक अच्छी क्लेरिटी मिल जाएगी अभी के लिए कितना समझ में आया अभी के लिए सिर्फ इतना समझ में आया कि पोजीशन प्रॉपर्टी जो है आपको सिर्फ इतना दर्शाती है कि एक एलिमेंट कैसे कहां पोजीशन आप कर सकते हैं ठीक है जी उसके साथ-साथ पोजीशन प्रॉपर्टी के साथ-साथ आपके पास कुछ और प्रॉपर्टीज आते हैं जैसे टॉप लेफ्ट राइट बॉटम जो कि दर्शाते हैं कि टॉप से कितना दूर रखें लेफ्ट से कितना दूर रखें राइट से कितना दूर रखें आपके एलिमेंट को बॉटम से कितना दूर रखें आपके एलिमेंट को ठीक है यहां पे आप साफ-साफ देख पा रहे हो पोजीशन स्टैटिक कर सकते हो रिलेटिव कर सकते हो एब्सलूट कर सकते हो स्टिकी कर सकते हो फिक्स्ड भी कर सकते हो यहां पर लिखा नहीं है शायद बट ठीक है इतना हमें पता है बाकी डॉक्यूमेंटेशन आप खुद से पढ़ सकते हैं एक बार खुद से पढ़ें आपको और क्लेरिटी मिलेगी हम एक बहुत ही सिंपल भाषा में आपको समझाने की कोशिश करेंगे और डेफिनेटली आपको समझ भी आ जाएगा अगर आप चाहे तो ये दो पर्टिकुलर वेबसाइट आप एक्सप्लोर कर सकते हैं पढ़ सकते हैं अ पोजीशन प्रॉपर्टी को समझने के लिए एक आपकी एमडीएन हो गई जो कि हमेशा हम यूज करते हैं एक आपके w3 स्कूल्स हो गी ठीक है तो यहां पर भी सेम चीज बताई गई है कि आप एक एलिमेंट को किस प्रकार से पोजीशन करते हैं वो आपकी पोजीशन प्रॉपर्टी दर्शाती है यहां पर व स्टैटिक बता दिया रिलेटिव बता दिया वगैरह वगैरह पांच छ चीजें बता दी इन्होंने ठीक है तो ये तो हम समझ लेंगे बहुत छोटा टॉपिक है बहुत ज्यादा लंबी वीडियो भी नहीं होगी अभी के लिए फिर दोबारा रिपीट करता हूं अभी के लिए मुझे सिर्फ इतना समझना है कि भाई साहब मेरे पास बहुत सारे एलिमेंट हो सकते हैं चाहे वोह एक डिव हो चाहे वो एक इमेज हो चाहे वो एक सेक्शन हो चाहे वो एक आर्टिकल हो चाहे वो एक पैराग्राफ हो मुझे उसे अपने यूआई पर मुझे उसे अपने वेब पेज पर कैसे पोजीशन करना है कहां पोजीशन करना है वो डिसाइड करने के लिए वो अचीव करने के लिए मैं पोजीशन प्रॉपर्टी का यूज करता हूं सवाल है कैसे मैंने कहा ऐसे आ जाओ तो हम गए हमारे कोड पर हमने कहा जी फटाफट लेक्चर नंबर अ लेक्चर नंबर 17 क्रिएट कर लेते हैं ठीक है लेक्चर नंबर 17 हमने क्रिएट कर लिया और मैंने कहा फटाफट इसके अंदर हमारी इक्ड html5 क्रिएट कर लेते हैं बॉयलर प्लेट कोड ऐड कर लेते हैं मैंने कहा फटाफट से इसको पहले लाइव जाते हैं देखते हैं कैसा दिख रहा है ये अभी एक ब्लैंक पेज दिख रहा होगा आपको बिल्कुल सही एक ब्लैंक पेज मुझे दिख रहा है वापस चलते हैं कोड के अंदर मैंने कहा कि यार मेरे पास ना कुछ इमेजेस हैं वो इमेजेस मैं इसमें इंसर्ट करना चाहता हूं तो मैंने फटाफट से वो इमेज इंसर्ट कर ली मैंने कहा यार यह चार इमेज मैंने अपने पास रखी हुई है इन चारों इमेजेस को मैंने अपने लेक्चर नंबर 17 के अंदर इंसर्ट कर लिया बहुत बढ़िया तो एयू व एयू टू एयू पी थ एयू फ और नाम से आपको पता लग रहा है कि भाई सुप्रीम 2.2 आने वाला है कमिंग सून है बहुत ही जल्द इसकी अनाउंसमेंट होगी बहुत ही जल्दी कैसे डिफरेंट है सारे पुराने बैचेज से पुराने बैचेज में हमने क्या-क्या अचीव किया पुराने बैचेज के बच्चे कहां-कहां प्लेज हुए और इस बैच में क्या लग होगा इस बैच में क्या एक्स्ट्रा होगा वो सब आपको बताया जाएगा ठीक है क्वालिटी वाइज आप ऑलरेडी जानते हैं कि हमने कभी कॉम्प्रोमाइज किया नहीं है दोस्त ठीक है हमारी चीजें अच्छी बात नहीं है फिर भी मैं ऑनेस्टी के साथ बता देता हूं हमारी चीजें थोड़ी डिले जरूर हो जाती हैं पर हमारी चीजें टॉप न होती है क्वालिटी के टर्म्स के अंदर ठीक है तो चलो इसका यूज़ करेंगे ये चार इमेज ये चार पोस्टर हमारे पास अवेलेबल हैं इनको यूज़ करके हम समझेंगे आज पोजीशन प्रॉपर्टी के बारे में तो मैंने क्या किया मैंने बोला सबसे पहले एक टॉप लेवल कंटेनर बना लेता हूं तो मैंने बोल दिया डॉट मैंने बोला डॉट कंटेनर इससे क्या हुआ एक डिव बन गया जिसकी क्लास का नाम कंटेनर सेट हो गया कोई बड़ी बात नहीं है आप खुद से भी टाइप करना चाहते हो तो आप कर सकते हैं कोई भी इशू नहीं है ठीक है अब मैंने क्या बोला यार इसके अंदर ना एक इमेज सेट करते हैं फटाफट तो मैंने बोला आ जाओ एक इमेज सेट करें तो मैंने इमेज टैग का यूज कर लिया और मैंने बोला कि भाई इसका जो सोर्स है ना वह सोर्स मैंने बता दिया एयू पीव ठीक है मैंने बोला इसका जो अल्टरनेट टेक्स्ट होगा ना उसको मैंने बोल दिया पोस्टर वन ठीक है ऐसा कुछ कुछ लिख दिया मैंने यूआई पर चेक करते हैं यूआई पर कैसा विजिबल हो रहा है एक बार चेक करते हैं आ जाओ तो यूआई पर पोस्टर तो आ रहा है पर बहुत बड़ा आ रहा है यार बहुत ज्यादा बड़ा आ रहा है ठीक है मैंने बोला छोटा करना चाहता हूं मैं इसको इसको मैं छोटा करना चाहता हूं तो मैं फटाफट अपने कोड पे गया मैंने बोला यार यहां पे इसके विड्थ जो है वो आप सेट कर दें 300 पिक्सेल और यहां पर जो इसकी हाइट है वो आप सेट कर दें 300 पिक्सल चेक करते हैं यूआई पर बढ़िया पोस्टर छोटा हो चुका है थोड़ा सा ठीक है पोस्टर थोड़ा सा छोटा हो चुका है जो कि हम चाहते थे ठीक है पहला काम डन ऐसे ही मैंने इसी कोड को फटाफट से कॉपी कर लिया इसी कोड को कॉपी कर लिया और मैं पेस्ट करता हूं पेस्ट करता हूं पेस्ट करता हूं मैंने बोला जी यहां पर मेरा सेकंड पोस्टर दिखा दो यहां पर मेरा सेकंड थर्ड पोस्टर दिखा दो यहां पर मेरा फोर्थ पोस्टर दिखा दो यह कर दो पोस्टर नंबर टू यह कर दो पोस्टर नंबर थ्री और यह कर दो पोस्टर नंबर फोर तो इस प्रकार हमने क्या देखा यूआई पर मेरे पास यह चार इमेजेस मुझे विजिबल हो गई हैं मैंने कहा यार मजा नहीं आ रहा थोड़ा सा गैप मैं ज्यादा चाहता हूं इन चारों इमेजेस के अंदर तो फटाफट से इनके बीच का गैप मैं इंक्रीज कर देता हूं यूजिंग मार्जिन प्रॉपर्टी तो मैं गया फटाफट यहां पर और मैंने अपना जो स्टाइल टैग है उस स्टाइल टैग का यूज कर लिया और मैंने कहा जी आईएमजी पर अपनी प्रॉपर्टी अपनी कॉन्फ़िगरेशन अप्लाई करेंगे सीएसएस की तो मैंने कह दिया जी यहां पर मार्जिन टॉप नहीं चाहिए था मार्जिन लेफ्ट चाहिए था मैंने बोल दिया मार्जिन लेफ्ट 10 पिक्सल अब थोड़ा सुंदर लग रहा है मैंने बोला ऐसा करो लेफ्ट छोड़ो तुम हर जगह का मार्जिन दे दो इतना ही 10 पिक्सल अब दिखाओ अब अच्छा लग रहा है बहुत बढ़िया ठीक है अभी इतना समझ में आ रहा है लेट्स से मैं यहां पे गया और मैंने बोला कि मेरे को डिव की एक प्रॉपर्टी सेट करनी है मैंने यहां पे बोला डिव के अंदर लेट्स से मैंने बोला वन पिक्सेल वन पिक्सेल सॉलिड ब्लैक तो मैंने एक बॉर्डर सेट कर दिया वन पिक्सेल का ठीक है ये समझ में आ रहा है तो मुझे क्या समझ में आया अभी तक मेरा जो कोड है वो इस प्रकार का है भाई अ मेरा कोड इस प्रकार का है कि ये मेरा बन गया टॉप लेवल डिव जिसकी क्लास का नाम मैंने कंटेनर दे रखा है और ये बन गई मेरी चार इमेजेस पहली इमेज ये रही कुछ मार्जिन है दूसरी इमेज ये रही कुछ मार्जिन है तीसरी इेज ये रही कुछ मार्जिन है चौथी इमेज ये रही कुछ मार्जिन है अभी तक तो पुराना जो कोड है जो हम ऑलरेडी जानते हैं वो हम सीख रहे हैं ठीक है उसमें कुछ नया नहीं है बॉर्डर अप्लाई करना आता था डिव क्रिएट करना आता था क्लास देनी आती थी इमेज ऐड करनी आती थी फट थाइट यहां पर मुझे ऐड करनी आती थी चलो ये बात समझ में आ गई ठीक है इसी बात पे एक होमवर्क ले लो फटाफट मुझे बताओ जो आईएमजी टैग है क्या वो ब्लॉक टैग है ब्लॉक एलिमेंट है या फिर इनलाइन एलिमेंट है या इनलाइन ब्लॉक एलिमेंट है फटाफट इसका आंसर मुझे कमेंट सेक्शन में देना एकदम से बोलते बोलते मेरे को लगा कि मैं कुछ गलत बोल रहा हूं तो फटाफट इसका आंसर मुझे देना कि इमेज टैग आईएमजी टैग इन तीनों में से कौन सा टाइप का एलिमेंट क्रिएट करता होगा ठीक है तो ये बात समझ में आ गई अब हम बात कर रहे थे प पोजिशनिंग के बारे में बात कर रहे थे हम पोजिशनिंग के बारे में तो मैंने क्या कहा मैंने बोला मैं बात कर रहा हूं सेकंड वाली इमेज की अगर मैं सेकंड वाली इमेज को रिलेटिव प्रॉपर्टी असाइन कर दूं तो इससे क्या होगा तो मैं फटाफट गया और मैंने बोला इस इमेज का ना अपने क्लास असाइन कर दी ये मेरी सेकंड वाली इमेज थी या सबको मैं क्लास साइन करता हूं मैं सबको क्लास साइन करता हूं मैंने बोला इसको बोल दिया मैंने इमेज वन ऐसे करके मैंने सबको क्लास साइन कर दी मैंने बोला इसकी क्लास हो गई इमेज टू और यहां से कॉपी करके अपन पेस्ट कर देते हैं यह बन गया इमेज फोर बढ़िया तो यूआई पर चेक करते हैं अभी क्या है हमने एक कंटेनर बना रखा है उस कंटेनर में एक बर्डर हमने सेट कर रखा है अंदर चार इमेजेस हमने सेट कर रखी है हमारे चार पोस्टर हमने क्रिएट कर रखे हैं सुप्रीम कमिंग सून के और इमेज हमार केस में 10 पिक्सल का मार्जिन सेट कर रखा है चारों दिशाओं में चेक करते हैं यूआई पे कैसा लग रहा है ठीक है यूआई पे ऐसा लग रहा है अब यहां पर मैंने क्या टारगेट लिया अब मैंने यहां पर टारगेट लिया क्योंकि मुझे आपको पोजिशनिंग प्रॉपर्टी समनी है ठीक है बाय डिफॉल्ट मुझे पता है कि बाय डिफॉल्ट हर किसी इमेज के ऊपर यहां पर हर किसी एलिमेंट के ऊपर स्टैटिक पोजीशन प्रॉपर्टी अप्लाई कर रही है स्टैटिक पोजीशन प्रॉपर्टी बाय डिफॉल्ट प्रॉपर्टी होती है जिसके ऊपर ना तो आप टॉप प्रॉपर्टी मेंशन कर सकते ना बॉटम ना लेफ्ट ना राइट इन चारों में से कोई भी प्रॉपर्टी मेंशन आप नहीं कर सकते अगर आप करेंगे तो कुछ फर्क पड़ेगा नहीं ना z इंडेक्स मेंशन कर सकते ठीक है अब z इंडेक्स क्या होता है आगे जाके हम ट्रांसफॉर्मेशन के बारे में पढ़ेंगे एनिमेशन के बारे में पढ़ेंगे तो आपको क्लियर करवा देंगे अभी लेट्स से हम ट्राई करते हैं लेट्स से मैं गया और मैंने बोला जो इमेज टू वाली क्लास है ना तो मैंने यहां पर लिखा जो इमेज टू वाली क्लास है ना उसको मैंने बोला कि यार टॉप से ना आप टॉप टॉप से 100 पिक्सेल नीचे आ जाओ तो मैंने बोला जी आप टॉप से 100 पिक्सेल नीचे आ जाओ तो क्या यूआई पे कुछ फर्क पड़ा नहीं पड़ा क्यों क्योंकि बाय डिफॉल्ट पोजीशन प्रॉपर्टी स्टैटिक है और स्टैटिक के ऊपर आप ये सब टॉप लेफ्ट बॉटम राइट प्रॉपर्टी मेंशन नहीं कर सकते ठीक है अब यहां पे क्या टारगेट लिया मैंने मैंने टारगेट ये लिया कि मान लो मेरे पास यहां पर ये मेरा पूरा का पूरा डेव है इस डेव के अंदर मेरे पास ये चार पोस्टर हैं पहला पोस्टर दूसरा पोस्टर तीसरा पोस्टर चौथा पोस्टर मैंने टारगेट ये लिया कि यार मुझे जो यह वाला पोस्टर है ना इसको मुझे थोड़ा सा नीचे खिसका आना है यहां लेके आना है ऐसा कुछ करना है ठीक है तो पोजीशन के बारे में हम थोड़ा सीखने वाले हैं कैसे पोजीशन काम करती है तो हमने सिंपल सी एक चीज की मैंने बोला कि लेट्स से आपको थोड़ा समझा देता हूं पहले तो मैंने बोला ये आपकी करंट विंडो है जिस विंडो के अंदर आप काम कर रहे हैं ये आपकी करंट विंडो है जहां पर आप काम कर रहे हैं अभी आपकी चार इमेज आपको यहां नजर आ रही है लेट्स से पहली इमेज दूसरी इमेज तीसरी इमेज चौथी इमेज और मैंने बोला इस वाली इमेज को यहां से हटाकर मैं चाहता हूं ये थोड़ी सी नीचे आ जाए ठीक है तो आप यहां पर पोजीशन प्रॉपर्टी का यूज कर सकते हैं आप पोजीशन चेंज करना चाह रहे हैं यहां से यहां पर तो आप इसको रिलेटिव पोजीशन के द्वारा मेंशन कर पाएंगे कैसे मैंने बोला रिलेटिव पोजीशन प्रॉपर्टी का तात्पर्य मतलब इतना होता है कि आप जो यह करंट विंडो है जिस विंडो में आप काम कर रहे हैं उस विंडो के कॉरस्पॉडिंग उस विंडो के रिलेटिवली किसी भी एलिमेंट को पोजीशन कर सकते हैं यूजिंग टॉप प्रॉपर्टी लेफ्ट प्रॉपर्टी राइट प्रॉपर्टी एंड बॉटम प्रॉपर्टी पटी अभी समझ में नहीं आया होगा अभी समझ में आ जाएगा जैसे अपन कोड करेंगे तो हमने बोला कि मैंने क्या किया जो मेरी इमेज टू है ना जो मेरी इमेज टू है उसको मैंने पोजीशन कर दिया रिलेटिव इससे कुछ फर्क पड़ा क्या चेक करते हैं पे कोई फर्क नहीं पड़ा अब पड़ेगा मैंने कहा जो सेकंड वाली इमेज है ना मेरी ये वाली इमेज इसको मैं नीचे करना चाहता हूं तो मैंने बोला टॉप से इसका स्पेस बढ़ाओ 100 पिक्सेल टॉप से स्पेस बढ़ाओ बाय 100 पिक्सेल तो क्या फर्क पड़ा बिल्कुल पड़ा मैंने बोला थोड़ा सा मैं इसको राइट में खिसका चाहता हूं तो मैं फटाफट यहां पे गया और मैंने बोला करो लेफ्ट से भी स्पेस बढ़ाओ इसका 100 पिक्सल तुम जितने पिक्सल रखना चाहो रख सकते हो कोई इशू नहीं है तो राइट में खिसक गया मैंने कहा थोड़ा और खिसका चाहता हूं मैंने इसको कर दिया 200 पिक्सल 200 ठीक है तो और किसक गया ऑब्जर्वेशन क्या है ऑब्जर्वेशन क्या है फटाफट राइट डाउन कर लेते हैं ऑब्जर्वेशन दोस्त यह है कि आप जब भी काम कर रहे होंगे रिलेटिव अ पोजिशनिंग प्रॉपर्टी के साथ तो आपने क्या बोला जब भी रिलेटिव का यूज़ कर रहा हूं पहली बात जो भी आपकी करंट विंडो है करंट विंडो के रिलेटिवली मैं ऑब्जेक्ट को पोजीशन कर रहा हूं सेकंड चीज मेरे पास चार एट्रिल हैं चार प्रॉपर्टीज है मेरे पास एट्रिल नहीं प्रॉपर्टीज है मेरे पास टॉप लेफ्ट राइट एंड बॉटम इन चारों प्रॉपर्टी का यूज करके मैं स्पेसिंग डिफाइन कर सकता हूं कि मुझे अपने एलिमेंट की पोजीशन किस हिसाब से करनी है ठीक है तीसरी बात एक ऑब्जर्वेशन अगर आपने की हो मैं भले ही इस वाली इमेज को मूव कर रहा हूं पर जो इस वाली इमेज का स्पेस था ना वो इंटैक्ट है वो गैप अभी भी मेंटेंड है तो आप यहां पर साफ-साफ ऑब्जर्व कर पा रहे हैं कि गैप अभी भी मेंटेंड है क्या बात समझ में आती है इस प्रकार पहली चीज रिलेटिव जो आप पोजीशंस आप पोजीशन कर रहे होते हैं सेकंड चीज आप लेफ्ट खिसका आना चाहते हैं राइट खिसका चाहते हैं टॉप खिसका चाहते हैं बॉटम खिसका चाहते हैं ये चार प्रॉपर्टी का आपको यूटिलाइजेशन करना पड़ेगा थर्ड चीज जब भी आप खिसका रहे हैं किसी भी एलिमेंट को तो उसका स्पेस जो है पुराना वाला जहां पर पहले था वो वो मेंटेन रहेगा वो हटेगा नहीं तो आप सीख चुके हैं रिलेटिव पोजी प्रॉपर्टी के बारे में अब बात करते हैं अब बात करते हैं एब्सलूट पोजीशंस जोल्यूट पोजीशन की बात करते हैं और हमने बहुत ज्यादा यूज़ किया एब्सलूट पोजी निंग ठीक है ये आपकी एब्सलूट पोजिशनिंग है और मेजर्ली एब्सलूट पोजिशनिंग कब करते हैं मेजर्ली हमने जितनी बार यूटिलाइजेशन किया है अपने वेब डव कोर्स के अंदर जब भी आपको ओवरलैपिंग करवानी होती है जब भी आपको ओवरलैपिंग करवानी होती है तो आप यूज करते हैं आपके एब्सलूट पोजिशनिंग का ठीक है और एक अच्छी प्रैक्टिस क्या मानी जाती है अच्छी प्रैक्टिस क्या मानी जाती है कि यहां पे साफ-साफ लिखा हुआ है इट इज पोजीशन रिलेटिव टू इट्स क्लोजेस्ट पोजीशन एंसेट तो इसका जो भी सबसे क्लोज एंसेट होगा जैसे यहां पर अगर हम कोड वाइज देख पाए तो हमने जो कोड लिखा हुआ है अभी कैसे लिखा है हमने ये लिखा है कि भाई ये एक डिव है इसके अंदर ये चार आईएमजी टैग हैं पहली इमेज दूसरी इमेज तीसरी इमेज चौथी इमेज तो डॉम के अंदर इस इमेज का नियरेस्ट पेरेंट भी यही है इस इमेज का पेरेंट भी यही है इस इमेज का पेरेंट भी यही है और इस इमेज का पेरेंट भी है एक अच्छी प्रैक्टिस क्या फॉलो की जाती है कि लेट्स से अगर मुझे मुझे इस इमेज के ऊपर एब्सलूट पोजीशन अप्लाई करनी है तो इसने क्या बोला है वो एब्सलूट पोजीशन किसके रिलेटिव करते हो आप ठीक है किसके आधार पर आप यहां पर बताओगे कि टॉप से इतना आ जा लेफ्ट से इतना आ जा राइट से इतना आा बॉटम से इतना आ जा ऊपर रिलेटिव वाले केस के अंदर तो आप करंट विंडो के आधार पे बताते हो कि भाई टॉप से इतना लेफ्ट से इतना राइट से बॉटम से इतना यहां पर एब्सलूट के केस में ये टॉप लेफ्ट राइट बॉटम किसके ऊपर अप्लाई करता है ये इसके क्लोजेस्ट पोजीशन एंसेट पे अप्लाई करता है तो हम प्रैक्टिस हमेशा यह फॉलो करते हैं कि जो भी आपका क्लोजेस्ट पोजीशन एंसेट है हम हमेशा ट्राई करते हैं इसको रिलेटिव मार्क कर दें और बाद में जो भी हमारा इमेज है उसको एब्सलूट मार्क करते हैं क्या इसके बिना नहीं कर सकते इसके बिना भी ट्राई करोगे तो हो जाएगा कुछ हैक्स अवेलेबल है बट हां अपन ये हमेशा ट्राई करेंगे करने का तो मैंने क्या किया मैंने इस कंटेनर वाली क्लास को फटाफट से रिलेटिव मार्क कर दिया मैंने बोला डॉट कंटेनर और मैंने बोल दिया पोजीशन रिलेटिव क्या यूआई पे कुछ फर्क पड़ेगा इससे लगता तो नहीं है वैसे का वैसा ही है u आई मैंने बोला जो मेरी सेकंड वाली इमेज थी ना इमेज टू इसको मुझे पोजीशन करना है एब्सलूट तो मैंने बोला पोजीशन एब्सलूट कर देते हैं फटाफट एब्सलूट क्या कुछ फर्क पड़ा इससे मैंने कहा वही का वही तो नहीं है कुछ गड़बड़ तो हुई है चेक करते हैं क्या गड़बड़ हुई है हमारी तीन इमेज चार इमेज थी तीन ही बची है देखते हैं कहां गई हमारी इमेज मैंने इसको कर दिया एक बार ऐसा कमेंट और देखते हैं क्या हुआ तो हमारी यह वाली इमेज गायब हो गई थी राइट तो एक बार देखते हैं इमेज गायब क्यों हुई ये इमेज टू है और आपने ने इमेज फोर ये है इमेज थ्री ये है इमेज टू ये है इमेज वन ये है ठीक है तो आपने क्या किया आपने बोला कि इसको मैं मार्क कर देता हूं फटाफट एब्सलूट और एक चीज आप ऑब्जर्व कर पाओगे अभी ऑब्जर्वेशन ये है कि अगर मैं इसको लेट्स से बोल दूं टॉप से बेटा ऐसे 100 पिक्सल नीचे आ जाओ ये नीचे तो आई पर क्या हुआ ये ओवरलैप कर गई जो पुराना गैप मेंटेन हो रहा था रिलेटिव के अंदर वो गैप मेंटेन नहीं हो रहा अब समझ में आया ये छुप क्यों गई थी अब समझ में आया कि लाल वाली इज छुप क्यों गई थी नहीं समझ में आया अभी दिखेगा तुम्हें दोबारा दिखाता हूं मैंने बोला देखो तुम्हारी डार्क पर्पल वाली इमेज छुप गई होगी दोबारा दिखाता हूं अभी बिफोर कमेंटिंग दिस आपकी पर्पल वाली इमेज कहां है यह रही ठीक है अभी आप इसको मार्क भी नहीं करते हैं बाय डिफॉल्ट आपकी पर्पल वाली इमेज कहां है यहां पर है थर्ड नंबर पे ठीक है यह रही ब्लू यह रही पर्पल यह रही रेड अगर मैं सिंपल यहां पर जाऊं और मैं सिंपल जाके यहां पर लिख दूं पोजीशन एब्सलूट तो इससे क्या हो रहा है इससे क्या हो रहा है मेरी पर्पल वाली इमेज गायब हो गई मैंने कहा गायब नहीं हुई है ध्यान से देखो अगर मैं फटाफट अपने इमेज टू को नीचे खिसका दूं अगर मैं इसको नीचे खिसका दूं तो मैं क्या ऑब्जर्व कर पा रहा हूं मैं ऑब्जर्व ये कर पा रहा हूं कि पर्पल वाली इमेज मेरी ब्लू वाली इमेज के नीचे चली गई यानी मेरी ब्लू वाली इमेज ने पर्पल वाली इमेज को ओवरलैप कर लिया ऑब्जर्व करो कि जब भी मैं एब्सलूट पोजिशनिंग करता हूं जब भी मैं एब्सलूट पोजिशनिंग करता हूं तो क्या होता है मेरा गैप मेंटेन नहीं होता जैसे यहां पे क्या हुआ था अभी ध्यान से देखते हैं मैंने बोला कि सिनेरियो क्रिएट करते हैं फटाफट यहां पे ठीक है मैंने ने बोला जी मेरे पास इस सिनेरियो में यहां पर ये चार बॉक्सेस थे ठीक है इसका नाम मैंने 1 2 3 4 ये चार बॉक्सेस थे मैंने यहां पर पोजीशन प्रॉपर्टी यूज करी रिलेटिव ठीक है तो मैंने सेकंड वाले के ऊपर रिलेटिव प्र पोजीशन प्रॉपर्टी मेंशन कर दी मैंने बोला टॉप से 100 पिक्सल नीचे आ जाओ ठीक है तो क्या बनेगा तो क्या बनेगा इससे हुआ कुछ इस प्रकार कि सबने अपनी-अपनी स्पेस मेंटेन कर रखी है जो जहां पर था वहीं पर है बस ये वाला नीचे आ गया ठीक है तो वन अपनी जगह पे है थ्री अपनी जगह पे है फोर अपनी जगह पे है टू बस नीचे आ गया तुम्हारा जो भी पुरानी पोजीशन थी उससे तो अपनी 100 100 पिक्सेल नीचे आ गया ठीक है अगर इसी को मैं बोल दूं कि यहां पर आपने एब्सलूट पोजीशंड वाली इमेज के ऊपर या ब्लॉक के ऊपर ही और आपने कह दिया टॉप से 100 पिक्सेल तो सबसे पहले क्या होता है एब्सलूट पोजिशनिंग के अंदर वो समझाता हूं सबसे पहले जब भी आप एब्सलूट पोजीशन करते हैं तो आपका ये आ गया वन ठीक है जो टू का स्पेस था वो हट जाता है टू का स्पेस था हट जाता है आगे वाले सारे के सारे अ इमेजेस शिफ्ट कर जाएंगे तो ये आपका आ गया यहां पर थ्री और ये आपका आ गया यहां पर फोर बहुत बढ़िया तो आपका एब्सलूट पोजिशनिंग करने से सबसे पहले जो स्पेस था ना जो यहां पे प्रिजर्व्ड था रिलेटिव के केस में यहां पर प्रिजर्व्ड था वो प्रिजर्व्ड स्पेस हट गया कोई गैप मेंटेन नहीं होगा यहां पे सेकंड काम आपने बोला टॉप से 100 पिक्सल तो इसका मतलब आपका टू जो है वो यहां पर आ गया बहुत बढ़िया या फिर लेट्स से आप ये मेंशन नहीं करते तो आपका टू जो होता है इसके ऊपर ही ओवरलैप कर रहा होता और दैट्ची कही थी कि मैं एब्सलूट के द्वारा ओवरलैपिंग क्यों करता हूं आई थिंक अब समझ में आ गया होगा तो तुम में से कुछ बच्चों का डाउट ये भी होगा कि भैया जब हमने इसको टॉप से 100 रखा और इसको राइट से 100 रखा तो टू हट के यहां पर शिफ्ट हुआ था टू भी तो ओवरलैप कर रहा था इसके साथ बेटा टू ओवरलैप तो कर रहा था पर क्या गैप तुम्हारा हट गया था गैप तो मेंटेन था हमें गैप भी नहीं चाहिए होता ना तो हमने अभी क्या ऑब्जर्व किया कि जब भी हम एब्सलूट पोजीशंस पहली चीज क्या ऑब्जर्व करी हमने कि भाई साहब ये एब्सलूट होता है रिलेटिव टू पोजीशन रिलेटिव टू इट्स क्लोजेस्ट क्लोजेस्ट पोजीशन पोजीशन एंसर पहला काम तो आपको यह समझ में आ गया ठीक है सेकंड आपने क्या बोला कि भाई यह गैप मेंटेन नहीं करता इसका गैप ऑन द स्पॉट हट जाएगा जैसे ही आप जैसे ही आप एब्सलूट मेंशन कर रहे होंगे दो पॉइंट्स तो ये हो गए थर्ड पॉइंट क्या था हमारे पास ये टॉप लेफ्ट राइट बॉटम ठीक है वो तो इसके अंदर भी हम यूज़ कर सकते हैं ठीक है तो अगर एब्सलूट के अंदर भी ये टॉप लेफ्ट राइट बॉटम यूज करना चाहे तो ये सारी प्रॉपर्टीज हम यहां पर भी यूज कर सकते हैं ठीक है तो ये सब तो हम यहां पर भी यूज़ कर सकते हैं कोई इशू नहीं है ए सच ठीक है तो ये थोड़ा बहुत समझ में आया कि कैसे ओवरलैपिंग की हम बात कर रहे थे कैसे एब्सलूट तुम्हारा काम कर रहा है ठीक है ये समझ में आया अभी के लिए मैं इसको कमेंट कर देता हूं फटाफट ठीक है अब बात कर रहे हैं अब बात कर रहे हैं कि भैया अपने को क्या चाहिए अपने को अब समझना है फिक्स्ड फिक्स्ड पोजीशंस से मैं इमेज फोर पे गया और मैंने बोल दिया कि इसको फिक्स्ड मार्क कर दो तो मैं मैं फटाफट से जाता हूं इमेज फोर के ऊपर इमेज फोर और मैंने बोल दिया कि इमेज फोर को इसको आप फिक्स्ड मार्क कर दो फिक्स से क्या होता है आपकी पूरी की पूरी इमेज जो हमेशा फिक्स रहेगी अभी तो कुछ समझ में नहीं आ रहा भैया क्यों नहीं समझ आ रहा क्योंकि आपकी विंडो में सिफ इतना ही कंटेंट है लेट्स से मैंने जो कंटेनर है आपका उसको बोल दिया कि भाई साहब कंटेनर आपकी जो हाइट है ना वो मैंने मेंशन कर दी 8000 पिक्सल ठीक है तो आपके कंटेनर की हाइट बढ़ गई अब ध्यान से ऑब्जर्व करना जब मैं स्क्रॉल करूंगा तो आपकी फोर्थ वाली इमेज अपनी जगह पर फिक्स्ड रह गई पहली चीज आपने ये ऑब्जर्व करी एक बार कंटेनर का बैकग्राउंड कलर मेंशन करते हैं उसके बाद आगे बढ़ेंगे तो मैंने बोला इसका बैकग्राउंड कलर मेंशन करो लेटस से मैंने इसका बैकग्राउंड कलर ऐसा बेज मेंशन कर दिया ठीक है अब चेक करो यूआई पे अब थोड़ा और समझ में आ रहा होगा ठीक है तो यहां पे ये फोर्थ इमेज अपनी जगह पर इंटैक्ट है ये फोर्थ इमेज अपनी जगह पर इंटैक्ट है इसको हम कहते हैं फिक्स्ड पोजीशंस प्रकार से आप फिक्स पोजिशनिंग भी कर सकते हैं एक लास्ट हमारे पास प्रॉपर्टी है बची हुई है इसका नाम है स्टिकी सो लेट्स से मैंने बोला थर्ड वाली इमेज के ऊपर स्टिकी प्रॉपर्टी अप्लाई करते हैं तो मैंने बोला मैं फटाफट गया डॉट इमेज 3 और मैंने बोल दिया पोजीशन और मैंने बोल दिया स्टिकी तो इससे क्या हुआ ऑब्जर्व करते हैं अब अगर मैं यहां पर स्क्रॉल करता हूं अरे ये तो कुछ भी नहीं हुआ अरे ये तो चला ही नहीं क्यों नहीं चला वेरीफाई करते हैं फटाफट हमने बोला डॉट इमेज 3 में पोजीशन आपने स्टिकी मार्कट दी है और यह आपका इमेज थ्री आपने सेट किया हुआ है कहां पर गलती करी है दोस्त हमने स्टिकी से क्या होता है एक बार चलते हैं डॉक्यूमेंटेशन के अंदर हमने कहां पर गलती कर दी फटाफट चलते हैं स्टिकी के पास तो इसने क्या कहा कि जो भी नॉर्मल फ्लो होता है उसके अकॉर्डिंग ली आप मेंशन कर देंगे यहां पे और आप टॉप लेफ्ट वगैरह वगैरह प्रॉपर्टीज का यूज करके इसको पोजीशन कर सकते हैं तो ऐसे कहते हैं हम र यार चल नहीं रहा हमारा ढंग से चल नहीं रहा तो एग्जांपल हम देख के आते हैं फटाफट तो हम गए यहां पे हमने क्या देखा कि स्टिकी के केस के अंदर हमें क्या करना पड़ा हमें ऐसे मेंशन भी करना पड़ा कि कहां पर कौन सी पोजीशन पर आप मेंशन कौन सी पोजीशन पर आप स्टकी करवाना चाहते हैं तो मैंने कहा ठीक है तो मैंने यहां पे बता दिया कि मैं चाहता हूं कि यह टॉप से 100 पिक्सेल पर स्टिकी रहे टॉप से 100 पिक्सेल पर स्टिकी रहे मैंने कहा ठीक है तो यूआई में ध्यान से देखो ऑब्जर्व कर पा रहे हो तो सबसे पहली चीज ऑब्जर्व करी कि थर्ड इमेज आपके टॉप से 100 पिक्सेल पर नीचे आ गई और जब मैं स्क्रोल करता हूं तो अपनी पोजीशन पर इंटैक्ट है तो ये अपनी पोजीशन पर इंटैक्ट है अभी आपको फिक्स्ड में और स्टिकी में थोड़ा कंफ्यूजन हो रही होगी जब फिक्स्ड किया तब भी अपनी पोजीशन पर इंटैक्ट है और स्टिकी किया तब भी अपनी पोजीशन पर इंटैक्ट इसको कंफ्यूजन को दूर करते हैं फटाफट हमने क्या किया हमने एक और कंटेनर क्रिएट किया यहां फटाफट हमने यहां पर एक और कंटेनर क्रिएट किया मैंने इसका नाम रख दिया बॉक्स और मैंने यहां पर बोल दिया बॉक्स बस बॉक्स कर दिया मैंने और कुछ नहीं करा और फटाफट य बॉक्स की प्रॉपर्टी मेंशन कर देता हूं मैंने बोला जी यहां पर आ गए डॉट बॉक्स मैंने बोला जी इसका एक बीजी कलर मेंशन कर दो मैंने बोला इसका बीजी कलर मेंशन कर दो एक बीजी कलर हमने लेट्स से बोल दिया ऐसा एक्वा मरीन और मैंने बोल दिया इसकी हाइट कितनी रखें इसकी हाइट मैंने बोल दी 5000 पिक्सल ठीक है तो यहां पर दो कंटेनर आ गए अब अब तुम्हें और अच्छे समझ में आएगा ठीक है तो बाय डिफॉल्ट क्या हुआ बाय डिफॉल्ट आपने फोर्थ वाली इमेज को इस इमेज को आपने फिक्स्ड मार्क कर रखा है इसकी जो भी इमेज थी जहां पर भी इसकी जो भी पोजीशन थी जहां पर यह था वहां पर यह स्टिक करेगा वहीं पर फिक्स रहेगा और ये स्टिकी है इसकी आपने टारगेट पोजीशन बता कि टॉप से 100 पिक्सेल नीचे रही हो और यहीं पर ये स्टिक करेगा अभी तक दोनों में कंफ्यूजन चल रही है कि चल रही है चल रही है चल रही है अब तुम्हें थोड़ी सी क्लेरिटी मिलने वाली है ऑब्जर्व करना तो देखो स्टिकी वाले केस के अंदर वो स्टिकी कब तक रहता है थर्ड इमेज स्टिकी कब तक रही जब तक वह अपने पेरेंट कंटेनर के अंदर थी और जैसे ही पेरेंट कंटेनर स्क्रॉल करके ऊपर चला गया तो व इमेज भी चली गई बट फिक्स्ड वाली इमेज विंडो के हिसाब से फिक्स्ड है पूरी विंडो में फिक्स्ड रहेगी अब एग्जांपल दिखाते हैं तुमने ऐसी बहुत सारी वेबसाइट्स देखी होगी तुमने ऐसी बहुत सारी वेबसाइट्स देखी होगी जहां पर तुम स्क्रॉल करो या ना करो तुम्हारे पास यहां पर एक बटन होता है जहां पर लिखा होता है कांटेक्ट अस या फिर कोई चैट बॉट होता है तुम स्क्रोल करो मत करो पेरेंट में जा किसी एक कॉम्पोनेंट में हो चाहे दूसरे कॉम्पोनेंट में कहीं पर भी हो ये बटन यहां पर फिक्स्ड होता है तो मुझे बताओ यहां पर रिलेटिव मार्किंग करी होगी एब्सलूट मार्किंग करी होगी फिक्स्ड मार्किंग करी होगी या स्टिकी मार्किंग करी होगी ये मुझे बताना ठीक है तो ये तो हमने ऑब्जर्व किया अब फिक्स्ड और स्टिकी में दोबारा से एक बार डिफरेंस समझा देता हूं क्या डिफरेंस है फिक्स्ड और स्टिकी के अंदर स्टिकी जो होता है वो अपने पेरेंट कंटेनर के अंदर ही स्टिकी बिहेवियर शो करता है तो मैंने जो यहां पर एक डिव बना रखा था और यहां पर इमेज वन इमेज टू इमेज थ्री इमेज फोर था तो मैंने जब यहां पे आके बोला कि इमेज थी को स्टिकी कर दो तो इमेज थ्री स्टिकी कब तक शो करेगी जब तक वो इस डिव के अंदर है जैसे ही आप लेट्स से नेक्स्ट डिव को शो कर रहे हो यूआई के ऊपर तब ये इमेज हट चुकी होगी पर फिक्स्ड जो है वो आपके एंटायस के लिए आप कहीं पर भी स्क्रॉल कर लो अपने वेब पेज के ऊपर एंटायस के ऊपर यह वाले फिक्स्ड पोजीशन आपकी होने वाली है जबकि ये जो स्टिकी पोजीशंड टू आपका पेरेंट कंटेनर होती है या पेरेंट एलिमेंट जो भी आप क्रिएट करेंगे उसके आधार पर ठीक है तो आपने अभी पढ़ा सीएसएस पोजीशन प्रॉपर्टी के बारे में एक बार फटाफट से मैं रिपीट कर देता हूं रिवाइज करवा देता हूं हमने बोला बाय डिफॉल्ट आपके पास जो प्रॉपर्टी पड़ी होती है उसका नाम क्या होता है उसका नाम हमने रखा हुआ है स्टैटिक स्टैटिक के ऊपर आपने ऑब्जर्व किया चाहे टॉप की बात कर लो चाहे लेफ्ट की बात कर लो चाहे राइट की बात कर लो चाहे बॉटम की बात कर लो चाहे z इंडेक्स की बात कर लो इनमें से कुछ भी अप्लाई नहीं कर रहा होता ये बाय डिफॉल्ट स्टैटिक प्रॉपर्टी होती है आपके हर एक एलिमेंट की सेकंड केस में आपने पढ़ी अपनी रिलेटिव पोजीशन निंग ठीक है रिलेटिव पोजिशनिंग हमने क्या पढ़ा ये पोजीशन आपकी करंट विंडो के आधार पर होती है कर करंट विंडो के रिलेटिवली आप पोजीशन कर सकते हैं किसी भी एलिमेंट को कौन सी प्रॉपर्टी का यूज करेंगे आप पोजीशंस चलाएं आप राइट चलाएं आप बॉटम जलाएं z इंडेक्स मैं आपको आगे समझाऊं पर हां इन चार प्रॉपर्टी का यूज करके आप रिलेटिवली अपने एलिमेंट को कहीं पर भी पोजीशन कर सकते हैं एक चीज यहां पर नोट करने योग्य है वो यह है कि आप भले ही अपने उस पर्टिकुलर एलिमेंट को पोजीशन कर ले रिलेटिवली पर उस एलिमेंट की जो अ ओल्ड पोजीशन थी जहां पर सबसे पहले वो था वो ओल्ड पोजीशन का जो गैप क्रिएट हुआ होगा वो गैप मेंटेन रहेगा वो गैप फिल नहीं हो पाएगा आगे हमने पढ़ा हमारी एब्सलूट पोजीशन के बारे में वहां पे हमने सेम वही चीज देखी कि एब्सलूट पोजीशन किसके टिव होती है जो भी इसका क्लोजेस्ट पेरेंट होगा ना मैंने बोला जो भी इसका क्लोजेस्ट पोजीशन पेरेंट होगा उसके अकॉर्डिंग आप यहां पर एब्सलूट पोजीशंस चाहे वो टॉप हो चाहे वो लेफ्ट हो चाहे वो राइट हो चाहे वो बॉटम हो उनका यूटिलाइजेशन कर सकते हैं पॉइंट टू नॉट हियर इज कि यहां पर लेट्स से जो आपकी इमेज का ओल्ड गैप क्रिएट हुआ होगा जो उसकी ओल्ड पोजीशन से हटा के आपने उसको शिफ्ट किया है तो ओल्ड गैप हट चुका होगा ठीक है तो यहां पर गैप मेंटेंड नहीं होता है जनरली आप एब्सलूट पोजीशन ओवरलैपिंग वाले केस के अंदर यूज कर रहे होते हैं ठीक है आगे बढ़ते हैं हमने बात की थी इसके बाद फिक्स्ड पोजीशंस सा कांसेप्ट है हमने बोला ये मेरा पूरा का पूरा वेब पेज है चाहे जितना मर्जी लंबा हो चाहे 10000 पिक्सल लंबा हो ये ठीक है फर्क नहीं पड़ता मैंने अगर बोल दिया कि ये इमेज इस जगह पर फिक्स्ड रहेगी तो ये इस पूरे एंटायस पेज पर इस पूरे एंटायस पर इसी पर्टिकुलर पोजीशन पर फिक्स रहने वाली है आप कितना ही स्क्रो रोल कर ले लास्ट बात करते हैं हमारी स्टिकी पोजिशनिंग की स्टिकी पोजिशनिंग की तो मैंने बोला स्टिकी पोजीशन के अंदर क्या होता है कि आपने को एलिमेंट पकड़ा उस एलिमेंट को इनिशियली आपने पहले किसी स्पॉट पर रखा टॉप लेफ्ट राइट बॉटम का यूज करके टॉप लेफ्ट राइट बॉटम का यूज करके पहले आपने इसको किसी पोजीशन पर रखा जब आपने वो पोजीशन फाइनलाइज कर दी फिर आप उसको स्टिकी मार्क कर सकते हैं अब जब तक यह अपने करंट पेरेंट के अंदर है जब तक ये अपने करंट पेरेंट के अंदर है है तब तक ये इस पोजीशन पर फिक्स्ड रहेगी जैसे ही स्क्रॉल करते करते आप किसी और एलिमेंट के अंदर आ गए यानी इसका पेरेंट जो था यह वाला खत्म हो गया यूआई पर पेरेंट इसका विजिबल नहीं है वैसे ही यह भी हट जाएगी जैसा कि आपने अभी देखा यहां पर जैसे यहां पर ये पर्पल वाली इमेज जो है इसका पेरेंट य पीछे बेज वाला बैकग्राउंड है जैसे ही बेज वाला बैकग्राउंड हट गया वैसे ही यह पर्पल वाली इमेज भी हट गई क्योंकि स्टिकी मार्क थी बट ये लाल वाली इमेज नहीं हटी क्योंकि ये फिक्स्ड मार्क है बढ़िया तो तो आपने समझ लिया सीएसएस पोजीशन प्रॉपर्टी के बारे में आप समझ में आया स्टैटिक क्या होता है रिलेटिव क्या होता है एब्सलूट क्या होता है फिक्स्ड क्या होता है स्टिकी क्या होता है अभी हो सकता है थोड़ी बहुत कंफ्यूजन दिमाग में रह गई आगे जाके हम प्रोजेक्ट हम क्रिएट कर रहे होंगे तो आपको ये सारी की सारी चीजें समझ में और डेप्थ में आ जाएंगी इस बात की श्यर आप मुझसे ले सकते हैं ठीक है एक बार कोड देखना चाहे फिर दोबारा देख सकते हैं दोस्त हमने इस प्रकार एक कंटेनर क्रिएट किया था जिके अंदर चार इमेजेस थी ठीक है और आपने एक बॉक्स ऐसे क्रिएट किया जानबूझ के ताकि आपको मैं स्टिकी और फिस के बीच का डिफरेंस समझा पाऊं ठीक है तो इस क्लास में इतना ही दोस्तो मिलते हैं आपसे नेक्स्ट क्लास के अंदर धन्यवाद बताना कैसी लगी आपको आज की क्लास कमेंट सेक्शन के अंदर कुछ होमवर्क क्वेश्चन पूछे गए आपसे वो भी बताना और लव यू ऑल बा बाय यहां पर हम बात करने वाले हैं सीएसएस साइज यूनिट्स के बारे में आपने मुझे अब तक बहुत बार पिक्सल्स बोलते हुए सुना होगा लास्ट के कुछ लेक्चर के अंदर पीएक्स जहां पर मैं लिखा करता था हम डायमेंशन मेंशन करते थे हमारा फॉन्ट साइज क्या होना चाहिए हमारी इमेज की हमारे डिव की विड्थ हाइट क्या होनी चाहिए डायमेंशन हम मेंशन किया करते थे तो आज की क्लास के अंदर वो सारी की सारी डायमेंशन एब्सलूट हो या रिलेटिव हो सभी के सभी डिस्कस करने वाले हैं अभी तक आपने पुराने लेक्चर के अंदर सिर्फ पिक्सल को देखा था आज आप सारे के सारे टाइप्स को समझने वाले हैं जो जो इंपॉर्टेंट होते हैं ठीक है तो आज की क्लास के अंदर हम पढ़ेंगे पिक्सल्स के बारे में परसेंटेज के बारे में व्यू पोर्ट विड्थ के बारे में व्यू पोर्ट हाइट के बारे में रेम के बारे में आरएम और एम के बारे में ठीक है तो ये कुछ यूनिट्स हैं जो कि हम एक्सप्लोर करने वाले हैं आज की क्लास के अंदर और इसके बाद जो आपका एक मेजर क्वेश्चन होगा या होता है या अब तक आपके दिमाग में डाउट आ गया होगा कि इनमें से कौन सी यूनिट मुझे कब यूज करनी है वो सही तरीका क्या है वो बेस्ट प्रैक्टिस क्या है उसका जवाब भी आपको देने वाले हैं तो बहुत मजा आएगा आज की क्लास के अंदर फटाफट कंटिन्यू करते हैं छोटी सी प्यारी सी वीडियो रहने वाली है शुरू करते हैं सबसे पहले हमने कहा कि व्हाट इज अ साइज यूनिट सबसे पहले मुझे जानना है कि भाई यह साइज यूनिट होती क्या है मैंने कहा ठीक है अभी समझेंगे पर समझने से पहले एक सवाल मेरे पास है उसको डिस्कस कर लेते हैं मैंने बोला कि लेट्स से आपके पास एक गाड़ी है ठीक है आपके पास एक गाड़ी है इस गाड़ी का नाम हमने रख दिया स्कॉर्पियो ठीक है आप जो है एक सोर्स ए से एक डेस्टिनेशन बी तक जा रहे हैं अब मुझे सिंपल बताओ कि ए से बी तक का डिस्टेंस क्या है अब आप में से कुछ लोग बोलेंगे 100 किलोमीटर आप में से कुछ लोग बोलेंगे कि भैया ऐसा 100 मीटर्स आप में से कुछ लोग बोलेंगे कि 1 लाख सेंटीमीटर राइट ऐसा कुछ कुछ बोलेंगे आप ठीक है तो मैं कह सकता हूं कि आप हर बार ये मैग्नी ूडल एक ही यूनिट लगा रहे हैं हर बार मैग्नी ूडल लगा रहे हैं हर बार एक मैग्निटिया अगर मैं बोलूं ए से बी का डिस्टेंस 200 है पर 200 क्या है 200 वाट मीटर किलोमीटर मिलीमीटर सेंटीमीटर कौन सा मीटर तो यूनिट देने से क्लेरिटी मिलती है कि हम एगजैक्टली किस लेंथ की बात कर रहे हैं राइट तो उसी प्रकार से हम जब यहां पर फॉन्ट डिस्प्ले कर रहे होते हैं हम जब यहां पर इमेज डिस्प्ले कर रहे होते हैं तो इसके अंदर आप चाहे तो फंट साइज मेंशन कर सकते हैं इसके अंदर आप चाहे तो विड्थ मेंशन कर सकते हैं हाइट मेंशन कर सकते हैं राइट पर सवाल है आप ये थोड़ी बोलोगे फंट रख दे भाई पांच फंट रख दे भाई 10 लेट्स से भैया मेरे कंप्यूटर में चल भी रहा है पांच लिख के चल रहा है पर क्लेरिटी कहां से मिल रही है क्लेरिटी नहीं मिल रही ना भाई अगर मैं बताऊं पा पिक्सल अगर मैं बताऊं 5 पर तो कुछ ना कुछ क्लेरिटी मिल रही है अच्छा ये इन्होंने यूज कि है यूनिट राइट तो इन यूनिट्स के बारे में बात करने वाले हैं क्योंकि इससे क्लेरिटी हमें ज्यादा मिलती है कल हमारे पास साउंड प्रूफिंग वाले भैया आए थे इस रूम में उन्होंने बोला कि मुझे दीवारें मेजर करनी है क् साउंड प्रूफिंग करनी है तो उन्होंने क्या किया मेजर किया पर अगर मैं कॉल प उनको कहता कि भैया जो हाइट बन रही है वो 11 बन रही है और जो लेंथ बन रही है वो पांच बन रही है और जो विड्थ बन रही है वो दो बन रही है बेटा क्या 11 क्या पांच क्या दो यूनिट बता बताओ ना मीटर बोल रहे हो फुट बोल रहे हो इंच बोल रहे हो क्या बोल रहे हो राइट तो वो सारी चीजें बतानी पड़ती है भाई साहब ठीक है तो ये यूनिट्स मेरे लिए बहुत इंपोर्टेंट है क्लेरिटी प्रोवाइड करने के लिए ठीक है शुरू करते हैं इन सभी के साथ एक बार तो मैंने कहा कि मेरे पास भिन्न-भिन्न प्रकार की यूनिट अवेलेबल है यहां पे चाहे वो तुम्हारी एब्सलूट यूनिट हो ठीक है जहां पर तुम्हारा फिक्स्ड लेंथ रहती है ठीक है और चाहे वो तुम्हारी रिलेटिव यूनिट हो जो कि किसी और x फैक्टर के ऊपर डिपेंडेंट होती है बात करेंगे इसके बारे में ठीक है एग्जांपल के लिए मैंने बोला कि एक है मेरे पास 1 सेंटीमीटर तो 1 सेंटीमीटर तो सेम रहेगा चाहे आप इस डिवाइस में चलाओ चाहे उस डिवाइस में चलाओ चाहे फोन में चलाओ चाहे अपने टीवी में चलाओ तो ये फिक्स लेंथ होती है एब्सलूट यूनिट के अंदर ठीक है अगर मैं रिलेटिव की बात करूं तो मैंने बोला जी ये मेरा पेरेंट है अब मेरा पेरेंट जो है टोटल 100 पिक्सल का है मैंने बोला जो चाइल्ड इसके अंदर क्रिएट करोगे ना उस चाइल्ड की विड्थ 50 पर कर देना तो इससे क्या हुआ इससे आपकी अगर पेरेंट की विड्थ 100 पिक्सल है तो चाइल्ड की विड्थ अपने आप 50 पर हो जाएगी दैट विल बी 50 पिक्सेल राइट तो ऐसे रिलेटिव यूनिट्स की आप बात कर सकते हैं ऐसे आप एब्सलूट यूनिट की बात कर सकते हैं तो शुरू करते हैं शुरू करते हैं विदाउट वेस्टिंग एनी टाइम पहले बच्चों वाले तरीके से समझने की कोशिश करते हैं छोटी-छोटी प्यारी-प्यारी यूनिट देख लेते हैं अभी फटाफट मैं यहां पे अपना लेक्चर मैंने क्रिएट किया हुआ लेक्चर 18 और यहां पे मैंने बॉयलर पड कोड ऐड कर दिया है मैंने बोला सिंपली फटाफट से यहां पर एक डिव इंसर्ट करता हूं फटाफट से यहां पर एक डेव इंसर्ट करता हूं उसके अंदर लिखता हूं वेलकम टू कोड हेल्प ठीक है जी यूआई पर ऑब्जर्व करते हैं क्या बना है इससे यई पर तो कुछ बना ही नहीं भैया तो मैंने कहा अच्छा रुको गो लाइव नहीं करा क्या करते हैं गो लाइव करो बढ़िया तो वेलकम टू कोड हेल्प यहां पर लिखा हुआ आ गया यह विजिबल है फंट मुझे अभी ठीक है तो अभी हम जाते हैं वापस कोड प और मैंने बोला मुझे यार इसको स्टाइल करना है लेट्स से मैंने बोला होता कि इसकी क्लास का नाम जो है वह बॉक्स है ऐसा करके लिख दिया मैंने अगर मैं यहां पर स्टाइलिंग करने जाऊं डॉट बॉक्स और मैंने कह दिया मैंने कह दिया कि यार इसकी जो विड्थ है ना इसकी जो विड्थ है चलो विड्थ के बारे में बाद में बात करेंगे पहले इसको बॉर्डर असाइन करते हैं बॉर्डर सान कर दिया इसको टू पिक्सल सॉलिड रेड चेक करते हैं यूआई पर तो टू पिक्सल सॉलिड रेड का बॉर्डर नजर तो नहीं आ रहा है क्यों नहीं आ रहा है डॉट बॉक्स लिखा हुआ है यहां पे इसकी क्लास का नाम बॉक्स है डिव क्रिएट कर हुई है क्या इशू है भाई अगेन चेक करते हैं स्टाइल बॉक्स बॉर्डर अच्छा ये सॉलिड की स्पेलिंग गलत है बढ़िया तो ऐसा कुछ कुछ दिख रहा है ये कितनी विड्थ ले रहा है भैया ये आपकी जितनी भी विड्थ अवेलेबल है ना यहां से लेके यहां तक वो पूरी की पूरी विड्थ ले रहा है मैंने कहा ठीक है पर मेरे को तो यार ये नहीं चाहिए मेरे को तो हाफ विड्थ चाहिए तो हाफ चाहिए विड्थ तो आपने क्या बोल दिया विड्थ ऑफ 50 पर तो अब ये आपकी हाफ विट लेगा ले रहा है कि नहीं ले रहा बढ़िया मैंने बोला हाफ भी नहीं चाहिए मुझे 25 चाहिए तो मैंने बोला 25 तो यहां से मेरी विड इसने 25 पर ले ली राइट तो इस प्रकार से आप परसेंटेज का यूज कर सकते हैं पर सवाल यह है य 50 पर ऑफ व्ट किसका 50 पर मैंने बोला जो भी इसका इमीडिएट पेरेंट होगा इस डिव का इमीडिएट पेरेंट कौन है बॉडी तो बॉडी की विड्थ जितने भी अवेलेबल आपके व्यू पोर्ट प आपके डिस्प्ले सारी की सारी विड्थ है 100% तो 100% का आपने 50 पर निकाला ट्स आप हाफ विड्थ ले पाए अब इसको समझने कोशिश करते हैं एक और एग्जांपल के थ्रू मैंने इसको भी क्लिक कमेंट कर दिया और मैंने इसको भीभ क्लिक कमेंट कर दिया मैंने सिंपल चीज बोली आपको मैंने बोला जी यहां पर एक क्रिएट करो डॉट पेरेंट और यहां पर क्रिएट करो डॉट चाइल्ड ठीक है तो मैंने य पर क्रिएट कर दिया चाइल्ड बढ़िया अब मैंने य पर फटाफट एक बार थोड़ी स्टाइलिंग ऐड कर द समझ में अच्छे से आ जाए डॉट पेरेंट के अंदर मैंने मेंशन कर दिया कि भाई बॉर्डर मैंने बोला वन या टू पिक्सेल न पिक्सल चलेगा न पिक्सेल सॉलिड ब्लैक ठीक है मैंने इसके अंदर एक बीजी कलर भी मेंशन कर दिया कि बैकग्राउंड कलर ऐड कर दो आप यह वाला बेज एडॉट चाइल्ड डॉट चाइल्ड मैंने मेंशन कर दिया बॉर्डर न पिक्सल सॉलिड ग्रीन और बीजी कलर मैंने मेंशन कर दिया यहां पे ऐसे एक्वा ठीक है तो यूआई पे देखते हैं क्या बन रहा है तो मैंने दो बॉक्सेस बनाए हैं ध्यान से ऑब्जर्व करो पूरा का पूरा एक्वा हो गया क्यों पहले पेरेंट बना होगा पेरेंट का बैकग्राउंड कलर बेज था 100% विड्थ के अंदर फिर पेरेंट के अंदर हमने चाइल्ड इंसर्ट किया चाइल्ड भी एक डिव है यानी कि ब्लॉक एलिमेंट यानी पूरी की पूरी विड्थ लेगा तो पेरेंट का ये पूरा एक डिव था इसके ऊपर ओवरलैप करके हमारा चाइल्ड का डिव कैसे पता लगाएं मैंने कहा चलो समझाता हूं तो अभी पेरेंट की विड्थ भी 100% है बाय डिफॉल्ट और चाइल्ड की विड्थ भी 100% है बाय डिफॉल्ट पर अगर मैं जाकर बोल दूं कि चाइल्ड की विड्थ 50 पर कर दो तो तुम्हें पेरेंट देखेगा नीचे देखना अभी तो मैंने बोला चाइल्ड चाइल्ड क् लिख दिया मैंने पर इसकी विड्थ मैंने 50 पर कर दी तो तुम्हें यहां पर दिखा यह पेरेंट छुपा हुआ था पीछे यह वाला पेरेंट छुपा हुआ था मैंने बोला चाइल्ड को 50 पर नहीं ऐसा करो चाइल्ड को ना 20 पर कर दो बस तो अभी तुम और पेरेंट दिखेगा देखो और पेरेंट यहां पीछे छुपा हुआ था राइट तो यहां पर जो मैं कह रहा हूं चा की विड्थ 20 पर करो 20 पर ऑफ व्हाट 20 पर ऑफ आपके पेरेंट की विड्थ आपके पेरेंट की विड्थ कितनी है यहां पे पेरेंट की विड्थ यहां से यहां तक है आपने इसका 20 पर निकाला वो यहां से यहां तक निकला दैट्ची में आएगा और फिर जो आधी स्क्रीन की विड्थ बनी है उसका 20 पर कैलकुलेट होगा और उसमें आपका चाइल्ड आएगा ऑब्जर्व करते हैं देखो पेरेंट आपका आधी स्क्रीन के अंदर आ गया सो बेसिकली आपने बोला पेरेंट के विट जो है वो 50 पर है तो ये पेरेंट की विट निकल गई 50 पर अब इस 50 पर का आपने 20 पर फाइंड आउट किया तो आपकी ये 20 पर निकली तो आपका चाइल्ड इतने के अंदर आ गया राइट इस प्रकार काम चल रहा है जो परसेंटेज आप यूज कर रहे होते आपके इमीडिएट पेरेंट के ऊपर डिपेंडेंट होती है कि मुझे कितनी विड्थ दिखानी है चलो एक बात समझ में आती है परसेंटेज समझ में आ गया सेकंड केस की बात करते हैं अभी के लिए मैंने इसको कमेंट कर दिया अभी के लिए मैंने इसको कमेंट कर दिया ठीक है अब मैं आता हूं अगले केस में मैंने यहां पे लेट्स से डॉट कंटेनर करके एक डिव क्रिएट कर दी और लिख दिया जी वेलकम टू कोड हेल्प ठीक है और मैं यहां पे जाता हूं फटाफट से डॉट कंटेनर करके स्टाइलिंग करता हूं मैंने बोला जी बीजी कलर बीजी कलर मार्क कर दिया मैंने बेज बढ़िया यूआई पे कैसा आ रहा है यूआई पे कैसा आ रहा है यूआई पे ऐसा वेलकम टू कोडल पार एक बॉर्डर भी ऐड कर देता हूं फटाफट मैंने यहां से बॉर्डर कॉपी कर लिया और यहां पर मैंने बॉर्डर पेस्ट कर दिया बहुत बढ़िया यूआई पे कैसा आ रहा है यूआई पे ऐसा आ रहा है बहुत बढ़िया मैंने कहा कि यार मुझे वड व्यू पोर्ट की विड्थ एंड v ए व्यू पोर्ट की हाइट ये वाली यूनिट यूज़ करनी है व्यू पोर्ट का मतलब व्यू पोर्ट का मतलब है आप यहां पर जो भी यूआई पर ये देख पा रहे हैं ठीक है जहां पे भी चीजें रेंटर हो रही है आपकी ये आपका पूरा का पूरा यहां से यहां तक व्यू पोर्ट कहला रहा है ठीक है तो मैंने बोला ये मेरी व्यू पोर्ट की विड्थ हो जाएगी और यह मेरी व्यू पोर्ट की हाइट हो जाएगी तो उसी प्रकार से मैं चाहूं तो यहां पर कंटेनर की डायमेंशन को हैंडल कर सकता हूं अकॉर्डिंग तो मैंने बोला कि जो कंटेनर की हाइट है ना कंटेनर की जो हाइट है वो ऐसा करो मुझे 100 वीए दे दो 100 वीए का मतलब 100% ऑफ व्यू पोर्ट की हाइट तो तुम्हारी पूरी की पूरी हाइट जो तुम देख पा रहे हो ये पूरी की पूरी हाइट ले लेगा तुम्हारी चेक कर लो आ रहा है बढ़िया तो इस प्रकार से तुमने पूरी की पूरी व्यू पोर्ट की हाइट देख ली अभी देखने में थोड़ा सा अलग सा क्यों लग रहा है क्योंकि यूनिवर्सल सिलेक्टर हमने यूज नहीं किया हमारे मार्जिन और पैडिट जीरो करने के लिए तो ये भी तुम कर सकते हो इसके अंदर बढ़िया तो ये पूरी की पूरी ध्यान से देखो पूरी व्यू पोर्ट की हाइट ले गया मैंने बोला यार पूरी व्यू पोर्ट की विड्थ नहीं चाहिए मुझे बाय डिफॉल्ट ब्लॉक एलिमेंट है ना तो बाय डिफॉल्ट पूरी विड्थ ले लेता है तो मैंने बोला विड्थ को मैं कम करना चाहता हूं तो मैं चाहूं तो विड्थ को यहां पे लेट्स से 50 वड मैंने लिख दिया वड आपका व्यू पोर्ट की विड्थ के लिए है तो अकॉर्डिंग इसने 50 पर ऑफ व्यू पोर्ट विड्थ ले ली इस प्रकार चीजें काम कर रही है तो तुम चाहो तो परसेंटेज के द्वारा पेरेंट की हाइट के अकॉर्डिंग रिलेटिवली डायमेंशन क्रिएट कर सकते हो ऐड कर सकते हो तुम चाहो तो व्यू पोर्ट की विड्थ और व्यू पोर्ट की हाइट तुम व्यू पोर्ट की विड्थ कितनी है यहां पे समझा देता हूं दोबारा एक बार तो यहां पर यह तुम्हारी यहां से यहां तक व्यू पोर्ट की विड्थ है यहां से यहां तक पूरा माउस वहां तक जा नहीं पर तुम समझ ग हां यहां से यहां तक ये पूरी व्यू पोर्ट की विड्थ हो गई माउस जा नहीं पा रहा पता नहीं क्यों ठीक है और यहां से यहां तक ये तुम्हारी पूरी व्यू पोर्ट की हाइट हो गई अकॉर्डिंग तुम यहां पर वन से 100 के स्केल में डायमेंशन ऐड कर सकते हो एक चीज तुम्हें ये समझ में आ गई ठीक है अब बात करते हैं एक बहुत इंपॉर्टेंट यूनिट के बारे में इसके बारे में आपने बहुत बार सुना है इसका नाम है पिक्सल पिक्सल कहते हैं इसको ठीक है जैसे सेंटीमीटर थे जैसे मैं एब्सलूट यूनिट की बात कर रहा हूं एब्सलूट यूनिट्स की बात कर रहा हूं तो वहां पे तुम सेंटीमीटर यूज कर सकते हो मिलीमीटर यूज कर सकते हो इंच यूज कर सकते हो पिक्सेल यूज कर सकते हो ऐसे बहुत सारे ऑप्शंस तुम्हारे पास अवेलेबल है फिक्स्ड लेंथ वाली यूनिट्स से होती है ठीक है अब पिक्सेल की जब मैं बात करता हूं तो अगर मैं googlegroups.com वर्क यह है एंड फिजिकल पिक्सेल इज बेसिकली 1 / 96 ऑफ एन इंच दैट इज 0.26 ममी तो हमें क्या समझ में आया google3 ऑफ n इंच होता है इंच की वैल्यू कांस्टेंट है राइट तो आपकी कांस्टेंट वैल्यू बन गई आपके एक फिजिकल पिक्सेल के लिए तो फिजिकल पिक्सल की टर्म्स में अगर हम बात करें तो चाहे मैं अपने मोबाइल पे यूज़ करूं चाहे मैं अपने लैपटॉप पे यूज़ करूं चाहे मैं डिस्प्ले पे डिस्प्ले पे यूज करूं एक फिजिकल पिक्सेल की जो डायमेंशन है वो कांस्टेंट ही रहने वाली है एक और चीज आपने ऑब्जर्व करी होगी एक और चीज आपने ऑब्जर्व करी होगी आपने ऐसा कुछ सुना होगा कि मान लो एक डिवाइस है जो कि लो रेजोल्यूशन डिवाइस है और एक डिवाइस है जो कि हाई रेजोल्यूशन डिवाइस है वैसे तो ये डिस्कस नहीं करना चाहिए कंप्यूटर ग्राफिक्स का पार्ट है वेब का पार्ट नहीं है पर फिर भी डिस्कस कर लेते हैं तो हमने देखा कि यार यहां पर जो इमेज बन रही है बहुत शार्प बन रही है और यहां पर जो इमेज बन रही है वो ऐसे टरी टरी सी एजी एजी सी बन रही है कैसे ऑब्जर्व करते हैं आप एग्जांपल के थ्रू तो देखो यहां पर ये इेज छो टरी बन रही है और यहां पर ये में थोड़ी शाप बन रही है तो बेसिकली क्या होता है यहां पर आपका जो पीपीआई है पिक्सल पर इंच 1 इंच के अंदर कितने पिक्सल्स हैं वो ज्यादा है और यहां पर आपका पीपीआई 1 इंच के अंदर कितने पिक्सेल है वो कंपेरटिवली इससे कम है तो जहां पर भी 1 इंच के अंदर नंबर ऑफ पिक्सल्स ज्यादा होंगे वहां पर ज्यादा कलर आपको मिलेगा वहां पर ज्यादा शार्पनेस मिलेगी जहां अच्छी क्वालिटी की पिक्चर बनेगी और जहां पर वो कम होंगे वहां पर कंपेरटिवली थोड़ी बेकार क्वालिटी की पिक्चर बनने वाली है राइट डिस्कस करने की नीड नहीं थी पर ठीक है एक बार तुम पढ़ना होमवर्क के अंदर यहां पे कि पीपीआई के अंदर और डीपीआई के अंदर क्या डिफरेंस है यह इंपॉर्टेंट है दोस्त ठीक है बहुत बढ़िया अब पिक्सल तुम्हें समझ में आया एक एब्सलूट यूनिट है तुम्हारे पास ठीक है जिसका हमने फिजिकल पिक्सल डायमेंशन तु बताई 1 बा 96 ऑफ एन इंच इसको यूज करके तुम फिर दोबारा साइजिंग वगैरह क्रिएट कर सकते हो ऐड कर सकते हो लेट्स से मैंने बोला कि यहां पर फटाफट से एक बॉक्स क्रिएट कर देता हूं डॉट बॉक्स वन और मैंने लिख दिया जी लव बबर ठीक है अब अगर मैं इसको यहां पर स्टाइल करने चला जाऊ मैंने बोला डॉट बॉक्स वन तो मैंने बोला पहले तो बॉर्डर ऐड कर दो भाई न पिक्सल सॉलिड ब्लैक इस वाले पार्ट को मैंने कमेंट कर दिया अभी के लिए कि मत दिखाओ इसको कुछ भी और इसको भी मैंने कमेंट कर दिया अभी के लिए इसको भी हटा दो और इसको भी कमेंट कर दिया कि इसको भी हटा दो तो यूआई प क्या दिख रहा है तुम्ह इस केस के अंदर इस केस में यई प ऐसे लव बबर देख पा रहे हो बढ़िया अगर मैं यहां पर इसका साइज चेंज करना चाहता हूं तो कैसे करोगे इसका साइज चेंज मैंने बोला फटाफट से जाओ और यहां पर तुम अ बोल दो कि यार जो ये बॉक्स वन के अंदर तुम्हारा टेक्स्ट है इसका फॉन्ट साइज इसका फॉन्ट साइज मैं क्या चाहता हूं मैं चाहता हूं 100 पिक्सल का फॉन्ट साइज हो जाए तो यूआई पे इसका साइज इंक्रीमेंट करया राइट सेम फॉर अगर आप लेट्स से विड्थ हाइट भी चेंज करना चाहते हैं तो आपने पुराने लेक्चर के अंदर भी देखा हुआ है कि विड्थ हाइट कैसे आप चेंज कर सकते हैं अगर आपको नहीं पता पुराने लेक्चर कौन से हैं तो सिंपल जाके वेब डेवलपमेंट कोर्स बाय लव बबर आपको मिल जाएगी पूरी की पूरी प्लेलिस्ट वहां पे आपको और क्लेरिटी मिलेगी इन पिक्सल्स के बारे में और बाकी सारी यूनिट्स के बारे में ठीक है तो कुछ भी नहीं है इस प्रकार से आप ऐड करके अकॉर्डिंग चेंज कर सकते हैं दो मग आपको दे दिए मैंने एक आपका फिजिकल पिक्सल वर्सेस लॉजिकल पिक्सल सेकंड आपका पीपीआई वर्सेस जीपीआई ठीक है तो अभी तक हमने क्या सीखा अभी तक हमने पिक्सल के बारे में पढ़ लिया अभी तक हमने परसेंटेज के बारे में पढ़ लिया वड के बारे में पढ़ लिया v एच के बारे में पढ़ लिया अब बात करते हैं कुछ रिलेटिव यूनिट्स के बारे में ठीक है जो कि हमारे पास है ईम एंड आरई एम फटाफट से इनको कंप्लीट करते हैं उसके बाद हमारा लेक्चर कंप्लीट हो जाएगा एम के बारे में बात करते हैं तो बहुत सिंपल है यार अगेन तुम ये ऑलरेडी देख चुके हो इसी क्लास के अंदर तो हमने क्या किया हमने क्या किया एक और एग्जांपल क्रिएट किया इसके लिए अभी ठीक है तो बात करते हैं एम यूनिट के बारे में ईम के बारे में तो हमने क्या किया हम चले गए फटाफट सर्च की हमें क्या मिला कि रिलेटिव लेंथ यूनिट के अंडर ही आने वाला है और ये रही मेरी ईएम यूनिट ठीक है सो बेसिकली यहां पर ईएम जो है डिपेंडेंट है आपके फॉन्ट साइज ऑफ पेरेंट पे अगर आप फॉन्ट साइज की बात कर रहे हैं और ये डिपेंडेंट आपके फॉन्ट साइज ऑफ एलिमेंट के ऊपर ही अपने खुद के ऊपर ही अगर आप विड्थ की बात कर रहे हैं ऐसा कुछ उन्होंने बता रखा है ठीक है तो एग्जांपल फटाफट सर्च करते हैं ईम के द्वारा तो हमने बोला जी देखो यहां पर आपने एक रैपर क्रिएट कर रखा है आपने एक रैपर क्रिएट कर रखा है और इसी को एक बार क्लोन करते हैं इसी को एक बार कॉपी करके फटाफट चलाने की कोशिश करते हैं अपने कोड पे तो हमने इसी को यहां पर पेस्ट कर दिया और हमने यहां पे इनकी कॉन्फिन जो है सीएसएस की ये कॉपी करके फटाफट पेस्ट कर दी ठीक है इसको एक बार चलाने की कोशिश करते हैं देखते हैं क्या बनता है तो यूआई पे देखते हैं क्या बना तो यूआई पे हमने ऑब्जर्व किया ऐसा कुछ बन रहा है ये चार लाइन है आई एम 20 पिक्सल वाइड आई एम 10 वड वाइड आई एम 10 इ एम वाइड ऐसा कुछ कुछ बन रहा है क्यों समझते हैं समझते हैं तो हमने यहां पर क्या बोला हमने बोला एक रैपर है जो कि पेरेंट क्लास है तो रैपर की विड्थ हमने 1m दे रखी है ओके 1m का मतलब 1m का मतलब रैपर का फॉन्ट साइज हमने 1m दिया हुआ है m मतलब जो भी आपका करंट पेरेंट होगा रैपर का करंट पेरेंट कौन है रैपर का करंट पेरेंट बॉडी है यूजुअली आपका बाय डिफॉल्ट 16 पिक्सल का साइज चल रहा होता है तो रैपर का फॉन्ट साइज आपने 1m दिया है इसका मतलब 16 पिक्सेल दे दिया है ओके पहला बॉक्स है यहां पर आपने बोल दिया 200 पिक्सल वाइड px2 पिक्सल विड्थ बता दी ठीक है ये बात समझ में आती है फिर आपने v w वाले की बात की 10 वड वाइड आपने सीधा लिख दिया विड्थ यहां पे 10 वड है ठीक है यह बात समझ में आती है और एट दी एंड आपने क्या बोरहा आम 10 ईएम वाइड तो आपने यहां पर इसकी विड 10 ईएम दे रखी है ठीक है पर ये 10 ईम कितनी एक्चुअल मैग्नी ट्यूड की बात हो रही है एक बार ये समझ लेते हैं तो मैंने इस पे क्लिक किया मुझे दिखा कि विड्थ इसकी 10 ईएम है मैंने कंप्यूटर में जाके देखा इसकी विड्थ 160 पिक्सेल आ गई मैंने क्या कहा था डिफॉल्ट फंट साइज आपका क्या चल रहा है 16 पिक्सल m जो है बेसिकली विड्थ के केस में उसने क्या किया डिफॉल्ट फंट साइज से मल्टीप्लाई करवा दिया 16 म 10 आपने 10m कहा था 16 पिक्सल आपके डिफॉल्ट साइज है 10 मल्टी 16 160 पिक्सेल आपका विड्थ यहां पर क्रिएट हो गई है फॉन्ट साइज कितना चल रहा है बाय डिफॉल्ट 16 पिक्सेल चलता है वही चल रहा है यहां पर भी राइट तो सेम उसी प्रकार से यहां पर काम चल रहा है अगर ये समझ में आए तो ठीक है नहीं समझ में आए तो कोई बात नहीं अब एक और एग्जांपल पकड़ रहे हैं इसको समझने के लिए तो मैंने यहां पे क्या किया यहां पर मैंने अपना एक कंटेनर क्रिएट कर दिया और यहां पर मैंने अपना एक बॉक्स क्रिएट कर दिया बहुत बढ़िया मैंने यहां पे लिख दिया वेलकम टू कोड हेल्प ठीक है वेलकम टू कोड हेल्प नाम का एक बॉक्स क्रिएट हो गया अभी यूआई पे देखते हैं क्या बन रहा है यूआई पे ऐसे करके एक लाइन आ रही है बहुत बढ़िया अगर मैं कोई डायमेंशन वाइज देखना चाहूं तो कुछ दिख रहा है मुझे अभी अभी मुझे दिख नहीं रहा कि भाई कितने इसका फंट साइज वगैरह है तो आईडिया नहीं है बाय डिफॉल्ट चल रहा होगा जो भी चल रहा होगा ठीक है तो हमने कहा हमने कहा कि लेट्स यहां पर एक पैराग्राफ भी बाहर राइट डाउन करते या फिर एचव टैग एक बार इंसर्ट कर देते हैं या फिर पैराग्राफ ही कर लेते हैं बोला हेलो जी एक बार इस पैराग्राफ को देख के आते हैं तो हमने ऑब्जर्व कि पैराग्राफ इस मैंने क्लिक किया और मुझे क्या दिखा कंप्यूटर के अंदर ठीक है यहां पर भी अभी में कुछ दिख नहीं रहा है सब कुछ जो डिफॉल्ट प्रॉपर्टीज है वही सेट हुई पड़ी है ठीक है तो अभी मैंने क्या किया अभी मैंने क्या किया मैंने कहा कि भाई साहब आप जाओ कंटेनर के पास कंटेनर के पास जाओ और कंटेनर की प्रॉपर्टी सेट कर दो तो हमने कहा कंटेनर के लिए हम एक बार फंट साइज ट्राई करते हैं एक बार पहले तो मैंने कंटेनर का जो फंट साइज है वो मेंशन कर दिया यहां पे लेट्स से 10 पिक्सेल 10 पिक्सेल मैंने मेंशन कर दिया तो आपने 10 पिक्सेल इसका फॉन्ट साइज मेंशन कर दिया तो आपका ये वेलकम टू कोडप का साइज छोटा हो गया ठीक है पर अगर मैं यहां पर आऊं और डॉट बॉक्स की बात करूं डॉट बॉक्स की बात करूं और डॉट बॉक्स के अंदर फंट साइज मैं मेंशन कर दूं कि भाई यहां पर फॉन्ट साइज जो है वो 10r एम सॉरी 10m के बराबर है तो यहां पर क्या होने वाला है यहां पर आपका वेलकम टू कोडप का साइज इंक्रीज हो गया कितना हुआ चेक करते हैं मैंने इस पे क्लिक किया 10 ईम हमने दे रखा है कंप्यूटर में देखते हैं 100 पिक्सल आ रहा है क्यों ये समझते हैं ये समझते हैं ध्यान से कोड देखो हमने कंटेनर पेरेंट बना रखा है बॉक्स चाइल्ड बना रखा है कंटेनर की विड्थ मैंने 10 पिक्सेल दे रखी है बॉक्स के विड्थ मैंने 10 ईएम दे रखी है सो बेसिकली लॉजिक वाइज यहां पर क्या हुआ है कुछ ऐसा हुआ है कि ये मेरा जो है यह पेरेंट है और पेरेंट के अंदर ये मेरा चाइल्ड है तो यहां पर जब मैं ईम वाली यूनिट का यूज़ करता हूं तो वो बेसिकली रिलेटिव होती है आपके पेरेंट के तो पेरेंट के अंदर मैंने फंट साइज मेंशन किया है 10 पिक्सेल और मैंने चाइल्ड के अंदर किया है 10 इम सो बेसिकली 10 ईम का मतलब है 10 मल्टीप्ला जो भी आपका पेरेंट का साइज़ था दैट इज़ 10 पिक्सल तो यह बन जाएगा आपका 100 पिक्सल दैट्ची सधा मल्टीप्लाई हो जाएगा और कुछ भी नहीं है ठीक है तो इसका ध्यान रखना और एक होमवर्क तुम्हारे लिए जैसे मैंने यहां पे फॉन्ट साइज़ के साथ यह ईएम वाली गेम खेल के देखी है तुम सेम चीज पैडिट के साथ ट्राई करना और मुझे बताना पैडिट के अंदर तुमने क्या ऑब्जर्व किया क्या ऑब्जर्वेशन रही तुम्हारी ठीक है तो तुमने यहां पे सीखा ईम यूनिट के बारे में अब लास्ट यूनिट जो हमारी बची है वो है आरम बहुत आसान है बहुत आसान है बेसिकली ये रिलेटिव यूनिट आपकी होती है रूट एलिमेंट के अकॉर्डिंग क्या मतलब है इस बात का इसका मतलब यह है कि जो भी प्रॉपर्टी आपका ये एचटीएमएल टैग कैरी कर रहा होगा जो भी प्रॉपर्टी आपका ये एचटीएमएल टैग कैरी कर रहा होगा उसके अकॉर्डिंग आपकी डायमेंशन सेट हो जाएगी अगर आप यूज़ करेंगे आरएम यूनिट का एग्जांपल मैंने कहा देखो लेट्स से मैंने इसको कमेंट कर दिया और लेट्स से मैंने इसको भी कमेंट कर दिया और लेट्स से मैंने इसका नाम रख दिया फर्स्ट पैरा इसको मैंने कर लिया कॉपी इसको मैंने कर दिया यहां पे पेस्ट और मैंने लिख दिया यहां पे बॉर्डर अप्लाई करो वन पिक्सल सॉलिड ब्लैक ठीक है यूआई पे देखते हैं क्या बना तो ये मेरा पैरा बन गया हेलो जीी ठीक है बहुत बढ़िया मैंने बोला इसका साइज इंक्रीज करना है मैंने क्या बोला आरई यूनिट का जब यूज़ करता हूं वो डिपेंडेंट होता है आपके रूट एलिमेंट के ऊपर बाय डिफॉल्ट आपका 16 पिक्सेल की डायमेंशन होती है तो यहां पर ये मेरा पैराग्राफ मुझे नजर आ रहा है मैंने क्या कहा कि आरएम डिपेंड करता है रूट एलिमेंट के ऊपर रूट एलिमेंट के डिफॉल्ट कॉन्फिन 16 पिक्सेल की है तो अगर मैं यहां पर जाऊं और सिंपल जाके मेंशन कर दूं कि बेटा फॉन्ट साइज जो है वो 5 आरएम है तो 5 मल्टीप्ला 16 इ 0 पिक्सल चेक करते हैं क्या हमारा फंट बड़ा बिल्कुल बड़ा पर कितना बड़ा वो चेक करना पड़ेगा मैंने इस पर क्लिक किया 5 आरएम कंप्यूटेड के अंदर आंसर क्या आ रहा है कंप्यूटेड के अंदर आंसर क्या आ रहा है 80 16 5 80 है ना 16 * 5 80 होता है ना भाई तो ट्स वई स पिक्सल यहां पर आ रहा है और बढ़िया तो आपने बहुत ही चालाकी से बहुत ही चालाकी से पूरी की पूरी गेम हैंडल कर ली है एक बार रिवाइज करवा देते हैं आपको पूरी की पूरी यूनिट्स हमने सबसे पहले बात की परसेंटेज की जो कि आपके पेरेंट के ऊपर डिपेंड करेगा अगर आपके पेरेंट वाले एलिमेंट की जो विड्थ है वो 100% है और आप 50 पर कहते हैं तो आपका चाइल्ड ये 50 पर जगह ले लेगा अगर आपके पेरेंट के एलिमेंट की विट 50 पर है और आपने बोला कि मेरा चाइल्ड जो है इसका 50 पर तो इसका 50 पर इतना आ जाएगा राइट तो परसेंटेज आपने सीखा व्यू पोर्ट विड्थ और व्यू पोर्ट हाइट की आपने बात की आपने कहा अगर ये मेरा व्यू पोर्ट है तो ये पूरा का पूरा जो है 100 वीए कहलाता है और ये पूरा का पूरा 100 वड कहलाता है इसके बाद आपने पिक्सल की बात की पिक्सल के केस में आपको यह पता लगा कि भाई एक पिक्सेल जो है वो 1 बा 96 ऑफ एन इंच के इक्वल होता है फिजिकल पिक्सेल की अगर बात करें दो होमवर्क आपको हमने दिए कि बेटा फिजिकल वर्सेस लॉजिकल पिक्सेल एक बार सर्च करो कि इनमें डिफरेंस क्या होता है और पीपीआई वर्सेस डी प आई एक बार सर्च करो कि इनमें डिफरेंस क्या होता है इसके बाद आपने पढ़ा ईम के बारे में जो कि बेसिकली क्या होता है कि अगर ये आपका एक पेरेंट एलिमेंट है और ये अंदर आपने एक चाइल्ड एलिमेंट क्रिएट कर रखा है तो आपका जो भी पेरेंट एलिमेंट का फंट साइज हो होगा और लेट्स से जो भी आपने चाइल्ड एलिमेंट के अंदर फंट सेज इंक्लूड किया है 10 ईम तो 10 ईम का मतलब यहां बेसिकली जो भी आपने 16 यहां पे 16 पिक्सल रखा हुआ है तो आपका आंसर यहां पे 16 म 10 पिक्सल हो जाएगा दैट विल बी 160 पिक्सल एंड आरएम की अगर बात करें तो आरएम बेसिकली डिपेंड्स ऑन आपका रूट एलिमेंट तो आपका रूट एलिमेंट के अंदर कॉन्फ़िगरेशन बाय डिफॉल्ट 16 पिक्सेल की होती है तो जहां भी आप 10 आरएम का यूज़ कर रहे हैं तो इसका मतलब क्या है 10 * 16 यानी 160 पिक्सल 5 आएम मतलब 5 मल्टीप्ला 16 = 80 पिक्सेल इस प्रकार से काम चल रहा है अब सवाल है कि हमें कौन सी यूनिट यूज करनी चाहिए जवाब है कि हम हमेशा ट्राई करते हैं कि हम एब्सलूट यूनिट ना यूज करें फिक्स्ड लेंथ की यूनिट्स ना यूज करें क्योंकि हमें हमेशा रिस्पांसिस डिजाइन बनाना होता है सल है कि रिस्पांसिस डिजाइन क्या होता है मैंने कहा देखो रिस्पांसिस डिजाइन का एग्जांपल दिखाते हैं तो ये हमारी कोड हेल्प की एक वेबसाइट है ठीक है ऐसी कुछ-कुछ दिख रही है पर ये मेरे स्क्रीन पर ऐसी दिख रही है लेट्स से कि आप इसको अपने मोबाइल पर देखना चाहते हैं या फिर थोड़ी ऐसे डिस्प्ले पर देख रहे हैं जहां पर विड्थ कम है तो वहां पर क्या इसका बिहेवियर चेंज हो जाएगा ध्यान से ऑब्जर्व करो यहां पे सब लर्न विद लव बबर ये व्यू कोर्स वगैरह सब नीचे आ गया बट अगर मैं इसको इंक्रीज करूंगा तो तो यह लेफ्ट साइड में आ रहा है तो यह बहुत रिस्पांसिस है आपके स्क्रीन साइज चेंज करने से आपका यूआई गंदा नहीं हो रहा है आपने अकॉर्डिंग पूरा कोड राइट डाउन किया हुआ है कि सब कुछ तब भी सुंदर लगे आपका पूरी की पूरी वेबसाइट ब्रेक नहीं करनी चाहिए आपके यह डायमेंशन चेंजेज से आपके हर एक डिवाइस पर आपकी वेबसाइट सुंदर ही दिखनी चाहिए चाहे मोबाइल हो चाहे वो आपका लैपटॉप हो चाहे वो आपकी डेस्कटॉप स्क्रीन हो हर केस के अंदर तो जब रिस्पांसिस डिजाइन की बात करते हैं ठीक है तो हमेशा वी हैव टू मेक श्यर कि एब्सलूट यूनिट हम जितना कम से कम हो सके उतना कम यूज़ करें हमेशा रिलेटिव यूनिट का उपयोग करें ठीक है और अगेन यहां से मुझे कौन सी यूज़ करनी है ईएम करूं वड करूं वीए करूं आरएम करूं वो जैसे-जैसे हम आगे डेवलप करते जाएंगे और प्रोजेक्ट क्रिएट करते जाएंगे वहां पे आपको समझ में आता जाएगा ठीक है तो वो विद प्रैक्टिस आप समझ पाएंगे क्या-क्या चीजें अवेलेबल है एक और चीज आपको ये भी फाइंड आउट करना है आज की क्लास के बाद कि रेस्पॉन्सिव डिजाइन अगर मुझे क्रिएट करना है तो आप क्या-क्या चीजें कर सकते हैं अगेन अगेन आप हमेशा ट्राई करें रिलेटिव यूनिट्स का यूज करना आप यूज़ कर सकते हैं मीडिया क्वेरीज के मीडिया क्वेरीज को आगे जाके पढ़ेंगे इनके बारे में और मुझे पॉइंट्स बताना कि रेस्पॉन्सिव डिजाइन मुझे बनाने के लिए क्या-क्या यूज करना चाहिए तो ये पढ़ा आपने आज की क्लास के अंदर मैं आशा करता हूं समझ में आया होगा अगर समझ में आया तो लिखें कमेंट सेक्शन में भैया मजा आ गया और धन्यवाद एवरीवन मिलेंगे आपसे आपके नेक्स्ट सेशन के अंदर इस से में इतना ही बाय बाय लव यू ल गुड नाइट यहां पर अब बात करने वाले हैं कुछ इंपोर्टेंट कीवर्ड्स के बारे में जिनका नाम है फ्लोट एंड क्लियर इनके बीच में डिफरेंस भी हम समझने वाले हैं हम जानने वाले हैं व्हाट इज फ्लोट व्हाट इज क्लियर क्या-क्या यूज केसे जहां पे हम इनको यूटिलाइज करने वाले हैं कैसे अप्लाई कर सकते हैं और ओवरफ्लो के बारे में जानने वाले हैं कैसे ओवरफ्लो प्रॉपर्टी एजिस्ट करती है उसमें डिफरेंट डिफरेंट डिफरेंट वैल्यूज क्या आप असाइन कर सकते हैं ठीक है तो शुरुआत करते हैं विदाउट वेस्टिंग एनी टाइम हमने कहा कि सबसे पहला डाउट हमारे पास यहां पर क्या है सबसे पहला डाउट हमारे पास ये है कि व्हाट इज फ्लोट हम जानना चाहते हैं कि भैया यह फ्लोट होता क्या है व्हाट इज फ्लोट सबसे पहला क्वेश्चन है क्या व्हाट इज फ्लूट तो मैंने कहा बहुत सिंपल तरीका है आपके पास यहां पर एक बहुत ही फेमस वेबसाइट है सीएसएस tricks.com यहां से जाके आप कुछ डॉक्यूमेंटेशन पढ़ना चाहे तो पढ़ सकते हैं अभी के लिए हम आपको अपने सिंपल शब्दों में समझाते हैं हमने कहा कि बेसिकली पोजिशनिंग के लिए जैसे मेरे पास कोई एलिमेंट है कोई इमेज है कोई टेक्स्ट है मुझे उनकी पोजिशनिंग करनी है कि भाई लेफ्ट में प्लेस करना चाहते हो राइट में प्लेस करना चाहते हो टॉप में बॉटम में पोजिशनिंग के लिए हम इन एट्रिका इन प्रॉपर्टीज का यूज कर रहे होते हैं तो हमने कहा आपने बहुत बार ऐसा बहुत सारी वेबसाइट्स के अंदर देखा होगा जहां पर स्ट्रक्चर या लेआउट कुछ इस प्रकार का होता है कि मान लो यह मेरे पूरी की पूरी व्यू पोर्ट मुझे दिख रही है इस व्यू पोर्ट में यहां पर व्यक्ति की फोटो आ रही है ठीक है यहां पर आपके महारा प्रताप की फोटो आ रही है और यहां पर उस व्यक्ति के बारे में टेक्स्ट जो है वो लिखना शुरू होता है यहां पे लेट्स से लिख दिया हिस्ट्री ऐसे लिख दिया हिस्ट्री और यहां टेक्स्ट कंटिन्यू कर रहा होता है पूरा नीचे तक जा रहा होता है ऐसे ठीक है यहां पे यहां से यहां तक विट ली हुई है और यहां पे यहां से यहां तक विट ले हुई है ठीक है क्या नॉर्मली मैं अचीव कर पाता था नॉर्मली अगर लेट्स से मैं एक कंटेनर के अंदर एक इमेज इंसर्ट करू और एक पैराग्राफ इंसर्ट करूं तो क्या वो इस फॉर्म में आएगा कि मेरी इमेज जो है वो यहां पर हो और मेरा टेक्स्ट जो है वो यहां पर हो नहीं आएगा देखते हैं ट्राई करके तो मैंने बोला कि यह रहा मेरा लेक्चर नंबर 19 यहां पर मैंने अपना बॉयलर प्लेट कोड ऐड कर दिया है और मैंने यहां पर सिंपल सा बोला कि भैया सबसे पहले एक कंटेनर ऐड कर दो कंटेनर ऐड कर दिया इस कंटेनर के अंदर मैंने एक इमेज ऐड कर दी मैंने बोला इमेज का सोर्स जो है हमने महाराणा प्रताप की इमेज ऑलरेडी इंपोर्ट कर रखी इस डेस्टिनेशन के अंदर ठीक है तो हमने बोला कि भाई यहां पर महाराणा की जो इमेज है वह आप ऐड कर दें फटाफट ठीक है ऐड कर दी और आपने एक पैराग्राफ ऐड कर दिया लेट्स से आपने यहां पर लोरम 501 एक पैराग्राफ ऐड कर दिया ठीक है यूआई पर चेक करते हैं यूआई पर चेक करते हैं कैसा दिख रहा है पूरा का पूरा आपने एक इमेज ऐड कर दी है आपने एक पैराग्राफ ऐड कर दिया अगर मैं गो लाइव करूंगा तो क्या दिखेगा मुझे मुझे दिखेगा कि इमेज सबसे पहले आ रही है आपकी और आपका पैराग्राफ बाद में आ रहा है यह थोड़ी सीखना था हमको हमें तो इमेज और पैराग्राफ साइड बाय साइड चाहिए जैसे हमने यहां पर जस्ट अभी देखा कि इमेज मेरी यहां पर एजिस्ट करती हो पैराग्राफ साथ ही साथ एजिस्ट कर रहा हो नीचे तक जा रहा हो वो चीज करनी है तो यह आप अचीव कर सकते हैं फ्लोट के द्वारा तो अगर लेट्स से मैं इस इमेज को यहां पर स्टाइल करूं अगर लेट्स से मैं यहां पर इस इमेज को स्टाइल करूं ठीक है और मैं कहूं कि आईएमजी टैग के अंदर प्रॉपर्टी हमने सेट कर दी क्या प्रॉपर्टी सेट कर दी हमने बोल दिया जी फ्लोट जो है वो लेफ्ट में है तो ये जो इमेज है लेफ्ट में फ्लोट करेगी या फिर लेट्स से मैं इस इमेज को राइट में फ्लोट करवाना चाहता हूं तो राइट में आपकी इमेज पोजीशन हो जाएगी चेक कर लो यूआई पे तो देखो राइट में आपकी इमेज भी आ गई और आपका टेक्स्ट भी यहां पर आ रहा है इमेज का साइज थोड़ा छोटा कर देता हूं मैं मैंने बोला कि इमेज की जो हाइट है हमने कर दी 250 पिक्सेल तो यूआई पे क्या दिख रहा है यूआई पे दिख रहा है कि ये रही मेरी इमेज और साथ ही साथ ये मेरा पैराग्राफ चल रहा है तो जो चीज मैंने आपको बताई सेम उसी प्रकार से आप यूआई पे यहां पर देख पा रहे हो लेफ्ट में आपको सॉरी राइट में आपको इमेज दिख रही है और साथ-साथ पैरेलली आपको चलता हुआ पैराग्राफ भी नजर आ रहा है तो जब इस प्रकार से मुझे पोजिशनिंग करनी होती है तो मैं यूज करता हूं कौन से कीवर्ड का फ्लोट कीवर्ड का ठीक है आप चाहे तो यहां पर जाके डॉक्यूमेंटेशन थोड़ी और पढ़ सकते हैं फ्लोट प्रॉपर्टी क्या होती है क्या-क्या डिफरेंट वैल्यूज आपके पास यहां पर हैं लेट्स से मैंने यहां पर अ इसको राइट करने की जगह लेफ्ट कर दिया होता तो क्या फर्क पड़ता तो आपकी इमेज लेफ्ट में अलाइन हो जाती और टेक्स्ट आपका राइट में शिफ्ट हो जाता तो ये सारी की सारी चीजें हमने देख ली है ठीक है बाकी आप चाहो नन मार्क कर सकते हो इन्हेरिटेंस इनके द्वारा आप चेंज कर सकते हैं खुद से आप पढ़ेंगे इन सभी चीजों को ठीक है अब यहां पर क्या एक और एग्जांपल हमें नजर आ रहा है कि भाई एक इमेज ऐसे लिखी हो लेफ्ट में पोजीशन हो एक इमेज राइट में पोजीशन हो और बीच में आपका टेक्स्ट चल रहा हो मैंने कहा ठीक है अगर मैं इसको ऐसा कर दूं कि लेट्स से इसी इमेज को मैंने फिर से कॉपी कर लिया एक बार इसी इमेज को मैंने फिर से कॉपी कर लिया पर इस बार मैंने आईडी दे दी मैंने बोला जी इसकी आईडी दे दो आई एमजी व ठीक है और ऐसे ही मैं नीचे गया मैंने बोला जी इसकी आईडी दे दो आई एमजीटू ठीक है और जो आपने ये प्रॉपर्टी इंसर्ट की थी य आप आईजी व के लिए कर देना क्लास आईडी है तो ऐसा हैशटैग लगा देना ठीक है और आपने सेम प्रॉपर्टी जो है कॉपी पेस्ट कर दी आई एमजीटू के लिए बस एक रिफरेंस किया कि ये अगर लेफ्ट में फ्लोट कर रहा था तो आपने इसको राइट में फ्लोट करवा दिया तो बेसिकली आपने दो इमेज ली एक इमेज को लेफ्ट में फ्लोट कराया एक इमेज को राइट में फ्लोट कराया और बीच में आपका ये पैराग्राफ चलना चाहिए चेक करते हैं चल रहा है कि नहीं चल रहा यूआई पर चेक करते हैं तो देखो आपके एक इमेज लेफ्ट लेफ्ट में आ चुकी है आईएमजी व जो आपने लेफ्ट में फ्लोट करवाई थी एक इमेज आपकी राइट में आ चुकी है आईएमजी टू जो आपने राइट में फ्लोट करवाई थी और यह रहा था आपका पैराग्राफ और मुझे ऑलरेडी पता है जब मैं फ्लोट मार्क करता हूं मेरा पैराग्राफ नीचे से स्टार्ट नहीं होता मेरा पैराग्राफ जहां पर भी अवेलेबल स्पेस होता है वहीं से स्टार्ट हो जाता है पर ठीक है भैया एगजैक्टली सेम नहीं है जैसे यहां पर बना पड़ा एगजैक्टली सेम बनाना मैंने कहा ठीक है इस इमेज को इमेज इमेज को मैंने यहां से कट कर दिया और मैंने यहां पर पेस्ट कर दिया अब चेक करते हैं यूआई पर अब चेक करते बढ़िया तो एक इमेज ये रही यह पैराग्राफ चल रहा है और एक इमेज ये रही बहुत बढ़िया मैंने क्या किया मैं गया ऊपर और मैंने जाक इस पैराग्राफ को कर लिया कॉपी और इस पैराग्राफ को मैंने यहां पर कर दिया पेस्ट अ यई चेक करो बढ़िया तो जो हम चाहते थे हमने क्रिएट किया कि नहीं यस और नो हम चाहते थे भाई कि इमेज हो साथ में टेक्स्ट हो नीचे टेक्स्ट हो और साथ में इमेज हो तो ये जो यूआई आप देख पा रहे हो क्या यही सेम यूआई यहां पर नहीं बताया गया बिल्कुल सेम यूआई बताया गया तो फ्लोट से हम ये भी अचीव कर सकते हैं ठीक है यह थोड़ा सा और एक लग गया यहां पर एग्जांपल आपको एक दे रखा है ठीक है एग्जांपल आपको दिया हुआ है कि इस प्रकार से एक यूआई है तो ये पूरा का पूरा एग्जांपल आप एक बार होमवर्क में लो और इसको फटाफट से खुद से क्रिएट करने की कोशिश करो कोड वाइज आपको एचटीएमएल कोड सीएसएस वगैरह यहां पे मिल जाएगा ठीक है ये बात समझ में आती है ये बात समझ में आती है तो जनरली इन्होंने क्या बोला कि ट्राई करना ट्राई करना कि जो छोटी-मोटी पोजीशन करनी है जो मैंने आपको दिखाई एक इमेज है उसके साथ में टेक्स्ट प्लेस करना है इस प्रकार तो वहां पे आप फ्लोट का यूज कर लो पर जो लेआउट क्रिएशन है लेआउट क्रिएशन फ्लोट का या यूज मत करना ठीक है अभी आगे हम बहुत इंपॉर्टेंट कांसेप्ट लाइक फ्लेक्सस बॉक्स एंड ग्रिड समझने वाले हैं और बहुत ही अच्छी तरीके से समझेंगे मतलब ऐसा नहीं कि बोलने के लिए बोल रहा हूं एक गेम हमने क्रिएट की हुई है उस गेम के द्वारा फ्लेक्सस बॉक्स को बिल्कुल इन डेप्थ समझ लेंगे आपसे अच्छा फ्लेक्स बॉक्स किसको नहीं आता होगा ठीक है शब्द नहीं है रियलिटी में कन्वर्ट कर देंगे आने वाली वीडियोस के अंदर तो वेट करें उनका यूज़ करके हम फ्लेक्स बॉक्स का ग्रिड का यूज़ करके लेआउट बनाएंगे ये फ्लोट का यूज़ करके लेआउट बनाए ना तो हम सीख रहे हैं ना तो प्रैक्टिकल बात है इसको हटाओ फालतू की चीजें हैं ये ठीक है तो ये समझ में आता है ये समझ में आता है ये समझ में आता है अब क्लीयरिंग द फ्लोट की बात हो रही है कि लेट्स से मुझे कोई फ्लोट नहीं चाहिए तो वो वाला केस मैं कैसे संभालू मैंने कहा ठीक है अभी के लिएना यह वाला केस करके देखते हैं जहां पर टेक्स्ट है और दो आपकी इमेज फ्लोट कर रही है राइट साइड के अंदर मैंने कहा चलो ठीक है तो हम गए यहां पे और हमने बोला कि यार यह जो इमेज है इसको राइट में प्लेस करवा दो और इसको राइट में प्लेस करवा दो य आई में दिखाओ कैसा चलेगा य आई में गए देखो ये भी राइट में प्लेस हो गई ये भी राइट में प्लेस हो गई मैंने कहा सेम पोजीशन प चाहिए भैया तो हमने क्या किया हमने इसको कट कर दिया और हमने यहां पर इसको पेस्ट कर दिया यई चेक कराओ बढ़िया सही आ रहा है देखो एक प एक तुम्हारी इमेज ये आ गई राइट में एक इमेज तुम्हारी ये आ गई राइट में देख है दोनों इमेज आ गई यहां पे ठीक है इमेज वन कौन सी है ये इमेज वन है और ये इमेज टू है ठीक है ये इमेज वन है फ्लोट राइट कर रही है ये इमेज टू है फ्लोट राइट कर रही है और ये तुम्हारा पैराग्राफ है नीचे वाले पैराग्राफ की नीड नहीं है उसको हटा देता हूं मैं ठीक है नीचे वाले पैराग्राफ की नीड नहीं है उसको हटा देता हूं तो मैंने इसको कमेंट कर दिया हटा देता हूं यवाई चेक कराओ बढ़िया तो ये रही मेरी इमेज नंबर वन ये रही मेरी इमेज नंबर टू और ये रहा मेरा पैराग्राफ बहुत बढ़िया मैंने बोला क्या चाहता हूं मैं मैंने बोला क्या चाहता हूं पहले तो इमेज चेंज करते हैं कंफ्यूजन हो जाएगी फालतू में तो फायदा नहीं है ठीक है हम गए आगे हमने बोला विकपीडिया भगत सिंह ठीक है हम यहां पर चले गए हमने न्यू इमेजेस ले ली और इमेजेस जो है हमने यहां पर डाउनलोड कर ली हम लेट्स से ये वाली इमेज उठाई और सेव इमेज एस तो हम यहां पर गए फटाफट और हमने इमेज को यहां पर इंपोर्ट करवा लिया हमने भगत सिंह जी की इमेज को यहां पर ऐड कर लिया और फटाफट मैं चलता हूं यहां पे मैंने बोला कि जो सेकंड वाली इमेज है वो मैं महाराणा प्रताब की ऐड नहीं कर रहा वो मैं भगत सिंह की इमेज ऐड कर रहा हूं यूआई चेक कराओ यूआई प देखो ये रही मेरी इमेज वन महाराणा प्रताप की ये रही मेरी इमेज टू भगत सिंह की अब भगत सिंह की इमेज जो है मैं नीचे लेके आना चाह रहा हूं ठीक है जिस प्रकार से यहां पर ये दो इमेज राइट लेफ्ट राइट में थी अब जो ये वाली इमेज थी मैं इसको नीचे लेके आना चाहता हूं चेक करते हैं कैसे होगा चेक करते हैं कैसे होगा तो मैंने बोला एक बड़ा प्यारा कीवर्ड मेरे पास है इसका नाम है क्लियर और क्लियर का मतलब क्या है लेट्स से मैंने कहा कि यार मैं एक एलिमेंट हूं और मेरे लेफ्ट में कुछ एलिमेंट फ्लोट कर रहे हैं मेरे राइट में कुछ एलिमेंट फ्लोट कर रहे हैं तो मैंने क्या बोला मैं डिसाइड कर सकता हूं कि मेरे लेफ्ट या राइट में एलिमेंट फ्लोट करेंगे या नहीं करेंगे कैसे क्लियर का यूज करके तो जब मैं कहता हूं क्लियर लेफ्ट क्लियर लेफ्ट का मतलब है कि यार जो लेफ्ट में फ्लोट कर रहा है उसको हटाओ क्लियर लेफ्ट का मतलब है कि यार जो मेरे लेफ्ट में फ्लोट कर रहा है उसको हटाओ दोबारा सुनो क्लियर लेफ्ट या जब कोई एलिमेंट कहेगा कि भाई मेरे राइट में जो एलिमेंट फ्लोट कर र उनको मुझे हटाना तो वो क्लियर राइट कर देगा ठीक है सो भगत सिंह वाली इमेज ने क्या बोला कि मेरे राइट में महाराणा प्रताप की इमेज फ्लोट कर रही है सो भगत सिंह वाली इमेज क्या कहती है कि मेरे राइट में महाराणा प्रताप वाली इमेज फ्लोट कर रही है और मैं नहीं चाहता कोई भी इमेज फ्लोट करे तो आप इनको क्लियर कर दें ठीक है तो भगत सिंह वाली इमेज कहेंगी यार क्लियर कर दो राइट डायरेक्शन को तो इमेज टू कहती है कि भाई क्लियर कर दो राइट डायरेक्शन को ठीक है जी बहुत बड़े-बड़े रंदर है भाई अगर तुम इनके बारे में नहीं जानते तो तुम बहुत कुछ मिस कर रहे हो व वन के अंदर दोनों के बारे में पढ़ना आज जा गया महाराणा प्रताप के बारे में भी और भगत सिंह के बारे में भी तो क्या जो पुराना वाला यूआई था अगर मैं इसको अभी क् लिए कमेंट कर दूं तो दोनों इमेज ऐसे साइड बाय साइड आ रही थी जो कि हमने यहां पर देखा साइड बाय साइड थी मुझे एक के नीचे एक लेके आनी थी तो मैंने क्या किया भगत सिंह वाली इमेज ने बोला कि भाई महाराणा प्रताप वाली इमेज को क्लियर कर दो सॉरी मैं फ्लोट नहीं करवाना चाहता तो आपकी भगत सिंह वाली इमेज नीचे आ गई अब भगत सिंह वाली इमेज के राइट में कोई भी फ्लोट नहीं कर रहा है अब भगत सिंह वाली इमेज के राइट में कोई भी फ्लोट नहीं कर रहा है इस प्रकार से आपने सीखा क्लियर कीवर्ड का यूज ठीक है तो ये भी थोड़ी सी क्लेरिटी आपको मिली इसके बारे में ठीक है एक और चीज यहां पर ग्रेड क्लैप्स के बारे में बात की गई है कि लेट्स से मेरे पास एक बॉक्स है और उसके अंदर मैं सभी को ऐसा सभी को ऐसा मार्क कर दूं कि भाई सारे फ्लोट लेफ्ट कर रहे हैं तो इस केस में क्या होता है जो भी उनका पेरेंट कंटेनर होता है वो बिल्कुल क्लैप्स कर जाता है ठीक है एग्जांपल करके दिखाता हूं मैं तुम्हें तब समझ में अच्छे से आएगा तो मैंने क्या बोला कि यहां पर लेक्चर 19 के अंदर नई फाइल क्रिएट करी ड एटीएमएल और हमने य पर बलर प्लेट कोड ऐड किया और मैंने यहां पर फटाफट से एक बॉक्स ऐड कर दिया और मैंने यहां पर फटाफट आइटम ठीक है तो आइटम मैंने यहां पर ऐड कर दी मैंने बोला यह होगी तुम्हारी आइटम वन यह होगी आइटम टू य होगी आइटम थ्री ठीक है मैंने बोला ए मैंने बोला बी और मैंने बोला सी बढ़िया तो यहां पर अपना स्टाइल टैग यूज कर लेंगे आपने राइट डाउन किया कि भाई रहा मेरा बॉक्स और बॉक्स के अंदर मैंने बॉर्डर ऐड कर दिया न पिक्सेल सॉलिड ब्लैक ठीक है तो इससे क्या होगा यूआई पर मैंने इसको गो लाइव कर दिया लाइव सर्वर के द्वारा रन कर दिया तो यई पर ऐसा ए बी सी मुझे नजर आ रहा है ठीक है यह बात समझ में आती है अभी फटाफट यहां पर चलते हैं मैंने बोला जो आइटम्स है ना ये जो आइटम्स है इनको फटाफट से मैं क्या चाहता हूं इनको कुछ प्रॉपर्टी असाइन करना चाहता हूं तो मैंने बोला डॉट आइटम और हमने बोला यहां पर विड्थ जो है आपकी आ गई 200 पिक्सेल और यहां पर हाइट जो है आपकी आ गई 200 पिक्सेल और यहां पर मार्जिन जो है वो आपका आ गया ऐसा दो पिक्सल और यहां पर बीजी कलर जो है वो आपका आ गया लेट्स से एक्वा मरीन ठीक है तो अब यूआई पर कैसा शो हो रहा है यूआई पर ऐसे कुछ डब्बे आ रहे हैं यूआई पर ऐसे कुछ डब्बे आ रहे हैं ठीक है अभी के लिए मैं इनका साइज वापस पहले ऐसा कर लेता हूं बढ़िया तो यूआई पर ऐसे तीन डब मुझे नजर आ रहे एक ए का डब्बा नजर आ रहा है एक बी का डब्बा नजर आ रहा है एक सी का डब्बा नजर आ रहा तीन डब्बे मुझे नजर आ रहे हैं ठीक है अब अगर यहां पर वन बाय वन में सभी को फ्लोट कराता जाऊ तो देखो क्या होगा तो मैंने क्या बोला इनका भी बॉर्डर ऐड कर देता हूं यार बॉर्डर वन पिक्सेल सॉलिड ब्लैक ठीक है तो इनका बॉर्डर भी ऐड कर दिया हमने अब मैंने क्या बोला वन बाय वन अगर मैं सबको फ्लोट करा दूं या सबको यहीं से फ्लोट मार्क कर दूं फ्लोट लेफ्ट बढ़िया तो क्या हुआ तो ध्यान से ऑब्जर्व करो क्या हुआ पहले क्या हुआ था र् करना तो ध्यान से ऑब्जर्व करो इस प्रॉपर्टी को या इस बिहेवियर को तो अभी क्या है जब ऐ अपने अपनी जगह पर नॉर्मली प्लेस है तो आपका जो पेरेंट बॉक्स है वो यहां से यहां तक की हाइट ले रहा है ठीक है जो भी आपका पेरेंट बॉक्स था वो पूरी यहां से लेकर यहां तक की हाइट ले रहा है पर जैसे ही पर जैसे ही मैंने इसके फ्लोट लेफ्ट कर दिया सारी की सारी चाइल्ड आइटम्स को मैंने फ्लोट लेफ्ट कर दिया तो आपका पेरेंट बॉक्स कोलप्पन बॉक्स कोलप्पलुर आता है फ्लोट वाले केस के अंदर तो इस केस के अंदर आपके सारे के सारे जो ये फ्लोट सारे के सारे बॉक्सेस जो हैं सारे के सारे ओवरफ्लो कर रहे होते हैं सारे के सारे ओवरफ्लो कर रहे होते हैं अपने पेरेंट से ठीक है अगर मुझे इनको बचाना है तो मैं कैसे करूंगा तो अगर मैं यहां पे जाके मार्क कर दूं बॉक्स के अंदर कि भाई इसका ओवरफ्लो मैंने ऑटो मार्क कर दिया तो इस केस में क्या होगा इस केस में इस केस में सब कुछ ठीक हो गया तो जो सिंगल लाइन थी उसने यहां से यहां तक की पूरी की पूरी हाइट ले ली तो जो आपकी सिंगल लाइन आ रही थी यह वाली अब इसने पूरी यहां से तक की हाइट ले ली अब बात करते हैं ओवरफ्लो क्या होता है तो इसके बारे में सीख के आते हैं तो हमने बोला ओवरफ्लो एमडी ए चलो यहां पर फटाफट मैं गया यहां पर और मैंने देखा कि मेरे पास बहुत सारी प्रॉपर्टीज अवेलेबल है तो ऐसे करते हैं इसको भी एक बार समझ लेते डिफरेंट फाइल क्रिएट करके तो मैंने बोला कि यहां पर एक और फाइल क्रिएट कर लो मैंने नाम दिया ड एटीएमएल और हमने क्या बोला यहां पर यह रहा आपका कोड आपने बोला कि मेरे पास जो है ना दोस्त एक कंटेनर बना पड़ा है कंटेनर ठीक है और इस कंटेनर के अंदर हमने ऐसा 210 वर्ड लिखे हुए है ठीक है चलो ये बात समझ में आती है मैं इस कंटेनर को स्टाइल करने जाऊंगा अभी ठीक है मैंने बोला स्टाइल टैग ये रहा डॉट कंटेनर तो मैंने क्या बोला मैंने कंटेनर के अंदर एक बॉर्डर ऐड कर दिया वन पिक्सेल सॉलिड ब्लैक ठीक है अब यूआई प देखते हैं जाके तो यूआई प ऐसा कुछ कुछ आ रहा है मैं अ जूम इन कर लेता हूं ठीक है ऐसा कुछ कुछ आ रहा है बहुत बढ़िया हमने क्या बोला लेट्स से मैंने यहां पर इसकी एक विड्थ सेट कर दी मैंने बोला जी इसकी जो विड्थ है वो हो गई 500 पिक्सेल तो 500 पिक्सेल की विड्थ सेट करके क्या हुआ ये ऐसा बन गया हमने क्या किया लेट्स से मैंने इसकी हाइट भी सेट कर दी मैंने हाइट के अंदर भी सेट कर दिया कि भाई 500 पिक्सेल तो अब यूआई पे क्या हुआ तो यूआई पे ऐसा यह 500 पिक्सल नहीं हो रहा है ना चेक करते हैं एक बार यूआई पे आ जाओ यह हमारा कुत्ता है थोड़ा ज्यादा भोंक रहा है इसके मुक्के पड़ेंगे अभी मजाक कर रहा हूं तो हमने बोला कि यहां पे हम हाई 500 बा 500 का हमारा बॉक्स बना पड़ा है ठीक है 500 बा 500 का बॉक्स बना पड़ा है मैंने बोला थोड़ा और कंटेंट डालो इसके अंदर थोड़ा सा कंटेंट और डालो तो मैं यहां पे गया मैंने बोला कि लोरम 250 वर्ड और डाल दो ठीक है तो और कंटेंट डाल दिया हमने इससे तो क्या हुआ कंटेंट जो है बॉक्स से बाहर निकल गया कंटेंट ओवरफ्लो कर रहा है तो इस प्रकार से जो आपका कंटेंट जो है आपके पेरेंट एलिमेंट से बाहर निकल जाता है उसको मैं कहता हूं ओवरफ्लो करना दैट्ची सिर्फ इतना और आपका पूरा का पूरा जो बॉक्स था बाहर निकल गया था दैट्ची ठीक है अब मैंने कहा कि इस प्रकार से ओवरफ्लो कर रहा है आपका ये कंटेंट और मेरे पास ओवरफ्लो के अंदर ये सारी प्रॉपर्टीज एजिस्ट करती हैं विजिबल जो अभी नॉर्मली हम देख पा रहे हैं ठीक है आप ऐसा ओवरफ्लो करता हुआ दिख रहा है हिडन मतलब कि जो भी पार्ट ओवरफ्लो कर रहा है यानी कि जो भी पार्ट आपका ओवरफ्लो कर रहा है यानी कि यहां से यहां तक का सारा पार्ट इन सबको हाइड कर दो तो मैंने कहा ठीक है तो अगर मैं यहां पर कंटेनर के अंदर जाके बोल दूं ओवरफ्लो हिडन तो इससे क्या होगा जो भी पार्ट बाहर निकल था सब हाइड हो गया ना तो आप स्क्रोल कर पा रहे हो वो सारा पार्ट ही हट गया तो यहां पे डिलीट हो गया सारा का सारा टेक्स्ट अब मैं चाहता हूं यार मैं स्क्रोल कर पाऊं जैसे दिख तो नहीं रहा मुझे इस कंटेनर के बाहर पर स्क्रोल कर पाऊं तो मैंने सिंपल सा यहां पे गया ओवरफ्लो के अंदर मार्क कर दिया स्क्रोल कि भाई स्क्रोल करवाओ तो यहां पर स्क्रोल बार आ गई देख पा रहे हो अब मैं स्क्रॉल कर पा रहा हूं इस डब्बे के अंदर राइट तो मेरे को क्या-क्या पता गा विजिबल कर सकता हूं हिडन कर सकता हूं स्क्रोल कर सकता हूं और ऑटो भी कर सकता हूं कि भाई अपने हिसाब से आप देख ले खुद हम तो चले तो ऑटो कर दिया ऑब्जर्व करो अब सिर्फ स्क्रोल बार आपकी यह वर्टिकल वाली स्ल स्क्रोल बार आ रही है ब जो आपने नॉर्मल यहां पर स्क्रोल किया था तो उस केस के अंदर आपकी हॉरिजॉन्टल भी स्क्रोल बार यह देखो दिख रही है हॉरिजॉन्टल स्कोल बार भी आई थी ठीक है नीडेड नहीं थी पर फिर भी आई थी अब ऑटो वाले केस के अंदर इसने क्या किया हॉरिजॉन्टल स् स्क्रोल बार नहीं आ रही है सिर्फ वर्टिकली आ रही क्योंकि उसी की नीड है ठीक है तो इस प्रकार से दैट्ची ली चेंज कर लिया ताकि इन तीनों बॉक्सेस की हाइट को अरेंज कर पाए ठीक है यह बात समझ में आती है तो ओवरफ्लो प्रॉपर्टी के ब आपने सीखा कैसे आप विजिबल कर सकते हैं हाइड कर सकते हैं स्क्रोल कर सकते हैं ऑटो कर सकते हैं वापस आते हैं ड एटी प इसको फटाफट से दोबारा से एक बार रन करते हैं ठीक है तो हमने इस प्रकार से प्रॉपर्टीज देखी हमने इस प्रकार से तीनों बॉक्सेस को अरेंज कर दिया ठीक है बाकी लेटस से मैं चाहूं सी को मैं सी वाली जो आईडी है उसको मैं एक बार लेट से इसकी आईडी मैंने दे दी आईडी इसकी मैंने पकड़ा दी आई थ और मैं आइटम थी को लेट्स से राइट में फ्लोट करवाना चाहता हूं तो मैंने बोला आइटम थ और मैंने बोल दिया फ्लोट राइट तो चेक करते हैं आइटम ए आपकी लेफ्ट में फ्लोट हो रही है आइटम बी आपकी राइट में फ्लोट हो रही है और बी आपका बीच में एजिस्ट कर रही है ठीक है य भी लेफ्ट फ्लोट हो रही थी ठीक है सो लेटस से मैंने क्या बोला आइटम वन और टू भी अरेंज कर देता हूं य प आइटम वन आइटम टू सो लेट्स से मैंने य पर इसको आइटम वन को मार्क कर दिया है फ्लोट राइट और ऐसे ही आइटम टू को भी मैंने मार्क कर दिया है फ्लोट राइट ठीक है तो तीनों के तीनों यहां पर राइट में फ्लोट करनी चाहिए चेक करते हैं यूआई प एक बार लोड करते हैं इसको एक बार मैंने कहा यह तीनों के तीनों फ्लोट करो राइट के डायरेक्शन के अंदर आइटम वन आइटम टू अच्छा मैंने यहां पर आईडी दी ही नहीं है तो मैंने यहां पर इन तीनों के तीनों को फ्लोट राइट मार्क कर दिया तीनों के तीनों आइटम्स को ठीक है गलती यहां पर यह है कि अभी तक हमने इनको आईडी नहीं दी है तो यह हो गई आइटम वन और यह हो गई जी आपकी आइटम आइटम टू ठीक है अब यूआई पर आपका तीनों के तीनों राइट में फ्लोट करेगी ठीक है तो इस प्रकार से आप चाहे लेफ्ट में फ्लोट करा सकते हैं आप चाहे राइट में फ्लोट करा सकते हैं आप चाहे पेरेंट को इन्हेरिटेंस ना कर रहे हो हमेशा छोटी मोटी पोजीशन जो मैंने आपको इमेज के लिए सिखाई अभी ठीक है जो आपने महाराणा प्रताप वाली और भगत सिंह वाली एग्जांपल में देखी ठीक है वैसा कुछ ट्राई करें हमेशा उसके अलावा लेआउट के लिए आपको और चीजें मैं सिखाऊंगा उनका यूटिलाइजेशन हम करेंगे अभी के लिए आपको सिर्फ इतना समझ में आया होना चाहिए आज की क्लास से कि लेट्स से मुझे इस प्रकार से कुछ अचीव करना है तो मैं फ्लोट के द्वारा कर सकता हूं और लेट्स से कहीं पर ओवरलैपिंग ज्यादा हो रही है या कलैबसिटी वजह से तो वहां पर मैं क्लियर का यूज़ कर सकता हूं ठीक है और इन डेप्थ नॉलेज अगर आपको लेनी हो इस टॉपिक के ऊपर जितनी नीडेड थी उतनी मैंने आपको क्लेरिटी दे दी है और भी इसके ऊपर चीजें एजिस्ट करते हैं जो आप समझना चाहे तो समझ सकते हैं ठीक है मैंने 100% इस कांसेप्ट को कवर नहीं किया है और नीड भी नहीं है तो अगर आप आप चाहे तो इस पूरे डॉक्यूमेंट को पढ़ सकते हैं और बिल्कुल क्लेरिटी 100% ले सकते हैं जितना रिक्वायर्ड था उतना मैंने आपको समझा दिया है तो आप ये दोनों पेजेस अपने हिसाब से पढ़ सकते हैं ठीक है तो आशा करता हूं दोस्तो आपको समझ में आया होगा ठीक है और कोड वाइज को ज्यादा मुश्किल हमने किया नहीं रिवाइज कर लेते हैं एक बार सबसे पहले हमने यहां पे सीखा कि एक इमेज कैसे लगाएं उस इमेज के साइड में पैराग्राफ कैसे अरेंज करें कैसे दोन चीज साइड बाय साइड आती हो क दो इमेजेस मैं लगाऊं ठीक है तो वो एग्जांपल हमने देखा जहां पर एक इमेज ऊपर थी पैराग्राफ चल रहा था और एक इमेज नीचे थी राइट फ्लोट लेफ्ट और फ्लोट रा राइट का यूज हमने किया था फिर हमने ओवरफ्लो के बारे में सीखा कैसे ओवरफ्लो प्रॉपर्टी एक्जिस्ट करती है क्या-क्या डिफरेंट वैल्यूज मैं इंसर्ट कर सकता हूं और लास्ट में हमने देखा कुछ एग्जांपल्स जहां पे तीनों को फ्लोट लेफ्ट या फ्लोट राइट कराऊं मैं तो कैसे आपका पेरेंट क्लैप्स कर जाएगा पेरेंट को क्लैप्स करने से बचाने के लिए ओवरफ्लो का यूज़ कैसे मैं कर सकता हूं तो ये छोटी सी वीडियो थी बड़ी प्यारी सी वीडियो थे कुछ ज्यादा इसमें इंपॉर्टेंट था नहीं और आगे जाएंगे और हम पढ़ेंगे फ्लेक्स बॉक्स के बारे में गेम के द्वारा तो मिलेंगे आपसे नेक्स्ट लेक्चर के अंदर और धन्यवाद एवरीवन मिलेंगे आपसे नेक्स्ट लेक्चर के अंदर इस लेक्चर के जो भी आपके रिव्यूज हैं कमेंट सेक्शन ऐड कर सकते हैं आप कोड आपका डिस्क्रिप्शन में आप फाइंड आउट कर सकते हैं धन्यवाद एवरीवन बाय बाय गुड नाइट लव यू ऑल एक बहुत ही इंपॉर्टेंट कांसेप्ट लेआउटिंग के पॉइंट ऑफ व्यू में फ्लेक्सस बॉक्स एक बहुत ही इंपॉर्टेंट कांसेप्ट माना जाता है अभी तक आपने बहुत सारी चीजें सीखी इनलाइन एलिमेंट ब्लॉक एलिमेंट किसे कब इनलाइन करें किसे कब ब्लॉक करें फ्लोट कैसे लगाते हैं क्लियर कैसे लगाते हैं तो अगर उन चीजों को यूज करके आप लेआउटिंग करने का ट्राई करेंगे एक लेआउट बनाने का ट्राई करेंगे तो आपको बहुत इश्यूज फेस करने पड़ सकते हैं वेब डेवलपमेंट के दुनिया के अंदर जब लेआउट की हम बात करते हैं तो हम बात करते हैं फ्लेक्स बॉक्स के बारे में हम बात करते हैं ग्रिड्स के बारे में एक बहुत ही पावरफुल टूल हमारे पास अवेलेबल है जिसके द्वारा मैं भिन्न-भिन्न प्रकार के लेआउटस क्रिएट कर सकता हूं लेआउट की जब मैं बात करता हूं तो आपने बहुत सारी वेबसाइट देखी होगी जो कुछ इस फॉर्मेट में होती है कि यहां पर आपने एक कुछ रख दिया यहां पर आपने कॉम्पोनेंट रख दिया यहां पर आपने एक कॉम्पोनेंट रख दिया और यहां पर आपने एक कॉम्पोनेंट रख दिया या फिर कुछ वेबसाइट आपने ऐसी देखी होगी जहां पे आपके कंपोनेंट ऐसे एजिस्ट कर रहे हैं कि ये कॉम्पोनेंट है ये कॉम्पोनेंट है ये कॉम्पोनेंट है ये कॉम्पोनेंट है इस प्रकार तो डिफरेंट डिफरेंट तरीके से कॉम्पोनेंट की पोजीशन को मैं लेआउटिंग करना कहता हूं ठीक है एक और आपको सिंपल सा प्यारा सा एग्जांपल मैं दिखाता हूं अभी जस्ट ठीक है मैं आपको ऑलरेडी बता रखा है कि जब भी हम किसी वेब पेज की बात करते हैं जब भी हम किसी वेब पेज को ब्रेक कर रहे होते हैं हम हर एक चीज को चाहे वो सर्कुलर शेप हो चाहे वो ट्रायंगुलर शेप को हर किसी को हम एक रेक्टेंगल बॉक्स मान के चलते हैं एग्जांपल के लेट्स से मैं आपको कोड हेल्प की वेबसाइट पर ले जाता हूं ठीक है अभी आपको एमडीएन की डॉक्यूमेंटेशन भी दिखाएंगे हम उसे पहले कोड हेल्प की वेबसाइट पर ले जाता हूं तो यहां पर अगर मैं बात करूं तो मैं ऑब्जर्व कर सकता हूं लेट्स से मैं स्पेसिफिक जो है ना स्पेसिफिक इस सेक्शन की बात कर रहा हूं तो इस सेक्शन की अगर मैं बात करूं तो उसको ब्रेक कैसे करेंगे मैंने कहा जी यहां पर मेरे पास एक टेक्स्ट आ रहा है यहां पर मेरे पास एक टेक्स्ट आ रहा है यहां पर मेरे पास एक बॉक्स के अंदर पहला बटन यह रहा दूसरा बटन यह रहा यहां पर मेरे पास जो है पहली इमेज दूसरी इमेज तीसरी इमेज चौथी इमेज पांचवी इमेज ये पूरी की पूरी मान लो एक बॉक्स के अंदर आ रही हो पांच इमेजेस यहां पर मेरे पास एक बॉक्स आ रहा है लेट से इस बॉक्स में ये मेरा पहला बॉक्स बना पड़ा है और यह मेरा सेकंड बॉक्स बना पड़ा है तो जिस प्रकार से सारे के सारे बॉक्सेस अरेंज्ड हैं कि पहले आपका ये वाला बॉक्स आया फिर ये आया फिर ये आया फिर ये आया अंदर आपके इमेजेस एडेड है आपके टेक्स्ट एडेड हैं आपके बटंस एडेड हैं जिस प्रकार से सारा का सारा कंटेंट अरेंज्ड है उसे मैं कहता हूं लेआउट तो जब भी मुझे लेआउट क्रिएट करने हो चाहे किसी भी प्रकार के लेआउट हो ठीक है फ्लेक्स बॉक्स और ग्रिड्स बहुत ही पावरफुल टूल्स होते हैं उन लेआउटस को क्रिएट करने के लिए ठीक है अब देखो फ्लेक्स बॉक्स के ऊपर बहुत सारी वीडियोज youtube4 प़डा लग गया है हम यहां पर एक बहुत प्यारी सी गेम का यूज़ करने वाले हैं अगर आप कोड हेल्प की वेबसाइट पे जाएं लेट्स से मैंने इसको रीलोड कर दिया अ यहां पे ठीक है तो कोड हेल्प की वेबसाइट पे आपको लैब्स के अंदर फ्रूड बॉक्स फ्लेक्स करके गेम दी हुई है जहां पर 24 लेवल्स हैं और वो 24 लेवल्स के द्वारा अपनी फ्लेक्स बॉक्स की नॉलेज को आप बिल्कुल अप्लाई करके कॉन्फिडेंस फील कर सकते हैं कि हां ठीक है फ्लेक्स बॉक्स मुझे समझ में आ गया अब मैं ट्राई कर सकता हूं इसके द्वारा लेआउट क्रिएट करने का ठीक है तो हम थोड़ा डिफरेंट वे में अप्रोच करने वाले हैं फ्लेक्स बॉक्स को ये नहीं कि सिंपल हमने थ्योरी पढ़ी थोड़ा सा अप्लाई किया और कंफ्यूजन के साथ घर चलेगे नहीं थ्योरी पढ़ेंगे अप्लाई करेंगे एग्जांपल ट्राई करेंगे और फिर गेम कंप्लीट करेंगे उसके बाद आपको घर भेजेंगे ठीक है तो बहुत ही छोटी सी प्यारी सी वीडियो रहने वाली है बहुत कुछ सीखने को मिलने वाला है तो शुरुआत करते हैं ठीक है मैंने कहा व्हाट इज अ फ्लेक्स बॉक्स आपने बोला भैया कुछ भी नहीं है सिंपल सी चीज है एक प्रकार का लेआउट मेथड है वन डायमेंशन मैं चाहूं तो रो में रो वाइज लेआउटिंग कर सकता हूं मैं चाहूं तो कॉलम वाइज लेआउट क्रिएट कर सकता हूं ठीक है ऐसे हॉरिजॉन्टल डायरेक्शन के अंदर मुझे आइटम प्लेस करनी हो या फिर वर्टिकल डायरेक्शन के अंदर आइटम प्लेस करनी हो आइटम के बीच में स्पेसिंग किस प्रकार रहने वाली है आइटम को बिल्कुल स्टार्ट में अलाइन करना है बिल्कुल एंड में अलाइन करना है सेंटर में अलाइन करना वो सारी की सारी चीजें यहां पर फ्लेक्सस बॉक्स के द्वारा अचीव की जा सकती हैं ठीक है तो एक लेआउटिंग मेथड है मेरे पास और इसकी फुल फॉर्म फ्लेक्स बॉक्स की क्या होती है फ्लेक्सिबल बॉक्स एक ऐसा बॉक्स जिसमें बहुत सारी फ्लेक्सिबल हमारे पास अवेलेबल होती है आइटम्स को अलाइन करना प्लेस करना वो सारी की सारी फ्लेक्सिबल कीज हमारे पास यहां पर अवेलेबल होती है ठीक है तो विदाउट वेस्टिंग एनी टाइम फटाफट चलते हैं हमारी ऑफिशियल डॉक्यूमेंटेशन के ऊपर मैंने कहा जी मैं तो जाऊंगा फलेक्स बॉक्स एमडीए हमारी ऑफिशियल डॉक्यूमेंटेशन एमडीएन वाली ठीक है और यहां पे जाके आप बहुत सारी चीजें पढ़ी है इनको पढ़ सकते हैं इंग्लिश में बहुत सारी चीजें लिखी हुई है आप चाहे तो समझ सकते हैं और इन डेप्थ जाके हमारा जो मेन मकसद है यहां पे समझने का वो है यह वाला डायग्राम ठीक है तो यहां पे उन्होंने हमें क्या समझा रखा है उन्होंने बोला है कि यहां पर सबसे पहले अगर आप देखें आपका एक पेरेंट कंटेनर होता है इस पेरेंट कंटेनर को मैं क्या कहता हूं इसको मैं फ्लेक्स कंटेनर कह सकता हूं ठीक है इस कंटेनर के अंदर बहुत सारी आइटम्स हो सकती हैं इन सारे आइटम्स को मैं क्या कहता हूं इन सारे आइटम्स को मैं फ्लेक्स आइटम्स कहता हूं ठीक है बाय डिफॉल्ट आपका जो हॉरिजॉन्टल एक्सिस होता है बाय डिफॉल्ट आपका जो हॉरिजॉन्टल एक्सिस होता है उसे मैं मेन एक्सिस कहता हूं और बाय डिफॉल्ट आपका जो वर्टिकल एक्सिस होता है उसे मैं क्रॉस एक्सिस कहता हूं ठीक है तो ये हो गया आपका पेरेंट एलिमेंट फ्लेक्स कंटेनर ये हो गया आपका चाइल्ड एलिमेंट फ्लेक्स आइटम ये हो गई आपकी हॉरिजॉन्टल डायरेक्शन मेन एक्सिस ये हो गई आपकी वर्टिकल डायरेक्शन क्रॉस एक्सिस तो ये टर्म्स का पता होना टर्म्स का पता होना बहुत इंपॉर्टेंट है इसे मेन स्टार्ट कहता हूं क्रॉस एंड क्रॉस स्टार्ट मेन एंड ठीक है इतना यूज इसका आएगा नहीं पर चलो ठीक है कोई बात नहीं ठीक है तो अभी मेरे को क्या समझ में आया कुछ एक टर्मिनोलॉजी बस आपको सिखा के लाया हूं मैं कि अगर लेट्स से कि मेरे पास एक पेरेंट कंटेनर है जनरली जो हम कंटेनर बनाते हैं फिर उसके अंदर बॉक्सेस बनाते हैं उसी प्रकार समझ के देखो इसको तो मैंने बोला जो भी मैं अपना पेरेंट कंटेनर बनाऊंगा इसे मैं क्या कह रहा हूं इस कंटेनर को मैं कह रहा हूं फ्लेक्स कंटेनर ठीक है अब इस कंटेनर के अंदर हो सकता है कि मेरे पास भिन्न-भिन्न आइटम्स हो मैंने बोला कि यहां पर मेरे पास एक आइटम ये रही एक आइटम ये रही एक आइटम ये रही तो जो भी आइटम इस फ्लेक्सस कंटेनर के अंदर एजिस्ट करती है उस आइटम को मैं क्या बोल देता हूं उसको मैं कह देता हूं फ्लेक्स आइटम बहुत बढ़िया बाय डिफॉल्ट जो है ये मेरा हॉरिजॉन्टल डायरेक्शन जो होती है ये मेरी मेन एक्सिस कहलाती है और बाय डिफॉल्ट जो है यह मेरी वर्टिकल डायरेक्शन जो है ये मेरी क्रॉस एक्सिस कहलाती है ठीक है जी बहुत बढ़िया तो थोड़ी बहुत टर्मिनोलॉजी हमें समझ में आने लग गई है अब इसके बाद हम आगे बढ़ सकते हैं अभी तक आपने देखा था डिस्प्ले प्रॉपर्टी ज हम सेट कर रहे थे तो डिस्प्ले के अंदर आपने देखा कि आप ब्लॉक सेट कर पा रहे थे आप इन लाइन सेट कर पा रहे थे राइट ये सारी चीजें आपने एक्सप्लोर करी थी कुछ क्लासेस पहले अब यहां पर हम एक फ्लेक्स कंटेनर क्रिएट करना है जब भी मुझे किसी भी एक डब्बे को किसी भी एक डिव को किसी भी एक एलिमेंट को ऐसा फ्लेक्स में कन्वर्ट करना है तो मुझे क्या करना होता है मुझे बस एक काम करना होता है मैं उसके डिस्प्ले प्रॉपर्टी को फ्लेक्स मार्क कर देता हूं मैं उसके डिस्प्ले प्रॉपर्टी को फ्लेक्स मार्क करता हूं इससे क्या होता है वो कंटेनर फ्लेक्स कंटेनर बन जाता है और उसके अंदर जो आइटम्स होती है वो अपने आप फ्लेक्स आइटम्स बन जाती है ठीक है तो फ्लेक्स आइटम्स अपने आप बन जाएंगी फ्लेक्स कंटेनर आपको क्रिएट करना तो आपको डिस्प्ले को फ्लेक्स मार्क करना पड़ेगा और इतना ही काफी है ठीक है तो चलो इसे क्रिएट करते हैं एक फ्लेक्स बॉक्स क्रिएट करने चलते हैं फटाफट अपने कोड के अंदर मैंने कहा जी मुझे क्या चाहिए मुझे एक लेक्चर नंबर 20 का फोल्डर क्रिएट करके दो फटाफट लेक्चर 20 ठीक है इस लेक्चर 20 के अंदर मैंने एक फाइल क्रिएट कर ली उसका नाम मैंने रख दिया index.htm और यहां पर मैंने अपना बॉयलर प्लेट कोड ऐड कर दिया और मैंने कहा कि ऐसा करो कंटेनर क्रिएट कर दो ठीक है और उस कंटेनर के अंदर आप ऐसा करो मेरे को कुछ बॉक्सेस क्रिएट करके दो मैंने कहा जी क्लास होगी बॉक्स और उस बॉक्स क्लास के अंदर मैंने कहा कितनी का चाहिए मैंने बोला जी मेरे को चाहिए ऐसा चार बॉक्सेस चाहिए ठीक है मैंने यहां पर क्या कर दिया मैंने यहां पर बोल दिया कि इसकी आईडी भी मैं ऐड कर देता हूं मैंने कहा जी बॉक्स वन और इसी प्रकार से सबके अंदर मैं आईडी ऐड कर दूंगा ठीक है तो इस प्रकार मैंने सारे के सारे डेप्स के अंदर आईडी ऐड कर दी बहुत बढ़िया अब यहां पे ऐसा करते हैं इनके अंदर नेम भी कर देता हूं मैंने कहा नीड नहीं है ऐसे छोड़ दे छोड़ो तो मैंने क्या बोला कि अभी यूआई प फटाफट चेक करते हैं कैसा दिख रहा है मेरा पूरा का पूरा एलिमेंट अभी सब कुछ ब्लैंक है क्योंकि सब कुछ आपने बस डिफ्स क्रिएट करें एमटी डिफ्स क्रिएट करें कुछ और एक्स्ट्रा आपने ऐड नहीं किया तो फटाफट एक बार थोड़ी सी स्टाइलिंग करते हैं मैंने कहा जी स्टाइल टैग का यूज करते हैं डॉट कंटेनर की बात करते हैं कंटेनर और मैंने कंटेनर के अंदर मार्क कर दिया कि भाई साहब बीजी कलर जो है आप ऐसा करो ऐसा बेज कलर दे दो ठीक है तो ये बीजी कलर हो गया बहुत बढ़िया और मैंने क्या कहा मैंने क्या कहा ऐसा करो कि ये जो बॉक्सेस हैं यह जो बॉक्सेस हैं इनकी बात कर लेते हैं तो डॉट बॉक्स व क्लास नहीं है आईडी है तो हैश बॉक्स वन उसके बाद हैश बॉक्स टू उसके बाद हैश बॉक्स 3 उसके बाद हैश बॉक्स 4 ठीक है तो आपने सारे के सारे बॉक्सेस यहां पर ऐड कर दिए मैंने अभी के लिए क्या बोला कि भाई इस वाले बॉक्स का जो बीजी कलर है वो आप ऐड कर दो एक्वा और इस वाले बॉक्स का जो बीजी कलर है वो आप ऐड कर दो ब्लू और इस वाले बॉक्स का जो बीजी कलर है वो आप ऐड कर दो ऐसा ऑरेंज और इस वाले का जो बीजी कलर है वो आप ऐड कर दो ब्राउन चलो ठीक है ऊपर वाले का थोड़ा ठीक करना पड़ेगा यहां पे मिस कर दिया हमने ठीक है तो यई पर चेक करते हैं क्या कुछ क्रिएट हुआ या अभी भी खाली है अभी भी खाली है ठीक है तो अभी के लिए मैंने क्या किया मैं बस यहां पर गया और मैंने बोला कि डॉट बॉक्स वाली जो क्लास है उसको मैंने एक हाइट और एक विड्थ दे दी उसके बाद देखते हैं क्या होता है यह हो गया जी इतना और यह हो गया जी इतना ठीक है ऐसे करके विट तो हाइट दे दी इससे य प क्या दिख रहा है मुझे ठीक है अब कुछ कुछ दिखना शुरू हुआ एक बार फटाफट इसको 100% पर लेके आते हैं बहुत बढ़िया कुछ बॉर्डर ऐड करता हूं थोड़ी और सेग गन दिखेगी मुझे मैंने बोला बॉर्डर न पिक्सल सॉलिड ब्लैक ठीक है और मैंने यहां पर कर दिया बॉर्डर टू पिक्सल सॉलिड ब्राउन ऐसा करके लिख दिया ठीक है तो यूआई पर कैसा आ रहा है यूआई पर ऐसा कुछ कुछ शो हो रहा है मैंने कहा कुछ मार्जिन पैटिंग भी ऐड कर दो तो फटाफट चलते हैं यहां पे मैंने बोला जी कुछ मार्जिन पैटन भी ऐड करो मार्जिन हमने ऐड कर दिया यहां पे लेट्स से टू पिक्सेल और पैडिट हमने ऐड कर दी यहां पर लेट्स से टू पिक्सल और सेम मैंने ऊपर स्पेसिफाई कर दिया ठीक है ऐसा कुछ सोच के मार्जिन पैडिट ऐड नहीं कर रहा बस ऐसे थोड़ा यूआई दिखने में सुंदर हो जाए इसलिए कर रहा हूं मैं ठीक है तो ऐसे करके आपने एक बड़े से कंटेनर के अंदर चार बॉक्सेस आपने ऐड कर दिए ठीक है अभी तक मैंने फ्लेक्स वगैरह कुछ भी डिस्कस नहीं किया अभी तक बस ये नॉर्मल सा स्ट्रक्चर क्रिएट किया है ठीक है अभी तक बस ये स्ट्रक्चर क्रिएट किया हुआ है अब मैंने क्या बोला मैंने बोला मुझे डिस्प्ले फ्लेक्स क्रिएट करनी है तो मैंने बोला जो मेरा ये बाहर वाला कंटेनर है ना इसकी थोड़ी सी मैं बॉर्डर विट बढ़ा देता हूं इसकी बॉर्डर विट में पाच पिक्सल कर देता हूं तो ये जो पांच पिक्सेल का जो ये ब्लैक बॉर्डर वाला कंटेनर है इसको मैंने क्या बोल दिया मैं दोबारा से आपको समझा देता हूं एक बार मैंने बोला जी यह मेरा बड़ा वाला कंटेनर है इस को मुझे फ्लेक्स में कन्वर्ट करना है और ताकि ये सारे के सारे जो छोटे बॉक्सेस हैं ये सारे के सारे आपके फ्लेक्स आइटम्स बन जाए मैंने कहा ठीक है तो मैं सिंपल सा गया मैं कंटेनर के अंदर गया और मैंने बोला कंटेनर जी आप डिस्प्ले हो जाओ फ्लेक्स खत्म आपका फ्लेक्स कंटेनर बनके तैयार और आपकी फ्लेक्स आइटम्स बनके तैयार आपका मेन एक्सिस क्रॉस एक्सेस रेडी है काम करने के लिए ठीक है इससे क्या हुआ भैया सब कुछ ऐसे प्लेस हो गया बाय डिफॉल्ट सब कुछ ऐसे बाय डिफॉल्ट प्लेस हो गया क्यों मैंने कहा अभी समझाते हैं सो बेसिकली जब आप फ्लेक्स क्रिएट करते हैं जब भी आप किसी कंटेनर को फ्लेक्स मार्क करते हैं बाय डिफॉल्ट बाय डिफॉल्ट फ्लेक्स की डायरेक्शन जो होती है वो रो होती है तो आपके पास यहां पर एक और प्रॉपर्टी है आपके पास यहां पे एक प्रॉपर्टी और है फ्लेक्स डायरेक्शन करके फ्लेक्स डायरेक्शन करके अगर मैं इसको कॉलम सेट कर दूंगा तो इससे क्या होगा इससे आपके सारे बॉक्सेस वापस एक के नीचे एक आ गए ठीक है अगर इस प्रॉपर्टी को मैं रो मार्क कर दूंगा अगर इस प्रॉपर्टी को मैं रो मार्क कर दूंगा तो इससे क्या होगा वापस से रो वाइज आ जाएंगे ठीक है अब देखो ऐसे ये एक्वा ब्लू ऑरेंज ब्राउन ठीक ठीक है अगर गलती से मैंने इसको यहां पर रो रिवर्स लिख दिया तो ये रो के अंदर ही रहेंगे बस रिवर्स ऑर्डर में आ जाएंगे जहां पर पहले एक्वा ब्लू ऑरेंज और ब्राउन था वो उल्टा होके ब्राउन ऑरेंज ब्लू और एक्वा ऐसा हो जाएगा तो देखो ब्राउन ऑरेंज ब्लू और एक्वा समझे तो सेम रो के अंदर हो ग बट रिवर्स हो गए सेम रो में रिवर्स हो गए ठीक है तो आपने सीखा बेसिकली मैं आपको यह समझाना चाह रहा हूं आप जब भी एक फ्लेक्स बॉक्स क्रिएट करते हैं आपने बोला कि जैसे मैंने एक कंटेनर क्रिएट कर दिया इसको मैंने डिस्प्ले फ्लेक्स कर दिया तो जब भी मैं डिस्प्ले फ्लेक्स करता हूं तो बाय डिफॉल्ट क्या होता है बाय डिफॉल्ट जो होता है बाय डिफॉल्ट आपके फ्लेक्स की जो डायरेक्शन होती है आपके फ्लेक्स की डायरेक्शन बाय डिफॉल्ट रो सेट होती है दैट्ची तो जैसे ही आप डिस्प्ले फ्लेक्स करोगे ये तीनों यहां से हट जाएंगे और एक सिंगल लाइन के अंदर आ जाएंगे क्यों आ रहे हैं सिंगल लाइन के अंदर क्योंकि बाय डिफॉल्ट फ्लेक्स डायरेक्शन रो सेट होती है अब अगर मैं फ्लेक्स डायरेक्शन की अगर बात करूं यहां पे ठीक है तो अगर मैं यहां पे बात कर रहा हूं फ्लेक्स डायरेक्शन वाली प्रॉपर्टी की तो फले डायरेक्शन को मैं सेट कर सकता हूं मैं चाहूं तो रो सेट कर सकता हूं रो सेट करने से क्या होगा रो सेट करने से आपके डब्बे जो थे जो डिब्स आपने क्रिएट किए थे ऐसे वन बाय वन आ जाएंगे ठीक है मैंने बोला जी यहां पे आ गया जी वन यहां पे आ गया टू यहां पे आ गया थ्री सेकंड तरी का मेरे पास क्या है अगर मैं यहां पर रो रिवर्स कर देता हूं तो क्या होगा तो रो रिवर्स वाले केस के अंदर आपके तीन डब्बे जो हैं ऐसे राइट साइड में आ जाएंगे ऐसे राइट साइड में आ जाएंगे नंबरिंग क्या हो जाएगी ये थ्री वाला डब्बा ये टू वाला डब्बा ये वन वाला डब्बा ऐसे एक और वैल्यू सेट कर सकते हो जिसे हम कहते हैं कॉलम अगर फ्लेक्स डायरेक्शन को मैंने कॉलम सेट कर दिया तो क्या होगा तो इससे आपके डब्बे जो हैं ऐसे कॉलम कॉलम की फॉर्म में आ जाएंगे ठीक है सर्कल क्यों बन गया ये ऐसे कॉलम की फॉर्म में आ जाएंगे इसका वन हो गया इसका टू हो गया इसका थ्री आ गया ठीक है तो मेरे पास एक और वैल्यू है जिसे मैं कहता हूं कॉलम रिवर्स तो कॉलम रिवर्स करने से क्या होगा जहां पे ये 1 2 3 था अब ये रिवर्स हो जाएगा और ये बन जाएगा 3 2 1 इस प्रकार से काम करेगा तो फटाफट एक बार कोड में वेरीफाई कर लेते हैं अभी रो वाला पार्ट तो ऑलरेडी हम देख ही चुके हैं रो कैसे होता है और रो रिवर्स कैसे होता है मैंने क्या किया इसको पहले कॉलम सेट कर दिया ठीक है मैंने इसको कॉलम सेट कर दिया कॉलम ठीक है तो इससे क्या हुआ इससे मेरे कलर आ गए ब्लू सॉरी एक्वा ब्लू ऑरेंज और ब्राउन अगर मैं इसको कॉलम रिवर्स कर दूंगा तो इनका ऑर्डर जो है वो शिफ्ट कर जाएगा तो ये बन जाएगा आपका ब्राउन ऑरेंज ब्लू और एक्वा ब्राउन ऑरेंज ब्लू और एक्वा ठीक है तो आपको समझ में आ गया फ्लेक्स डायरेक्शन रो करने से क्या होगा रिवर्स करने से क्या होगा कॉलम करने से क्या होगा कॉलम रिवर्स करने से क्या होगा ठीक है ये बात समझ में आ आती है ये बात समझ में आती है अगर लेट्स से मैंने यहां पर इनको हटा दिया होता तो क्या होता ठीक है तो इस प्रकार से आपको नजर आ रहा है क्योंकि आपने कोई कंटेंट डाल नहीं रखना है इसलिए आपको ऐसा नजर आ रहा है तो बाय डिफॉल्ट य ऐसे पूरी की पूरी विड्थ खा गया ना ठीक है प्लॉक एलिमेंट है इसलिए चलो अभी ये समझ में आता है अभी ये समझ में आता है हमने क्या देखा कि अभी वापस मैं इसको रो मार्क कर देता हूं तो अभी अगर आपसे कोई पूछे फ्लेक्स कैसे क्रिएट करते हैं तो आपको उसका आंसर पता है और अगर आपसे कोई पूछे कि फ्लेक्स डायरेक्शन कैसे ऐड करते तो आपको उसका आंसर ही पता है ठीक है अब रिस्पांस डिजाइन की हम बात करते थे हम ने बोला कि रिस्पांसिस डिजाइन होता क्या है तो वापस आपको दिखाता हूं लेट्स से मैं यहां पे आया होम पे और मैंने बोला यार इसको इंस्पेक्ट करो अभी भी देखो अगर इसका साइज जो है अगर इसका साइज जो है यहां पर मैं डिक्रीज कर दूं तब भी सुंदर लग रहा है ऐसा नहीं है कि बहुत बेकार लग रहा हो राइट अगर इसका साइज मैं ऐसे इंक्रीज कर दूं तब भी सुंदर लग रहा है राइट तो ऐसे डिफरेंट डिफरेंट स्क्रीन साइजेस के लिए अगर मेरा जो यूआई है इंटैक्ट है गंदा नहीं लग रहा ठीक है आपने हर एक केस हैंडल कर रखा है एक्स्ट्रा स्मॉल स्क्रीन साइज में क्या करना है स्मॉल स्क्रीन साइज में क्या करना है लार्ज स्क्रीन साइज में क्या करना है एक्स्ट्रा लार्ज में क्या करना है तो ठीक है हम कहते हैं हमने एक रिस्पांस डिजाइन क्रिएट कर लिया है अब लेट्स से मैं सेम चीज यहां पर ट्राई करता हूं मैंने बोला कि ठीक है अभी अगर मैं अभी देखो सुंदर लग रहा है जैसे ही मैं इसको छोटा करता हूं तो आपको सब कुछ सही चल रहा है सब कुछ सही चल रहा है ठीक है पर ये तो बाहर निकल गया ऐसे बाहर निकल गया राइट पर ठीक है फिर भी काफी हद तक हमने एक अच्छा डिजाइन क्रिएट किया है फ्लेक्स के द्वारा बाय डिफॉल्ट अपने आप पे जो कलर्स हैं अपने आप जो बॉक्सेस हैं वो स्क्विज कर रहे हैं बाय डिफॉल्ट अपने आप बॉक्सेस स्क्वीजी रहे हैं राइट तो बॉक्सेस की विड्थ अपने आप कम होती जा रही है भले ही आपने कोड के अंदर यहां पर बॉक्स की एक विड्थ दो पिक्सल मेंशन कर रखी है पर जब आप स्क्विज कर रहे हैं तो बॉक्स की विड्थ अपने आप अकॉर्डिंग चेंज कर रही है जैसे यहां पे 62.2 पिक्सल्स हो गई राइट तो एक बड़ा अच्छा रिस्पांसिस डिजाइन हमने क्रिएट किया चलो एक बात ये समझ में आती है ठीक है वापस आते हैं हमारे नोट्स के ऊपर हमने कहा अब तक फ्लेक्स के बारे में पता लग गया डिस्प प्रॉपर्टी सेट करके फ्लेक्स डायरेक्शन के बारे में पता लग गया अब एक और प्रॉपर्टी के बारे में हम बात करेंगे इसका नाम है फ्लेक्स रैप ठीक है तो जैसे हमें पता है टेक्स्ट रैप की हम बात करते हैं कि हमने मान लो कि एक 1000 वर्ड ठीक है 1000 वर्ड एक लाइन में लिख दिए तो मजा नहीं आएगा मैं वो 1000 वर्ड ऐसे राइट स्क्रोल करके थोड़ी देखूंगा पर अगर वो मेरी स्क्रीन विड्थ के हिसाब से जैसे ही मान लो मेरी स्क्रीन के विड्थ में सिर्फ 10 वर्ड आते हैं तो हर 10 वर्ड बाद एक नई लाइन के अंदर हम टेक्स्ट आ जाना चाहिए राइट टेक्स्ट रैपिंग जिससे हम कहते हैं उसी प्रकार अभी मैं क्या कर रहा हूं अभी अगर मैं इंस्पेक्ट करता हूं तो क्या होता है अभी ये सारा का सारा टेक्स्ट जो है ये सारे की सारे बॉक्सेस स्क्विज कर रहे हैं बट मैंने बोला मेरे को स्क्विज नहीं चाहिए मैंने क्या कहा है मुझे वि 200 पिक्सेल ही चाहिए तो आप मेरी विट 200 पिक्सल से कम क्यों कर रहे हो भाई मैंने कहा सॉरी तो अगर मुझे यह मेक करना है कि मेरी विड जो है वो स्कवीज ना करे तो मुझे क्या करना पड़ेगा तो मुझे यहां पर सेट करना पड़ेगा कंटेनर के अंदर ठीक है फ्लेक्स रैप रैप तो मैंने मार्क कर दिया कि रैपिंग को ऑन कर दो तो इस केस के अंदर अब क्या होगा इस केस के अंदर अब क्या होगा कि जैसे ही मेरी विड्थ जो है ऐसे कम होगी तो जो बॉक्स था ठीक है वो नेक्स्ट लाइन के अंदर आ जाएगा कोई भी 200 पिक्सेल से कम स्क्विज नहीं होगा नेक्स्ट लाइन के अंदर आते रहेंगे कंडीशन नेक्स्ट लाइन के अंदर आते रहेंगे जब तक स्पेस अवेलेबल है जब स्पेस अवेलेबल नहीं है स्क्विज करके जब स्पेस अवेलेबल नहीं है स्क्विज करके क्या बात समझ में आती है जब तक स्पेस अवेलेबल है तब तक वो अपनी 200 पिक्सेल की विड्थ को मेंटेन रखेगा जब स्पेस अवेलेबल नहीं है तो नेक्स्ट लाइन के अंदर आ जाएगा तो इसे कहते हैं रैपिंग ऑन करना ठीक है इसकी क्या-क्या प्रॉपर्टीज है अगर हम बात करें फ्लेक्स रैप के बारे में आपकी बाय डिफॉल्ट जो प्रॉपर्टी होती है वो होती है नो रैप कि रैपिंग ना करना दूसरी बात जो हमने देखी वो थी रैप और हम चाहे तो रैप रिवर्स से भी कर सकते हैं कि रिवर्स ऑर्डर में आपकी रैपिंग हो रही हो ठीक है तो चलो रिवर्स ऑर्डर में रैपिंग करके देखते हैं अभी देखो बाय डिफॉल्ट आपका सेम ऐसे रहता ठीक है अगर मैं यहां से अ यहां पर लिख दूं नो रैप चलो मैंने यहां पर लिख दिया नो रैप ठीक है देखते हैं कौन-कौन सी प्रॉपर्टी अवेलेबल है नो रैप ठीक है तो नो नो रैप जब मैंने यहां पे मेंशन कर दिया तो इससे क्या होगा इसे जब मैं स्क्विज करूंगा नेक्स्ट लाइन में नहीं जाएंगे बॉक्सेस और आपकी विड्थ कम होती चली जाएगी बॉक्सेस की ठीक है सेकंड मैंने यहां पे क्या मेंशन कर दिया रैप सेकंड मैंने मेंशन कर दिया यहां पे रैप अब ज रैप जब होगा तो आप स्क्विज करोगे तो आपके बॉक्सेस नेक्स्ट लाइन के अंदर आ जाएंगे और अपनी विड्थ को 200 पिक्सल से कम नहीं करेंगे कंडीशन जब तक स्पेस अवेलेबल है तब तक नहीं करेंगे जब स्पेस अवेलेबल ही नहीं है तो स्विज करना ही पड़ेगा कोई चॉइस नहीं है बहुत बढ़िया अब ऐसे ही मैंने यहां पर एक और चीज लिख दी रैप रिवर्स ठीक है तो इससे आपका ऑर्डर रिवर्स कर जाएगा देखो ध्यान से ऑर्डर रिवर्स करने का मतलब क्या है अभी तक अभी तक मैं इसको छोटा कर रहा था तो आपका ब्राउन वाला नीचे जा रहा था अब क्या होगा अब आपका ब्राउन वाला ऊपर चला गया ऑरेंज वाला ऊपर चला गया ब्लू वाला ऊपर चला गया राइट तो ऐसे उल्टे ऑर्डर में रिवर्स चल रहा होता है रैप वाले केस में जब आप प्रॉपर्टी की वैल्यू रैप सेट करेंगे तो ब्राउन नीचे आता था जब रैप रिवर्स करेंगे ब्राउन वाला बॉक्स ऐसे ऊपर चला जाता है बहुत बढ़िया ठीक है तो हमने सीख लिया डिस्प्ले फ्लेक्स के बारे में फ्लेक्स डायरेक्शन के बारे में फ्लेक्स रैप के बारे में मेरे पास एक शॉर्ट हैंड नोटेशन है ठीक है मेरे पास एक शॉर्ट हैंड नोटेशन है अ तो इस शॉर्ट हैंड नोटेशन को आप एक बार खुद से पढ़ के लाएंगे ठीक है ये मैं आपको होमवर्क में दे रहा हूं खुद से पढ़ना कैसे काम करती है आपको देखना है फ्लेक्स फ्लो जो है फ्लेक्स फ्लो को मैं कैसे यूज कर सकता हूं जो यहां पर मैंने अलग से फ्लेक्स रैप बताया अलग से मैंने फ्लेक्स डायरेक्शन बताई सिंगल लाइन के अंदर डायरेक्शन भी बता दूं रैप का स्टेटस भी बता दूं फ्लेक्स फ्लो का यूज करके ये तुम्हें होमवर्क के अंदर पढ़ के आना है ठीक है बहुत बढ़िया अब चलते हैं हमारी अगली प्रॉपर्टी के ऊपर जो कि है जस्टिफाई कंटेंट ठीक है अब जस्टिफाई कंटेंट क्या करता होगा इसको डिस्कस करते हैं एक बार मैंने कहा कि मेरे पास जस्टिफाई कंटेंट एक प्रॉपर्टी है जो कि मेन एक्सिस ध्यान सुनना जो कि मेन एक्सिस के अकॉर्डिंग चीजों को प्लेस करता है मेन एक्सिस मतलब अगर आपकी फ्लेक्स डायरेक्शन जो है अगर आपकी फले डायरेक्शन रो है तो उस केस के अंदर आपका मेन एक्सिस जो होता है वो हॉरिजॉन्टल होता है इस चीज का ध्यान रखना और अगर आपकी फ्लेक्स डायरेक्शन जो है वो कॉलम है तो उस केस के अंदर आपका मेन एक्सिस जो होता है वो वर्टिकल बन जाता है क्या बात समझ में आती है तो रॉ वाले केस के अंदर आपका मेन एक्सेस हॉरिजॉन्टल रहेगा इसके कॉस्पले कर पाओगे और जब फ्लेक्स डायरेक्शन कॉलम होगी तो मेन एक्सिस आपका ऐसे ही वर्टिकल बन जाएगा और आप इस प्रकार से आइटम को प्लेस कर पाओगे बहुत बढ़िया समझाएंगे कैसे समझाते हैं आपको चिंता ना करें कौन-कौन सी वैल्यूज यहां पर अवेलेबल है मेरे पास वो भी फटाफट राइट डाउन कर लेता हूं मैं मैंने कहा मैं यहां पे चाहूं तो आइटम्स को स्टार्ट में प्लेस कर सकता हूं एंड में प्लेस कर सकता हूं सेंटर में प्लेस कर सकता हूं इनके बीच में स्पेस ऐड कर सकता हूं तो मेरे पास यहां पर स्पेस अराउंड है स्पेस इवनली है स्पेस बिटवीन है तो ऐसे बहुत सारी प्रॉपर्टीज एजिस्ट करती हैं आपका एक कॉमन डाउट हो सकता है भैया इतनी सारी चीजें रट्टा मार रहा हूं रट्टा मारना पड़ेगा कि याद कैसे होगा मुझे य मैंने कहा करते करते करते करते आपको खुद ही चीजें याद हो जाएंगी और लेट्स से आप याद नहीं भी रख पाते तो आप टेंट क्या करता है मेन एक्सिस के अकॉर्डिंग आपकी चीजों को प्लेस करता है कैसे मैंने कहा ऐसे तो अभी हमने क्या किया हुआ है अभी हमने क्या किया हुआ है फटाफट चलते हैं हम हमारे कोड की तरफ और मैंने कहा जी अभी मेरे कोड के अंदर मैंने रो सेट कर दी है ठीक है रैपिंग जो है मैंने अभी कमेंट कर दी है नो रैप हो गई ठीक है तो अभी मेरा जो स्टेटस है कैसा दिख रहा है कोड का अभी मेरा स्टेटस ऐसा दिख रहा है ऐसा कुछ कुछ मेरा यूआई दिख रहा है अब मैंने क्या बोला पहले तो यार इसकी विड्थ बढ़ाओ इसकी हाइट बढ़ाओ कंटेनर की थोड़ी सी ना ऐसे 500 पिक्सल 400 500 पिक्सल कर लो चलो ठीक है अब सही लग रहा है थोड़ा सा बढ़िया अब मैंने क्या बोला मैंने बोला यार मैं मेन एक्सेस यहां पे फ्लेक्स डायरेक्शन अभी रो है तो मेन एक्सिस आपका हॉरिजॉन्टल हो गया तो मेन एक्सिस का करेस्पॉन्डिंग्ली एक्सिस के कॉरस्पॉडिंग सेंटर में प्लेस हो जाएगा यानी हॉरिजॉन्टल सेंटर में प्लेस हो जाएगा ध्यान सुनो हॉरिजॉन्टल का सेंटर कहां पे आएगा यहां पे हॉरिजॉन्टल का सेंटर यहां पे आएगा राइट तो वहां पर प्लेस हो जाएगा तो आपका ये यहां से यहां तक ऑब्जर्व करो तो आपका मेन एक्सिस जो है बेसिकली ऐसे ये लाइन है आपकी मेन एक्सिस इसका सेंटर क्या है इसका सेंटर ये है तो आपने हॉरिजॉन्टल हॉरिजॉन्टल सेंटर में प्लेस कर दिए बहुत बढ़िया तो मेन एक्सिस के कॉरस्पॉडिंग हॉरिजॉन्टल डायरेक्शन के कॉरस्पॉडिंग आपने सेंटर में ये प्लेस कर दिए ठीक है ये बात समझ में आती है ठीक है मैं चाहूं तो इनको स्टार्ट में प्लेस कर सकता हूं से मैंने बोल दिया स्टार्ट तो स्टार्टिंग में प्लेस हो जाने चाहिए ठीक हैय स्टार्टिंग में प्लेस हो गए मैं चाहूं तो मैं इनको एंड में प्लेस कर सकता हूं लेटस से मैंने लिख दिया एंड तो ऐसे राइट मोस्ट जगह पर एंड में प्लेस हो जाने चाहिए चेक करते हैं क्यों नहीं हुआ क्योंकि हमने टेंशन लिखा नहीं मैंने बोला अब अब एंड में प्लेस हो ग तो स्टार्ट में प्लेस करो एंड में प्लेस करो और सेंटर में प्लेस कर लो अब तुम्हारे पास कुछ और चीज होती है जिसे हम कहते हैं लेट्स से स्पेस बिटवीन स्पेस बिटवीन चलो स्पेस बिटवीन के अंदर क्या होता है स्पेस बिटवीन में ध्यान से देखो बस पहले वाला बॉक्स और लास्ट वाला बॉक्स आपके बाउंड्री से लगा हुआ है और बाकी सारे बॉक्सेस के बीच का स्पेस एगजैक्टली इक्वल है ठीक है तो ध्यान से ऑब्जर्व करो ये वाला स्पेस ये वाला स्पेस और ये वाला स्पेस ये तीनों स्पेसेस आपके एगजैक्टली इक्वल है स्पेस बिटवीन में क्या होता है आपका पहला बॉक्स और आपका लास्ट बॉक्स बिल्कुल सटा हुआ बिल्कुल चिपका हुआ होता है आपके फ्लेक्स कंटेनर के साथ तो ये स्पेस बिटवीन का एक एग्जांपल आपने देख लिया है ठीक है अगर मैं स्पेस बिटवीन की जगह इसको स्पेस अराउंड करता तो क्या होता तो स्पेस अराउंड से क्या होता इससे क्या हुआ इससे आपने ना हर एक डब्बे के लेफ्ट और राइट में इक्वल स्पेसिंग कर दी मैंने कहा ध्यान से देखो मैंने बोला हर एक डब्बे के आगे और पीछे इतना स्पेस होगा ठीक है तो इस डब्बे के आगे पीछे इतना स्पेस आ गया फिर आपके इस डब्बे के आगे पीछे इतना स्पेस आ गया फिर इस डब्बे के आगे पीछे इतना स्पेस आ गया फिर इस डब्बे के आगे पीछे इतना स्पेस आ गया दैट्ची में आप पे डबल स्पेसेस आ गए इसका और इसका डबल स्पेस बन गया इसका और इसका स्पेस बना के डबल स्पेस बन गया ठीक है तो स्पेस अराउंड से आपने हर एक डब्बे के लेफ्ट और राइट में एक इक्वल स्पेसिंग डिफाइन कर दी पर क्योंकि यहां पर इन दो डब्बो के बीच में ये वाला स्पेस और ये वाला स्पेस आ रहा है दैट्ची का स्पेस बड़ा बन गया तो ये स्पेस अराउंड होता है ठीक है लास्ट आपका बनता है स्पेस इवनली स्पेस इवनली के अंदर अगर हम बात करें मैंने कहा कि आपका यह वाला स्पेस आपका यह वाला स्पेस आपका यह वाला स्पेस आपका यह वाला स्पेस और आपका ये वाला स्पेस पांचों के पांचों स्पेस बराबर होते हैं स्पेस बिटवीन में क्या होता है पहला डब्बा और लास्ट डब्बा बिल्कुल एक्सट्रीम लेफ्ट और राइट में चिपका हुआ होगा बीच में स्पेस बराबर होंगे स्पेस सराउंड में क्या होता है हर एक डब्बे का आपने लेफ्ट और राइट का स्पेस बराबर सेट कर दिया ठीक है और वो सारा आप अप्लाई कर देंगे अपने यूआई पे और स्पेस इवनली में क्या होता है हर डब्बे के लेफ्ट और राइट के बीच में एगजैक्टली सेम स्पेस अवेलेबल आपके पास होता है बहुत बढ़िया तो अभी तक हमने क्या सीख लिया डिस्प्ले फ्लेक्स करना सीख लिया फ्लेक्स डायरेक्शन सीख लिया फ्लेक्स फ्रैप सीख लिया फ्लेक्स फ्लो होमवर्क में दे दिया जस्टिफाई कंटेंट जो कि मेन एक्सिस के करेस्पॉन्डिंग्ली यहां पर एक और चीज है मेरे पास अभी तो ये मेन एक्सेस आपका हॉरिजॉन्टल था क्योंकि हमने यहां पे फ्लेक्सस डायरेक्शन रो सेट करेगी बट अगर यहां पर गलती से मैं इसको कॉलम सेट कर देता तो अब मेरा मेन एक्सिस वर्टिकल वाला हो गया ठीक है अब ये वर्टिकल वाला हो गया अभी समझ में और अच्छे से आएगा अगर मैं इसको यहां पे स्पेस बिटवीन की जगह सेंटर कर दूं तो देखो सेंटर में आ जाएगा ये ठीक है सेंटर में आने के लिए इसकी हाइट थोड़ी बढ़ानी पड़ेगी मुझे ठीक है तो इसकी हाइट मैंने बढ़ा दी और ये पूरी मैंने क्या कहा था कॉलम अब आपका कॉलम मैंने बोला फ्लेक्स डायरेक्शन आपका कॉलम हो गया तो मेन एक्सिस आपका वर्टिकल हो गया तो अगर आपका मेन एक्सिस जो है वो ऐसा वर्टिकल हो गया तो इसका सेंटर कहां पे आएगा इस मेन एक्सिस का सेंटर कहां पे आएगा इस मेन एक्सेस का सेंटर यहीं पे आएगा और सेंटर में आपने यहां पर प्लेस कर दिया इसको बहुत बढ़िया ठीक है अकॉर्डिंग आपने चेंजेज यूआई पर देख लिए तो ये बात समझ में आती है इसके बाद हमारे पास एक और प्रॉपर्टी है जिसे हम कहते हैं अलाइन आइटम्स इसे भी हमें सीखना है इसके बारे में भी हमें पढ़ना है ठीक है जो भी फ्लेक्स आइटम्स मेरे पास अवेलेबल है उनको मैं कैसे अलाइन कर सकता हूं यहां पर मेरे पास बहुत सारी प्रॉपर्टी है मैं तो फ्लेक्स के स्टार्ट में लगा सकता हूं मैं चाहूं तो फ्लेक्स के एंड में लगा सकता हूं मैं चाहूं तो सेंटर में प्लेस कर सकता हूं तो ऐसे भिन्न भिन्न प्रकार की प्रॉपर्टीज मेरे पास है ठीक है तो वापस चलते हैं मैंने बोला कि अभी तो इसको फटाफट से एक बार रीलोड कर दो ठीक है चलो वापस इसको रो मार्क कर दो वापस इसको हमने मार्क कर दिया रो ठीक है अब मैंने क्या कहा मैंने कहा जी मेरे को अलाइन आइटम्स करनी है अलाइन आइटम्स करनी है तो मैंने बोला कि अभी के लिए इसको भी मैं कमेंट कर देता ता हूं u आ पर कैसा दिख रहा है ऐसा दिख रहा है बहुत बढ़िया तो मैंने बोला अलाइन आइटम अलाइन आइटम कहां पर काम करता है आपका जो अलाइन आइटम वाली प्रॉपर्टी है यह काम करती है कॉरेस्पोंडेंस एक्सिस होता है वो वर्टिकल होता है तो सेंटर में मतलब यहां पर प्लेस कर दो स्टार्टिंग मतलब यहां पर प्लेस कर दो एंडिंग मतलब यहां पर प्लेस कर दो तो ये इस प्रकार से आप यहां पर भी अ जो आपने जस्ट अभी जस्टिफाई कॉन टेंट कंड देखा वो सारे चेंजेज यहां पर भी कर सकते हैं कौन कौन सी वैल्यूज मेरे पास एजिस्ट करती है व आप यहां पर जाके देख सकते हैं आप यहां पे बेसिकली आपको यहां पर जाके सर्च करना है एक बार जाके आपको लिखना है यहां पे लेट्स से अलाइन आइटम्स आपके पास बहुत सारी चीजें आ गई देखो यहां पे स्ट्रेच अवेलेबल है स्टेंटर अवेलेबल है स्टार्ट एंड ठीक है बहुत सारी चीजें अवेलेबल है एक बार आप पढ़ के सीख सकते हैं डॉक्यूमेंटेशन द्वारा ठीक है कोई भी कोर्स कोई भी वीडियो आपको एगजैक्टली 100% नहीं सिखा सकती आपको खुद से मेहनत करनी ही पड़ेगी बढ़िया चलो यूआई पे ऐसा दिख रहा है मैंने बोला कि अलाइन आइटम करते हैं फटाफट अलाइन आइटम हमेशा आपके क्रॉस एक्सिस के कॉरस्पॉडिंग अलाइन मेंट कर रही होती है ठीक है तो क्रॉस एक्सिस बाय डिफॉल्ट क्योंकि रो सेट करके फ्लेक्स डायरेक्शन वर्टिकल वाला है तो सेंटर में प्लेस करूंगा तो वर्टिकल एक्सिस के ऊपर सेंटर में प्लेस होना चाहिए चेक करते हैं तो क्या वर्टिकल एक्सिस में सेंटर में प्लेस हुआ जी हां बिल्कुल हो गया कैसे हुआ भैया बताना एक बार मैंने कहा ध्यान से देखो ये तुम्हारा वर्टिकल एक्सिस है मानते हो कि नहीं मानते हो हां बिल्कुल मानते हैं इस वर्टिकल एक्सिस का सेंटर कहां पे है इसका सेंटर यहीं पे ही है दैट्ची तो मैं इसको सेंटर में प्लेस कर सकता था मैं चाहूं तो इसको मैं स्टार्ट में भी प्लेस कर सकता हूं ठीक है ये स्टार्ट में आ गया मैं चाहूं तो मैं इसको एंड में भी प्लेस कर सकता हूं ये एंड में आ गया राइट फ्लेक्स स्टार्ट करना हो फ्लेक्स स्टार्ट कर लो फ्लेक्स सेंड करना हो फ्लेक्स सेंड कर लो वो सारी चीज तुम्हारे पास अवेलेबल है और मैं चाहूं तो एक और स्ट्रेच नाम की प्रॉपर्टी है वो स्ट्रेच भी मैं इसको कर सकता हूं ठीक है भैया दिख नहीं रहा स्ट्रेच होता हुआ दिख नहीं रहा भा स्ट्रेच होता हुआ मैंने एक बार इसकी हाइट जो है वो हटाना एक बार हाइट हटाना बेटा इसकी अब दिखा हमने हार्ड कोड कर रखी थी हाइट दैट्ची होता हु वो दिख गया तो तुमने आइटम्स को यहां पे स्ट्रेच करवा दिया बाय डिफॉल्ट आपकी आइटम स्ट्रेच ही होती है बाय डिफॉल्ट अगर आप मेंशन नहीं करोगे तो आपकी आइटम स्ट्रेच ही होती है क्या बात समझ में आती है ठीक है तो मैंने यहां से कमेंट भी कर दिया तब भी आपका स्ट्रेच ही पड़ा हुआ है देखो मैंने यहां से कमेंट कर दिया लाइन आइटम को तब भी आपका बाय डिफॉल्ट ऐसा स्ट्रेच ही होता है तो अभी आपने जस्ट सीखा कैसे आप लाइन आइटम का यूज करके क्रॉस एक्सिस के कॉरस्पॉडिंग स्टार्ट में प्लेस करना एंड में प्लेस करना सेंटर में प्लेस करना स्ट्रेच करना वो सारी की सारी चीजें आप सीख चुके हैं लेट्स से मुझे कोई आइटम वर्टिकल एक्सिस के कॉरस्पॉडिंग और अ हॉरिजॉन्टल एक्सिस कॉरस्पॉडिंग दोनों के करेस्पॉन्डिंग्ली करनी है तो देखते हैं क्या होता है मैंने बोला कि इसको मैंने सेंटर में प्लेस कर दिया तो इससे क्या होगा आपकी आइटम बिल्कुल सेंटर में आ गई देखो वर्टिकल में भी सेंटर में आ गई हॉरिजॉन्टल में भी सेंटर में आ गई बड़ी प्यारी चीज है ये लोगों की हालत खराब हो जाती है सेंटर करने में मजाक नहीं कर रहा मैं सही में इससे डरते हैं लोग ठीक है आई थिंक समझ में आ रहा होगा अभी तक सब कुछ बढ़िया समझ में आ रहा होगा हो ठीक है तो अभी वापस मैं इसको कमेंट कर देता हूं चलो इतना समझ में आ गया हमें यूआई वाइज कैसा दिख रहा है हमें ऐसा कुछ कुछ दिख रहा है चलो ठीक है मैंने बोला वापस इसकी हाइट को आप अनकमेंट कर दो इतना समझ में आ रहा है ठीक है अभी मैंने क्या किया मैंने क्या किया इसको इंस्पेक्ट कर दिया और इंस्पेक्ट करके मैंने बोला कि ऐसा करो फ्लेक्स रैप जो है उसे ऑन कर दो एक बार तो फ्लेक्स रप मैंने ऑन कर दिया और फ्लेक्स रप मैंने ऑन कर दिया मैंने बोला जी इसको सिर्फ रैप करो रैप रिवर्स मत करो कंफ्यूजन नहीं चाहिए और मैंने बोला और क्या-क्या चीजें हैं आई थिंक इतना काफी है जस्टिफाई कंटेंट को मैंने बोल दिया अब ऐसा करो स्टार्ट में जस्टिफाई कर दो और आप ऐसा करो आप भी स्टार्ट में ही लगा दो ठीक है तो यूआई में सब कुछ ऐसे स्टार्ट में आ गया ठीक है यूआई में सब कुछ पहले जैसा हो गया अब मैंने क्या किया मैंने ऐसे जानबूझ के ना दो इस प्रकार से लगा दिए ठीक है मैं ऑब्जर्व कर पा रहा हूं इंस्पेक्ट करके कि मेरे पास दो ऐसे ऊपर दिख रहे हैं बॉक्सेस मुझे और दो बॉक्सेस से नीचे दिख रहे हैं ठीक है अब मैं क्या करना चाहता हूं मैं देख रहा हूं इन दो बॉक्सेस के बीच में बाय डिफॉल्ट कुछ स्पेसिंग है कुछ स्पेसिंग है मैंने कहा यार ये स्पेसिंग नहीं चाहिए तो इस प्रकार से आप रैप ऑन करते हैं और आपको ऐसे मल्टीपल लाइन ऑफ कंटेंट के बीच में स्पेसिंग हैंडल करनी होती है तो आपके पास एक प्रॉपर्टी होती है जिसे हम कहते हैं अलाइन कंटेंट अलाइन कंटेंट करके आपके पास एक प्रॉपर्टी है जिससे आप इनके बीच के स्पेस को कम कर सकते हैं तो मैंने लेट्स से यहां पे आके बोला मैंने यहां पे आके बोला कि ऐसा करो अलाइन कंटेंट जो है ना अलाइन कंटेंट जो है अलाइन कंटेंट को मार्क कर दो स्टार्ट तो इससे क्या होगा ये बिल्कुल आपस में चिपक गई ऑब्जर्व किया आपने अलाइन कंटेंट जब नहीं लगाया था तब यह कैसे थे तब ये कैसे थे तब इनके बीच में एक स्पेसिंग मौजूद थी जैसे ही मैंने बोला अलाइन कंटेंट को स्टार्ट कर दो तो आपको जो मल्टीपल लाइन ऑफ कंटेंट था व ऐसा साथ में सब कुछ स्टार्टिंग में शिफ्ट हो गया बहुत बढ़िया अब लेट्स से मैं इसको बोलता कि अलाइन कंटेंट को आप एंड कर दो इससे क्या होगा सारा का सारा कंटेंट जो है सारा का सारा कंटेंट जो है एंड में आके शिफ्ट हो गया बहुत बढ़िया ठीक है मल्टीपल लाइन ऑफ कंटेंट अगर होता तो मल्टीपल लाइंस आपकी बिल्कुल एंड में जा शिफ्ट हो जाती है बहुत बढ़िया अब लेट्स से मैंने यहां पे आके बोल दिया कि इसको सेंटर में प्लेस कर दो तो आप सेंटर में भी ऐसे प्लेस कर पाएंगे ठीक है तो अब ऑब्जर्व करो इसको आपने सेंटर में प्लेस कर दिया बढ़िया अगेन बहुत सारी प्रॉपर्टीज अप्लाई कर सकते हैं आप स्पेस बिटवीन स्पेस अराउंड स्पेस इवनली स्ट्रेच करना ये सारी की सारी चीजें आपको ऑलरेडी हमने सिखा दी है ठीक है एक्सपेरिमेंटेशन करो समझ में आएगा कहीं पे फसो ग नहीं ठीक है बिल्कुल एकदम क्लेरिटी वाइज टॉप नॉ ची तुम्हे समझा रहा हूं और अभी जोब ये वाली गेम हम करेंगे तो एकदम सब कुछ क्लियर क्रिस्टल एकदम हो जाएगा क्लियर क्लियर क्रिस्टल नहीं क्रिस्टल क्लियर होता है भाई साहब चलो तो इतना समझ में आता है अभी तक हमने जो भी प्रॉपर्टीज देखी चाहे वो डिस्प्ले फ्लेक्स हो फ्लेक्स डायरेक्शन हो फ्लेक्स रप हो फ्लेक्स फ्लो हो जस्टिफाई कंटेंट हो लाइन आइटम हो लाइन कंटेंट हो ये सारी की सारी हमने कहां पर अप्लाई करी है ये सारी की सारी हमने कंटेनर में अप्लाई करी है बट अब मैं क्या चाहता हूं मैं चाहता हूं फ्लेक्स आइटम के लिए भी कोई प्रॉपर्टी मेरे पास अवेलेबल हो तो हमने यहां पर डायग्राम देखा था ना यहां पर डायग्राम हमने देखा था हमने बोला था कि फ्लेक्स बॉक्स के बारे में बात करते हैं तो यहां पर ये डायग्राम हमने देखा था इसके अंदर ये जो तीन डब्बे तुम देख पा रहे हो ये इसकी फ्लेक्स आइटम्स है हमारे कोड वाइ तुम देखोगे तो ये चार छोटे छोटे डबे देख पा रहे हो ये फ्लेक्स आइटम्स है ठीक है तो इनके लिए मेरे को कुछ प्रॉपर्टीज चाहिए इनके ऊपर मैं क्या प्रॉपर्टी अप्लाई कर सकता उनकी बात कर लेते हैं तो हम बात करने वाले हैं फ्लेक्स आइटम्स के बारे में तो मैंने बोला चलो इसे सीखते हैं एक बार और अभी के लिए मैंने क्या किया इनकी नेमिन कर दी ताकि हमारे लिए समझना थोड़ा और आसान हो जाए मैंने क्या बोल दिया के बॉक्स वन बॉक्स टू बॉक्स थ बॉक्स फोर यूआई पर कैसे दिख रहा है बढ़िया तो मैंने बोला चलो ठीक है एक बार इसको जूम करो ठीक है मैंने बोला बॉक्स वन बॉक्स टू बॉक्स थ बॉक्स फोर मेरे पास एक बड़ी प्यारी प्रॉपर्टी है जिसे मैं कहता हूं ऑर्डर प्रॉपर्टी ऑर्डर मैंने बोला वन वाला जो बॉक्स है सबसे एंड में चाहिए मेरे को यहां पर सबसे पहले दिख रहा है मुझे सबसे एंड में चाहिए ब्राउन वाले के बाद में चाहिए तो मैंने क्या किया मैं बॉक्स नंबर वन के अंदर गया और मैंने बोला इसकी ऑर्डर प्रॉपर्टी ऐड कर देता हूं मैंने बोला ऑर्डर इसका डर लेट से मैंने कोई भी रंड नंबर दे दिया मैंने बोला कि 500 दे दो चलो तो ये सबसे आगे चला गया होगा चेक करते हैं क्या ब्लू वाला सबसे एंड में आ गया बिल्कुल आ गया मैंने बोला जो बॉक्स फोर है सबसे पहले चाहिए तो मैंने बॉक्स फोर की प्रॉपर्टी में आ गया लेट्स से ऑर्डर में दे दिया मैंने बोल दिया ऑर्डर के अंदर वन क्या वन लिखने से आ जाएगा वन लिखने से नहीं आया भैया मैंने कहा कोई बात नहीं -1 लिख देता हूं तब तो आएगा तब तो आएगा बढ़िया तो तुम्हारा बॉक्स फोर जो है ऐसे माइनस लिख उसका सीक्वेंस चेंज हो गया सबसे आगे वो आ गया राइट तो इस प्रकार से ऑर्डर प्रॉपर्टी का यूज करके तुम अपने हिसाब से वैल्यूज दे सकते हो अकॉर्डिंग तुम अपने सीक्वेंस को जो भी तुम्हारी फ्लेक्स आइटम का सीक्वेंस उस सीक्वेंस को तुम चेंज कर पाओगे ठीक है एक चीज ये समझ में आती है एक और इंपॉर्टेंट प्रॉपर्टी के बारे में बात कर लेते हैं ठीक है दो प्रॉपर्टीज हैं अभी हमने बात की है तुम्हारी ऑर्डर प्रॉपर्टी के बारे में ठीक है ऑर्डर प्रॉपर्टी के बारे में बात करे थे यहां पर तुम सीक्वेंस बेसिकली चेंज कर सकते हो तुम्हारी फ्लेक्स आइटम्स का अभी दो बहुत ही इंपॉर्टेंट प्रॉपर्टी के बारे में बात कर लेते हैं एक का नाम होता है जी फ्लेक्स श्रिंक कि तुम्हारी आइटम किस तेजी के साथ श्रिंक श्रिंक करेगी बाकी आइटम्स के कंपैरिजन में और ये होती है फ्लेक्स ग्रो कि तुम्हारी आइटम कितनी तेजी के साथ ग्रो करेगी बाकी आइटम्स के कंपैरिजन में दिखाते हैं अभी लेट्स से मैं यहां पे जाऊं और मैं यहां पे जाके इंस्पेक्ट करूं और यहां पे जाके मैं अभी रैप को ऑफ कर दूं ठीक है मैं अभी यहां पे गया और मैंने रैप को ऑफ कर दिया मैंने बोला अभी अगर मैं यहां पे देखूं तो देखो सारे के सारे बॉक्सेस इक्वल स्पीड में श्रिंक कर रहे हैं और सारे के सारे बॉक्सेस इक्वल स्पीड में ग्रो कर रहे हैं देखो जब बॉक्स छोटा हो रहा है उसे कहते हैं श्रिंक होना और जब छोटे से ऐसे बड़ा हो रहा है ऐसे विड्थ बढ़ती जा रही है उसे कहते हैं ग्रो होना तो इक्वल स्पीड में श्रिंक कर रहे हैं इक्वल स्पीड में ग्रो कर रहे हैं अब मैंने क्या बोला कि भाई जो बॉक्स नंबर वन है ना इसको चार गुना स्पीड से श्रिंक करवा यानी अभी तो देखो सब बराबर स्पीड से श्रिंक कर रहे हैं मैंने पर बोला सब बराबर ना कर रहे हो बाकी सब बराबर से कर रहे हो पर बॉक्स वन बहुत जल्दी श्रिंक कर रहा हो तो मैंने क्या किया मैं बॉक्स वन के पास गया और मैंने बोला फ्लेक्स श्रिंक फ्लेक्स श्रिंक और मैंने लिख दिया यहां पे फोर अब इससे क्या होगा आपका जो बॉक्स नंबर वन है वो चार गुना तेजी से जैसे मान लो कि ये कुछ एक्स स्पीड से श्रिंक कर रहे हैं यह 4x स्पीड से श्रिंक करेगा चेक कर लो नहीं यकीन तो देखो अभी मैं श्रिंक कर रहा हूं कर रहा हूं कर रहा हूं देखो बॉक्स वन कितना श्रिंक हो चुका है बाकी सब अभी भी आराम आराम से हो रहे हैं बॉक्स वन देखो कितनी जल्दी श्रिंक हो रहा है बॉक्स वन कितनी जल्दी श्रिंक हो रहा है ऑब्जर्व किया तो जब मैंने ऐसे श्रिंक की स्पीड ऐड कर दी तो आपका बॉक्स वन चार गुना 4x स्पीड से श्रिंक हो रहा है बाकियों के कंपैरिजन में ठीक है ऐसा कुछ चल रहा है तो इस प्रकार से तुम्हारा फ्लेक्स रिंग काम कर रहा होता है ठीक है अभी के लिए मैंने इसको तो मैंने फ्लेक्स रिंग को कमेंट कर दिया ठीक है और अभी मैंने अपना फटाफट बिहेवियर चेक किया मैंने कहा ठीक है सब कुछ बराबर श्रिंक कर रहा है ठीक है बराबर स्पीड से ग्रो कर रहा है पर अब मैं आया और मैंने बोला फ्लेक्स ग्रो के बारे में मुझे जानना है ठीक है फ्लेक्स ग्रो के बारे में जानना चाहता हूं ठीक है और अभी के लिए लेट्स से मैंने क्या किया मैंने बोला कि सभी का फ्लेक्स ग्रो मैंने सेट कर दिया सारे के सारे बॉक्सेस का मैंने फ्लेक्सस ग्रो ना वन सेट कर दिया मैंने बोला इसका फ्लेक्स ग्रो वन सेट कर दो देखो सबका अगर फ्लेक्स ग्रो तुम वन सेट करोगे तो उससे तुम्हारा एस सच कुछ फर्क नहीं पड़ेगा सब बिहेवियर सेम रहेगा ठीक है पर फिर भी एक बार देख लेते हैं तो मैंने सभी चारों बॉक्सेस इस का फ्लेक्स ग्रो वन कर दिया इससे क्या हुआ चारों बॉक्सेस ने सबसे पहले तो जितना भी स्पेस अवेलेबल था फ्लेक्स कंटेनर के अंदर वो सरा के सारा स्पेस ले लिया तो सबसे पहले इसने क्या किया जो भी स्पेस अवेलेबल था आपका वो सारा का सारा स्पेस इसने ले लिया वापस चलते हैं डॉक्यूमेंटेशन के ऊपर ठीक है तो डॉक्यूमेंटेशन के अंदर आपने यहां पे साफ-साफ बता रखा है कि आपने फ्लेक्स ग्रो के अंदर आप अपना ग्रो फैक्टर जो है वो असाइन करते हैं जिसके द्वारा जो भी रिमेनिंग स्पेस होता है वो सेट हो जाता है कौन कितनी स्पीड से ग्रैब कर रहा होगा ठीक है बढ़िया तो मैंने बोला अभी सब कुछ वही सारा सारा स्पेस ये ले चुके हैं सारा का सारा स्पेस से ले चुके हैं फ्लेक्सस ग्रो के अंदर और स्पीड भी सेम है श्रंग करने की और ग्रो करने की कुछ फायदा नहीं हुआ मैंने कहा ठीक है लेट्स से मैंने बोला बॉक्स वन जो है बॉक्स वन कौन सा है ये ब्लू वाला बॉक्स वन के अंदर मैंने बोला कि इसकी स्पीड तुमने पांच कर दी बाकी सबकी स्पीड वन है इसकी स्पीड पांच कर दी इससे क्या हुआ ध्यान से देखो ये अभी श्रिंक कर गए जैसे तुम ग्रो करते जा रहे हो ग्रो करते जा रहे हो ग्रो करते जा रहे हो ग्रो करते जा रहे हो ग्रो करते जा रहे हो ठीक है तो एट दी एंड क्या हुआ एट दी एंड तुम्हारे देखो स्पेस कितना आया हुआ है एक बार फटाफट इसको चेक करते हैं एक बार फटाफट इसको चेक करते हैं ठीक है हमने बोला नीचे आ जाओ बढ़िया तो एक हमने ऑब्जर्व किया एक बार हमने बोला इसकी जो विड्थ है वो कितनी है 275 इसकी 275 इसकी 275 और यहां पर इसकी 543 543 ठीक है जी तो यहां पर आपकी जो विड्थ है वो यरली डबल आ रही है अगर मैं एंटर स्पेस में जाऊं 328 328 328 और 812 ठीक है तो इस प्रकार से ये काम कर रहा है इस प्रकार से यह काम कर रहा है ठीक है जी तो आप जिस प्रकार से यहां पर फैक्टर्स ग्रो फैक्टर्स ऐड करते रहेंगे उसी ग्रो फैक्टर के हिसाब से आपका पर्टिकुलर बॉक्स जो है रिमेनिंग स्पेस ले लेगा और अकॉर्डिंग उसकी स्पीड भी बढ़ जाएगी ग्रो करने की राइट मतलब कितनी तेजी से वो रिमेनिंग स्पेस को कैच कर लेगा वो स्पीड उसकी बढ़ जाएगी चेक करके देख लो देखो कितनी जल्दी इन्होंने इतना स्पेस ले लिया देखो ये अपनी स्पीड और बढ़ाता जा रहा राइट ऐसा चल रहा है बढ़िया सो बेसिकली फ्लेक्सस ग्रो जो है आपका रिमेनिंग स्पेस को जो आपके फ्लेक्सस कंटेनर के अंदर बचा हुआ है उसको लेने के लिए हम यूज कर रहे हैं चलो वापस आते हैं तो अगेन ऑर्डर के बारे में हमने पढ़ लिया फ्लेक्स ग्रो के बारे में हमने पढ़ लिया फ्लेक्स ट्रिंग के बारे में पढ़ लिया अब यहां पर मेरे पास एक शॉर्ट हैंड नोटेशन अवेलेबल है ठीक है मेरे पास एक शॉर्ट हैंड नोटेशन अवेलेबल है जहां पर मैं फ्लेक्स का यूज कर सकता हूं और मैं साथ में स्पेसिफाई कर सकता हूं यहां पे कि फ्लेक्स जो है व क्या स्पीड से ग्रो कर रहा है यहां पे अ फ्लेक्स का श्रिंक फैक्टर मेंशन कर सकता हूं किस स्पीड से मुझे उनको श्रिंक करवाना है और यहां पर एक चीज और है जिसे मैं कहता हूं फ्लेक्स बेसिस उस फ्लेक्स बेसिस को मुझे मैं ऐड कर सकता हूं तो एक शॉर्ट हैंड नोटेशन है इसको तुम होमवर्क में देखना कैसे तुम इसे यूज़ कर सकते हो ठीक है फ्लेक्स बेसिस क्या होता है यह हमने नहीं पढ़ा अभी तो फटाफट से एक बार फ्लेक्स बेसिस के बारे में पढ़ लेते हैं और फिर हम आगे बढ़ेंगे ठीक है तो इसको समझते हैं फ्लेक्स बेसिस कैसे काम करता होगा बेसिकली यह आपका डायमेंशन सेट करने के काम आता है जो भी आपके इनिशियल डायमेंशन होगी आपकी फ्लेक्स आइटम की उस डायमेंशन को सेट करने के ये काम आएगा ठीक है तो अभी फटाफट हम चलते हैं हमारे कोड की तरफ मैंने अभी यहां पर स्ट्रिंग फैक्टर वगैरा वापस वन मार्क कर दिया ताकि सब कुछ अपने हिसाब से चले इनको मैं कमेंट कर देता हूं ठीक है इनको मैं कमेंट ही कर देता हूं कोई फायदा नहीं है इनको रखने काभी कमेंट कर दिया यूआई पे कैसा दिख रहा है यूआई पे ऐसा दिख रहा है बहुत बढ़िया मुझे फ्लेक्स बेसिस सेट करना है तो मैं बॉक्स फोर के ऊपर गया मैंने इसका फ्लेक्स बेसिस सेट कर दिया बॉक्स फोर के ऊपर मैं गया और मैंने बोला जी फ्लेक्स बेसस ठीक है और मैंने बोला जी 400 पिक्सेल 400 पिक्सेल सेट कर दिया क्या हुआ इससे इससे आपके विड्थ सेट हो गई इससे आपके विड्थ सेट हो गई जो इनिशियली आपके बॉक्स की विड्थ वगैरह सेट होनी चाहिए वो आपने फ्लेक्स बेसिस के द्वारा सेट कर ली है तो फ्लेक्स बेसिस की जब हम बात करते हैं इन्होंने साफ-साफ बता रखा है कि भाई आप इससे अपने डायमेंशन सेट कर सकते हैं ठीक है और यहां पर आप कुछ एग्जांपल्स भी देख पा रहे हैं बहुत बढ़िया फ्लेक्स बेसस बढ़िया ठीक है तो जब मैं यहां पे आके कहता हूं कि फ्लेक्स बेस 400 पिक्सेल तो आपने इस बॉक्स के डायमेंशन 400 पिक्सेल सेट कर दिए ठीक है आगे बढ़ते हैं अभी तक हम समझ चुके हैं हमारे ऑर्डर के बारे में हमारे फ्लेक्स ग्रो के बारे में जहां ग्रो फैक्टर असाइन करना होता है फ्लेक्स स्ट्रिंग के बारे में जहां स्ट्रिंग फैक्टर असाइन करना होता है फ्लेक्स बेसिस के बारे में जहां पर मुझे डायमेंशन असाइन करनी होती है फ्लेक्स शॉर्ट हैंड नोटेशन जो आपको होमवर्क में मैंने दे दी है अब बात करते हैं सबसे लास्ट और सबसे इंपॉर्टेंट फ्लेक्स आइटम प्रॉपर्टी के बारे में जिसका नाम है अलाइन सेल्फ तो मुझे अलाइन सेल्फ प्रॉपर्टी यानी एक आइटम अपने आप को कैसे अलाइन करेगी उस प्रॉपर्टी के द्वारा मैं चाहूं तो यहां पे फ्लेक्स ट में प्ले कर दू मैं चाहूं तो यहां पर फ्लेक्स एंड में प्लेस कर दूं मैं चाहूं तो यहां पर सेंटर में प्लेस कर दूं और भिन्न भिन्न प्रकार की वैल्यूज मेरे पास अवेलेबल होंगी एक बार डॉक्यूमेंटेशन एक्सप्लोर कर लेते हैं थोड़ा और आईडिया मिल जाएगा तो मैं यहां पर गया और मैंने बोला जी फलेक्स सॉरी अलाइन सेल्फ ठीक है तो अलाइन सेल्फ से मेरे पास बहुत सारे ऑप्शन यहां पर अवेलेबल है स्ट्रेच कर सकता हूं सेंटर में जा सकता हूं स्टार्ट में जा सकता हूं एंड में जा सकता हूं अगेन फ्लेक्स बॉक्स के अंदर आप जब अलाइन सेल्फ करते हैं तो बेसिकली आप क्रॉस एक्सस के अंदर बाय डिफॉल्ट आपका क्रॉस एक्सिस वर्टिकल होता है तो वर्टिकल एक्सिस के अंदर आप प्लेसमेंट कर रहे होते अलाट कर रहे होते ऊपर जाऊ नीचे जाऊ सेंटर में जाऊ अकॉर्डिंग अगर आपने फ्लेक्स डायरेक्शन कॉलम कर द है तो आपका क्रॉस एक्सिस हॉरिजॉन्टल हो जाता है तो हटल एक्सिस के अंदर आप सोच रहे होते लेट जा राइट जा सेंटर जा वगैरह वगैरह ठीक है बहुत सारी वैल्यूज आपके यहां पर अवेलेबल आप कोई भी अपलाई करके देख सकते हैं अभी के लिए हम क्या करते हैं अभी के लिए हम यहां पर यई में चलते हैं फटाफट अभी के लिए मैंने क्या किया इस वैल्यू को लेट से मैंने अी 800 पिक्सल कर दिया ठीक है बेसस को भी हटाओ यार फ्लेक्सस बेसेस मैंने यहां पर सेट कर दिया बहुत बढ़िया तो ऐसा कुछ कुछ नजर आ रहा है मैंने बोला कि इनकी आइटम की हाइट और विड्थ को भी हटा दो अभी के लिए ठीक है जो बाय डिफॉल्ट आ रहा है कंटेंट वाइज वही दिखाओ बस ठीक है तो ऐसा कुछ कुछ मुझे दिख रहा है ऐसा कुछ कुछ मुझे दिख रहा है बहुत बढ़िया अब मैंने क्या कहा मैंने बोला मैं अलाइन सेल्फ करना चाहता हूं तो मैं बॉक्स वन को बोल रहा हूं कि बॉक्स वन क्रॉस एक्सिस के अंदर सेंटर में आ जाओ क्रॉस एक्सिस में सेंटर में आ जाओ तो आपका बॉक्स वन जो है यहां पर इस इस पोजीशन पर आ जाना चाहिए तो मैंने क्या बोला बॉक्स वन के अंदर मैं गया और मैंने बो बो अलाइन सेल्फ और मैंने बोल दिया सेंटर अलाइन सेल्फ सेंटर करके क्या हुआ बॉक्स सेंटर में प्लेस हो गया सेम मैं क्या कर सकता हूं मैं बोल सकता हूं अलाइन सेल्फ और मैंने इसे स्टार्ट में प्लेस कर दिया यह कहां आ गया स्टार्ट में आ गया अगेन मैंने बोला बॉक्स सेल्फ मैं इसको एंड में प्लेस करना चाहता हूं ये कहां गया ये एंड में आ गया तो इस प्रकार से अलाइन सेल्फ कर सकते हैं आपने बहुत सारी प्रॉपर्टीज देखी इस पर्टिकुलर लेक्चर के अंदर ठीक है और आपको ऐसा लग रहा होगा सबसे ज्यादा आपने इसी लेक्चर के अंदर सीखा है जैसे बात करें अगर फ्लेक्स आइटम्स के बारे में तो फ्लेक्स आइटम्स के अंदर आपने क्या-क्या ऑब्जर्व किया आपने देखा ऑर्डर कैसे आप डिफाइन कर सकते हैं ठीक है फ्लेक्स ग्रो कैसे आप ऐड कर सकते हैं फ्लेक्स श्रिंक कैसे आप ऐड कर सकते हैं फ्लेक्स बेसस कैसे आप ऐड कर सकते हैं फ्लेक्स शॉर्ट हैंड नोटेशन कैसे आप ऐड कर सकते हैं और अलाइन सेल्फ इसे आप कैसे ऐड कर सकते हैं और क्या-क्या बिहेवियर एंड हर किसी प्रॉपर्टी का वो सब आपने एक्सप्लोर कर लिया ठीक है अब जब मैं बात करता हूं अब जब मैं बात करता हूं फ्लेक्स कंटेनर के बारे में जब फ्लेक्स कंटेनर की बात आई तो आपने वहां पर सीखा एक नॉर्मल डिफक आप कैसे डिस्प्ले प्रॉपर्टी का यूज करके फ्लेक्स कंटेनर में कन्वर्ट कर सकते हैं आप चाहे तो कैसे फ्लेक्स डायरेक्शन जो है वो प्रोवाइड कर सकते हैं कैसे आप फ्लेक्स के अंदर रैप को ऑन कर सकते हैं ठीक है कैसे आप फ्लेक्स फ्लो को डिफाइन कर सकते हैं कैसे जस्टिफाई कंटेंट होगा जस्टिफाई कंटेंट कैसे आपका अलाइन आइटम्स होंगी और कैसे आपका अलाइन कंटेंट होगा तो यह सारा का सारा आपने दे का इस पर्टिकुलर लेक्चर के अंदर हर किसी को एक डिटेल के अंदर अप्लाई करके ठीक है अब हम आगे बढ़ सकते हैं अब हम आगे बढ़ सकते हैं गेम की ओर अब हम आगे बढ़ सकते हैं हमारी गेम की ओर कहां है हमारी गेम कहां क कहां ये रही तो शुरुआत करते हैं फ्रूट बॉक्स फ्लेक्स के साथ आपको जाना कहां पे है आपको सर्च करना है इनेट पर द c help.in यहां पर आप जाएंगे लैब्स के ड्रॉप डाउन मेन्यू में फ्रूट बॉक्स फ्लेक्स पे क्लिक करेंगे और उे सॉल्व करते हैं ठीक है पहला क्वेश्चन क्या कहता है पहला क्वेश्चन कहता है कि भाई ये मेरा सेव यहां पर है इसको मुझे स् टोकरी के अंदर लेक जाना है तो कैसे लेके जाऊं तो मैंने कहा कि यह वर्टिकल एक्सिस में सॉरी ये हॉरिजॉन्टल एक्सिस में मुझे लास्ट में प्लेस करना है हॉरिजॉन्टल एक्सिस जस्टिफाई कंटेंट एंड तो अगर मैं इसको जस्टिफाई जस्टिफाई कंटेंट एंड कर दूं तो ये यहां पर प्लेस कर दिया अब मैं इसको सबमिट कर सकता हूं अब मैं इसको फटाफट सबमिट कर देता हूं योर आंसर इज करेक्ट हमने क्रॉस कर लिया है हमारा लेवल नंबर वन ठीक है नेक्स्ट लेवल प चलते हैं मैंने कहा कि अभी ये मेरा सेव और मेरा बनाना यहां पर है मुझे इनको सेंटर में प्लेस करना है हॉरिजॉन्टल एक्सिस में सेंटर तो हॉरिजॉन्टल एक्सिस में सेंटर मुझे पता है जस्टिफाई कंटेंट सेंटर सबमिट कर दिया योर आंसर इज करेक्ट बहुत बढ़िया अगले लेवल पे चलते हैं मैंने कहा जी इन सभी के बीच में स्पेस बराबर लग रहा है मुझे राइट तो आप तीन चीजें ट्राई कर सकते हैं बेसिकली यहां पे स्पेस ओनली स्पेस अराउंड स्पेस बिटवीन राइट तो मैं अगेन हॉरिजॉन्टल एक्सिस के अंदर स्पेसिंग करनी है जस्टिफाई कंटेंट मैंने लिख दिया स्पेस बिटवीन सही बैठ रहा है नहीं बैठ रहा कॉर्नर में आ गया आपका ये तो स्पेस बिटवीन तो नहीं है स्पेस इवनली ये भी सही नहीं लग रहा मुझे स्पेस अराउंड ये सही है इसमें सेंटर में सब कुछ प्लेस हो रहा है आपने इसको सबमिट कर दिया आंसर इज करेक्ट बहुत बढ़िया नेक्स्ट लेवल प चलते हैं यहां पर देखो सबके अंदर स्पेस बराबर है और जो कॉर्नर वाले बास्केट है बिल्कुल एक्सट्रीम लेफ्ट राइट में है तो यह तो आपका पक्का जस्ट स्पेस बिटवीन ही होने वाला है जस्टिफाई कंटेंट स्पेस बिटवीन बढ़िया इसको हमने सबमिट कर दिया बढ़िया अभी तक सब कुछ इजी चल रहा है आसान लेवल के क्वेश्चन है आगे बढ़ते हैं नेक्स्ट लेवल के ऊपर मैंने कहा ये सबसे ऊपर वाली रो में है पर मुझे सबसे नीचे चाहिए यानी के वर्टिकल एक्सेस में नीचे चाहिए वर्टिकल एक्सिस मतलब अलाइन आइटम्स नीचे चाहिए मतलब एंड आ गया मैंने कर दिया सबमिट आंसर इज करेक्ट बहुत बढ़िया आगे चलते हैं मैंने बोला ये पहले तो इसको आप सेंटर में लेके आओ हॉरिजॉन्टल एक्सिस में तो हॉरिजॉन्टल एक्सिस में सेंटर में कैसे आएगा जस्ट जफाई कंटेंट सेंटर हॉरिजॉन्टल एक्सिस में सेंटर में आ गया अब वर्टिकल एक्सिस में सेंटर में लेके आओ इसको वर्टिकल एक्सिस में सेंटर में कैसे आएगा अलाइन आइटम्स सेंटर बढ़िया इसको फटाफट सबमिट कर दो सबमिट कर दिया आंसर इज करेक्ट बहुत बढ़िया ये भी संभाल लिया हमने मैंने कहा जी सबसे पहले इनको स्पेस बिटवीन कर दो स्पेस बिटवीन कर दें हां स्पेस बिटवीन करके ट्राई करते हैं एक बार देखते हैं जस्टिफाई कंटेंट स्पेस बिटवीन सही आ रहा बहुत बढ़िया पर ये तो ऊपर है मुझे नीचे चाहिए वर्टिकल एक्सेस में नीचे चाहिए यानी कि अलाइन आइटम करके एंड में ले आओ इसको मैंने कहा जी वर्टिकल एक्सिस यानी लाइन आइटम की बात हो रही है अगर आप बाय डिफॉल्ट केस की बात कर रहे हैं नहीं तो जस्ट कंटेंट की बात होगी एंड में ले आया बहुत बढ़िया सही नहीं है तो यानी स्पेस बिटवीन नहीं था इसको मैंने स्पेस अराउंड कर दिया अब सही लग रहा है सबमिट कर दो बढ़िया नेक्स्ट हिटन ट्रायल भी चलता है भाई इसमें कोई दुख वाली बात नहीं हिट ट्राल क्यों करना पड़ कर सकते कोई ऐसा इशू नहीं है तीनों चीज जो है तीनों बास्केट राइट मोस्ट एरिया में है आपके सारे फ्रूट जो है लेफ्ट मोस्ट एरिया में मुझे राइट में शिफ्ट करने है तो मुझे हॉरिजॉन्टल एक्सेस में राइट में शिफ्ट करना है तो मैंने बो हॉरिजॉन्टल एक्सिस मतलब जस्टिफाई कंटेंट राइट मतलब एंड ठीक है पर भैया यह तो उल्टे आ गए मतलब सेब यहां होना चाहिए था और यह ग्रेप्स यहां पर होना चाहिए था रिवर्स ऑर्डर में होता तो मजा आता तो मैंने कहा रिवर्स ऑर्डर तो मेरे पास एक चीज और है रिवर्स ऑर्डर की अगर मैं इसकी फ्लेक्स डायरेक्शन जो है वो रो रिवर्स कर देता तो बन गई बात आपका एप्पल भी अपनी बास्केट में आ गया बनाना भी अपनी बास्केट में आ गया ग्रेप्स भी अपनी बास्केट में आ गया सबमिट कर दो आंसर इज करेक्ट बहुत बढ़िया नेक्स्ट लेवल में चलते हैं पहली बात तो कॉलम वाइज आपके ये फ्रूट्स आ गए तो मैंने सबसे पहले फ्लेक्स डायरेक्शन चेंज कर दी फ्लेक्स डायरेक्शन कॉलम लो आ गया आंसर हर कोई अपनी बास्केट में है मैंने सबमिट करा आंसर इज करेक्ट बहुत बढ़िया अब चलते हैं आगे मैंने कहा जी सब कुछ सही है बस इनका ऑर्डर गलत है सब कुछ सही है बस इनका ऑर्डर गलत है तो हमने क्या किया हमने क्या किया हमने बोला कि इसकी फलेक्स डायरेक्शन से ऑर्डर तो चेंज कर दूंगा मैंने बोला रो रिवर्स करके डर चेंज हो गया राइट मोस्ट चला गया मुझे लेफ्ट में लेके आना है हरिजन डायरेक्शन में लेफ्ट में लेके आना है तो मैंने क्या किया जस्टिफाई कंटेंट स्टार्ट बढ़िया इसको मैंने कर दिया सबमिट बढ़िया आंसर इ करेक्ट आगे चलते हैं कॉलम में लेके आओ पहले कॉलम वाइज दिख रना बास्केट तो पहले हम आ गए कॉलम में लेके आ गए इसको फ्लेक्स डायरेक्शन कॉलम बढ़िया अब इसको वर्टिकल एक्सिस में नीचे खिसका के लाना है पर अगेन वर्टिकल एक्सिस कौन सा यहां पर जस्टिफाई का यूज करो लाइन का यूज करू तुमने फ्लेक्स डायरेक्शन कॉलम कर दी जब फ्लेक्स डायरेक्शन रो होती है तो जस्टिफाई कंटेंट हॉरिजॉन्टल संभालता है लाइन आइटम वर्टिकल संभालता है जब फ्लेक्स डायरेक्शन कॉलम होती है जस्टिफाई कंटेंट वर्टिकल संभालता है अलान एटम हॉरिजॉन्टल संभालता है तो यहां पर जस्टिफाई कंटेंट का यूज करना है मुझे जस्टिफाई कंटेंट मैंने मार्क कर दिया एंड बढ़िया तो इस प्रकार से हमने यह वाला केस संभाल लिया दोबारा सुनते हैं जब फ्लेक्स डायरेक्शन रो होती है जस्टिफाई कंटेंट हॉरिजॉन्टल संभालता है और अलाइन आइटम वर्टिकल संभालता है और जब तुम्हारी फ्लेक्स डायरेक्शन कॉलम होती है तो जस्टिफाई कंटेंट वर्टिकल संभालता है अलाइन आइटम हनल संभालता है सबमिट कर दो बढ़िया आंसर इ करेक्ट नेक्स्ट लेवल अगेन कॉलम में तो पहले करना ही पड़ेगा तो फ्लेक्स डायरेक्शन कॉलम सबसे पहला काम तो यह कर दिया हमने क्योंकि बास्केट हमें कॉलम की फॉर्म में दिख रही थी ना अगेन यहां पे मैं क्या देख पा रहा हूं मुझे स्पेसिंग करनी है क्योंकि कॉलम में आ गया तो तुम्हारा वर्टिकल अब जस्टिफाई कंटेंट संभाल रहा होगा जस्टिफाई कंटेंट संभाल रहा है मैंने बोला स्पेस अराउंड अराउंड से तो नहीं होगा सॉल्व मैंने बोला बिटवीन बिटवीन से हो जाएगा पर गड़बड़ है गड़बड़ यह है कि यह वाली बास्केट ग्रेप की है और यह वाली बास्केट एल की है ऑर्डर चेंज होना चाहिए था ऑर्डर चेंज करने का तरीका तो मुझे पता है कॉलम रिवर्स कर देता हूं सही आ रहा है बढ़िया सबमिट कर दो सबमिट कर दिया चल गया बहुत बढ़िया मैंने कहा सबसे पहले आपकी बास्केट जो है वो लेफ्ट और राइट में या हनल डायरेक्शन में सेंटर में पड़ी है तो आपने सारे के सारे कंटेंट को पहले सेंटर प्लेस कराओ तो मैंने बोला कि जस्टिफाई कंटेंट सेंटर पहला काम तो य हो गया उसके बाद मैं क्या देख पा रहा हूं कि मुझे रिवर्स ऑर्डर में चाहिए था तो मैंने य पर फ्लेक्स डायरेक्शन रिवर्स ऑर्डर में कर दी फ्लेक्स डायरेक्शन रो रिवर्स बढ़िया अब मुझे ये वर्टिकली नीचे चाहिए वर्टिकल कौन संभालता है बाय डिफॉल्ट अलाइन आइटम्स नीचे चाहिए एंड मार्क कर दिया बढ़िया इसको सबमिट कर दिया यह भी सॉल्व कर लिया हमने बहुत बढ़िया आगे चलते हैं मैंने कहा कि यार सब कुछ ठीक है रिवर्स कर दूं क्या इसको रिवर्स करते हैं एक बार तो मैंने क्या बोल दिया अगेन रिवर्स कैसे करोगे आप तो फ्लेक्स आइटम फ्लेक्स आइटम दे दिया इन्होंने अब यहां पे कोड करने के लिए कंटेनर के अंदर कोड नहीं कर रही है आइटम के अंदर कोड कर रहे हैं तो मुझको देखो एप्पल तो अपनी सही जगह पे है बस बनाना और ग्रेप को शिफ्ट करना है ये तो सिंपल है तो मैंने क्या कर दिया मैंने क्या कर दिया मैंने जो बनाना है ना बनाना बनाना को एंड में शिफ्ट करना है तो बनाना का ऑर्डर सेट कर दिया ऑर्डर लेट से मैंने 501 जो मेरा बनाया मैंने वो लिख दिया सब कुछ सही हो गया बढ़िया सबमिट कर दिया आंसर इज करेक्ट वेरी गुड यहां पे देखो बनाना को सबसे आगे लेके आना है तो बनाना को सबसे आगे ले आओ तो आपने बोल दिया ऑर्डर -1 बनाना सबसे आगे आ गया सबमिट डी बढ़िया ये भी हो गया अब चलते हैं यहां पे यहां पर बस तुम्हारा जो सिर्फ सेब सेव का ही यहां पर हमें कोड करने को बोला गया है तो सेव को नीचे लेके आना है सिंपल है सिर्फ एक आइटम को नीचे लाना है तो मैंने बोला कि अलाइन सेल्फ अलाइन सेल्फ से हो जाएगा अलाइन सेल्फ एंड लो जी हो गया सबमिट कर दो ये भी चल गया आगे चलते हैं हमने बोला यह कैसे करें यार एल का कोड दिया हुआ है सबसे पहले एल एक ये रहा एक ये रहा इन सभी एल को राइट में ले आओ सभी एल को राइट में ले आओ राइट मोस्ट लेके जाना है ना तो ऑर्डर इनका चेंज कर देता हूं ऑर्डर मैंने 500 कर दिया लेट्स से राइट मोस्ट आ गया ऊपर से नीचे लेके आना है ये तो मैं कर लूंगा अलाइन सेल्फ बढ़िया अलाइन सेल्फ एंड करके नीचे ले आया बढ़िया आंसर इज करेक्ट आगे चलते हैं एक दोती च पा 6 सात फ्रूट ऊपर है नीचे पहले रैप ऑन कर देता हूं रैप ऑन करके देखते हैं नीचे आ जाएगा अपने आप फ्लेक्स रैप रैप बढ़िया रैप ऑन किया नीचे आ गया सबमिट किया आंसर करेक्ट वेरी गुड यहां पे भी रैप ऑन करते हैं फ्लेक्स रप बढ़िया र नहीं बनी हुआ मुझे लग रैप से हो जाएगा डायरेक्शन कॉलम करते हैं फिर हो जाना चाहिए तो मैंने पहले क्या किया मैंने बोला फ्लेक्स डायरेक्शन कॉलम ताकि रैप करके सब कुछ अपनी दिशा में आ जाए देखो फ्लेक्स रप किया सॉरी फ्लेक्स डायरेक्शन कॉलम किया सब ऐसा आ गया बाहर निकल रहा है प रैप ऑन करो इसकी ताकि बाहर ना निकले पेरेंट कंटेनर से तो आपने बोला फ्लेक्स रप रैप बढ़िया सब कुछ सही आ गया सबमिट कर दो वेरी गुड सॉल्व हो गया आगे चलते हैं हमने बोला यहां पर अगेन कॉलम वाइज है तो पहले फ्लेक्स डायरेक्शन कॉलम करके देखो य तो पीछे वाले ज सेम ही हो गया यार कॉलम है और मैंने य पर रप ऑन कर दिया सेम पीछे जैसा ही हो गया ठीक है य तो सबमिट कर देते हैं हो गया आंसर इ करेक्ट आगे चलते हैं लास्ट चार लेवल्स बचे हमारे पास हमने बोला अगेन यहां पर साफ साफ दिख रहा रप करना पड़ेगा ताकि चार चार हो जाए तो फ्लेक्स रप हमने रप मार्क कर दिया अगेन इन दोनों कंटेंट लाइन के बीच में स्पेस आ रहा है जब दो कंटेंट के बीच के स्पेस को हमें कम करना हो या हैंडल करना हो तो कैसे करते थे अलाइन कंटेंट प्रॉपर्टी का यूज करके अलाइन कंटेंट स्टार्ट बहुत बढ़िया हो गया सॉल्व सबमिट आंसर इ करेक्ट वेरी गुड यहां पर सबसे पहले देखो आठ है चार चार चाहिए रप ऑन करो सबसे पहले तो फलेक्स रप रप बहुत बढ़िया मुझे सारे के सारे ग्रेप नीचे चाहिए यानी कि मल्टीपल लाइन ऑफ कंटेंट सारा का सारा नीचे चाहिए तो मैंने बोला अलाइन कंटेंट एंड बढ़िया ये भी संभाल लिया हमने सबमिट आंसर सही निकल गया बहुत बढ़िया ये संभालते हैं थोड़ा सा अभी तो समझ में नहीं आ रहा अभी इतना समझ में आ रहा बास्केट कॉलम वाइज है तो पहले तो इसकी फ्लेक्स डायरेक्शन कॉलम कर लो ठीक है इतना समझ में आ गया अब बहुत सारा कंटेंट है रप ऑन कर दो ठीक है यह भी समझ में आ गया बनाना बनाना और ग्रेप्स जबकि यहां पर बास्केट उल्टी है अगर कॉलम रिवर्स करता तो क्या होता बढ़िया सही चल रहा है और मैंने क्या बोला कि मल्टीपल लाइन ऑफ कंटेंट सेंटर में प्लेस करना है तो अगेन मैंने बोल दिया अलाइन कंटेंट सेंटर में प्लेस कर दो बढ़िया सबमिट किया आंसर करेक्ट आ चुके हैं हमारे लास्ट लेवल पर लास्ट लेवल पर आ चुके हैं मैंने बोला सबसे पहले तो कॉलम वाइज बास्केट है तो कॉलम वाइज प्लेस कर दो फ्लेक्स डायरेक्शन कॉलम ठीक है इतना समझ में आया रप भी ऑन करना पड़ेगा बहुत सारा कट आ रहा सिंगल लाइन के अंदर यह भी ठीक है यह भी ठीक है मैंने बोला अभी तक तो कॉलम रिवर्स करके देखो एक बार अभी तक तो ठीक चल रहा है ठीक है अब सही चल रहा है देखो चार बनाना एक एप्पल चार बनाना वाली बास्केट एक एप्पल वाली बास्केट और दो ग्रेप वाली बास्केट ठीक है सही चल रहा है अब मैंने क्या बोला कि ग्रेप जो है बास्केट सेंटर में है जबक यहां पर सेंटर में नहीं करी है तो मुझे ऐसे वर्टिकल एक्सिस में सेंटर में प्लेस करना है क्योंकि ये फ्लेक्स डायरेक्शन कॉलम है तो वर्टिकल एक्सस जस्टिफाई कंटेंट संभाल रहा होगा जस्टिफाई कंटेंट को मैंने सेंटर प्लेस कर दिया बढ़िया अब मेरे को इनको एक्सट्रीम में प्लेस करवाना है तो मैंने बोला मल्टीपल लाइन ऑफ कंटेंट को एक्सट्रीम में प्लेस कराना है अलाइन कंटेंट और मैंने बोल दिया स्पेस बिटवीन बढ़िया सब कुछ सही है बस फर्क इतना कि यह लाइन मुझे यहां पर चाहिए थी ये लाइन मुझे यहां पर चाहिए थी तो रप है वो मैंने गलत कर दिया इसका मतलब रप को रिवर्स कर देता हूं बढ़िया तो ये लास्ट लेवल भी सबमिट कर लिया हमने बहुत बढ़िया यर मास्टरी ऑफ फ्लेक्स बॉक्स हैज रिच्ड न्यू हाइट्स बहुत बढ़िया तो इस प्रकार से सारी की सारी लेवल्स हमने इस गेम के कंप्लीट कर लिए कहीं पर कंजूसी नहीं करी है कि दो मैंने लेवल कर लिए और बाकी आपको करने के लिए थ ऐसा कुछ नहीं किया तो इस प्रकार हमने फ्लेक्स बॉक्स को बिल्कुल डेप्थ में समझ लिया दोस्त ठीक है शुरुआत की थी हमने एकदम बेसिक लेवल के साथ जहां पर हमने डिस्कस करना शुरू किया था कि भाई व्हाट इज अ फ्लेक्स बॉक्स एक नडी लेआउट मॉडल है फ्लेक्सिबल बॉक्स जिसे हम फुल फॉर्म वाइज कहते हैं बहुत ही पावरफुल टील टूल है जिसके द्वारा आप लेआउट कर सकते हो आप फ्लेक्स कंटेनर के बारे में आपको बताया मेन एक्सेस क्रॉस एक्सेस फ्लेक्स आइटम सबके बारे में आपको बताया ठीक है और सब सीखा आपने डिस्प्ले फ्लेक्स फ्लेक्स डायरेक्शन फ्लेक्स डायरेक्शन के बाद हमने क्या सीखा मित्र फ्लेक्स रैप के बारे में सीखा एक शॉर्ट हैंड नोटशन आपको होमवर्क में दी जस्टिफाई कंटेंट के वाइ में सीखा जो कि मेन एक्सिस के कॉरस्पॉडिंग आइटम को प्लेस करता है अलाइन आइटम के बारे में सीखा जो कि क्रॉस एक्सेस के कॉरस्पॉडिंग आइटम्स को प्लेस करता है उसके बाद लाइन कंटेंट को सीखा जहां पर मैं फ्लेक्स ैप को ऑन करता हूं मल्टीपल ला लाइन ऑफ कंटेंट मेरे पास अवेलेबल होता है उन मल्टीपल लाइन ऑफ कंटेंट के बीच की स्पेसिंग कैसे हैंडल करनी है वो लाइन कंटेंट से आपने सीख लिया फ्लेक्स आइटम्स के बारे में सीखा कि ऑर्डरिंग कैसे हैंडल करोगे फ्लेक्स रिंग फ्लेक्स ग्रो फ्लेक्स बेसिस फ्लेक्स वाली शॉर्ट हैंड नोटेशन ठीक है और आपका अलाइन सेल्स तो ये सारी की सारी प्रॉपर्टीज हमने सीखी इस पर्टिकुलर लेक्चर के अंदर मैंने ट्राई किया है कि मैं इसको बिल्कुल जल्दी बाजी में ना नि पटाऊं बहुत इन डेप्थ बहुत डिटेल बहुत खतरनाक लेक्चर बनाया जाए तो आप मुझे कमेंट सेक्शन के अंदर बताना मित्र कैसा लगा आपको ये लेक्चर और यह गेम कैसी लगी आई थिंक इस गेम को अटेंप्ट करने के बाद आपको भी लगेगा कि हां यार फ्लेक्स बॉक्स आ चुका है जानबूझ के इस वीडियो पे ज्यादा टाइम लगाया गया ताकि फ्लेक्स बॉक्स में बिल्कुल भी आपको ऐसा डाउट ना आए ये एक ऐसा टॉपिक है जो कि बहुत ज्यादा यूज़ होगा जैसे-जैसे हम आगे बढ़ते जाएंगे फ्लेक्स तो बहुत ओवरली यूज़ होगा दोस्त बहुत ही ज्यादा इसके बिना तो आपका ऐसे देखेगा कुछ हो ही नहीं पा रहा है राइट तो आई थिंक मैंने इन डेप्थ आपको समझाया होगा धन्यवाद एवरीवन मिलेंगे आपसे आपके अगले सेशन के अंदर इस सेशन में इतना ही आप चाहे तो हमारे इस चैनल को सब्सक्राइब कर सकते हैं अगर आपको लगता है आपको फायदा हुआ हो अगर आप इस प्लेलिस्ट को बिल्कुल स्टार्ट से एक्सेस करना चाहते हैं तो आप youtube3 मेहनत लगती है तो उससे प्यार से नहीं होता सब कुछ चलो बात करने वाले हैं मीडिया क्वेरीज के बारे में एक बहुत ही इंपॉर्टेंट टॉपिक है हमने रिस्पांसिस डिजाइन के जितनी भी बात की है अब तक जितना भी हमने पढ़ा रिस्पांसिस डिजाइन के बारे में जितने भी अपने एग्जांपल देखे लास्ट क्लास के अंदर भी देखा था तो वहां पर मीडिया क्वेरीज एक बहुत ही इंपॉर्टेंट रोल प्ले करती हैं ठीक है किस प्रकार जैसे कि हमारे पास डिफरेंट डिफरेंट डिस्प्ले साइजेस होते हैं कि मैंने बोला कि लेट्स से मेरे पास यहां पर एक फोन का डिस्प्ले साइज है मेरे पास यहां पर एक लैपटॉप का डिस्प्ले साइज है मेरे पास यहां पर एक बहुत बड़ी स्क्रीन का वाइड स्क्रीन का डिस्प्ले साइज है ठीक है तो मेरे पास तीन प्रकार के डिस्प्ले यहां पर एजिस्ट करती है मैंने बोला मेरा यूआई इन तीनों डिस्प्ले पर कैसे-कैसे अपने आप को चेंज करेगा ठीक है लेट्स से मैंने बोला कि अल्ट्रा वाइट डिस्प्ले साइज में क्या होता है कि मेरे को यहां पर एक टेक्स्ट लिखा हुआ मिलेगा मेरे को यहां पर एक बटन यहां पर मिलेगा एक बटन यहां पर मिलेगा और यहां पर मेरी एक वीडियो चल रही होगी ठीक है ऐसा कुछ कुछ लिख दिया मैंने बोला कि यहां पर मेरा एक टेक्स्ट है यहां पर मेरा एक बटन वन है यहां पर मेरा बटन टू है और यहां पर मेरी एक वीडियो चल रही है बट अगर सेम चीज यहां पर एक नॉर्मल डेस्कटॉप साइप से बात करूं तो लेट्स से यहां पर जो है अ मेरा य इस प्रकार आ रहा है कि मेरा टेक्स्ट जो है वो यहां पर है उसके नीचे पहला बटन यहां पे है दूसरा बटन यहां पे है और मेरी वीडियो यहां पर चल रही है ठीक है लिख देता हूं मैंने बोला मेरा टेक्स्ट यहां पर नजर आ रहा है बटन वन यह रहा बटन टू यह रहा और वीडियो यहां पर चल रही है ठीक है और लेट्स से सेम वेबसाइट मैं अपने मोबाइल पर ओपन करने का ट्राई कर रहा हूं तो मुझे वीडियो यहां पर दिख रही है टेक्स्ट यहां पर दिख रहा है बटन यहां पर दिख रहा है बटन यहां पर दिख रहा है राइट तो मैंने बोल दिया कि यह रही मेरी वीडियो यह रहा मेरा टेक्स्ट यह रहा मेरा बटन यह रहा मेरा बटन टू ये भी वेबसाइट थी xyz.com और ये भी वेबसाइट थी xyz.com ये भी वेबसाइट थी xyz.com ठीक है तो सेम ही वेबसाइट डिफरेंट डिफरेंट डिस्प्ले साइजेस पर डिफरेंट तरीके से रेंडर हो रही है जब डिस्प्ले साइज ज्यादा था तो आपको इस प्रकार से अरेंजमेंट दिखी एलिमेंट्स की जब डिस्प्ले साइज इससे थोड़ा सा कम हो गया तो इस प्रकार से आपको अरेंजमेंट दिखी एलिमेंट्स की और जब डिस्प्ले साइज इससे भी कम हो गया तो आपको इस प्रकार से अरेंजमेंट दिखी एलिमेंट्स की तो इन शॉर्ट डिफरेंट डिफरेंट डिस्प्ले साइजेस पर आपकी वेबसाइट कैसे बिहेव कर रही है और किसी भी डिस्प्ले साइज पर वो ब्रेक नहीं कर रही है सुंदर दिख रही है तो हम कहते हैं कि भाई साहब ये एक रिस्पांसिस डिजाइन है फटाफट से एग्जांपल आपको शो करते हैं हम आ ग हमारी कोड हेल्प की वेबसाइट के ऊपर और मैंने अभी इसको इंस्पेक्ट कर दिया ठीक है इसको इंस्पेक्ट कर दिया और हमने लेट्स से बोला कि इसको मैं नीचे डॉक कर देता हूं ठीक है यहां पर ऐसा आ गया मैंने यहां पर रेस्पॉन्सिव सेट कर रखा है इसको ठीक है तो अगर लेट्स से अभी मेरी वेबसाइट मुझे कुछ ऐसी नजर आ रही है ऐसा कुछ कुछ है ये जो डायमेंशन है इस डिस्प्ले साइज के लिए कुछ ऐसी नजर आएगी मेरी वेबसाइट बट अगर मैं इसको और छोटा करता रहूं छोटा करता रहूं छोटा करता रहूं छोटा करता रहूं छोटा करता रहूं तो आप देख पाओगे कि इसका बिहेवियर चेंज हो गया जहां पर पहले लेफ्ट साइड में बटंस और राइट साइड में ग्राफिक्स आ रहे थे वहीं पर इसको छोटा करने पे ग्राफिक्स आ गए और बटंस नीचे शिफ्ट हो गए तो डिफरेंट डिस्प्ले साइजेस पर यहां पर एलिमेंट्स की अरेंजमेंट डिफरेंट हो गई है और कहीं पर भी मेरा यूआई ब्रेक नहीं कर रहा इसी को मैं कहता हूं एग्जांपल एक रिस्पांसिस डिजाइन का एग्जांपल के ध्यान से देखो यहां पर जो एक कार्ड्स हैं हैंड पिड क्वेश्चंस प्लेसमेंट प्रिपरेशन क्यूरेटेड कंटेंट वगैरह वगैरह सारे कार्ड्स एक के नीचे एक आ रहे हैं बट अगर मैं इसको बड़े डिस्प्ले साइज पर देखूं तो ये कार्ड्स इस प्रकार से ग्रिड की फॉर्म में एक 2d ग्रिड की फॉर्म में दिख रहे हैं ठीक है तो इसी को हम कहते हैं रिस्पांस डिजाइन इसके बारे में बात हम पहले भी कर चुके हैं फिर दोबारा एक बार हमने डिस्कस कर लिया अभी बात हम कर रहे हैं मीडिया क्वेरीज के बारे में तो मीडिया क्वेरीज कुछ भी नहीं होता मीडिया क्वेरीज आपके पास एक ऐसा टूल है ठीक है अगर मैं बात करता हूं व्हाट इज अ मीडिया क्वेरी तो हमने क इट इज नथिंग बट अ टूल एक ऐसा टूल है जिसके द्वारा आप डिफाइन कर सकते हैं कि किस डिस्प्ले साइज पर मेरी एलिमेंट की अरेंजमेंट या एलिमेंट की स्टाइलिंग कैसी दिखने वाली है ठीक है सो मैंने बोला मान लेते हैं मेरे पास मल्टीपल साइज के डिस्प्ले है एक डिस्प्ले को मैं स्मॉल कहता हूं एक को मैं एक्स्ट्रा स्मॉल कहता हूं एक को मैं मीडियम कहता हूं एक को मैं लार्ज कहता हूं एक को मैं एक्स्ट्रा लार्ज कहता हूं राइट ऐसे डिफरेंट डिफरेंट टाइप की मेरे पास डिस्प्ले साइजेस हैं ठीक है मान लो कि हर कोई ये जो अ नाम है किसी पर्टिकुलर नंबर ऑफ पिक्सेल किसी पर्टिकुलर विड्थ से अटैच एक्स्ट्रा स्मॉल लेट से मैं 200 पिक्सल की बात कर रहा हूं सॉरी 400 पिक्सेल लिख देता हूं लेट्स से स्मॉल लेट्स से मैं 500 पिक्सेल की बात कर रहा हूं मीडियम लेट्स से मैं 800 पिक्सेल की बात कर रहा हूं लार्ज लेट्स से मैं 1200 पिक्सेल की बात कर रहा हूं एक्स्ट्रा लार्ज लेटस से मैं 1800 पिक्सेल की बात कर रहा हूं एग्जांपल दे रहा हूं बस मैं तुम्हें अगर इतनी विड्थ का डिस्प्ले मेरे पास होगा इतने विड्थ की डिस्प्ले अगर मेरे पास होगी तो मैं उसको एक्स्ट्रा स्मॉल कहूंगा स्मॉल कहूंगा मीडियम कहूंगा लार्ज कहूंगा एक्सल कहूंगा ठीक है अभी के लिए बस एग्जांपल दे रहा हूं मैं तुम्हें तो मैंने क्या बोला कि जब भी मेरे पास इस विड्थ का डिस्प्ले साइज होगा तो उसम मैं अपनी ये वाली सीएस है जो मैंने डिफाइन कर रखी है वो मैं रेंडर करवाऊंगी जब मेरे पास इस डिस्प्ले साइज का रिवाइस होगा तो उसमें अलग सीएसएस रेंटर करवाऊंगी जब मेरे पास एक्स्ट्रा स्मॉल डिस्प्ले साइज का डिवाइस होगा तो उस पे अलग सीएसएस रंड कराऊंगा तो डिस्प्ले साइज के अकॉर्डिंग अलग सीएसएस अप्लाई करना वो मैं मीडिया क्वेरी के द्वारा फुलफिल कर सकता हूं दोबारा सुनते हैं डिस्प्ले साइज के अकॉर्डिंग मैं कोई कंडीशन प्लेस करता हूं कि भाई मेरी अ 1800 या 1800 से ज्यादा विड्थ के लिए मैं ये वाली सीएसएस अप्लाई कर दूंगा तो बेसिकली डिस्प्ले साइज के अकॉर्डिंग लेट्स से मैं अप्लाई करना चाहता हूं कोई पर्टिकुलर सीएसएस कॉन्फ़िगरेशन किसी पर्टिकुलर पेज के ऊपर तो मैं मीडिया क्वेरी के द्वारा वो अप्लाई कर सकता हूं मैंने बोला कि मेरे पास एक फोन है मेरे पास एक आईपैड है ठीक है ये मेरे पास एक फोन है छोटा सा प्यारा सा और यहां पर मेरे पास एक आईपैड है बड़ा सा खतरनाक सा राइट तो दोनों का डिस्प्ले साइज डिफरेंट होगा राइट इसका डिस्प्ले छोटी है इसके डिस्प्ले बड़ी है तो मीडिया क्वेरीज के द्वारा मीडिया क्वेरी के द्वारा मैं यहां पर डिफाइन कर सकता हूं कि मैं अपने एलिमेंट्स को कैसे रेंडर करवाना चाहता हूं एक फोन के ऊपर और एक आईपैड के ऊपर ठीक है तो मीडिया क्वेरी के द्वारा मैं डिफरेंट डिफरेंट स्टाइलिंग अप्लाई कर सकता हूं डिफरेंट डिफरेंट डिस्प्ले साइजेस के ऊपर सिंपल तो यह थोड़ी बहुत बात समझ में आई अभी लेट्स से कि हमें पूरा समझ में नहीं आया थोड़ा सा और हम ज्ञान लेना चाहते हैं तो हम जाएंगे हमारी ऑफिशियल डॉक्यूमेंटेशन के ऊपर मैंने लेट्स से यहां पर लिख दिया मीडिया क्वेरी एमडीएन यहां पे जाके मैं सर्च कर लेता हूं यहां पे क्या बता रखा है इन लोगों ने ठीक है तो एक बार देख लेते हैं तो अगेन यहां पर सेम चीज उन्होंने लिखी हुई है कि भाई डिवाइस के टाइप पे या डिवाइस के विड्थ के ऊपर डिवाइस के रेजोल्यूशन के ऊपर मीडिया क्वारी अप्लाई कर सकता हूं ठीक है और भी डिफरेंट डिफरेंट डिवाइसेसपोर्ट डिंगली स्टाइलिंग कर सकते हैं बट हां अभी मैं तुम्हें सिर्फ स्क्रीन के बारे में बात कर रहा हूं जो भी तुम्हारी स्क्रीन है सिर्फ उसके बारे में बात कर रहा हूं कि उसमें आप कैसे स्टाइलिंग ऐड करेंगे यूजिंग अ मीडिया क्वेरी ठीक है सो इस प्रकार से आपको ऐसा ट मीडिया ट मीडिया का यूज करके इस नोटेशन का यूज करके आप अप्लाई कर सकते हैं अपनी स्टाइलिंग को मैंने बोला ट मीडिया मैक्स विड्थ 1250 पिक्सल तो इसका मतलब क्या हुआ ज्यादा से ज्यादा 1250 पिक्सेल तक आप जो भी यहां पर कॉन्फिन ऐड करेंगे वो कॉन्फिन अप्लाई करेगी अगर आपके विड्थ जो है 1250 पिक्सल से ऊपर चली गई है तो जो भी कॉन्फिन यहां पर डेड है वो अप्लाई नहीं करेगी लेट्स से यहां पे मैक्स विड्थ की जगह मिनिमम विड्थ लिखा होता तो उसका मतलब ये होता कि मिनिमम विड्थ 1250 इसका मतलब कि 1250 वाली विड्थ के ऊपर आप जो भी कॉन्फिन यहां पर एडेड है वो अप्लाई कर पाएंगे उससे कम में आप अप्लाई नहीं कर पाएंगे जो भी कॉन्फिन यहां पर लिस्टेड है ठीक है आप कंडीशन भी अप्लाई कर सकते हैं कि आपने मैक्स विड्थ भी ऐड कर दी मिन विड्थ भी ऐड करी तो एक रेंज ऐड हो जाएगी कि इस रेंज के बीच में आप मीडिया क्वेरी अप्लाई करना चाहते हैं ठीक है तो अगेन डॉक्यूमेंटेशन आप अपने हिसाब से पढ़ सकते हैं 50 प्रकार की चीजें यहां पर राइट डाउन की हुई है हम अभी इसको नहीं देखेंगे हम फटाफट चलते हैं हमारे कोड की तरफ और वहां पर समझने की कोशिश करते हैं मीडिया क्वेरीज को ठीक है तो मैं गया यहां पे मैंने बोला कि मुझे लेक्चर नंबर 21 ऐड करना है लेक्चर नंबर 21 और लेक्चर नंबर 21 के अंदर मैंने एक फाइल क्रिएट कर दी इसका नाम रख दिया मैंने index.htm ठीक है एक बॉयलर प्लेट कोड हमने यहां पे ऐड कर दिया और फटाफट राइट डाउन करते हैं एक छोटा सा प्यारा सा लॉजिक ठीक है तो मैंने क्या किया मैंने यहां पर क्या किया मैंने सिंपल सा एक डिव क्रिएट कर दिया मैंने एक डिव क्रिएट कर दिया लेट्स से कि मैंने इसका नाम बॉक्स रख दिया था और मैंने इसके अंदर बोल दिया हेलो जी चलो एक डिव मैंने क्रिएट किया है बहुत ही सिंपल सा एग्जांपल के थ्रू आपको मीडिया क्वेरी समझाता हूं तो मैंने बोला कि स्टाइलिंग मैं यहां पर अप्लाई करता हूं और मैंने बोला कि जो मेरा बॉक्स है ना जो मेरा बॉक्स है उसका बैकग्राउंड कलर ऐड कर देता हूं तो बीजी कलर मैंने ऐड कर दिया इसके अंदर बीजी कलर मैंने यहां पर ऐड कर दिया एक्वा चलो और मैंने यहां पर बोल दिया कि भाई इसकी हाइट जो है हाइट मैंने दे दी 400 पिक्सल और मैंने बोला इसकी विड्थ जो है वो मैंने द 400 पिक्सेल तो यूआई पर कैसे दिखेगा ये यूआई पर कैसे दिखेगा एक बार चेक करते हैं यूआई पर मुझे ऐसे कुछ दिख रहा है कि एक बॉक्स है जो कि ऐसा हेलो जीी लिखा हुआ है एक बॉर्डर भी ऐड कर देता हूं फटाफट इसके अंदर मैंने बोला बॉर्डर ऐसा तीन पिक्सल सॉलिड ब्लैक चलो चेक करते हैं य प कैसा दिख रहा है ऐसा मुझे एक बॉक्स दिख रहा है चलो ठीक है बढ़िया यह बात समझ में आ गई मैंने क्या बोला अभी मेरी स्क्रीन कैसी है अभी मेरी स्क्रीन के रेजोल्यूशन इस प्रकार की चल रही है 1831 से 638 तो चाहे मैं इसको छोटा करूं चाहे मैं इसको बड़ा करूं इसका कलर सेम है बट लेट्स से मैंने एक मीडिया क्वेरी राइट डाउन कर दी जहां पर मैंने क्या बोला कि भाई जैसे ही जैसे ही 500 पिक्सेल से ये छोटा हो जाएगा ठीक है जैसे ही 500 पिक्सेल से छोटा हो जाएगा तो कलर चेंज करना चाहिए ठीक है तो 500 पिक्सल छोटा हो बड़ा हो तो कलर चेंज होना चाहिए ठीक है तो मैंने यहां पे एक मीडिया के लिखी मैंने लिखा रेट मीडिया ठीक है और यहां पर मैं ऐड कर देता हूं जो भी मेरी कॉन्फिन है तो मैंने बोला इस केस के अंदर मैंने कॉन्फिन ऐड कर दी बॉक्सेस के लिए यहां पर मैं कंडीशन ऐड कर सकता हूं ठीक है सिंटेक्स एक बार फटाफट वेरीफाई करते हैं हमने जो अभी डॉक्यूमेंटेशन देखी थी इस प्रकार से मैं सिंटेक्स लिख सकता हूं तो मैंने इसको कॉपी कर लिया ठीक है तो मैंने इसको कॉपी कर लिया फटाफट मैंने बोला मिन विड्थ यानी इससे ऊपर सो लेट्स से मैंने यहां पर बोल दिया कि भाई 500 500 पिक्सेल जो है ठीक है अभी के लिए स्क्रीन को हटा देते हैं यहां से तो मैंने बोला कि 500 पिक्सल से ऊपर मैं कलर चेंज कर दूंगा 500 पिक्सेल से ऊपर जाते ही मैं कलर चेंज कर दूंगा अभी मेरा कलर एक्वा है 500 पिक्सेल से ऊपर जाते ही मैं कलर ग्रीन कर दूंगा तो मैंने बोला बीजी कलर मैंने ग्रीन कर दिया तो यही मीडिया क्वेरी है भाई यही मीडिया क्वेरी है आपने डिस्प्ले साइज बता दिया कि मिनिमम विड्थ 500 है 500 के ऊपर जाते ही मैं यह वाली कॉन्फिन अप्लाई कर दूंगा जहां पर आपने बैकग्राउंड कलर को ग्रीन मार्क कर दिया पहले क्या था एक्वा था तो बेसिकली एक्वा से ग्रीन में शिफ्ट होगा आपका कलर चेक करते हैं हुआ कि नहीं हुआ मैंने बोला कि अभी तो ग्रीन दिख रहा है भैया क्यों है ग्रीन क्योंकि आपकी जो डायमेंशन है 1850 है अभी वापस आ रहा हूं अभी भी वापस आ रहा हूं सही चल रहा है सही चल रहा है सही चल रहा अभी तक सब कुछ सही चल रहा है 636 विड्थ है आपकी मैं और अंदर आया मैं 504 पे आ गया अभी भी ग्रीन चल रहा है जैसे ही 500 के नीचे आऊंगा ना एक्वा हो जाएगा चेक करना तो अभी 500 के नीचे देखो 501 आया 500 500 पे आया तब भी ग्रीन है 500 के नीचे आते ही 499 आते ही वापस एक्वा हो गया वापस एक्वा हो गया राइट सो इस प्रकार से यहां से जैसे ही 500 के ऊपर जाओगे वापस ग्रीन जाएगा 500 के नीचे आओगे वापस एक्वा हो जाएगा इसी को मीडिया क्वेरी कहते हैं आप किसी पर्टिकुलर स्क्रीन डिस्प्ले साइज के आधार पर कंडीशन अप्लाई कर रहे हैं बेसिकली कि इफ योर डिस्प्ले विड्थ इज ग्रेटर दन इक्वल टू 500 पिक्सल देन अप्लाई ग्रीन कलर एल्स जो कॉन्फिन पुरानी है वो अप्लाई करेगी ठीक है तो ये मिन विड्थ वाला कांसेप्ट था लेट्स से इस कांसेप्ट को मैंने चेंज कर दिया मैक्स विड्थ के अंदर अब क्या होगा मैक्स विड्थ का मतलब यह है कि भाई साहब आपका 0 से 500 तक ग्रीन रहेगा और 500 के अलावा जो भी आपने डिफॉल्ट कॉन्फिन दे रखी है वो रहेगा तो रो से 500 तक ग्रीन रहना चाहिए अब तो फटाफट आया तो देखो अगर मैं यहां पे 500 से एक भी नीचे आ जाऊं तो 0 से 500 तक आपका ग्रीन है देखो 0 से 500 तक आपका एकदम ग्रीन है पर जैसे ही 500 मैं क्रॉस करता हूं तो वैसे ही वापस एक्वा हो जाता है राइट तो मिन विड्थ वाला कांसेप्ट क्या कहता है कि इतनी विड्थ या इतनी विड्थ से ऊपर में आपकी कॉन्फिन अप्लाई करेगी जो भी आप ऐड करोगे और मैक्स विड्थ वाला कांसेप्ट कता है इतने विड्थ या इतने विड्थ के नीचे जो भी आप कॉन्फिन अप्लाई करोगे वो एक्टिव हो जाएगी ठीक है तो यही सिंपल कहानी थी बेसिकली आप ऐसे समझ सकते हैं इसको एक इफ कंडीशन के तौर पे कि अगर यह कंडीशन ट्रू हो जाएगी तो मैं यह क्राइटेरिया ऐड कर दूंगा जैसे मैक्स विड्थ 500 पिक्सल का मतलब क्या है अगर आपके डिवाइस की जो विड्थ है वो 0 से 500 के बीच की रेंज आ गई तो आप ये वाली कॉन्फिन अप्लाई कर देंगे और मिन विड्थ 500 का मतलब क्या है अगर आपकी डिवाइस की विड्थ जो है वो 500 या 500 के ऊपर चली गई तो आप ये वाली कॉन्फिन अप्लाई कर देंगे बहुत बढ़िया ये बात समझ में आती है इसको मैं और भी तरीके से अप्लाई कर सकता लेट्स से मैंने बोला मैं किसी रेंज में अप्लाई करना चाहता हूं तो मैं रेंज में अप्लाई कर सकता हूं लेट से मैंने बोला कि अगर मेरी डिवाइस की विड 300 पिक्सेल से 500 पिक्सेल के बीच में है तो ग्रीन रहेगा नहीं तो एक्वा रहेगा तो मैंने बोला कि 300 से 500 तो मैंने यहां पे क्या बोला यहां मैंने मिन विट सेट कर दी ठीक है तो मैंने बोला 300 पिक्सेल से 500 पिक्सेल के बीच में मेरा बॉक्स ग्रीन कलर का रहेगा उसके अलावा एक्वा कलर का रहेगा चेक कर लेते हैं फटाफट तो अभी 1500 है वापस आया मैं वापस आया तो देखो जैसे ही 500 के नीचे आता हूं ग्रीन हो जाता है जैसे ही 300 के नीचे जाऊंगा वापस एक्वा हो जाएगा बढ़िया तो देखो 300 के ऊपर जाता हूं तो ग्रीन हो जाता है 500 के ऊपर जाता हूं वापस एक्वा हो जाता है तो हमने एक रेंज सेट कर दी 300 से 500 में ग्रीन उसके अलावा एकवा 300 से 500 में ग्रीन उसके अलावा एकवा तो इस प्रकार से आप चाहो तो ऐसे एक रेंज बेस्ड भी रेंडरिंग आप कर सकते हो इसे मीडिया क्वेरीज कहते हैं दोस्तो इसे मीडिया क्वेरीज कहते हैं मीडिया क्वेरी आप ऐसे चीजें हैंडल कर सकते हैं अब एक और एग्जांपल की बात करते हैं थोड़ी फ्लेक्स की प्रैक्टिस भी हो जाएगी हमारी ठीक है तो अ देखो समझने के लिए तो जो हमें समझना था ऑलरेडी हम समझ चुके हैं इस क्लास के अंदर पर ठीक है मुझे तुम्हे फ्लेक्स से थोड़ा सा और यूज टू करवाना तो एक बार फ्लेक्स का एक और एग्जांपल देख लेते हैं तो हमने क्या बोला हमने ये बोला कि यार दो साइज पकड़ लेते हैं दो साइज पकड़ लेते हैं मैंने बोला रो से लेकर 1280 पिक्सेल जो है इसको मैंने मान लिया मीडियम डिस्प्ले ठीक है और मैंने बोला ग्रेटर दन 1280 पिक्सल जो है इसको मैंने मा मान लिया लार्ज डिस्प्ले ठीक है मैंने बोला यहां पे एक स्ट्रक्चर मैं बनाता हूं और उस स्ट्रक्चर को दोनों में डिफरेंट कर दूंगा ठीक है कैसे मैंने बोला कि अगर आपकी डिस्प्ले लार्ज है तो आप चार बॉक्सेस को ऐसे रो में दिखाओ और अगर आपकी डिस्प्ले मीडियम है तो आप इन्हीं चार बॉक्सेस को इन्हीं चार बॉक्सेस को एक के नीचे एक दिखाओ अब अगर आपको याद हो ऐसे साइड बाय साइड कैसे प्लेस होते हैं और ऐसे एक के नीचे एक कैसे प्लेस होते हैं अगर आपको फ्लेक्स याद हो तो साइड बाय साइड क्लब कब प्लेस होते थे जब आपके फ्लेक्स की डायरेक्शन जो है आपके फ्लेक्स की डायरेक्शन रो होती थी और एक के नीचे एक कैसे प्लेस होते थे जब आपके फ्लेक्स की डायरेक्शन जो है वो कॉलम होती थी तो चलो इसे इसे क्रिएट करते हैं मैंने कहा रो से 180 में फ्लेक्स डायरेक्शन कॉलम कर दो जी और ग्रेटर दन 1280 में फ्लेक्स डायरेक्शन रो कर दो चलो इसे कंटिन्यू करते हैं इसे क्रिएट करते हैं फटाफट मैंने बोला कि यहां पर ऐसा करो एक और नई फाइल क्रिएट करू मैंने फाइल का नाम रख दिया वन डॉट एटीएमएल ठीक बॉयलर प्लेट कोड ऐड कर दिया मैंने यहां पर एक कंटेनर क्रिएट कर दिया उसके अंदर चार बॉक्स क्रिएट कर दिए मैंने एक कंटेनर क्रिएट कर दिया और उसके अंदर मैंने चार बॉक्स क्रिएट कर दिए ठीक है बहुत बढ़िया अभी पुराने वाले से कॉन्फिन ले आते हैं दोस्त इसकी ना मैं 19 पर गया 19 नहीं 20 लेक्चर पर गया वहां से मैं कॉपी करके ले आया कॉन्फिन मैंने य से कॉपी कर ली 21 के अंदर पेस्ट कर दी समझाऊ चिंता मत करना ऐसे मत समझना अरे भाई क्या दिया समझाया ही नहीं ठीक है तो बैकग्राउंड कलर ऐड कर दिया बॉर्डर ऐड कर दिया मार्जिन ऐड कर दिया पडि ऐड कर दिया डिस्प्ले वगैरह कुछ ऐड नहीं कर रहा मैं इन सबको हटा दो बॉर्डर ऐड किया कलर ऐड किया मार्जिन ऐड किया पडि ऐड किया बढ़िया इस सब को अनकमेंट कर दो हाइट ऐड करी विड्थ ऐड करी बॉडर ऐड किया मार्जिन ऐड किया पडि ऐड किया बढ़िया तो यूआई पे देखते हैं कैसा लगता है ये यूआई पे देखते हैं इसको मैं एक बार लाइव सर्वर के द्वारा रन कर देता हूं तो यूआई पे ये ऐसा नजर आ रहा है इसका कलर ऐड नहीं कर रखा हमने कलर फटाफट से ऐड कर देते हैं वापस मैं कॉपी करके लाता हूं कलर वगैरह भी तो हमने यहां पर क्या किया हमने यहां पर इसे कर लिया कॉपी और इसे हमने यहां पर कर दिया पेस्ट ठीक है मैंने बैकग्राउंड कलर यहां पर एक्वा ऐड कर दिया यहां ब्लू ऐड कर दिया ऑरेंज ऐड कर दिया या ब्राउन ऐड कर दिया बहुत बढ़िया वापस चलते हैं मैं इस इन सारे बॉक्सेस को या इस पूरे कोड को भी पेस्ट कर देता हूं बढ़िया तो देखो भाई य आई में क्या हुआ हमने क्या किया हमने एक कंटेनर के अंदर चार बॉक्स ऐड कर दिए और हर बॉक्स के अंदर आईडी ऐड कर दी और उसका नाम ऐड कर दिया 1 2 3 4 बढ़िया हमने हर एक बॉक्स का कलर ऐड कर दिया बॉक्स वन एक्वा कलर का है बॉक्स टू ब्लू कलर का है बॉक्स थ्री ऑरेंज कलर का है बॉक्स फॉर ब्राउन कलर का है हमने सारे बॉक्सेस की हाइट विड सेट कर दी बॉर्डर ऐड कर दिया मार्जिन ऐड कर दिया पैडिट ऐड कर दी कंटेनर का बैकग्राउंड कलर ऐड कर दिया बॉर्डर ऐड कर दिया मार्जिन पडि ऐड कर दी बढ़िया ये बात समझ में आती है तो यूआई में कैसे दिख रहा है यूआई में ऐसे आ रहा है अभी ठीक है तो मैंने क्या बोला मैंने बोला अगर मेरी विड्थ जो है वो 1280 से ऊपर की है अगर मेरी विड्थ 1280 से ऊपर की है या फिर लेट्स से इसको छोटा कर लेता हूं इसको छोटा कर लेता हूं अभी के लिए तुम्हें दर्शाने के लिए ठीक है लेट्स से इसको मैंने हाफ कर दिया मैंने बोला 0 से 640 में ऐसा दिखाओ और 640 से बड़े में ऐसा दिखाओ चलो इसको मैंने जीरो से 640 को मीडियम मान लिया और ग गन 640 को मैंने लार्ज मान लिया चलो तो मैंने क्या कहा मैंने क्या कहा कि यहां पर अपनी मीडिया क्वेरी ऐड करता हूं मैंने कहा 640 पिक्सल से ज्यादा में फ्लेक्स डायरेक्शन रो करना है फ्लेक्सस डायरेक्शन ्र करना है अगेन फ्लेक्स डायरेक्शन रो करने से पहले मुझे कंटेनर को फ्लेक्स भी तो बनाना पड़ेगा डिस्प्ले फ्लेक्स चलो अब मैंने क्या बोला मैंने बोला ग्रेटर दन 640 ग्रेटर दन 640 वाली क्वेरी चलाने के लिए मुझे क्या कंडीशन लगानी पड़ेगी मिन विड 640 तो मैंने यहां पर क्या किया मैंने लिखा जी रेट मीडिया और मैंने यहां पर क्या राइट डाउन कर दिया मिन विड्थ 640 पिक्सल इसके अंदर मैंने क्या बोला इसके अंदर मैंने सिंपल सी एक चीज बोली जो कंटेनर है ना जो कंटेनर है वह बन जाएगा यहां पर फ्लेक्स डायरेक्शन तो मैंने क्या बोला ग्रेटर देन 640 में सारे बॉक्सेस साइड बाय साइड आने चाहिए तो मैंने फ्लेक्स डायरेक्शन रो कर दी बहुत बढ़िया ऐसे मैंने क्या बोला जीरो से लेके 640 यानी कि मैक्स विड्थ 640 तो मैंने क्या किया ट द रेट मीडिया और मैंने ऐड कर दिया मैक्स विड्थ 640 तो इस केस के अंदर हमने क्या कर दिया डॉट कंटेनर हमने बोला कि 0 से 640 के अंदर सारे डब्बे एक के नीचे एक आने चाहिए यानी फ्लेक्स डायरेक्शन कॉलम कर दो ठीक है तो हमने बोला ग्रेटर दन 640 में आप फ्लेक्स डायरेक्शन रो करो यानी साइड बाय साइड डब्बे आने चाहिए और लेस दन 640 में आप फ्लेक्स डायरेक्शन कॉलम करो एक के नीचे एक डब्बा आना चाहिए चेक करते हैं य पे हुआ कि नहीं हुआ तो मैंने क्या बोला इंस्पेक्ट करो फटाफट इंस्पेक्ट करो और चेक करते हैं अभी 1134 की विड्थ है यानी ग्रेटर दन 640 है जब तक गन 640 है साइड बाय साइड डब्बे आएंगे चेक करते हैं साइड बाय साइड आ रहे हैं आ रहे हैं आ रहे हैं आ रहे हैं आ रहे हैं आ रहे हैं आ रहे हैं आ रहे हैं अब देखो यहां पे 640 के नीचे जैसे ही आप गए जैसे ही 640 के नीचे गए आपने फ्लेक्स डायरेक्शन कॉलम कर दी डब्बे एक के नीचे एक आगे राइट तो इस प्रकार से आपने मीडिया क्वेरी का एक और एग्जांपल देख लिया इस प्रकार से आपने मीडिया क्वेरी का एक और एग्जांपल देख लिया राइट कि आपने बोला ग्रेटर दन 640 में फ्लेक्सस डायरेक्शन रो बिहेवियर दिखाओ और लेस दन 640 में लेसन = ू 640 में आप फलेक्स रेक्शन कॉलम वाला बिहेवियर दिखाओ तो इस प्रकार से आपने मीडिया कोरी का एक और एग्जांपल देख लिया एक और एग्जांपल देख लिया ठीक है चाहो तो एक और चीज कर सकते हैं एक और चीज करते हैं आ जा थोड़ा सा और तुम्हे फायदा मिलेगा फ्लेक्स को समझने में तो मैंने क्या बोला कि भाई ग्रेटर देन 640 वाली जो पिक्सेल वाली जो आपकी डिस्प्ले है ना इसमें ऐसा करो इसमें आप यह वाला स्ट्रक्चर बनाओ इसमें आप यह वाला स्ट्रक्चर बनाओ दो डब्बे हो यहां पर और एक इमेज हो यहां पर तो यहां पर एक टेक्स्ट तुमने लिखा हुआ है यहां पर एक टेक्स्ट तुमने लिखा हुआ है और एक इमेज तुमने यहां पर लिखी हुई है ठीक है और मैंने बोला रो से 640 में क्या करो 0 से 640 में तुम क्या करो इसके अंदर तुम ऐसा स्ट्रक्चर बनाओ के यह यह और यह बढ़िया तो यह आ गया टेक्स्ट यह आ गया टेक्स्ट और ये आ गई इमेज चलो यह करके दिखाओ यह करके दिखाओ तो सबसे पहले ये करने से पहले हम सीखना पड़ेगा य हम ये हमने किया कैसे होगा सबसे पहले हम एक पेरेंट कंटेनर देख पा रहे हैं इस पेरेंट कंटेनर के अंदर दो कंटेनर है साइड बाय साइड पहला कंटेनर मैंने ये वाला मान लिया एक फ्लेक्स आइटम और दूसरी फ्लेक्स आइटम मैंने ये वाली मान ली तो दो फ्लेक्स आइटम साइड बाय साइड चाहिए इसका मतलब क्या हुआ इसका मतलब ये हुआ कि ये फ्लेक्स है और ये दोनों इसकी फ्लेक्स आइटम्स हैं दोनों आइटम साइड बाय साइड है एक के साइड बाय साइड है साइड बाय साइड का मतलब फ्लेक्स डायरेक्शन रो तो इन फ्लेक्स आइटम के लिए मुझे फ्लेक्स डायरेक्शन रो करनी पड़ेगी बहुत बढ़िया ठीक है बढ़िया तो देखो इस वाले डब्बे में तो सिंपल इमेज पड़ी है पर इस वाले डब्बे के अंदर दो चीजें एक के नीचे एक पड़ी है एक के नीचे एक मतलब फ्लेक्सस डायरेक्शन रो तो मैंने इसको भी अपने आप में एक फ्लेक्स बना लिया अब इस वाले फ्लेक्स के लिए ये दोनों जो है फ्लेक्स आइटम की तरह बिहेव करेंगे और क्योंकि ये एक के नीचे एक है तो यानी यहां पर फ्लेक्स डायरेक्शन कॉलम यूज किया हुआ है समझते हैं कैसे हुआ होगा सबसे पहले एक डब्बा बनाओ उसके अंदर फिर दो डब्बे ऐसे साइड बाय साइड प्लेस करो चलो दिखाते हैं तुम्हें मजा आएगा इसको समझने में ध्यान से देखना एक बार फ्लेक्स की थोड़ी प्रैक्टिस हो जाएगी तुम्हारी ठीक है तो मैं गया यहां पे मैं एक फाइल बनाई 2ht एए एक बॉयलर प्लेट कोड ऐड कर दिया और मैंने बोला कि एक कंटेनर है मेरे पास सबसे टॉप लेवल का तो मैंने यहां पे क्या किया मैंने यहां पे एक डिव क्रिएट कर दी और मैंने डिव के अंदर कह दिया कि भाई मेरे पास बॉक्स वन है ठीक है और बॉक्स वन के बाद क्या है मेरे पास मैंने बोला मेरे पास बॉक्स टू है ठीक है बॉक्स वन है और बॉक्स टू है या फिर मैं इसको कह सकता हूं बॉक्स लेफ्ट है और यहां पर मेरे पास बॉक्स राइट है ठीक है तो मेरे पास एक कंटेनर है उसके अंदर लेफ्ट में एक बॉक्स है उसमें एक राइट में बॉक्स है अब लेफ्ट वाले बॉक्स के अंदर दो टेक्स्ट है यह रहा एक पैराग्राफ मैंने बोला टेक्स्ट नंबर वन और एक और पैराग्राफ मैंने बोला टेक्स्ट नंबर टू बढ़िया इसके अंदर क्या है इसके अंदर एक इमेज है इसके अंदर एक इमेज है ठीक है बहुत बढ़िया तो मैंने यहां पर क्या किया जो पुरानी इमेज मेरे पास थी यहां पर भगत सिंह की इमेज थी उस इमेज को मैंने यहां पर पेस्ट कर दिया ठीक है और इसी इमेज को यहां पर मैं यूज कर लूंगा तो मैंने बोला सोर्स भगत सिंह जी बढ़िया तो ध्यान से ऑब्जर्व करो ये मेरे पास टॉप लेवल कंटेनर है उसके बाद मेरा बॉक्स लेफ्ट वाला बॉक्स आता है जिसके अंदर दो तुमने टेक्स्ट रखे हुए हैं फिर मेरा राइट वाला बॉक्स आता है जिसके अंदर तुमने एक इमेज रखी हुई है यूआई पर देखते हैं कैसा दिख रहा है ये यूआ पर देखते हैं कैसा दिख रहा है इसको फटाफट से रन करता हूं एक बार तो यूआई पर ऐसा दिख रहा है समझ नहीं आ रहा अभी तो फटाफट से पहले इनकी स्टाइलिंग कर लेते हैं समझ में तब आएगा ठीक है तो मैंने बोला कि मेरे पास यहां पर कंटेनर नाम की एक क्लास है जहां पर मैंने एक बॉर्डर ऐड कर दिया है न पिक्सेल सॉलिड ब्लैक ठीक है मैंने एक बीजी कलर ऐड कर दिया है ठीक है एक बीजी कलर ऐड कर दिया बहुत बढ़िया वन पिक्सेल की जगह इसको मैंने कर दिया टू पिक्सेल चलो ऐसे ही मैंने बोला मेरे पास एक बॉक्स लेफ्ट है और मैंने क्या बोला कि बॉक्स लेफ्ट की जो बीजी कलर है वह मैंने ऐड कर दिया है एक्वा मरीन ठीक है और ऐसे ही मैंने क्या बोला मेरे पास एक बॉक्स राइट है और वहां पर जो बीजी कलर है वहां पर जो बीजी कलर है मैंने वह ऐड कर दिया है येलो ठीक है बढ़िया तो बॉक्स लेफ्ट मैंने ऐड कर दिया बॉक्स राइट मैंने ऐड कर दिया और इनके अंदर टेक्स्ट प्लेस कर रखा है टेक्स्ट का फटाफट से मैं यहां पर बाउंड्री ऐड कर देता हूं बडर न पिक्सेल सॉलिड रेड ऐसे लिख दिया मैंने ठीक है अगेन इनका भी बॉर्डर ऐड करो बॉर्डर न पिक्सेल सॉलिड ब्लू और सेम यहां पर मैंने बोला बॉर्डर न पिक्सेल सॉलिड ब्राउन चलो तो हमने क्या बोला कंटेनर मेरे पास है जिसका बॉर्डर जो है ब्लैक कलर का है चेक करते हैं तो बढ़िया तो सबसे पहले मुझे कंटेनर नजर आ रहा है फिर मुझे लेफ्ट वाला बॉक्स जो है ये ध्यान से दिखाता हूं मैं तुम्हें एक बार ध्यान से देखना दोस्त मैंने बोला सबसे पहले तो मुझे ये कंटेनर नजर आ रहा है इस कंटेनर के अंदर दो बॉक्सेस हैं एक के नीचे एक आ ग पहला बॉक्स जो है ये देखो यहां से यहां तक है ब्लू कलर की बाउंड्री दे रहा है और दूसरा बॉक्स तुम्हारा यहां से यहां तक है सबसे पहली गलती क्या है कि ये बॉक्सेस लेफ्ट और राइट में होने चाहिए थे यह बॉक्सेस मुझे ऊपर नीचे मिल गए लेफ्ट और राइट में कैसे रखूं इन दोनों बॉक्सेस को अगर मुझे बॉक्स लेफ्ट और बॉक्स राइट को लेफ्ट और राइट में प्लेस करना है उसके लिए मुझे क्या करना पड़ेगा कंटेनर को फ्लेक्स बनाना पड़ेगा तो मैं कंटे को फ्लेक्सस बनाता हूं डिस्प्ले फ्लेक्स और फ्लेक्स डायरेक्शन को वैसे मेंशन करने की नीड नहीं है पर फिर भी कर देता हूं रो इससे क्या होगा जो भी इसके चाइल्ड होंगे जो भी इसके इमीडिएट चाइल्ड होंगे वो ऐसे फ्लेक्स डायरेक्शन रो में प्लेस हो जाएंगे ठीक है तो इस कंटेनर के इमीडिएट चाइल्ड कौन है यह वाला डेव एंड यह वाला डेव यह है बॉक्स लेफ्ट वाला डेव यह है बॉक्स राइट वाला डेव तो एक सिंगल रो में आ गए होंगे चेक करके आओ बढ़िया देखो पहली रो में तुम्हारे पास यहां पर देखो यह तुम्हारा ओ ल कंटेनर हो गया फ्लेक्सस कंटेनर और इसमें ये बन गई तुम्हारी पहली आइटम और ये बन गई तुम्हारी दूसरी आइटम बढ़िया दोनों आइटम्स यहां पर आ चुकी है दोनों आइटम्स यहां पर आ चुकी है बढ़िया अभी मैंने क्या किया अभी मैंने क्या किया बॉक्स लेफ्ट में अच्छे से समझ में नहीं आ रहा तो मैंने क्या किया जानबूझ के इसको क्या बोल दिया कि आपकी विड्थ कितनी दे दी मैंने कि बोल दी कि विड्थ जो है आपकी मैंने दे दी 50 पर 50 पर विड्थ दे दी मैंने यहां पे बॉक्स राइट को भी मैंने बोल दिया लेट्स से मैंने 48 पर विड्थ दे दी ठीक है 40 7 पर विड्थ दे दी अगेन बॉक्स राइट के लिए मैंने बोल दिया कि मैंने यहां पर भी 47 पर विथ दे दी और मैंने ओवरऑल कंटेनर की विड दे दी ऐसा कुछ 400 पिक्सल टाइप ठीक है तो मैंने बोला जो पेरेंट कंटेनर है 400 पिक्सल की विड दे दी और लेफ्ट और राइट वाले बॉक्सेस को 47 पर की विड दे कैसा लग रहा य ऐसा लग रहा है ठीक है आई थिंक थोड़ी सी विड मुझे बढ़ानी चाहिए तो मैंने यहां पर कर दिया इसको 450 पिक्सल ठीक है और अभी थोड़ा सा और मुझे समझना पड़ेगा इमेज को थोड़ा सा मुझे और छोटा करना पड़ेगा तो इमेज की बात कर लेते हैं मैंने बोला इमेज की जो हाइट है वो मेंशन कर दी मैंने विड्थ मेंशन कर देता हूं मैं बोला इमेज की जो विड्थ है मेंशन कर दी मैंने 170 पिक्सल अब चेक करते हैं यूआई पे बढ़िया पहले से थोड़ा ठीक लग रहा है ठीक है उतना सुंदर नहीं है पर ठीक है काम बन जाएगा काम बन जाएगा जो काम करना चाहते हैं वो काम हो जाएगा इसमें ठीक है तो ऑब्जर्व करो यहां पे फटाफट ऑब्जर्व करो हमने बोला कि ये रहा मेरा पेरेंट फ्लेक्स कंटेनर ये रहा मेरा बॉक्स लेफ्ट और यह रहा मेरा बॉक्स राइट अभी भी समझ में नहीं आ रहा थोड़ी सी और मार्जिन वगैरह ऐड करो मैंने बोला बॉक्स लेफ्ट जो है वो मार्जिन देगा आपको तीन पिक्सेल का ठीक है और पैडिया आपको ऐसा दो पिक्सेल का सेम कॉन्फिन मैंने कॉपी कर दी है आपके राइट वाले बॉक्स के अंदर भी और यहां पर भी मैंने क्या किया यहां पर भी पैडिट कर दी है दो पिक्सेल के चलो ठीक है मैंने मार्जिन भी ऐड कर दिया लेट्स से ऐसा 10 पिक्सल टाइप चलो तो यूआई पे कैसा दिख रहा है यूआई पर कुछ ऐसा दिख रहा है अब समझ में अच्छे से आ रहा है अब समझ में अच्छे से आ रहा है ठीक है अब अच्छे से समझ में आ रहा है तो मैंने क्या बोला ध्यान से ऑब्जर्व करो ध्यान से ऑब्जर्व करो ये रहा मेरा फ्लेक्स कंटेनर और ये आ गया इसका लेफ्ट वाला बॉक्स और ये आ गया इसका राइट वाला बॉक्स ठीक है लेफ्ट वाले बॉक्स के अंदर दोनों चीजें मुझे एक के नीचे एक चाहिए थी वो मिल गई हैं बाय डिफॉल्ट है क्योंकि आपका नॉर्मल ऑर्डरिंग ही ऐसे होती है कि एक के नीचे एक चीजें प्लेस होनी चाहिए बट लेट्स से मैं खुद से प्लेस करना चाहता तो तो खुद से प्लेस करने के लिए मुझे इसको फ्लेक्स बनाना पड़ता ताकि ये दोनों आइटम इसकी फ्लेक्स आइटम बन जाए तो मैंने कहा चलो ठीक है बॉक्स लेफ्ट को फ्लेक्स बनाते हैं तो मैंने बोला बॉक्स लेफ्ट को मैंने फ्लेक्स बना दिया अगर मुझे इसके अंदर इस लेफ्ट बॉक्स के अंदर आइटम एक के नीचे एक चाहिए तो इसका मतलब फ्लेक्स डायरेक्शन को कॉलम कर दो फ्लेक्स डायरेक्शन को आपने कर दिया कॉलम बढ़िया तो अब इसके अंदर जो भी चीजें हैं वो एक के नीचे एक आ जाएंगी बढ़िया वैसे ही चल रहा है बढ़िया चल रहा है सुंदर चल रहा है ठीक है तो जो पहला टारगेट था हमारा जो पहला टारगेट था कि हमारा यूआई ऐसा दिखना चाहिए फॉर ऑल 640 से ज्यादा वाली डिस्प्लेज ठीक है तो वापस वहीं आते हैं एक बार वापस वहीं आते हैं तो हमने यहां पर इनको मेंशन कर दिया हमने ये वाला यूआई क्रिएट कर लिया ये ग्रेटर दन 640 में चलेगा तो लेट्स से मैं इसको नॉर्मल यूआई मान लेता हूं कि ऐसा चलेगा तो बस मुझे एक केस हैंडल करना है कि 0 से 640 में सब एक के नीचे एक आना चाहिए 0 से 640 में सब एक के नीचे एक आना चाहिए अभी हो जाएगा 0 से 640 का मतलब क्या है कि मैक्स विट 640 सो मैक्स विड्थ 640 वाले केस में क्या किया आपने आपने सिर्फ इतना किया कि जो बॉक्स लेफ्ट वाला था और जो बॉक्स राइट वाला था लेफ्ट वाले बॉक्स और राइट वाले बॉक्स को एक के नीचे एक रख दिया तो अगर यह दो बॉक्सेस को एक के नीचे एक रखना है उसके लिए मुझे इस वाले फ्लेक्स के अंदर डायरेक्शन को कॉलम मार्क करना पड़ेगा बात खत्म सो इन शॉर्ट अगर मैं अपने कोड में जाऊं और अपने कोड में एक मीडिया क्वेरी ऐड कर दूं कि एट द रेट मीडिया आपने बोला मैक्स विड्थ 604 40 पिक्सल और क्या करना चाहते हैं इसके अंदर इसके अंदर मैं अपने कंटेनर को चेंज करना चाहता हूं कि भाई कंटेनर की जो फ्लेक्स की डायरेक्शन है वो मैंने कॉलम कर दी खत्म तो 640 के ऊपर 640 के ऊपर यह वाला यूआई दिखेगा आपको जहां पर लेफ्ट वाला बॉक्स पहले आएगा उसके अंदर दो चीजें होंगी फिर एक इमेज आएगी और 640 से कम 0 640 की रेंज में इतने डिस्प्ले साइज के अंदर पहले टेक्स्ट फिर टेक्स्ट और फिर इमेज ऐसा आपका यूआई दिखेगा चेक करते हैं अभी 988 विड्थ है तो 640 का ज्यादा हमें ये वाला यूआई चाहिए था सही चल रहा है सही चल रहा है सही चल रहा है जैसे ही 640 के नीचे आया क्या दोनों बॉक्सेस एक के नीचे एक नहीं हो गए 640 से ज्यादा में लेफ्ट वाला बॉक्स और राइट वाला बॉक्स साइड बाय साइड आ गए 640 से कम में लेफ्ट वाला बॉक्स और साइड वाला लेफ्ट वाला बॉक्स और राइट वाला बॉक्स एक के नीचे का आ गया दोबारा सुनो 640 से ज्यादा में आपका लेफ्ट बॉक्स और राइट बॉक्स साइड बाय साइड आ गए यानी फ्लेक्स डायरेक्शन रो और 640 से कम में आपका लेफ्ट वाला बॉक्स और राइट वाला बॉक्स एक के नीचे एक आ गया यानी कि फ्लेक्स डायरेक्शन कॉलम बहुत इंपॉर्टेंट बातें बोल रहा हूं लिख लो कॉपी में 640 पिक्सेल की डिस्प्ले साइज से ऊपर जब आप जाते हैं तो आपका लेफ्ट वाला बॉक्स और राइट वाला बॉक्स सेम रो में आता है क्योंकि आपकी फ्लेक्स डायरेक्शन कॉलम है 640 पिक्सेल से जैसे आप नीचे आते हैं तो आपका लेफ्ट वाला बॉक्स और राइट वाला बॉक्स एक के नीचे एक आता है और जब भी मुझे एक के नीचे एक कुछ चाहिए होगा एलिमेंट्स सो मैं फ्लेक्स डायरेक्शन कॉलम सेट कर दूंगा अगेन बहुत इंपॉर्टेंट कोड मैंने यहां पर लिखा है दोस्त एक बार फटाफट से इस वीडियो को दोबारा से रिपीट करके देखना अगर तुम्हें कहीं पर भी डाउट फील हो रहा हो इस कोड के अंदर बहुत इंपॉर्टेंट है अगर ये ये क्लेरिटी तुम्हें अभी मिल जाएगी तो आगे आने वाली वीडियोस में कोई भी इशू नहीं होगा दोबारा वीडियो देख लेना अगर इतना सा भी डाउट मन में आ रहा है तो ठीक है तुमने बहुत कुछ देखा इस वीडियो के अंदर यार अ तुमने सीखा कैसे फ्लेक्स का यूज कर सकते हैं डिफरेंट डिफरेंट लेआउटस बनाने के लिए तुमने सीखा कैसे मीडिया क्वेरीज का यूज कर सकते हैं डिफरेंट डिफरेंट डिस्प्ले साइजेस के लिए ठीक है अगेन मैं यहां पे ये पूरी मीडिया क्वेरी सिर्फ सिर्फ स्क्रीन पे अप्लाई करना चाहता हूं तो मैं यहां पे अलग से मेंशन कर सकता हूं ऑनली स्क्रीन करके ठीक है तो इस प्रकार समाप्त होता है हमारा मीडिया क्वेरीज का एक और सेशन मिलते हैं आपसे आपके नेक्स्ट सेशन अंदर इस सेशन में इतना लव यू ऑल गुड नाइट टाइम क्या हो रहा है भैया अभी बता देते हैं 445 ये रात वाले 445 जैसे सुबह वाले 445 मेनत चल रही है दोस्त ताकि तुम्हें वो इनकंसिस्टेंट वाला बिहेवियर देखने को ना मिले तुम मुझे कमेंट में ना बोल पाओगे भैया वीडियो नहीं आई थी कल तो उस चक्कर में मेहनत कर रहे हैं सो धन्यवाद एवरीवन मिलेंगे आपसे आपके अगले सेशन के अर इस सेशन में इतना ही लव यू ल बा बाय गुड नाइट यहां पर हम बात करने वाले हैं शैडोज के बारे में अगेन शैडोज जो आप जानते हैं परछाई सेम उसी की बात हम करने वाले हैं यहां पर एक वेब पेज के अंदर हम सीएसएस का यूज करके शैडोज ऐड करने वाले हैं शैडोज अगर आप जानना चाहते हैं व्हाट इज अ शैडो तो डेफिनेशन वही है दोस्त परछाई इज अ शैडो ठीक है आप कोई बॉक्स बनाएंगे उसके ऊपर आप शैडो रेंडर करवा सकते हैं आप कोई टेक्स्ट लिखते हैं तो आप उस टेक्स्ट के लिए भी शैडो रेंडर करवा सकते हैं ठीक है तो दो टाइप की शैडो के बारे में बात करने वाले हैं एक होगी आपकी बॉक्स शैडो एक होगी आपकी टेक्स्ट शैडो जो भी सिंटेक्स एजिस्ट करते हैं जो भी डिफरेंट डिफरेंट पैरामीटर्स एजिस्ट करते हैं जिनके द्वारा हम शैडो क्रिएट कर सकते हैं और उसमें एड ऑनस कर सकते हैं चाहे वो ब्लर हो चाहे वो स्प्रेड हो वो सारी की सारी चीजें वो सारा का सारा सिंटेक्स हम सीखने वाले हैं हर चीज अप्लाई करके समझने वाले हैं शैडो के केस के अंदर चलो विदाउट वेस्टिंग एनी टाइम फटाफट शुरुआत करते हैं हम चलते हैं हमारी ऑफिशियल डॉक्यूमेंटेशन की तरफ जहां पर हमारे टेक्स्ट शैडो और बॉक्स शैडो के बारे में पूरा का पूरा समझाया गया ध्यान से अगर देखोगे तो शैडो अगेन सेम चीज है यार जैसे तुम यहां पे ऑब्जर्व कर पा रहे होगे ठीक है अ कि जैसे ये तुम्हारा एक बॉक्स है तुम ध्यान से ऑब्जर्व करोगे तो इस बॉक्स के लिए ये राइट साइड में एक शैडो तुम देख पा रहे हो और ये डाउन में भी तुम शैडो देख पा रहे हो बॉटम में भी ठीक है तो जो बॉटम में तुम्हारी ये शैडो है ये बेसिकली वाई एक्सिस पे बनी हुई है और जो तुम्हारी ये राइट साइड में शैडो है ये तुम्हारी हॉरिजॉन्टल एक्स एक्सिस की दिशा में मूव कर रही है ठीक है बहुत बढ़िया तो ऐसे डिफरेंट डिफरेंट तरीके तुम्हारे पास है शैडो को ऐड करने के लिए कहीं पर तुमने ऐसा x ऑफसेट ऐड किया है वाई ऑफसेट ऐड किया है कहीं पर तुमने ब्लर रेडियस ऐड की है कहीं पर तुमने स्प्रेड रेडियस ऐड किया है कहीं पर तुमने कलर ऐड किया है तो ये पांच पैरामीटर्स है मेरे पास एक बॉक्स शैडो क्रिएट करने के लिए और क्या-क्या डिफरेंट सिंटेक्स है वो मेरे पास यहां पे सारा लिस्टेड है कौन-कौन से सिंटेक्स का यूज़ करके शैडो क्रिएट कर सकता हूं ठीक है एक बार तो मैं समझा देता हूं तो अगर नॉर्मल शैडो की बात करें तो यहां पे x का ऑफसेट कि भाई x एक्सिस में आपके जो शैडो है कितनी दूर तक जा सकती है अ y का ऑफसेट कि y से कितनी दूर तक जा सकती है नेगेटिव ऑफसेट का क्या मतलब है नेगेटिव ऑफसेट से बेसिकली आप डायरेक्शन डिसाइड करेंगे अगर आपने पॉजिटिव ऑफसेट दिया है x डायरेक्शन में तो राइट दिशा से आपकी शैडो निकल रही होगी ऑब्जर्व करते हैं यहां पे राइट राइट दिशा में यहां पे शैडो निकल रही है आपकी पॉजिटिव ऑफसेट में अगर लेट्स से नेगेटिव ऑफसेट दिया होता तो राइट दिशा की जगह लेफ्ट दिशा में आपकी शैडो निकल रही होती ठीक है तो नेगेटिव नंबर भी आप दे सकते हैं तो ये आपका x का ऑफसेट हो गया x दिशा में शैडो जो मूव कर रही है आपकी ये आपका y का ऑफसेट हो गया y दिशा में जो शैडो मूव कर रही है आपकी और ये आपका कलर नेम हो गया बढ़िया अगेन ये रहा x का ऑफसेट ये रहा y का ऑफसेट ये रहा आपका कलर नेम और ये थर्ड पैरामीटर क्या है ब्लर रेडियस ये जो फिगर है ये जो मैग्नी ूडल आता है कि आपका जो ब्लर है कितना बड़ा होगा और कितनी दूर तक जा सकता है ठीक है तो ये जो नंबर है आपके ब्लर रेडियस को दर्शाए वापस आते हैं x का ऑफसेट y का ऑफसेट ब्लर का रेडियस एक और नया नंबर आ गया ये स्प्रेड रेडियस कि आपने जो भी शैडो बनाई है कितनी दूर तक आप उस शैडो को स्प्रेड करना चाहते हैं ब्लर रेडियस का मतलब कि ब्लर के नंबर को बढ़ाते से बढ़ाते आपका कलर हल्का होता जाएगा हल्का होता जाएगा और आप ब्लर इफेक्ट देख पाएंगे स्प्रेड रेडियस का मतलब क्या आप अपनी शैडो को बढ़ाते जा रहे हैं कोई कलर हल्का नहीं हो रहा कोई ब्लर इफेक्ट नहीं आ रहा डिफरेंस है ठीक है ये रहा आपका एक्स ऑफसेट वा ऑफसेट ब्लर रेडियस स्प्रेड रेडियस और कलर नेम बढ़िया इनसेट से क्या होता है जैसे यहां पर हम ऑब्जर्व कर पा रहे हैं आपकी शैडो बॉक्स से बाहर की तरफ निकल रही है इनसेट से क्या होगा इनसेट से शैडो आपकी बॉक्स के अंदर की तरफ आ जाएगी ठीक है और एट द एंड आप आप मल्टीपल शैडोज भी लगा सकते हैं किसी एक बॉक्स के ऊपर जैसे यहां पे देखो कॉमा से सेपरेट करके एक शैडो यहां लगा रखी है और एक शैडो यहां लगा रखी है तो ये पांचों तरीके हम अभी ऑब्जर्व करने वाले हैं एक कोड हम अभी राइट डाउन करेंगे सो लेट्स से यहां पे एक बॉलर प्लेट कोड मैं ऐड करता हूं लेक्चर नंबर 22 के लिए और मैंने क्या किया मैंने यहां पर एक कंटेनर क्रिएट कर लिया तो मैंने यहां बोला डॉट कंटेनर और कंटेनर के अंदर मैंने बोला कि एक बॉक्स क्रिएट कर दो ठीक है और बॉक्स के अंदर लेट्स से मैंने बोला कि मुझे एक इमेज चाहिए मैंने बोला एक इमेज मुझे चाहिए जिसका सोर्स जो है एक इमेज मैंने ऐड कर रखी इस फोल्डर के अंदर लोगो नाम की वो उसका सोर्स हो जाएगा ठीक है एक इमेज मैंने ऐड कर दी इमेज के नीचे लेट्स से मैंने बोला मुझे कोई हेडिंग चाहिए तो मैंने यहां पे एक हेडिंग ऐड कर दी अ वेलकम टू कोड हेल्प ठीक है और मैंने बोला कि इसके बाद मैंने एक पैराग्राफ ऐड कर दिया लेट्स से मैं बो रम 25 ऐसे करके पैराग्राफ ऐड कर दिया बहुत बढ़िया सो बेसिकली एक पेरेंट कंटेनर है उस कंटेनर के अंदर आपने एक बॉक्स क्रिएट कर रखा है और बॉक्स के अंदर आपके पास इमेज है हेड और पैराग्राफ है बढ़िया यूआई पर चेक करते हैं एक बार दिखने में कैसा लगता है उसके बाद हम आगे बढ़ेंगे बढ़िया ऐसा कुछ नजर आ रहा है सुंदर तो लग रहा है पर ठीक है अभी हम डिफरेंशियल टैग को ऐड करते हैं और डिफरेंशिएबल फटाफट से स्पेसिफाई कर देते हैं मैंने बोला कंटेनर का जो बीजी कलर है हमने दे दिया यहां पर कंटेनर का जो बीजी कलर है हमने दे दिया यहां पर बेज कलर ठीक है और मैंने बोला कि यहां पर इसका हाइट और स्पेसिफाई कर देता हूं मैंने बोला हाइट य पर 650 पिक्सल मैंने अला कर दी है बढ़िया और एक बॉर्डर मैंने ऐड कर दिया इसके अंदर लेट से मैंने बोला ू पिक्सल सॉलिड ब्लैक कलर का बॉर्डर मैंने ऐड कर दिया बढ़िया यई चेक कराओ कैसा लग रहा है तो यह आपका कंटेनर क्रिएट हो चुका है फटाफट से इसको जूम आउट करते हैं ऐसा आपका कुछ कंटेनर नजर आ रहा है बहुत बढ़िया अब मैंने क्या बोला बॉक्स के लिए भी कुछ एक बार प्रॉपर्टी ऐड कर लेते हैं फटाफट तो हमने क्या बोला डॉट बॉक्स मैंने बोला जी इसका बीजी कलर थोड़ा सा डिफरेंट करो बो इसका बीजी कलर जो है हमने वो कर दिया है ऐसे एक्वा मार्क कर दिया ठीक है एक्वा मरीन मैंने बीजी कलर ऐड कर दिया और मैंने क्या बोला कि इसकी एक विड्थ मैंने ऐड कर दी लेट्स मैंने विड्थ ऐड कर दी 330 पिक्सल और विड्थ की बात कर रहा था मैं वेट पता नहीं क्यों आ गया यहां पे तो मैंने बोला विड्थ मैंने ऐड कर दी है 330 पिक्सेल और लेट्स से मैंने सेम आपकी हाइट भी ऐड कर दी है 330 पिक्सेल ही तो यूआई पर चेक करते हैं कैसा लग रहा है ये अभी इसका बॉर्डर भी ऐड कर देता हूं ऐसे करता हूं बॉर्डर हमने ऐड कर दिया वन पिक्सल सॉलिड ब्राउन ऐसा करके अब यूआई पर चेक करते हैं कैसा लग रहा है बढ़िया तो ऐसा करके आपका पूरा का पूरा बन के आ रहा है कुछ मार्जिन पैट फटाफट ऐड करते हैं फिर आगे बढ़ेंगे तो हमने यहां पे एक मार्जिन ऐड कर दिया लेट्स से आपका फाइव पिक्सल का और लेट्स से मैंने यहां पे एक पैडिट भी ऐड कर दी आपकी फाइव पिक्सेल की चलो इतनी बात समझ में आती है मार्जिन भी ऐड कर दिया और पैडिट भी ऐड कर दिया यूआई पर देखते हैं कैसा लग रहा है बढ़िया पर मैं इसको इस पूरे बॉक्स को इस चाइल्ड वाले बॉक्स को सेंटर में लाना चाहता हूं अब ध्यान सोचो एक पेरेंट का बॉक्स है उसके अंदर एक चाइल्ड का बॉक्स है चाइल्ड वाले बॉक्स को मैं हॉरिजॉन्टल सेंटर में पलेस करना चाहता हूं तो अगर आपने सेकंड लास्ट क्लास देखी हमारी सेकंड लास्ट एपिसोड पूरा देखा है तो आपको पता है फ्लेक्स का यूज करके जस्टिफाई कंटेंट का यूज करके मैं यहां पे अचीव कर सकता हूं तो मैंने क्या बोला पेरेंट के अंदर गया तो पेरेंट को मैंने एक फ्लेक्सस कंटेनर बना दिया डिस्प्ले मार्क कर दिया फ्लेक्स अगर आपको नहीं पता फ्लेक्स के बारे में सेकंड लास्ट लेक्चर जो कि मैंने फ्लेक्सस का बनाया जहां पे हमने गेम के द्वारा फ्लेक्स को समझने की कोशिश करी है आप उसको देख के आए फिर इसको कंटिन्यू कर सकते हैं तो मैंने इसको फ्लेक्स बना दिया और फ्लेक्स बना के मैंने इस बॉक्स को सेंटर में प्लेस करना है ठीक है तो मैंने यहां पे बोल दिया फ्लेक्स बनाने के बाद जस्टिफाई कंटेंट और आपने बोल दिया सेंटर तो क्या मैं सेंटर में प्लेस करा पाया बढ़िया बढ़िया कर दिया मैंने सेंटर में प्लेस इसको ठीक है मेरे को वर्टिकल एक्सिस के अकॉर्डिंग भी इसको सेंटर में प्लेस करना है तो मैंने कहा ठीक है तो मैंने यहां पर क्या स्पेसिफाई कर दिया मैंने बोला अलाइन आइटम मैंने बोला सेंटर तो क्या यहां पर भी सेंटर में आ गया नहीं आया आ गया बढ़िया क्या बात है तो इस प्रकार से ऑब्जर्व करोगे तो हमने यह बॉक्स बिल्कुल सेंटर में प्लेस कर दिया इतनी बात समझ में आती है ठीक है अब इस बॉक्स में वन बाय वन शैडो ऐड करते हैं सबसे पहला तरीका जहां पे एक्स का ऑफसेट ऐड करेंगे वा का ऑफसेट ऐड करेंगे और कलर ऐड करेंगे उससे देखते हैं शैडो बन पाएगी कि नहीं बन पाएगी तो एक बार हम आते हैं फटाफट यहां पे और देखते हैं क्या होता है मैंने बोला जी फटाफट कोड करते हैं तो मैंने बोला चलो फटाफट से हम इस बॉक्स के ऊपर शैडो लगाते हैं हमने बोला सबसे पहला तरीका जो बॉक्स शैडो लगाने का है वो देखते हैं बॉक्स शैडो लगाई मैंने बोला एक्स का ऑफसेट 10 पिक्सल ले लो वा का ऑफसेट 15 पिक्सल ले लो कलर तुम ले लो ब्राउन तो क्या ब्राउन कलर की क्या ब्राउन कलर की मैं शैडो ऐड कर पाया हां बिल्कुल कर पाया देखो देखो 10 पिक्सेल से आपकी शैडो ऐसे आ गई लेट्स से मैं 10 की जगह इसको 20 पिक्सल करता तो तो देखो x डायरेक्शन में मूव कर गई शैडो लेट्स से 20 की जगह मैं यहां पे इसको 70 करता तो x डायरेक्शन में मूव कर जाएगी शैडो मूव कर गई तो इसको x का ऑफसेट कहते हैं x डायरेक्शन में आपकी शैडो मूव कर रही होती है इससे ठीक है लेट्स से मैं इसको माइनस का 10 करता इससे क्या होता तो जो आपके शैडो राइट में मूव कर रही थी अब वो राइट की जगह लेफ्ट में उठ के आ गई ध्यान से आप ऑब्जर्व करो पहले आपके शैडो जो थी देखो यहां पे राइट में आपको नजर आ रही है और अब आपने जैसे ही नेगेटिव साइन ऐड कर दिया आपकी शैडो लेफ्ट साइड में आपको नजर आ गई तो नेगेटिव वैल्यू भी आप ऐड कर सकते हो ठीक है ये आपका एकस का ऑफ सेट है इसको बढ़ाने घटाने से आपकी शैडो x और y में मूव सॉरी हॉरिजॉन्टल मूव कर रही होती है ये आपका y का ऑफसेट है लेट्स से मैंने इसको 150 पिक्सल कर दिया तो ये y डायरेक्शन में यानी बेसिकली आपके y वाले एक्सिस के अंदर मूव कर रही होगी ठीक है मैंने 60 कर दिया y वाली जो एक्सेस है y एक्सिस के अंदर मूव कर रही है आपकी शैडो ठीक है लेट्स से नेगेटिव करूंगा तो ऊपर चली जाएगी शैडो बढ़िया तो इस प्रकार से आपने x का ऑफसेट y का ऑफसेट पॉजिटिव वैल्यू नेगेटिव वैल्यू और कलर एक सिंटेक्स समझ लिया बॉक्स शैडो ऐड करने के लिए बढ़िया अब हम बात करेंगे इसके बाद बॉक्स शैडो यूजिंग ब्लर रेडियस समझेंगे चलो तो मैंने बोला बॉक्स शैडो और मैंने कहा कि 10 पिक्सल x ऑफसेट ले लो 15 पिक्सल y ऑफसेट ले लो और ब्लर रेडियस क्या चाहते हो मैंने कहा ब्लर करना है तो ऐसा कर लो पांच पिक्सेल के आधार पे ब्लर कर लो जरूरी नहीं पिक्सेल यूज़ करना और भी यूनिट आप यूज़ कर सकते हैं मैंने नाम रख दिया इसका ब्राउन कलर का नाम ठीक है तो ऑब्जर्व कर पा रहे हो एक ब्लर इफेक्ट देख पा रहे हो अगर यहां पे ये ब्लर रेडियस नहीं होती तो आपका इतना ब्लर नहीं आता एकदम शार्प आ रहा था बट जैसे ही आपने ब्लर रेडियस की वैल्यू यहां पर ऐड करी आपकी शैडो ब्लर हो गई अब जितनी ज्यादा मैं ये वैल्यू करता जाऊंगा पा की जगह 50 कर दिया उतना ब्लर बड़ा हो जाएगा उतना कलर लाइट हो जाएगा ऑब्जर्व करो कलर लाइट हो गया और ब्लर बड़ा हो गया ठीक है तो ये सेकंड सिंटेक्स भी आपने ऑब्जर्व कर लिया जहां पर आप जहां पर आप ब्लर रेडियस ऐड कर रहे हैं क्या नेगेटिव ब्लर रेडियस हो सकती है चेक करते हैं अगर मैं यहां पे नेगेटिव 50 डालूं तो क्या हो रहा है कुछ भी नहीं हो रहा तो नेगेटिव ब्लड रेडिस से कुछ काम नहीं होने वाला आपको पॉजिटिव वैल्यू इंसर्ट करनी पड़ेगी आपके ब्लर रेडियस के लिए बढ़िया एक और सिंटेक्स आपने ऑब्जर्व कर लिया अब थ अब चलते हैं अगली गेम के ऊपर जहां पर ब्लर रेडियस के साथ स्प्रेड रेडियस भी मैं ऐड करने वाला हूं बॉक्स शैडो 10 पिक्सेल दे दिया मैंने एक्स का ऑफसेट और 15 पिक्सेल दे दिया मैंने वा का ऑफसेट ब्लर रेडियस दे दिया मैंने पाच पिक्सेल स्प्रेड रेडियस स्प्रेड रेडियस मतलब एक ऐसी वैल्यू जिससे आप बताएंगे आपकी शैडो कितनी स्प्रेड करनी है तो मैंने बोला लेट्स से यहां प मैंने बोल दिया अभी के लिए 20 पिक्सल और मैंने कलर का नाम दे दिया ब्राउन बढ़िया तो मेरी शैडो इतनी स्प्रेड है अगर मैं 20 की जगह 40 करूंगा मेरी शैडो और स्प्रेड कर जाएगी मैं 20 की जगह 40 करूंगा तो और स्प्रेड स्प्रेड करेगी मेरी शैडो 40 की जगह 60 करूंगा और ज्यादा स्प्रेड कर जाएगी मेरी शैडो 60 की जगह 80 करूंगा और ज्यादा स्प्रेड कर जाएगी मेरी शैडो 80 की जगह 100 करूंगा और स्प्रेड करके मेरी शैडो राइट तो आपको x का ऑफसेट समझ में आ गया आपके शैडो लेफ्ट और राइट में मूव करने वाला काम x से होगा y का ऑफसेट आपको समझ में आ गया कि टॉप और बॉटम में मूव करने वाला काम y के ऑफसेट से होगा ब्लर रेडियस आपको समझ में आ गई कलर को हल्का करना कलर में ब्लर इफेक्ट ऐड करना और आपको स्प्रेड रेडियस समझ में आ गई कि इतनी दूर तक आपकी शैडो को आपको लेके जाना है और यहां पर कलर का नाम आपको ऐड करना है ठीक है आप यहां पर चाहे तो कोई आरजीबी फंक्शन या आरजीबी ए फंक्शन का यूज करके भी वैल्यूज ऐड कर सकते हैं ठीक है मैंने बोला 0 0 0 0.7 ऐसा कुछ ले लिया मैंने ठीक है तो कौन सा कलर बन रहा है इससे कोई भी कलर आप बनाना चाहते हैं लेट्स से मैंने बोल दिया यहां पे 13 वैल्यू दे दी मैंने यहां पे 45 दे दी और मैंने यहां पे ऐसा 66 दे तो कौन सा कलर बन गया शैडो का पता नहीं कौन सा कलर बन गया आई थिंक हमने कोई गलती कर दी हो होगी ं ं का कलर नहीं बना पा रहे हैं हम 0.7 लिखना है यहां पे बढ़िया तो ये कलर हमने बना लिया ठीक है और यहां पे हम चाहे तो कोई भी और कलर चूज कर सकते हैं अकॉर्डिंग यहां पर शैडो बन जाएगी ठीक है तो आपके ऊपर है आप आरजीबी का यूज करना चाहो आरजीबी का यूज कर लो आरजीबी अल्फा का यूज करना चाहो आरजीबी अल्फा का यूज कर लो और आपका नेम कलर्स का यूज करना चाहो तो नेम कलर का यूज भी कर सकते हो ठीक है तो तीन सिंटेक्स हमने देख लिए अब शैडो बाहर की तरफ जा रही थी मुझे शैडो को अंदर की तरफ लेके जाने की ट्राई करनी है ठीक है तो मैंने बोला बॉक्स शैडो मैंने बोला इनसेट अंदर की तरफ शैडो आएगी अब मैंने बोला कि 10 पिक्सेल 15 पिक्सेल और कलर दे दिया ब्राउन तो क्या अंदर की तरफ शैडो आ गई बिल्कुल सही ऑब्जर्व कर पा रहे हैं अंदर की तरफ शैडो आ रही है इंसर्ट को यहां से हटा दूंगा तो यह अंदर की तरफ नहीं आएगी बाहर की तरफ जाएगी शैडो इंसर्ट को लगा दूंगा तो आपकी शैडो अंदर की तरफ आ जाएगी चिड़िया कबूतर कौए कुत्ते बिल्ली मगरमच्छ शेर सब अभी बोलेंगे यहां पे ठीक है मैं शूट कर रहा हूं जब टाइम हो रहा है सुबह के 6:00 बज रहे हैं लगातार शूट कर रहे हैं ताकि आपकी कंसिस्टेंसी ब्रेक हो दोस्त ठीक है चलो सुनो चिड़ियों की च चहा चह चहा चहचहाहट चहचहाहट भी सुन लो ये भी काम आएगी तुम्हारे चलो तो हमने चौथा सिंटेक्स भी सीख लिया जहां पर हम शैडो को इनवर्ट देख पा रहे हैं और लास्ट सिंटेक्स क्या है मल्टीपल शैडोज अप्लाई करना चाहता हूं तो मैंने बोला कि एक लाल कलर की शैडो ऐड कर दो एक ग्रीन कलर की शैडो ऐड कर दो कैसे करोगे कॉमा का यूज करके तो मैंने कहा बॉक शैडो पहली कर दी 10 पिक्सल 15 पिक्सल कौन से कलर की रेड कलर की कॉमा लगाया या दूसरी कर दी मैंने 15 पिक्सल और ऐसा आठ पिक्सल और यह ग्रीन कलर की दो शैडो मैंने ऐड कर दी ऑब्जर्व करो देखो लाल वाली शैडो यहां पर दिख रही है और ग्रीन वाली शैडो यहां पर दिख रही है बढ़िया तो ऐसे मल्टीपल शैडोज भी मैं ऐड कर सकता हूं यह भी पॉसिबल है आपने पांचों के पांचों सिंटेक्स जो भी आपके ऑफिशियल डॉक्यूमेंटेशन के अंदर यहां पर लिस्टेड थे सारे के सारे आपने ट्राई करके देख लिए और आपको सब समझ में आ गया आप नॉर्मल शैडो भी ऐड कर सकते हैं एक्स ऑफ शटर ऑफ सेट के साथ ब्लर रेडियस भी ऐड कर ली स्प्रेड रेडियस भी ऐड कर ली इनवर्ट शैडो भी क्रिएट कर ली और मल्टीपल शैडो भी ऐड करनी सीख ली बहुत बढ़िया तो ये सब कुछ हम सीख चुके हैं बॉक्स शैडो हमसे कोई पूछे कि आप लगा सकते हैं तो हमारा जवाब होगा हां जी हां बिल्कुल हम लगा सकते हैं बढ़िया एक और चीज देखते हैं आगे बढ़ने से पहले मैंने बोला कि यहां पर तुम कलर को देख पा रहे हो लेट्स से तुम एक कलर को बहुत जगह यूज कर रहे हो तो बार-बार तुमने ब्राउन कलर यूज कर लिया और आपको बाद में पता लगा कि यार ब्राउन की जगह मुझे कुछ और रेड कलर यूज करना था राइट तो वहां पे वेरिएबल का कांसेप्ट बहुत इंपॉर्टेंट होता है अगर मान लो मैंने एक वेरिएबल के अंदर वेरिएबल मान लो एक ऐसी एंटिटी है एक खाली डब्बा है जिसके अंदर तुमने कोई वैल्यू इंसर्ट कर दी अब किसी ने बोला यार ये वैलू तो गलत है तो आप क्या करोगे उस ब्राउन वैल्यू को निकाल के मरेट डाल दोगे एक जगह चेंज करना पड़ेगा हर जगह चेंज नहीं करना पड़ेगा तो मैंने बोला कि मैं यहां पे एक वेरिएबल क्रिएट कर सकता हूं एग्जांपल के लिए मैंने बोला मैंने बोला ऐसे प्राइमरी कलर प्राइमरी कलर मैंने क्रिएट कर लिया प्राइमरी कलर इ बेसिकली मैंने इसको वैल्यू दे दी ब्राउन की ठीक है ब्राउन की वैल्यू दे दी और जहां पर भी मुझे इस प्राइमरी कलर को यूज करना है बेसिकली इस सिंटेक्स के द्वारा मैं वेरिएबल क्रिएट करता हूं ये जो सिंटेक्स लाइन नंबर 19 पे मैंने लिखा है इसके द्वारा मैं अपना कस्टम वेरिएबल क्रिएट करता हूं ठीक है अगर लेट्स से यहां पे मुझे कोई और विड्थ भी देनी है मैंने बोला जी अ कस्टम विड्थ मैंने देनी है तो मैं वो भी दे सकता हूं मैंने बोला जी यहां पे अ 330 पिक्सल ठीक है तो ऐसे कर एक थर्ड टर्म ये ऐसे करके मैंने अपने दो कस्टम वेरिएबल बना दिए हैं अब लेट्स से मैं यहां पे विड्थ में 330 की जगह 330 वैल्यू यूज़ नहीं करना चाहता ये वाला वेरिएबल यूज़ करना चाहता हूं तो कैसे यूज़ करोगे आपको यहां पर इस प्रकार से राइट डाउन करना है वेयर और आपका वेरिएबल का नाम बढ़िया सेम यहां पे ब्राउन की जगह आप क्या लिखोगे ब्राउन को आप यहां से हटा दो और यहां पे लिखो वेयर और यहां पे कलर का नाम तो इस प्रकार से अपना कस्टम वेरिएबल क्रिएट कर सकते हैं लाइन नंबर 19 और 20 में देख के और इस प्रकार से लाइन नंबर 22 और लाइन नंबर 25 में आप यूज कर सकते हैं ठीक है इस प्रकार से आप यूज़ कर पा रहे हैं बहुत बढ़िया तो कस्टम वेरिएबल वाला कांसेप्ट भी आपने यहां पे थोड़ा सा देख लिया पर अगेन जो कलर मैंने यहां पर क्रिएट किए हैं या फिर जो भी कस्टम वेरिएबल मैंने यहां पर क्रिएट किए हैं वह सिर्फ इन ब्रेसे इन ब्रैकेट्स के बीच में ही यूटिलाइज हो पाएंगे इनके अलावा कहीं और यूटिलाइज नहीं हो पाएंगे अगर कहीं और मुझे यूटिलाइज करने हैं तो मुझे वहां पर फिर दोबारा इनको ऐसे क्रिएट करना पड़ेगा या फिर दूसरा ऑप्शन क्या है क्या कोई ऐसा तरीका है कि मैं इसको सिर्फ एक बार क्रिएट करूं और फिर मल्टीपल जगह जहां मेरा मन करे वहां मैं यूज कर पाऊं हां बिल्कुल है उसके लिए मेरे को यहां पे इसको रूट के अंदर डिफाइन करना पड़ेगा तो मैंने यहां पर इनको रूट के अंदर डिफाइन कर दिया और जब रूट के अंदर डिफाइन करूंगा तो मैं इनको कहीं पर भी यूज कर सकता हूं क्या बात समझ में आती है फटाफट वेरीफाई करते हैं चल रहा है कि नहीं चल रहा अ इसका नाम ब्राउन नहीं रखा हमने इसका नाम हमने रखा हुआ है बढ़िया ठीक है तो क्या चल पा रहा है बिल्कुल चल पा रहा है क्यों अगर नहीं चल पाता तो ये ब्राउन कलर की शैडो नहीं आती बिल्कुल चल पा रहा है ठीक है तो आपने सीख लिया कैसे कस्टम वेरिएबल क्रिएट कर सकते हैं कैसे उनको ऐसी जगह पर डिफाइन करें जहां से हर कोई एलिमेंट उनको एक्सेस कर पाए तो क्रिएशन का तरीका यह रहा एक्सेस करने का तरीका ये रहा और रूट के अंदर डिफाइन करोगे तो कोई भी एलिमेंट उनको एक्सेस कर पाएगा आपके पूरे डोम के अंदर बढ़िया डोम क्या होता है आगे जाके सीखेंगे इसको अभी ठीक है आपके पूरे वेब पेज के अंदर अभी के लिए ये समझ लो ठीक है तो अभी आपको समझ में आ चुका है कैसे आप बॉक्स शैडो क्रिएट कर सकते हो अभी आपको समझ में आ चुका है कैसे आप कस्टम वेरिएबल क्रिएट कर सकते हो सीएसएस के अंदर और अब अगला कांसेप्ट जो हमें सीखना है वो है आपका टेक्स्ट शैडो का टेक्स्ट शैडो का तो टेक्स्ट शैडो के भी यहां पर भिन्न-भिन्न प्रकार के ऑप्शंस आपको यहां पे सामने विजिबल होगा साफ टाफ ठीक है ध्यान से अगर यहां पे देखोगे तो तुम्हें बहुत सारे सिंटेक्स यहां पर भी देखने को मिल रहे हैं ठीक है यहां पे भी x का ऑफसेट होगा यहां भी y का ऑफसेट होगा यहां भी ब्लड रेडियस होगी और यहां भी कलर होगा तो यहां पे स्प्रेड रेडियस वाला पैरामीटर नहीं है स्प्रेड रेडियस के अलावा बाकी बचे हुए चार पैरामीटर यहां पर भी एजिस्ट करते हैं ठीक है तो ऐसा करते हैं वन बाय वन चलते हैं पहला जो आपका सिंटेक्स है वो क्या है एक ऑफसेट वा ऑफसेट ब्लर रेडियस और कलर चलो विदाउट वेस्टिंग एनी टाइम फटा बट इसके ऊपर हेडिंग के ऊपर ट्राई करते हैं तो हमने क्या बोला कि जो भी मेरी ये हेडिंग है पहले तो इस बॉक्स शट को कमेंट कर दो इस बॉक्स के अंदर जो भी टेक्स्ट है उस पर शैडो लगानी है मुझे ठीक है तो मैंने क्या बोला ये जो टेक्स्ट है यह वाला टेक्स्ट ठीक है तो मैंने इसको एक आईडी दे दी मैंने इसको बोला हेड वन ठीक है अब इस आईडी को अपन स्टाइल करेंगे ठीक है हेड वन को अपन स्टाइल कर रहे हैं मैंने क्या बोला कि यहां पर टेक्स्ट शैडो मैंने दे दी मैंने बोला जी टेक्स्ट शैडो और टेक्स्ट शैडो में मुझे सबसे पहले एक्स ऑफसेट ऐड करना है एक्स डायरेक्शन में शड कैसे होगी मैंने बोला कि लेट्स से दो पिक्सल वाय ऑफसेट मैंने बोला तीन पिक्सेल और ब्लर रेडियस मैंने बोला जी अगेन दो पिक्सेल और कलर क्या होगा मैंने बोला वाइट कलर की शैडो तो क्या मैं वाइट कलर की शैडो ऑब्जर्व कर पा रहा हूं दोस्त यहां पे मेरे को तो साफ-साफ दिख रही है तुम बताओ तुम्हें दिख रही है कि नहीं दिख रही मुझे तो बढ़िया दिख रही है यहां पे वाइट कलर की शैडो तुम भी देख लो ठीक है तो इस प्रकार से हमने पहला तरीका देख लिया जहां पर मैं इसको जितना वैल्यू को बढ़ाता जाऊंगा उतना मेरा कलर ब्लर होता चला जाएगा और हल्का होता चला जाएगा एक तो पहले ही वाइट कलर ऊपर से और हल्का करता जा रहा हूं तो मज नहीं आ रहा ठीक है तो इसको मैं हल्का नहीं करता सिर्फ वन पिक्सेल का ब्लर ऐड करता हूं ठीक है और इस ऑफसेट को मैं बढ़ा देता हूं इसको लेट्स से मैंने कर दिया 12 पिक्सल तो ऑफसेट बढ़ गया तो देखो शैडो कितनी दूर निकल के आ गई इसको मैंने बढ़ा दिया और मैंने बोल दिया 13 पिक्सेल तो देखो शैडो कितनी दूर निकल के आ गई राइट देख पा रहे हो वाइट कलर की शैडो तुम्हारी बन रही है तो पहला सिंटेक्स हमने देख लिया जहां पे एक्स ऑफसेट वा ऑफसेट ब्लर रेडियस और कलर ये चार चीजें ऐड की हुई है सेकंड सिंटेक्स देखते हैं पहले कलर है फिर तुम्हारा एक्स ऑफसेट है फिर वा ऑफसेट है और फिर तुम्हारा ब्लर रेडियस है ठीक है ठीक है तो अगेन पहले तुम्हें कलर दिया है फिर एक् का ऑफसेट y का ऑफसेट और ब्लर डिस सेम चीज है ब सिंटेक्स आगे पीछे थोड़ा सा कर दिया ऐसा कुछ डिफरेंस नहीं है ठीक है तो मैंने बोला ठीक है कोई बात नहीं कर लेते हैं इसको हमने कर दिया कमेंट और हम अगला क्रिएट करते हैं मैंने बोला टेक्स्ट शैडो हमने बोला पहले कलर है तो कलर मैंने मार्क कर दिया येलो फिर एक्स का ऑफसेट है लेट्स से मैंने बोल दिया 12 पिक्सेल वा का ऑफसेट है लेट्स से मैंने बोल दिया 13 पिक्सेल और फिर ब्लर मैंने बोला दो पिक्सेल पे ब्लर लगाना तो क्या मैं क्रिएट कर पा रहा हूं येलो कलर की शैडो बिल्कुल कर पा रहे हो एक और सिंटेक्स आपने यहां पर एक्सप्लोर कर लिया अब चलते हैं थर्ड सिंटेक्स पे जो कि क्या कहता है कलर x और y का ऑफसेट बस तीन पैरामीटर के द्वारा ऐड कर रहे हैं तो मैंने कहा ठीक है ये भी ट्राई कर लेते हैं टेक्स्ट शैडो मैंने बोला कलर क्या है कलर मैंने बोला वाइट एक्स ऑफसेट क्या है 12 पिक्सेल वा और वा ऑफसेट है 13 पिक्सेल क्या इससे बन रही है शैडो बढ़िया बन रही है एकदम सही बन रही है मजा आ गया अगला सिंटेक्स देखते हैं अगला है तुम्हारे पास सिर्फ x और y का ऑफसेट ऐड कर दो कलर मत ऐड करो जो भी बाय डिफॉल्ट कलर्स होंगे वो पिक हो जाएंगे मैंने कहा ठीक है तो लास्ट टेक्स्ट शैडो ऐड करने का तरीका फटाफट देख लेते हैं लास्ट तरीका देख लेते हैं फटाफट मैंने बोला टेक्स्ट शैडो मैंने बोला 12 पिक्सेल ये 13 पिक्सेल ये अब बताओ क्या होगा तो बाय डिफॉल्ट हम क्या देख रहे हैं बाय डिफॉल्ट जो आपके शैडो का कलर होता है ब्लैक होता है बड़ा प्यारा एक क्वेश्चन बन सकता है इस पे कि बाय बाय डिफॉल्ट आपके शैडो का कलर क्या होता है तो आपको पता लग गया अभी जस्ट कि बाय डिफॉल्ट आपके शैडो का कलर जो होता है वो ब्लैक कलर होता है यहां पर आप ऑब्जर्व कर पा रहे हो ये मेरा टेक्स्ट है और जो इसके नीचे आप वेलकम टू कोड देख पा रहे हो ये इसकी शैडो बन रही है ठीक है तो अगेन आपने यहां पर सारा का सारा देख लिया कैसे डिफरेंट तरीके से आप बॉक्स शैडो अप्लाई कर सकते हैं ठीक है अगेन डॉक्यूमेंटेशन आप खुद से एक्सप्लोर कर सकते हैं पढ़ सकते हैं आपको और ज्ञान मिल जाएगा जो भी और ज्ञान आप लेना चाहते होंगे और टेक्स्ट शड में भी डॉक्यूमेंटेशन वाइज आप पढ़ना चाहे तो पढ़ सकते हैं हमने सारे के सारे तरीके अप्लाई करके देख लिए हैं ठीक है तो अगेन टेक्स शैडो यहां पे भी इन्होंने कॉमा सेपरेट करके मल्टीपल टेक्स शैडो ऐड कर रखी है तो अगेन ये भी तो मल्टीपल टेक्स शैडो ऐड करना चाहो तो वो भी तुम कर सकते हो उसमें कोई इशू नहीं है ठीक है डॉक्यूमेंटेशन फॉलो करना चाहो तो पढ़ सकते हो दोस्त तुम्हारा बहुत फायदा होगा तुम्हें और इन डेप्थ नॉलेज मिल जाएगी मैं होता तुम्हारी जगह तो मैं डेफिनेटली फॉलो कर रहा होता बढ़िया तो हमने इस वाले लेक्चर के अंदर क्या देखा हमने पढ़ा इस लेक्चर के अंदर शैडोज के बारे में कौन-कौन सी शैडोज हमने सबसे पहले पढ़ा हमारी बॉक्स शैडो के बारे में बॉक्स शैडो पढ़ने के बाद हमने पढ़ा हमारे कस्टम वेरिएबल के बारे में कस्टम वेरिएबल पढ़ने के बाद हमने पढ़ा हमारी टेक्स्ट शैडो के बारे में सारे के सारे डिफरेंट सिंटेक्सेस हमने हैंडल कर लिए एक होमवर्क हम तुम्हें यहां पर दे रहे हैं ठीक है एक होमवर्क हम तुम्हें यहां पर दे रहे हैं मैं बोला होमवर्क में तुम्हें यहां पे मल्टीपल टेक्स्ट शैडोज ऐड करनी है एक टेक्स्ट पर तो रेड ग्रीन ब्लू तीन कलर की मुझे शैडोज ऐड करके दिखाओ वेलकम टू कोड हेल्प वाले टेक्स्ट के ऊपर जो तुम यहां पे भी जो तुम यहां पे भी देख पा रहे हो इस पे रेड की शैडो भी आ जाए येलो की शैडो भी आ जाए और ब्लू की शैडो भी आ जाए तीन शैडो मुझे ऐड करके दिखाओ ये तुम्हारा होमवर्क है ठीक है तो आशा करता हूं समझ में आगा ये प्यारा सा छोटा सा कांसेप्ट ठीक है ज्यादा कुछ था नहीं इसके अंदर छोटा सा ही कोड है कोड वाइज भी कुछ ज्यादा हमने इसमें किया नहीं है पर मुझे लगता है तुम्हें समझ में डेफिनेटली आया होगा तो इस क्लास में इतना ही दोस्त मिलेंगे आपसे नेक्स्ट सेशन के अंदर धन्यवाद एवरीवन बायबाय गुड नाइट लव यू ऑल और गुड नाइट तो नहीं गुड मॉर्निंग हो रही है तुम्हारी अभी टाइम तुम्हारा हो रहा है 6:8 और बस कमेंट सेक्शन के अंदर पक्का बताना कैसे लग रहे हैं लेक्चरर्स ठीक है और आज हम बात करने वाले हैं एनीमेशंस के बारे में बहुत सारे बच्चों के डाउट्स आ रहे हैं मेजर्ली दो कि भैया पहला आपका सीएसएस वाला जो ये पूरा पार्ट है ये कब खत्म होने वाला है तो अभी सीएसएस के नाम टॉपिक्स पढ़े हैं अ टॉपिक को समझने के लिए छोटे-छोटे छोटे-छोटे हमने प्रोजेक्ट क्रिएट किए हैं अभी एक अच्छे लेवल के प्रोजेक्ट हमें क्रिएट करने हैं एटलीस्ट पांच प्रोजेक्ट हम क्रिएट करेंगे सीएसएस की सीरीज के अंदर ठीक है तो ये मान के चलो कि 10 लेक्चर और पेंडिंग हैं जिसके अंदर पांच प्रोजेक्ट हम क्रिएट करेंगे और बाकी पांच कुछ टॉपिक्स हम डिस्कस करने वाले हैं ठीक है तब भी मजा आएगा यार ठीक है बाकी सीएसएस के चैलेंज भी आने वाले हैं एचटीएमएल के चैलेंज भी आने वाले हैं तो वो भी हम बाद में सॉल्व कर रहे होंगे हमारी कोड हेल्प की वेबसाइट पर आपको वो सारे के सारे चैलेंज फ्री ऑफ कोस्ट देखने को मिलने वाले हैं यहां पर सारे चैलेंज आ जाएंगे जब आएंगे तो आपको बता देंगे ठीक है तो पहला पार्ट डन 10 लेक्चर और लगेंगे सीएस खत्म करने के अंदर दूसरा भैया जेएस स्टार्ट कर दो यहीं पे रोक दो यहीं पे रोक दो बेटा ऐसे अगर मैं तुम्हारी बातें सुन सुन के बीच में कोई भी टॉपिक स्टार्ट करने लग जाऊं तो फिर तो यह कंप्लीट फुल स्टैक कोर्स कैसे बोलूं मैं इसको ठीक है तो मेरे को मेरे हिसाब से चलने दो जब जो चीज पढ़ाने होगी मैं तब वो चीज पढ़ा दूंगा मैंने कहा कंप्लीट करेंगे तो कंप्लीट करेंगे बात खत्म सेकंड अगर कोई बच्चा नया है फॉलो कर रहा है इस सीरीज को उसने इस लेक्चर से ज्वाइन किया तो बेटा हमारी पूरी प्लेलिस्ट चल रही है मं स्टैक से वेब डेवलपमेंट की तो इस पूरी की पूरी प्लेलिस्ट को आप एक्सेस कर सकते हैं कोड हेल्प बाय बर चैनल पर आप जाके पूरी प्लेलिस्ट को सेव कर सकते हैं और यहां से सारे के सारी वीडियो उसके वेब डेव क्या होता है फुल स्क डेवलपमेंट क्या होता है बेसिक पढ़े हमने थोट चीजें पढ़ी इंटरनेट कैसे काम करता है आपका विलू कोड आपका एडिटर सेटअप कैसे करें और बाकी सारी की सारी एचटीएमएल के रिलेटेड टॉपिक्स एंड सीएसए के टॉपिक्स आप इस प्लेलिस्ट से एक्सेस कर सकते हैं ठीक है तो अब शुरुआत करते हैं आज के टॉपिक के साथ जिसका नाम है एनीमेशंस एनीमेशंस आपने देखी होंगी बहुत ज्यादा ठीक है हमारे कोड्स के अंदर एनिमेशन नहीं है पर हमारा कंटेंट एनीमेशंस वाले कोर्स से लाख गुना अच्छा है ठीक है शुरू करते हैं तो एनिमेशन क्या होता है हमने बोला कि यार यह मेरा एक है एक ये मेरा एलिमेंट है ठीक है इस एलिमेंट को मैंने एक स्टाइल वन दिया हुआ है ठीक है तो मैंने बोला एक स्टाइल शीट मेरे पास पड़ी है इसको स्टाइल वन मैंने दिया हुआ है ठीक है अब इसी सेम एलिमेंट को मैंने स्टाइल वन हटाकर स्टाइल टू पे शिफ्ट कर दिया तो जब एक एलिमेंट या जब कोई कॉम्पोनेंट आपका किसी एक पर्टिकुलर स्टाइल से दूसरे स्टाइल में शिफ्ट होता है ध्यान सुनो जब आपका एक पर्टिकुलर एलिमेंट या कॉम्पोनेंट किसी पर्टिकुलर स्टाइलिंग से दूसरी स्टाइलिंग में शिफ्ट करता है उस प्रोसेस को मैं एनीमेशन कह देता हूं उस प्रोसेस को मैं एनिमेशन कह देता हूं जैसे एक नॉर्मल सी नॉर्मल सी चीज है यार देखो नॉर्मल सी चीज है हमने बोला कि यार यहां पर एक ये बॉक्स आपने बना रखा है डिव बना रखा है जिसके अंदर आपने ऑरेंज कलर कर रखा है ठीक है अब इसमें स्टार्टिंग में ऑरेंज कलर था अब ग्रैजुअली जैसे ही आपने इसके ऊपर क्लिक किया या इसके ऊपर होवर किया तो इसका कलर ग्रीन हो गया तो एक स्टाइलिंग से दूसरी स्टाइलिंग में ये शिफ्ट हो गया तो मैंने क्या बोला कि भाई ये एनिमेशन है तो सबसे पहला क्वेश्चन जो आपके दिमाग में आया होगा व्हाट इज एन एनिमेशन तो वो आपका क्लियर हो गया होगा कि जब भी मैं कोई एलिमेंट को एक स्टाइल से दूसरे स्टाइल में शिफ्ट कराता हूं तो ये प्रोसेस एनिमेशन कहलाता है ठीक है आगे बहुत सारी चीजें पढ़ेंगे यार इस सीरीज के अंदर हम पढ़ेंगे ट्रांजिशंस के बारे में ट्रांसफॉर्म्स के बारे में डी ट्रांसफॉर्म्स के बारे में 3डी ट्रांसफॉर्म्स के बारे में जी इंडेक्स के बारे में विजिबिलिटी के बारे में की फ्रेम्स के बारे में बहुत सारी चीजें पढ़नी है मजा आएगा थोड़ा पेशेंस बना के रखो यार हर बार कमेंट में सेम चीज मत बोलो भैया सीएसएस खत्म कर दो खत्म कर दो कर तो रहे हैं हर दिन तो लेक्चर ला रहा हूं अब तुम चाहते हो फॉर्मेलिटी कर दूं कि फटाफट खत्म करने का काम करूं तो बात अलग है अगर तुम मजे मजे में सीख सीख के करना चाहते हो आगे बढ़ना चाहते हो तो ठीक है वैसे कर लेते हैं फॉर्मेलिटी वाइज खत्म करना है तो प्रोजेक्ट करवाता सिंपल ऐसे टॉपिक पढ़ाता हूं निकल जाता हूं आगे मुझे ढंग से पढ़ाने दो यार यह वीडियो सिर्फ आज के लिए नहीं बन रही है कि आज बच्चा आज उन्होंने देख लिया यह वीडियो सालों तक चलेंगी दोस्त सालों तक लोग इनसे देखेंगे ठीक है तो अच्छे से बना लो दिल खोल के अच्छे से मतलब ऐसा कुछ रिस्ट्रिक्शन के साथ बनाऊंगा तो मजा नहीं आएगा राइट शुरू करते हैं एनीमेशंस की बात करते हैं तो हमने कहा चलो फटाफट डॉक्यूमेंटेशन की तरफ चलते हैं दो वेबसाइट्स हैं इनको आप फॉलो कर सकते हैं आप एमडीएन ऑफिशियल डॉक्यूमेंटेशन यहां पर है आप चाहे तो यहां पर एनिमेशन के बारे में जाकर पढ़ सकते हैं 50 चीजें आपको देखने को यहां पर मिल जाएंगी ठीक है यहां पर हम देख रहे हैं सर्कल जो है वो कैसे लेफ्ट में आके मूव कर रहा है ऐसे राइट टू लेफ्ट मूवमेंट कर रहा है इसको हमने क्या दिया एक प्रकार की एनिमेशन यहां पर चल रही है ठीक है यहां पे सीएसएस एनिमेशन w3 स्कूल्स में आप जाएंगे तो यहां पर भी आपको एक अच्छी डॉक्यूमेंटेशन ट्यूटोरियल वेबसाइट है वैसे ही बट ठीक है इसमें से भी आप पढ़ सकते हैं अ आपके सारे की सारी चीजों के बारे में की फ्रेम्स के बारे में बात हो रही है तो मैंने बोला वो जो एक स्टाइल से दूसरे स्टाइल में शिफ्ट हो रहा है ना तो उसकी इंफॉर्मेशन स्टोर करता है की फ्रेम कि अच्छा फ्रॉम दिस स्टाइल टू दिस स्टाइल वी नीड टू शिफ्ट तो वो की फ्रेम के अंदर आप रूल डिफाइन कर रहे होते हो ठीक है जैसे यहां पर लिखा हुआ है ये की फ्रेम आपने बनाया और आपने बताया फ्रॉम यानी यहां से टू यहां तक जाना है तो इस स्टाइलिंग से मुझे इस स्टाइलिंग तक जाना है इस नाम की एनिमेशन के अंदर दोबारा सुनो एग्जांपल नाम की एनिमेशन के अंदर इस स्टाइल से इस स्टाइल तक शिफ्ट करना है समझ में आया बढ़िया तो इसे करेंगे पूरा भी कोड करेंगे समझ में आएगा और अच्छे से आएगा तो एक बार चलो चलते हैं हमारी कोड विंडो के ऊपर और वहां पर सीखते हैं कैसे कैसे क्या-क्या हम कर सकते हैं बहुत बढ़िया तो हम आए यहां पर मैंने जी मेरे को तो पहले आप एक लेक्चर 23 का फोल्डर बना के दे दो लेक्चर 23 और लेक्चर 23 के अंदर हमने क्या किया हमने एक फाइल क्रिएट कर ली इक्सड स्लिंग करनी शुरू कर दी साथ साथ करते चलेंगे ठीक है तो मैंने बोला कि फटाफट स्टाइल टैग का यूज करें और स्टाइल टैग के अंदर हमने ऐड कर दिया डॉट कंटेनर मैंने बोला इसकी जो विड्थ है ना बेटा वो दे दो 100 बी एच सॉरी डब् एंड इसकी जो हाइट है ना इसकी जो हाइट है वो दे दो 100 बीएच बहुत बढ़िया इसका एक बैकग्राउंड कलर दे दो जो कि हमने बोल दिया बेज ठीक है इतना करके जो है हमने इसको फटाफट से गो लाइव कर दिया और चेक करते हैं यई प क्या बनता है ठीक है ऐसा कुछ बन रहा है अभी ऐसा करता हूं बॉर्डर भी अप्लाई कर देता हूं इसके ऊपर मैंने बोला जी बॉर्डर ऐसा फाइ पिक्सल सॉलिड ब्लैक अब कैसा दिख रहा है अब ऐसा दिख रहा है मजा नहीं आ रहा भैया मजा नहीं आ रहा है अभी तो हमने क्या बोला हमने बोला कि इसके अंदर ना जो आपके यूनिवर्सल सिलेक्टर के अंदर आप सेट कर दें अपने मार्जिंस को और अपनी पैडिव ठीक है तो अब ऐसा दिख रहा है कुछ कुछ ठीक है मैंने ऐसा ही बोल दिया कि यार ये ओ फलो कर रहा है थोड़ा सा एक्स डायरेक्शन के अंदर तो मैं चाहता हूं ओवरफ्लो ना करे ये मैं चाहता हूं य ओवरफ्लो ना करे तो मैंने क्या बोल दिया कि ऐसा करता हूं पहले बॉक्स साइजिंग बॉटर बॉक्स कर देता हूं ठीक है बढ़िया तो अब अब यह ऐसा दिख रहा है बढ़िया ओवरफ्लो हट चुका है सुंदर दिख रहा है बढ़िया तो यह हमारा एक कंटेनर बन चुका है और मैंने क्या बोला इस कंटेनर के अंदर मेरे को क्या चाहिए मेरे को चाहिए लेटस से मैं एक बॉक्स बनाता हूं लेट से मैं एक बॉक्स बनाता हूं तो मैंने एक बॉक्स बना दिया इस कंटेनर के अंदर मैंने बोला डॉट बॉक्स और मैंने य बॉक्स की कॉन्फिन ऐड कर दी फटाफट डॉट बॉक्स मैंने स्टाइल कर दिया इसको मैंने बोला जी इसकी विड्थ जो है वो है जी ऐसा 350 पिक्सेल और मैंने बोला इसकी जो हाइट है वो है जी ऐसी 80 पिक्सल ठीक है तो ऐसे विड्थ और हाइट हमने डिफाइन कर दी मैंने बोला इसका बीजी कलर जो है बीजी कलर हमने दे दिया यहां पर ब्लू बहुत बढ़िया मैंने बोला इसकी बॉर्डर रेडियस इससे दिखाएंगे आपको बॉर्डर रेडियस क्या होता है अभी समझाएंगे समझा रखा होगा वैसे बॉर्डर वाले लेक्चर के अंदर आपको तो बॉर्डर रेडियस देके हम इसको कॉर्नर्स को राउंडेड कर सकते हैं 10 कन राउंड कर दिया मैंने ठीक है य चेक करते हैं कुछ आ रहा है ऐसा बढ़िया आ गया अभी बहुत ज्यादा बड़ा साइज है छोटा करेंगे बढ़िया कुछ मार्जिन और पडि फटाफट से ऐड करते तो मैंने बोला इसमें मार्जिन हमने ऐड कर लिया 10 पिक्सल टाइप्स और चेक कराओ यई प बढ़या अब सही लग रहा है इसमें एक बॉर्डर भी ऐड कर लो मैं तो कहता हूं बर्डर ऐड कर लो न पिक्सल सॉलिड लो कैसे बन गया दिख ही नहीं रहा ऐसे करो टू पिक्सल कर लो भाई थ्री कर लो ठीक है अब ठीक है तो ऐसा कुछ कुछ बन रहा है बहुत बढ़िया मैंने बोला यहां पर ये नजर आ रहा है तो अभी तक हमने क्या किया हमने पेरेंट कंटेनर बना दिया जो कि आपको बेज कलर का दिख रहा है और हमने एक चाइल्ड बॉक्स बना दिया जो कि आपको ब्लू कलर का दिख रहा है ठीक है ये दो चीजें करी है और मैंने क्या कहा मैंने क्या कहा कि मैं ना इस इस बॉक्स को मूव करवाना चाहता हूं मैं इस बॉक्स को यहां से यहां और यहां से यहां मूव करवाना चाहता हूं चलो ठीक है यह बात समझ में आती है तो मैंने बोला कि एक एनीमेशन क्रिएट करते हैं फटाफट तो इस बॉक्स के अंदर एक एनिमेशन क्रिएट करते हैं तो मैंने बोला जी ठीक है एनिमेशन क्रिएट करते हैं तो एनिमेशन के लिए बहुत सारे यहां पर आपके पास प्रॉपर्टीज आ रही है तो मैंने सबसे पहले एनिमेशन नेम रख दिया एनिमेशन नेम रख दिया मैंने मूवमेंट ठीक है मूवमेंट नाम की एनिमेशन रख दी मैंने या फिर इसका नाम रख दिया मैंने राइट मूवमेंट तो यहां पर मैंने ऐड कर दिया एनिमेशन नेम राइट मूवमेंट और मेरे पास यहां पर भिन्न-भिन्न प्रकार की प्रॉपर्टीज है एनिमेशन क्रिएट करने के लिए मैं की फ्रेम ऐड कर सकता हूं नेम ऐड कर सकता हूं ड्यूरेशन ऐड कर सकता हूं डिले ऐड कर सकता हूं वगैरह वगैरह बहुत चीजें हैं हर किसी के बारे में अभी सीखेंगे ठीक है पढ़ा के भेजेंगे आपको तो अभी फटाफट की फ्रेम्स क्रिएट करते हैं जहां पर मैं बताता हूं कि मेरी सोर्स स्टाइलिंग क्या होगी और मेरी डेस्टिनेशन स्टाइलिंग क्या होगी जहां से मैं शिफ्ट करने वाला हूं तो मैंने फटाफट यहां पे क्या किया की फ्रेम यूज कर लिया और की फ्रेम यूज़ करके मैंने यहां पर आइडेंटिफिकेशन होगी स्टाइलिंग की वह इस की फ्रेम के अंडर आपने ऐड कर रखी है ठीक है तो मैंने बोला कि यहां से इस स्टाइलिंग से कि स्टाइलिंग तक जाना चाहते हैं फ्रॉम दिस सोर्स स्टाइलिंग मैं कहां पे स्विच करना चाहता हूं टू दिस डेस्टिनेशन स्टाइलिंग तो इस प्रकार सिंटेक्स है फ्रॉम के अंदर आप बताएंगे आपकी इनिशियल स्टेट क्या है टू के अंदर आप बताएंगे आपकी डेस्टिनेशन स्टेट क्या है ठीक है तो मैंने क्या बोला मैंने क्या बोला कि यहां पर मैं अपनी स्टेट्स दर्शा दूंगा बहुत बढ़िया तो अभी मैंने क्या कर दिया अभी मैंने क्या कर दिया मैं चाहता हूं जो मेरा ये बॉक्स है आप यहां पर देख पा रहे हैं ठीक है मेरा टारगेट यह है कि मैं इस बॉक्स को मैं इस बॉक्स को इनिशियल इस पोजीशन से स्टार्ट करूं और मूव करवाता करवाता करवाता इसको यहां पर ले आऊ यह मेरा टारगेट है कि यहां पर ये मेरा बॉक्स है एनिमेशन जैसे स्टार्ट हो यह बॉक्स मूव करे इस डायरेक्शन के अंदर और मूव करता करता करता करता यहां पर आके रुक जाए ऐसा कुछ कुछ प्लान किया है हमने ठीक है जी तो इस की फ्रेम के अंदर हम ऐड करेंगे कॉन्फिन उससे पहले यहां पर इसकी पोजीशन जो है वो रिलेटिव मार्क कर देते हैं ठीक है ताकि हम टॉप लेफ्ट राइट बॉटम वाली प्रॉपर्टीज है उनको यूज कर पाए तो मैंने बोला कहां से स्टार्ट हो रहा है म ये स्टार्ट हो रहा है आपका टॉप जीरो से और आपका लेफ्ट जीरो से बढ़िया तो टॉप लेफ्ट कॉर्नर से आप इसको स्टार्ट कर रहे हैं और कहां तक लेके जाना चाहते हैं आप इसको मैंने बोला मैं इसको लेके जाना चाहता हूं टॉप जीरो से लेफ्ट ऐसा 1200 पिक्सल ठीक है तो ऐसा कुछ कुछ मैंने ऐड कर दिया बढ़िया तो फ्रॉम दिस सोर्स पोजीशन टू दिस डेस्टिनेशन पोजीशन हम इसको मूव करवाना चाहते हैं बहुत बढ़िया एनिमेशन नेम मैंने यहां पर लिख दिया अब और प्रॉपर्टीज की बात करते हैं मैंने बोला कि यहां से यहां तक जाने में कितना टाइम लगेगा फ्रॉम दिस स्टाइलिंग टू दिस स्टाइलिंग मूव करने में या शिफ्ट करने में स्विच करने में कितना टाइम लगेगा वो हम ऐड करते हैं एनिमेशन ड्यूरेशन नाम की प्रॉपर्टी से मैंने बोला कि सोर्स से इस डेस्टिनेशन तक एनिमेशन कंप्लीट करने का टाइम मैंने ले लिया 5 सेकंड बहुत बढ़िया मैंने बोला कितनी बार एनिमेशन करवाना चाहते हो एनिमेशन एक बार करूं दो बार करूं तीन बार करूं चार बार करूं पांच बार कितनी बार करूं तो अभी के लिए मैंने क्या बोला कि अभी के लिए मैंने एनिमेशन आइट काउंट कितने बार एनिमेशन करना चाहते हो मैंने बोला दो रख दिया कि दो बार करना चाहता हूं मैं चलो ये बात भी समझ में आती है मैंने बोला एनिमेशन स्टार्ट होने से पहले कितना डेले रखूं कितना टाइम रुकूं एनिमेशन स्टार्ट करने से पहले तो मेरे पास एक प्रॉपर्टी यहां पे एनीमेशन डिले करके मैंने बोला कि ऐसा करो 2 सेकंड रुक जाना ठीक है तो ये कुछ प्रॉपर्टीज हमने ऐड करी अभी नेम बता दिया एनिमेशन का जिसके अकॉर्डिंग ली आपने की फ्रेम असाइन कर दिए आपने ड्यूरेशन बता दी एनिमेशन कितने टाइम तक चलनी चाहिए आपने इटरेशन काउंट बता दिया कि भाई कितनी बार एनिमेशन परफॉर्म कर र है और एनिमेशन डिले एनिमेशन स्टार्ट करने से पहले कितना टाइम मुझे रुकना है इसको फटाफट से एक बार देखते हैं यूआई पे क्या बना ऑब्जर्व कर पा रहे हो दोस्त जो हमने प्लान किया था भै गड़बड़ है ये देखो यहां से तेज चलता है फिर यहां पे आके स्लो हो जाता है ऐसा क्यों हो रहा है मैंने कहा क्योंकि आपके पास ना एक प्रॉपर्टी और होती है जिसका नाम होता है है एनिमेशन टाइमिंग फंक्शन अब एनिमेशन टाइमिंग फंक्शन क्या होता है इसके अंदर बहुत सारी वैल्यूज आपके पास होती है और हर वैल्यू जो है डिफरेंट स्पीड कर्व को दर्शाती है हर वैल्यू एक डिफरेंट स्पीड कर्व को दर्शाती है मैं एक बार दिखा देता हूं ठीक है तो ये आपके पास बहुत सारी वैल्यूज है जिससे आप डिफरेंट स्पीड कर्व्स बना सकते हैं स्पीड कर्व का मतलब क्या है कि आपने शुरुआत बहुत तेजी से की पर डेस्टिनेशन तक पहुंचते पहुंचते आप स्लो हो गए या फिर उल्टा कि शुरुआत आपने स्लो की पर डेस्टिनेशन आप बहुत जल्दी पहुंच गए या फिर एक और चीज कि शुरुआत तेज की बीच में स्लो हुए फिर तेजी से डेस्टिनेशन तक पहुंच गए वैसे डिफरेंट प्रकार के आपके पास डिफरेंट टाइप के आपके पास वैल्यूज पड़ी हैं ईज मतलब नॉर्मली आप जा रहे हो स्लो स्टार्ट फास्ट एंड देन एंड स्लोली जो मैंने आपको बताया स्लो देन फास्ट देन स्लो लीनियर मतलब सेम स्पीड से आप पहुंच रहे हो स्टार्ट से एंड तक ठीक है इज इन का मतलब क्या आपने स्टार्ट स्लो किया था ईज आउट का मतलब आपने एंड स्लो किया था ईज इन आउट का मतलब स्लो और स्लो स्टार्ट और स्लो एंड की बात यहां पर हो रही है ठीक है और ये बेजर कर्व ये आप खुद से क्रिएट कर सकते हैं ठीक है खुद से आप क्रिएट कर सकते हैं अपने हिसाब से जो भी आप अ स्पीड चाहते हैं जैसा भी टाइमिंग जैसा भी स्पीड फंक्शन आप चाहते हैं स्पीड कब आप चाहते हैं आप क्रिएट कर सकते हैं अ आपको करके दिखाएंगे ये भी ठीक है तो अभी इन वैल्यूज का यूज़ कर सकते हैं अभी के लिए मैंने क्या बोला मैं लीनियर टाइमिंग फंक्शन यूज करना चाहता हूं ताकि मेरी स्टार्ट की जो स्पीड है ना और एंड की स्पीड है एगजैक्टली इक्वल हो अब तो हमने यहां पे ऐड कर दिया एनिमेशन टाइमिंग फंक्शन अब चेक करते हैं यूआई पे क्या हो रहा है तो यूआई पे जाके हमने एक बार रिफ्रेश कर दिया एक सेकंड का डिले और स्टार्ट हो गया बढ़िया तो देखो अब स्पीड ऑफ मूवमेंट बिल्कुल स्टार्टिंग में जैसे स्लो स्पीड जैसे सेम स्पीड से स्टार्ट हुआ था उसी स्पीड पे आपका एंड की तरफ जा रहा है बीच में कहीं पर भी भी तेज नहीं हुआ बीच में कहीं पर भी स्लो नहीं हुआ तो ये लीनियर आपका जो फंक्शन है वो दर्शाता है अब लेट्स से मैंने बोला होता ईज इन इज इन से स्लो स्टार्ट होता पर फास्ट एंड होता चेक करते हैं देखो धीरे स्टार्ट होगा धीरे स्टार्ट होगा पर आगे बहुत तेजी से बढ़ रहा है राइट कंपैरेटिव बढ़िया ऐसे अगर मैं कहता इज आउट तो शुरुआत जो होगी वो तेजी से हो जाएगी पर एंड स्लो होगा ठीक है अब ये शुरुआत तेजी से होगी इसकी पर एंड स्लोली हो रहा है राइट इस प्रकार से आप करने वाले हैं और और क्या-क्या चीजें मेरे पास अवेलेबल है बेजर कर की हम बात कर रहे थे ठीक है बेजर की हम बात कर रहे थे एक बार इसको ट्राई कर लेते हैं ठीक है इसको हमने कॉपी कर लिया और हमने बोला कि यार एक बेजर का मैं क्रिएट करना चाहता हूं तो अभी तो मुझे कुछ आईडिया नहीं है कैसे क्रिएट करते हैं तो अभी मैंने कॉपी पेस्ट कर दिया और हमने यहां पे वैल्यूज ऐड कर दी लेट्स से मैंने बोला 0.1 0.7 0.1 0.6 ऐसा करके बेज का ऐड कर दिया ठीक है मुझे नहीं पता क्या बनेगा इससे मैंने रैंडम वैल्यूज ऐड करी यहां पे फटाफट चेक करते हैं यूआई पे क्या हो रहा है तो ऐसा कुछ कुछ चल रहा है बढ़िया तो हमने क्या किया फटाफट इंस्पेक्ट किया इसको और हम गए यहां पर इसके पास हमने बोला बेजर कर्व क है ये रहा बेजर कर्व और यह कुछ सही नहीं है तो हमने क्या किया हम चलते हैं यहां पर और यहां पर फटाफट सर्च कर लेते हैं हमने बोला कि अपने को चाहिए बेजर कर्व ठीक है तो फटाफट एक बार सर्च करते हैं हमने बोला [संगीत] क्यूबिक [संगीत] हां क्यूबिक बेजर हमने सर्च कर लिया और ये आ गया आपका क्यूबिक पेजर बढ़िया तो इस प्रकार से एक हमारे पास सैंपल ये आ चुका है एक बार फटाफट इसको चेक कर लेते हैं और हमने यहां पर ऐड कर दिया आई थिंक हमने कोई वैल्यू में गलती कर दी है एक बार भी समझ में आ जाएगा ठीक है ऐसा कुछ कुछ कर दिया अब u आई पर चेक करते हैं अब बढ़िया चल रहा है राइट तो देखो यहां पर तुम्हारे पास जैसे तुमने रैंडम एक बेज कव ऐड कर दिया अब अगर मैं इस सिंबल के ऊपर क्लिक करूंगा तो मेरे पास बहुत सारे ऑप्शन आ रहे है अपने बेज जगह को चेंज करने का ठीक है अगर मैं चाहता हूं कि मेरी स्पीड जो है वो स्टार्टिंग में बहुत तेज हो और फिर ऐसे वो बाद में ऐसा स्लो हो जाए तो ऐसे करके मैंने एक वेजग ऐड कर दिया है और इसको मैं अप्लाई कर सकता हूं अब ठीक है इसको मैंने अप्लाई कर दिया देखते हैं क्या होता यहां पे इसको आइट काउंट को मैंने क्या कर दिया आइट काउंट का मैंने यहां मार्क कर दिया इनफिट ठीक है अब ये इनफिट टाइम चलेगा ठीक है ऐसा कुछ कुछ बन गया ये ठीक है तो हमने जो बेज काव क्रिएट किया था हमने जो बेजर कव क्रिएट किया था उसके आधार पर इस प्रकार से चल रहा है ये ठीक है तो ऐसे आप चाहो तो बेजर कव के द्वारा भी अपने कोड को रन कर सकते हैं मैं एक बार फिर से आपको दिखा देता हूं इंस्पेक्ट किया हमने हम गए इस वाले एलिमेंट के पास ये रहा हमारा बेजर कर्व और मैंने इसको ऐसे चेंज कर लिया सिंपल मैंने बोला कि इसको मैं ऐसा चाहता हूं देखो यहां पर आपको दिखाएगा अभी क्या स्पीड रहने वाली है मैंने इसको ऐसे कर दिया बिल्कुल ऐसे तो इससे क्या होगा इससे ऐसे चलेगा शक करके जाएगा ठीक है बढ़िया न माइन 0.41 और वन बढ़िया तो ये हमारी वैल्यू हो गई ठीक है और इसको एक बार ना चेक करते हैं चला के हमने इसको कॉपी कर लिया एक बार और फटाफट इसको वेरीफाई कर लेता हूं यहां पर ड करके ई पर चेक करते हैं फटाफट कैसे चल रहा है देखो पीछे गया थोड़ा सा और फिर एकदम शुक करके वेरी गुड तो इस प्रकार से आपका काम चल रहा है आपको समझ में आगा बेशक कैसे आप ड कर सकते हैं हिडन ट्रायल वाली गेम है ठीक है वैल्यू याद नहीं रख सकते जैसे मुझे भी याद नहीं था यहां पे क्या वैल्यू इंसर्ट करनी है बट हां हिडन ट्रायल कर करके आप फाइंड आउट कर सकते हैं और इंटरनेट का रिफरेंस आपके हमेशा रहेगा तो आप उसको यूज़ करके बेज कव क्रिएट कर सकते हैं बहुत बढ़िया तो अभी तक हमने क्या सीखा एनिमेशन नेम एनिमेशन ड्यूरेशन एनिमेशन इन इटरेशन काउंट दो की जगह मैंने बोला कि मैं इसको इफना टाइम चलाना चाहता हूं ठीक है डिले मैंने एक सेकंड का रख दिया इसको मैं कमेंड कर देता हूं मुझे कोई डिले नहीं चाहिए स्टार्ट कर दो जैसे ही मैं तुम्हारी स्क्रीन के ऊपर आऊं और टाइमिंग फंक्शन मैंने यहां पे अपना लीनियर रख दिया कि भाई मैं तो लीनियर चलाना चाहता हूं बहुत बढ़िया अब देखते हैं यई पे क्या हो रहा है अब यूआई पे नॉर्मली चलता रहेगा ठीक है बार-बार बार-बार चलता रहेगा बहुत बढ़िया अब पर ये तो यहां पे जाता है कट हो जाता है देखो यहां पे जाके कट हो रहा है और फिर यहां पे आ रहा है मतलब कट नहीं होहुआ ना भाई यहां से वापस आओ मतलब अभी अभी क्या हो रहा है बिहेवियर क्या शो हो रहा है यहां पे क्या हो रहा है अभी बिहेवियर में ये जो बॉक्स है यहां से यहां तक मूव करता है यहां पहुंचता है फिर यहां से एकदम गायब हो जाता है और फिर दोबारा यहां पे आता है मैंने कहा ऐसे नहीं ना यहां से जाओ यहां तक ऐसे फिर यहां से वापस आओ यहां तक ऐसे और फिर यहां से वापस जाओ यहां तक ऐसे एक इनफिट लूप में आप ऐसे बार बार बार बार रिजॉल्व करते रहो ठीक है मैंने कहा और क्या क्या ऑप्शन थे मेरे पास चेक करते हैं एक बार क्या मेरे पास कोई और प्रॉपर्टी है जिसके द्वारा मैं कर सकता हूं यह हो गया यह हो गया हो गया एनिमेशन डायरेक्शन की बात हो रही है डायरेक्शन में देखते हैं क्या होता है एनिमेशन डायरेक्शन चलो हम गए यहां पर और मैंने बोला डायरेक्शन की बात करते हैं एनिमेशन डायरेक्शन क्या लिखा हुआ है तो हमने यहां पे एनिमेशन लिख दिया और मैंने बोला कि अल्टरनेट देखते हैं अल्टरनेट से क्या होगा तो अल्टरनेट पर लिखा ये क्या हुआ ये आगे तक गया और वापस आ गया बढ़िया तो पहली बार में हमारा गेम बिल्कुल सही चल रहा है अल्टरनेट चल रही है अंदर बाहर अंदर बाहर इस प्रकार से आपका ये चल रहा है आपने देखा होगा आपने कैथोड रे ट्यूब वाली जो गेम होती थी टीवी में जहां प ऐसे दो ये चला करती थी और बीच में एक सर्कुलर बॉल होती थी और आप ऐसे टक टक करके खेलते थे तो बेसिकली मैं ऐसी गेम की बात कर रहा हूं जो कि कुछ ऐसी दिखा करती थी अ कि आपके पास आपके पास एक रेक्टेंगल यहां पर पड़ा हुआ है एक रेक्टेंगल यहां पर पड़ा हुआ है और बीच में एक बॉल है सर्कुलर और आप इन रेक्टेंगल को मूव कर रहे हो ताकि इस बॉल्स को बॉल को आप बाहर ना जाने दो ऐसे करके वो गेम हुआ करती थी पता नहीं आपने खेली होगी नहीं खेली होगी पर आज खेल लेना बढ़िया तो हमने सीख लिया कि एनिमेशन डायरेक्शन से आप डायरेक्शन कंट्रोल कर सकते हो और क्याक ऑप्शन थे मेरे पास यहां पे मेरे पास ऑप्शन था यहां पे रिवर्स का तो रिवर्स से क्या होगा रिवर्स से क्या होगा यहां से तुम सोर्स से डेस्टिनेशन जा रहे था नॉर्मल केस में यहां प उल्टा चलता है डेस्टिनेशन से सोर्स आ रहे होते ठीक है ये उल्टा चल रहा हो डेस्टिनेशन सोर्स चल रहे हो तो अब मैं बोलूं अल्टरनेट रिवर्स तो अल्टरनेट में अगेन सोर्स से डेस्टिनेशन डेस्टिनेशन सोर्स ऐसे चल रहा था तो अल्टरनेट रिवर्स से आपका उल्टा हो जाएगा कि आप डेस्टिनेशन से सोर्स आ रहे हो और सोर्स से डेस्टिनेशन जा रहे हो इस प्रकार से आपकी डायरेक्शन डिसाइड हो जाएगी राइट बढ़िया तो इस प्रकार से आपकी गेम चल रही है आप ऐसे डायरेक्शन भी ऐड कर सकते हैं और क्या-क्या ऑप्शंस अवेलेबल है मेरे पास मैंने बोला और हमारे पास टाइमिंग फंक्शन फिल मोड की बात कर लेते हैं एक बार कि फिल मोड से क्या होगा मैंने क्या कहा मैंने एक चीज कही आपको कि हम अपने कोड के अंदर हम अपने कोड के अंदर ना बस यहां तक डिफाइन कर पा रहे हैं अभी तक अभी जो एनिमेशन हमने राइट डाउन करी है उस एनिमेशन के अंदर हमने फर्स्ट फ्रेम डिफाइन कर दिया हमने लास्ट फ्रेम डिफाइन कर दिया और हमारी जो एनिमेशन है यहां से यहां तक मूव कर रही है यहां से यहां तक मूव कर रही है ठीक है बहुत बढ़िया बात है फिल मोड का यूज करके इस फर्स्ट फ्रेम से पहले क्या करना है और इस लास्ट फ्रेम के बाद क्या करना है यह आप डिसाइड कर सकते हैं ठीक है फर्स्ट फ्रेम से पहले और लास्ट फ्रेम के बाद क्या करना है या फिल मोड से डिसाइड कर सकते हैं फटाफट चलते हैं फिल मोड की तरफ और देखते हैं यहां पर डॉक्यूमेंटेशन क्या कहती है ठीक है तो यह आ गया जी हमारा फिल मोड और यहां आप यहां पे ध्यान से ऑब्जर्व कर पा रहे हैं कि फिल मोड क्या दर्शाता है कि जब भी आपका फर्स्ट फ्रेम से पहले वाली फर्स्ट की फ्रेम से पहले वाली गेम है जो लास्ट की फ्रेम के बाद वाली गेम है उस गेम में क्या करना है लेट्स से मैंने बोला कि लेफ्ट से राइट जा रहा है उसके बाद क्या करना है राइट जक पहुंच गया राइट पहुंचने के बाद क्या करना है मैंने बोला राइट में ही रुक जाओ तो राइट में ही रुक जाओ कैसे होगा ये मैंने बोला कि अभी अगर मैं फटाफट यहां पे जाऊं इसको इफट की जगह वन टाइम कर दूं ठीक है वन टाइम कर दूं और इसको मैं भी कमेंट कर दूं ठीक है तो कैसे चली गई एनिमेशन मेरी यहां से जाके राइट तक पहुंच जाएगी ठीक है राइट तक पहुंची बढ़िया और वापस यहां प आके बैठ गई ठीक है अब मैंने बोला मुझे राइट में ही इसको रोकना है तो एनिमेशन फिल मोड का यूज करके मैं इसको राइट में ही स्टॉप कर पाऊंगा एनिमेशन फिल मोड मैंने बोला फॉरवर्ड अब क्या होगा राइट में जाके रुक जाएगा ये राइट तक तक जाएगा और रुक जाएगा ये गया राइट में और स्टॉप कर गया ये है एनिमेशन फि मोड कि लास्ट फ्रेम के बाद क्या करना है अब लेट्स से मैंने बोला फॉरवर्ड तो मुझे नहीं करना मेरे पास और कोई ऑप्शन नहीं है बैकवर्ड्स टाइप तो मेरे पास बैकवर्ड है यानी के ये लास्ट तक जाएगा पर वापस यहीं पर सोर्स पोजीशन पर आके ही रुक जाएगा वापस सोर्स पोजीशन आके रुक जाएगा रुक गया जो कि आपका डिफॉल्ट बिहेवियर भी है राइट तो ऐसे करके मैं चाहूं तो फर्स्ट फ्रेम से पहले और लास्ट फ्रेम के बाद मुझे करना है वो मैं डिसाइड कर सकता हूं ठीक है डिफॉल्ट वैल्यू वगैरह वगैरह बोथ ठीक है तो बोथ भी आप अप्लाई कर सकते हैं मुझे होमवर्क अपना कमेंट सेक्शन के अंदर बताएंगे कि बोथ से क्या होगा ये आपका होमवर्क है कमेंट सेक्शन में फिल करके जाना कि भैया इससे क्या होता है हमने क्या देख लिया अब तक एनिमेशन नेम की फ्रेम्स ड्यूरेशन डिले आइट काउंट टाइमिंग फंक्शन डायरेक्शन और फिल मोड और देखते हैं हमारे पास क्या है और देखते हैं क्या है हमारे पास हमने कहा कि ये सारा का सारा हो गया और ये एक शॉर्ट हैंड नोटेशन है एनीमेशन वाली इसके बारे में बात करेंगे अभी चलते हैं वापस एमडीएन के ऊपर एमडीएन में देखते हैं हमारे पास क्या-क्या अवेलेबल है तो हम यहां पे गए हमने बोला कि नेम हो गया ड्यूरेशन हो गया टाइमिंग फंक्शन डिले आइट काउंट डायरेक्शन फिल मोड प्ले स्टेट प्ले स्टेट से क्या होता है आप प्ले स्टेट से पॉज कर सकते हैं अपनी एनिमेशन को ठीक है जैसे सर्कल है ठीक है अभी पॉज स्ट्रेट में है अभी आपने पॉज कर रखा है पर जैसे ही मैं रेटिंग में क्लिक करूंगा तो ये एनिमेशन रन हो जाएगी ठीक है उतना यूज़ अभी तो आपको समझ नहीं आएगा इसका पर जब अपना प्रोजेक्ट के अंदर इसको यूज़ करेंगे तो आप इसको भी अप्लाई कर सकते हैं ठीक है तो ये बात समझ में आती है फटाफट चलते हैं हमारी शॉर्ट हैंड नोटेशन की तरफ कि लेट्स से मैं इतना सारा कोड लिखना ही नहीं चाहता डिफरेंट डिफरेंट प्रॉपर्टीज के द्वारा मैं सिंपल शॉर्ट हैंड नोटेशन का यूज करना चाहता हूं तो वो वो कैसे होगा वो बता दो मैंने कहा ठीक है तो फटाफट चलते हैं यहां पर ही इनकी डॉक्यूमेंटेशन देख लेते हैं हमने बोला जी शॉर्ट हैंड नोटेशन दे दो नहीं दोगे ये देखो ये र नोटेशन बढ़िया यहां पे क्या ऑब्जर्व कर पा रहे हैं इस प्रकार से आप शॉर्ट एंड नोटेशन लिखोगे क्या-क्या दिख रहा है यहां पे आपको आप यहां पर मेंशन करोगे पहले ड्यूरेशन क्या है फिर मेंशन कर रहे हो आपका टाइमिंग फंक्शन क्या है फिर बता रहे हो डिले कितना है फिर बता रहे हो आइट काउंट कितना है फिर बता रहे हो डायरेक्शन क्या होगी फिर बता रहे हो फिल मोड क्या है फिर बता रहे हो प्ले स्टेट क्या है फिर बता रहे हो नाम क्या है ठीक है तो फटाफट से मैं इसको कॉपी कर लेता हूं और जो कोड हमने अभी लिखा उस पूरे के पूरे कोड को इसमें ऐड करने की कोशिश करते हैं सबसे पहले हमने क्या बोला सबसे पहले क्या होता है इस कमेंट को ले आता हूं इस कमेंट को देख के पता लग जाएगा हमें क्या क्या होता है तो मैंने बोला कि सबसे पहले ड्यूरेशन होती है ड्यूरेशन हमने कितनी रखी है पा सेकंड तो मैंने पा सेकंड ड्यूरेशन रख दी बहुत बढ़िया फिर इजिंग फंक्शन होता है वो हमने क्या रखा हुआ टाइमिंग फंक्शन लीनियर तो हमने यहां प लीनियर रख दिया ठीक है अपना खुद का टाइमिंग फंक्शन भी क्रिएट करना चाहो तो बना सकते हो यूजिंग बेजर कर्व ठीक है फिर आपने बोला आपका डिले होता डेली हमने क्या रखा हुआ है एक सेकंड बढ़िया फिर हमने बोला आपका इटरेशन काउंट होता है वो हमने क्या रखा हुआ है लेट्स से इनफिट रखा हुआ है और हमने बोला डायरेक्शन डायरेक्शन में लेट्स से हमने बोल दिया अल्टरनेट कि भैया चलते रहो सोर्स डेस्टिनेशन डेस्टिनेशन सोर्स ऐसे अल्टरनेट करते रहो फिर आपका फि मोड फिल मोड में हमने क्या बोल दिया कि नन हमने कोई फिल मड ऐड नहीं किया हमने बोला प्ले स्टेट हमने प्ले स्टेट में मार्क कर दिया रनिंग कि भाई मेरे को अपनी एनिमेशन रनिंग स्टेट में चाहिए नेम नेम हमारा क्या है राइट मूवमेंट तो हमने राइट मूवमेंट यहां पर ऐड कर दिया तो अब मैं चाहूं तो इस पूरे के पूरे कोड को कमेंट कर सकता हूं ठीक है इस पूरे के पूरे कोड को हमने कर दिया कमेंट और हम सिंगल लाइन से जो हमने अभी ऐड किया एनिमेशन के लिए य शॉर्ट हैंड नोटेशन का यूज करके एनिमेशन रन कर सकते हैं हमने क्या बोला कि भैया एनिमेशन ड्यूरेशन 5 सेकंड रहेगी टाइमिंग फंक्शन लीनियर रहेगा डिले जो है एक सेकंड का रहेगा आइट काउंट इनफिट रहेगा डायरेक्शन जो है अल्टरनेट रहेगी फिल मोड नन रहेगा प्ले स्ट्रेट रनिंग रहेगी और नाम इसका राइट मूवमेंट राइट मूवमेंट की आपने की फ्रेम्स यहां पर ऐड किए हुए हैं इस पोजीशन से इस पोजीशन तक जाना है चेक करते हैं यूआई पे बढ़िया तो अ ऐसे इनफिट टाइम मूव करता रहेगा ऐसे ऐसे इनाइट टाइम मूव करता रहेगा और मजा आ रहा देखने में मजा आ रहा है राइट तो इसको मैंने थोड़ा सा बोला कि यहां पर थोड़ा कम लग रहा है तो मैंने ऐसे कर दिया इसको 1200 पिक्सल की जगह 1250 पिक्सल कर दिया अब इससे क्या होगा इससे देखते हैं क्या होगा तो यह आई थक थोड़ा और यहां तक जा पाएगा जाओ जाओ जाओ जाओ बढ़िया अभी कम है मेरे हिसाब से 1250 की जगह मैंने इसको कर दिया ऐसा 1300 पिक्सल टाइप अभी और बढ़ाना पड़ेगा मुझे पर ठीक है चेक कर लेते हैं एक बार बढ़िया थोड़ा सा और बढ़ा सकता हूं 1350 कर सकता हूं तो मैंने इसको कर दिया 1350 पिक्सल चेक करते हैं चलो चलो चलो बढ़िया तो मैंने इसको बोल दिया यह ऐसा है और मैंने क्या किया एक और एनिमेशन क्रिएट करता हूं फटाफट तो मैं यहां पे गया मैंने एक और बॉक्स क्रिएट कर दिया मैं यहां प एक डिव क्रिएट किया डिव के अंदर मैंने आईडी मेंशन कर दी कि भैया बॉक्स टू तो बॉक्स टू की प्रॉपर्टी मेंशन करते हैं फटाफट बॉक्स टू की प्रॉपर्टी मेंशन करते हैं हमने क्या बोला के यह रहा हमारा बॉक्स टू और बॉक्स टू के अंदर अ मैं पहले तो वही सेम चीज ले आता हूं कि भाई विड्थ क्या है हाइट क्या है बैकग्राउंड कलर क्या है बॉर्डर रेडियस मार्जिन रिलेटिव ये सब कॉपी कर लिया मैंने ठीक है तो ये मैंने सब मेंशन कर दिया इसके अंदर बढ़िया फिर मैं एनिमेशन में आया एनिमेशन मैंने यहां से कॉपी कर ली इसकी और इसको मैं यहां पेस्ट कर देता हूं चेंजेज करूंगा इसके अंदर अभी टेंशन नहीं लेनी बिल्कुल भी और ये की फ्रेम मैंने उठा ली यहां से इसको भी कॉपी पेस्ट कर देता हूं चेंज कर लेंगे इसको भी तो मैं मैंने बोला इसका नाम मैं लिख दिया लेफ्ट मूवमेंट लेफ्ट मूवमेंट इसका नाम भी चेंज कर दिया लेफ्ट मूवमेंट बहुत बढ़िया शुरुआत कहां से कर रहा हूं मैं राइट बॉटम कॉर्नर से शुरुआत करना चाहता हूं तो मैंने बोला कि भैया टॉप से इसको आप ले लो 800 पिक्सल नीचे ले आओ और लेफ्ट से इसको ले आओ 1350 पिक्सेल ठीक है और फिर इसको मैं राइट बॉटम से लेफ्ट बॉटम कॉर्नर तक लेके आना चाहता हूं टॉप से रहेगा सेम 800 पिक्सल और लेफ्ट से आपका आ गया जीरो पिक्सल चलो बढ़िया अ बाकी हमने बो एनिमेशन ड्यूरेशन 5 सेकंड लीनियर की जगह मैंने इसको मार्क कर दिया इज इन और मैंने इसको कर दिया इनफिट डिले रहेगा एक सेकंड का अल्टरनेट रहेगा नन रहेगा रनिंग रहेगा लेफ्ट मूवमेंट बहुत बढ़िया सही तो लग रहा है एक बार चेक कर लेते हैं यई प आ ही नहीं रहा है नीचे चला गया ओके हमने बोला इसको कर दो 700 और इसको कर दो 700 बराबर कर दिया अने ठीक है तो अब क्या होगा थोड़ा सा और ऊपर कर सकते हैं इसको हम थोड़ा सा और ऊपर कर सकते हैं तो हमने इसको बोला 680 और यहां पर बोला 680 अब चेक कर करते हैं बढ़िया तो अब थोड़ा-थोड़ा आपको गेम वाली वाइब आ रही होगी जो हमने बचपन में खेली है मतलब आपके पापा ने तो पक्का खेली होगी आपके बड़े भाई ने भी खेली होगी आपका पता नहीं मुझे आपने खलि ठीक है दो चीज तो आपकी ये हो गई बढ़िया अब इस गेम के अंदर और क्या होता था एक सर्कल होता था वो सर्कल भी मूव किया करता था वो सर्कल भी हम क्रिएट कर सकते हैं ठीक है तो अगर हम चाहे तो वो सर्कल भी क्रिएट कर सकते हैं बढ़िया तोब मैंने क्या किया मैंने बिल्कुल इस पूरी स्क्रीन के सेंटर में एक सर्कल क्रिएट किया मैं स्क्रीन के सेंटर में आया बिल्कुल और मैंने बोला भाई अपने को ना यहां पे इस सेंटर में सर्कल चाहिए तो मैंने कहा चलो ठीक है यह कर लेते हैं तो अब हमने क्या बोला अब हमने क्या बोला एक सर्कल अपने को चाहिए एक सर्कल चाहिए चलो तो हमने य पर एक डिव बना लिया और हमने इस डिव के अंदर क्या बोला कि आईडी सर्कल ठीक है बढ़िया और अब मैंने क्या कि मैंने यहां पे सर्कल का कॉन्फ़िगरेशन ऐड कर दी मैंने बोला सर्कल जो है ना बेटा अ यहां से प्रॉपर्टी उठा के ले आओ पहले तो फटाफट हम यहां से प्रॉपर्टी उठाकर ले आए हमने बोला कि ऐसा कुछ कुछ है और हमने यहां पर बोल दिया कि सर्कल की विड्थ जो है हमने असाइन कर दी यहां पर 200 पिक्सेल और हमने यहां पे असाइन कर दिया 200 पिक्सेल और बॉर्डर रेडियस को मैंने असाइन कर दिया यहां पे और कोई वैल्यू होती है तो हमने बोला कि यहां पर इस प्रकार से है हमने बोला राउंडेड रेडियस जो आपका ये बॉर्डर रेडियस है इसको 50 प मेंशन कर दो बढ़िया तो चेक करते हैं यूआई प एक बार चेक करते हैं मैंने बोला टॉप से इसको आप रख देना 340 पिक्सल पे और ऐसा करना इसको लेफ्ट से आप रख देना 670 75 पिक्सल ऐसे कुछ भी रैंडम मैंने रख दिया और देखते हैं क्या होता है तो यूआई प चलते हैं फटाफट यूआई प कुछ ऐसा दिख रहा है सर्कल तो नहीं बना अभी ये साइज थोड़ा और छोटा करते हैं इसका मैंने बोला कि इसको 100 पिक्सल करो अब बढ़िया सर्कल तो बन गया पर थोड़ा ज्यादा नीचे है थोड़ा ज्यादा नीचे है थोड़ा ऊपर चाहिए टॉप से ऊपर की तरफ लो इसको तो टॉप से हमने इसको ले लिया टॉप से हमने इसको ले लिया ऐसे 240 पिक्सल ठीक है अभी तो बस मैं ऐसे मेंशन कर रहा हूं ठीक है तुम चाहो तो अपने हिसाब से परसेंटेज के अंदर भी इसको रख सकते हो तुमने बोला 50 पर रखना चाहता हूं मैं तोय तुम्हारा 50 पे यहां पर आ रहा है ठीक है तुमने बोला 50 में बात नहीं बन रही लेट्स से मैं इसको 40 प रखना चाहता हूं 40 पे ये अभी भी नहीं आ रहा अभी भी नहीं आ रहा ठीक है तो चलो वापस चलो वापस हम 40 पर में भी बात नहीं बन रही है ऐसे करता हूं इसको थोड़ा सा पहले ऊपर खसता हूं उसके बाद बात करेंगे आगे बढ़िया ठीक है अब थोड़ा सा पहले से ऊपर आया है हमने बोला है हमने बोला है कि इसको मैं चाहता हूं 30 पर बढ़िया अब थोड़ा सर्कल में आया है और अब हमने बोला कि मुझे चाहिए लेफ्ट से भी 30 पर चेक करो बढ़िया 30 में बात नहीं बन रही मैंने बोला मुझे चाहिए 40 पर बढ़िया चलो यहीं पर रख लिया मैंने इसको अभी के लिए यहीं पर रख लिया और मेरा वो दूसरा वाला कहां चला गया भाई बढ़िया तो ऐसा कुछ कुछ चल रहा है इसको थोड़ा सा और टॉप में लेके आना पड़ेगा मुझे 500 68 है 50 कर दो इसको बढ़िया ठीक है तो अभी मेरा यूआई कुछ ऐसा चल रहा है और अब मैं चाहता हूं कि जो सर्कल है इसको भी मूव करवाऊं इस सर्कल को भी मूव करवाना चाहता हूं मैं डिफरेंट डिफरेंट दिशाओं में ठीक है तो मैंने बोला यार मैं इसको लेट्स से चार डिफरेंट लोकेशन प मूव कराना चाहता हूं मैंने बोला कि इस सर्कल को मैं चार डायरेक्शन में मूव कराना चाहता हूं अ लेट्स से मैंने बोला सर्कल पहले यहां जाए फिर यहां जाए फिर यहां जाए और फिर यहां जाए ऐसे करके मैं सर्कल को मूव करना चाहता हूं चार दिशाओं में मैंने कहा ठीक है ये भी हो जाएगा तो हमने क्या किया यहां पे इस सर्कल के लिए एनिमेशन ऐड कर दी तो मैंने इस एनिमेशन को कॉपी कर लिया फटाफट और मैंने इसको यहां पर पेस्ट कर दिया ठीक है अभी चेंजेज करेंगे इसमें टेंशन मत लेना और मैंने यहां पर इस की फ्रेम को कॉपी कर लिया और मैंने इसको यहां पर ऐड कर दिया बढ़िया मैंने नाम रख दिया इसका सर्कल मूवमेंट सर्कल मूवमेंट को मैंने कॉपी किया सर्कल मूवमेंट को मैंने पेस्ट किया मैंने इसको पूरे के पूरे को हटा दिया फ्रॉम और टू नहीं मेरे को चार स्टेट चाहिए तो चार स्टेट के लिए मैंने क्या किया बो % प कुछ ऐसा कर देना फिर मैंने क्या बोला 25 25 पर प कुछ ऐसा कर देना फिर मैंने क्या बोला 0 पर प ऐसा कर देना 25 पर प ऐसा कर ले इसको बो दिया 30 प ऐसा कर देना 30 पर प ऐसा कर देना मैंने बोल दिया य 60 पर प ऐसा कर देना और यहां पर हमने बोल दिया कि 100% परसा कर ठीक चार स्टेटमेंट डिफाइन कर दी परसेंटेज के टर्म में य पर कन्फ डिफाइन कर सकते हो तो मैंने बोला कि पहले मुझे मेरा सर्कल टॉप लेफ्ट में चाहिए तो मैंने य टप टॉप लेफ्ट कॉपी कर लिया मैंने बोला कि यार यह मुझे टॉप से चाहिए ऐसा एक परट पर और लेफ्ट से चाहिए मुझे ऐसा 5 पर पर मैंने यहां पर राइट में भेजना है इसको तो मैंने बोला टॉप से चाहिए मुझे ये ऐसा 5 पर प और लेफ्ट से चाहिए मुझे ऐसा 90 पर पे फिर यहां से मैं इसको ले गया फिर दोबारा टॉप से चाहिए मुझे ऐसे 90 पर लेफ्ट से चाहिए मुझे ऐसा 10 पर ऐसे रैंडम कुछ भी फिगर्स डाल रहा हूं मैं ठीक है ऐसे दिमाग मत लगाना कि पता कैसे लग रहा है भाई ये रैंडम डाल रहा हूं मैंने बोला ये मुझे चाहिए यहां पे 95 और ये लेफ्ट से मुझे चाहिए ऐसा 90 पर ठीक है तो ये चार कॉन्फिन मैंने यहां पर ऐड कर दी चार की फ्रेंस मैंने ऐड कर दिया हमारी इस एनिमेशन के लिए फटाफट एनिमेशन को संभालते हैं मैंने बोला 5 सेकंड के अंदर पूरी करनी है नहीं ऐसा कुछ भी नहीं है इसको मैंने बोल दिया कि यार ये 5 सेकंड गया 10 सेकंड में पूरी करो आप इज इन की जगह मैंने इसका नाम रख दिया इज इन एंड आउट डिले मैंने बोला डिले तो चाहिए ही नहीं जीरो सेकंड कर लेता हूं मैंने बोला इनफिट करनी है अल्टरनेट करनी है अ कर सकते हो अल्टरनेट के अलावा कोई और ऑप्शन है हमारे पास रैंडम का ऑप्शन है कुछ नहीं है अल्टरनेट रिवर्स कर लेते हैं चलो और हमने फिल मोड नन कर दिया रनिंग स्टेट में प्ले होनी चाहिए सर्कल मूवमेंट बढिया बढ़िया चेक करते य कुछ हो रहा है कि नहीं तो य देखो य मेरा सर्कल मूव कर रहा है यह मेरा सर्कल मूव कर रहा है राइट बढ़िया लग रहा है तो ऐसी बात तो नहीं है मजा तो आ रहा है ठीक हैसे बढ़िया मूव कर रहा है और बढ़िया मजा तो आ रहा है इसमें गलती क्या हुई है नीचे का चला गया ठीक है थोड़ा इसको नीचे संभालना पड़ेगा तो मैंने बोला टॉप जो है 75 ले इसको 70 पर बढ़िया अब चेक करते हैं तो यह तुम्हारा इस प्रकार से आ रहा है बढ़िया सुंदर लग रहा है तो ये तुमने एक एनिमेशन क्रिएट कर ली है जिको देख के ऐसा लग रहा है कि हां भैया कुछ तो हमने करा है राइट तो बड़ा प्यारा कोड था बहुत हिडन ट्रायल हमने इसके अंदर किया है ठीक है जहां पर फिगर सोचनी पड़ती है कि टॉप से लेफ्ट से कितना रखा जाए कितने पिक्सल ऐड किया जाए वहां थ सोचना पड़ता है ठीक है टा मार्के तो आता नहीं कोई भी घर से अपने चलो तो हम यहां वापस आते हैं हमने बोला कि हमने क्या क्रिएट किया हमने कंटेनर क्रिएट किया जिसके अंदर पहला बॉक्स ये रहा फिर हमने एक सर्कल क्रिएट किया फिर हमने एक बॉक्स क्रिएट कर दिया ठीक है पहले बॉक्स के अगर बात करें तो पहले बॉक्स के अंदर हमने क्या बोला है पहले बॉक्स से विड्थ हाइट बैकग्राउंड कलर बॉर्डर बॉर्डर रेडियस मार्जिन वै सब कुछ हमने ऐड कर दिया और बाद में एनिमेशन हमने क्रिएट कर दया और ये सारी कॉन्फिन आपकी एनिमेशन की जहां पर हमने फ्रॉम स्टेट मेंशन कर दिया और टू स्टेट मेंशन कर दी सेम बॉक्स टू के साथ भी हमने किया बस वहां पे टॉप लेफ्ट और टॉप लेफ्ट का वैल्यू चेंज कर दी सर्कल के लिए हमने क्या किया स्टार्टिंग में उसको ज प्लेस कर दिया और बाद में यहां पर चार स्टेट डिफाइन कर दिया आप लेट्स से यहां पे आठ स्टेट डिफाइन करना चाहते हैं तो आप वो भी कर सकते थे 0 पर मतलब 0 पर ऑफ एनिमेशन जो भी आपकी एनिमेशन टाइमलाइन बनेगी उसमें 0 पर जब स्टार्ट जब जस्ट स्टार्ट हो रहा है तब क्या करना चाहिए तोत तो मैंने बोला कि ऐसे कुछ करना चाहिए 30 एनिमेशन कंप्लीट हो गई तो यहां पर होना चाहिए 60 एशन कंप्लीट हो तो यहां पर होना चाहिए 100% एशन कंप्लीट हो गई तो यहां पे होना चाहिए राइट तो ऐसे करके मैंने इसको रनिंग में लगा दिया इ फाटली हम इसको चला रहे हैं ठीक है आई थिंक सुंदर भी लग रहा है सुंदर भी लग रहा है ऐसा मतलब ऐसा बेकार नहीं लग रहा है मेरे हिसाब से बड़ा सुंदर प्यारा सा लग रहा है इसमें एक चीज आप ऐड कर सकते हो कि जो सर्कल जो है अभी ये ओवरलैप कर रहा है या फिर अंडर नीत जा रहा है इस रेक्टेंगल बॉक्स के आप इसमें ये ऐड करने की सोचो कि सर्कल जो है इसके अंडर नीत ना आ जाए और इसे टच होके वापस निकल जाए शायद अभी ना कर पाओ पर ट्राई करना एक बार कोशिश करना मजा आएगा तुम्हें ठीक है तो ये थी तुम्हारी एनीमेशंस की क्लास आई थिंक समझ में आया होगा से सुंदर सा एनिमेशन क्लियर हुआ होगा आपको आगे की क्लासेस में चलेंगे जहां पर ट्रांसफॉर्म्स के बारे में डिस्कस करेंगे ट्रांजीशन के बारे में डिस्कस करेंगे डी 3डी सब के बारे में बात करने वाले हैं तो इस क्लास में इतना दोस्त मिलेंगे आपसे नेक्स्ट सेक्शन के अंदर इस सेक्शन में इतना ही लव यू ऑल बा बाय गुड नाइट कमेंट सेक्शन में बता के जाना यार कैसा लगा कमेंट आजकल देख रहा हूं बहुत कम हो रहे हैं और तुम मेरे से चाहते हो मैं कंसिस्टेंटली वीडियो अपलोड करूं बट कंसिस्टेंटली कमेंट नहीं करोगे क्या बात धन्यवाद एवरीवन मिलेंगे आपसे नेक्स्ट सेशन अंदर इस सेशन में इतना ही बाय गुड नाइट लव यू ल हम बात करने वाले ट्रांजिशंस के बारे में कैसे आप किसी एकटे स्टेट ऑफ स्टाइलिंग से किसी दूसरी स्टेट ऑफ स्टाइलिंग में मूव कर सकते हैं आपको ऐसा लग रहा होगा कि ऐसा कुछ सुना था लास्ट वीडियो के अंदर भी एनीमेशन के अंदर भी तो यही किया था तो एनिमेशन में और ट्रांजीशन में फर्क क्या हुआ तो समझेंगे उस उस पर्टिकुलर क्वेश्चन के बारे में भी अभी बात करने वाले हैं ट्रांजीशन क्या होते हैं कैसे अप्लाई कर सकते हैं क्या फायदा है क्या सिंटेक्स है क्या-क्या प्रॉपर्टीज हमारे पास अवेलेबल है चलो समझते हैं तो सबसे पहले समझना चाहते हैं कि व्हाट इज अ ट्रांजीशन एक ट्रांजीशन होता क्या है मैंने बोला कि मैं जानना चाहता ता हूं व्हाट इज अ ट्रांजिशन तो बहुत सिंपल चीज है मैंने क्या कहा कि यार मेरे पास लेट्स से मेरे पास जो है मेरे पास यह एक बॉल थी ठीक है और मैंने क्या बोला कि ये मेरी स्टेट नंबर वन है ये मेरी स्टेट नंबर वन है ये मेरी सोर्स स्टेट है या फिर मेरी ये इनिशियल स्टेट है क्या बात समझ में आती है तो इस इनिशियल स्टेट से मैंने बोला कि मुझे कहां शिफ्ट करना है इस इनिशियल स्टेट से मैंने शिफ्ट कर लिया अपने आप को ये मेरी डेस्टिनेशन स्टेट पर ठीक है तो ये मेरी स्टेट नंबर टू हो गई इसको मैंने डेस्टिनेशन स्टेट बोल दिया मैंने इसको फाइनल स्टेट बोल दिया ठीक है सो बेसिकली यहां पर मैं स्विच कर रहा हूं फ्रॉम दिस स्टेट टू दिस स्टेट तो जब मैं एक स्टेट से दूसरी स्टेट ऑफ स्टाइलिंग पर मूव कर रहा होता हूं इस एंटायस को मैं क्या कह देता हूं एंटायस को मैं ट्रांजीशन कह देता हूं अब सवाल आएगा भै एनीमेशन में तो यही था एनिमेशन में तो यही था तो मैंने कहा देखो बड़ा प्यारी एक डिफरेंस है ट्रांजीशन जो होता है ट्रांजिशन हमेशा सिंगल स्विच की हम बात कर रहे होते हैं कि आप इस पर्टिकुलर स्टेट से इस पर्टिकुलर स्टेट तक पहुंच गए हैं जबकि एनिमेशन क्या होता है एनिमेशन के अंदर एक सीरीज ऑफ मूवमेंट होती है एनिमेशन जो होती है हम कह सकते हैं सीरीज ऑफ कॉम्प्लेक्शन जैसे तुम इसको इस स्टेट की बात करो तो यहां पे इस स्टेट से इस स्टेट के तुम जा रहे हो तो इसको तुम ट्रांजीशन भी कह सकते हो इस सिंगल स्टेप के अंदर काम हो रहा है ठीक है एक स्टेप में काम हो रहा है और इसको तुम एनिमेशन भी काइंड ऑफ कह सकते हो ठीक है बट एक एनिमेशन क्या होता है यहां पर डिफरेंट डिफरेंट आप स्टेट्स में मूव कर रहे होते हो आपने बोला कि इस स्टेट से मैं यहां आ गया यहां से मैं यहां गया यहां से मैं यहां गया और यहां पर मल्टीपल आप मूवमेंट्स देख पा रहे हो मल्टीपल ट्रांजिशंस देख पा रहे हो आप ये कह सकते हो कि इस एनीमेशन के अंदर मल्टीपल ट्रांजीशन है एक ट्रांजीशन ये रहा एक ट्रांजीशन ये रहा एक ट्रांजिशन ये रहा एक ट्रांजीशन ये रहा ठीक है तो ट्रांजीशन एक सिंगल स्टेप पर हम कॉल आउट करते हैं एनिमेशन एक सीरीज ऑफ कॉम्प्लेक्टेड करते हैं ठीक है तो एनिमेशन को मैं ट्रांजिशन की एक सुपर एंटिटी मान सकता हूं ट्रांजीशन को मैं एनिमेशन की एक चाइल्ड एंटिटी मान सकता हूं एनिमेशन एक बड़ी चीज है ट्रा जशन एक छोटी चीज है क्या बात समझ में आती है बहुत बढ़िया वेरी गुड तो थोड़ा बहुत ट्रांज ट्रांजिशन समझ में आया अगेन अब इसको जब तक कोड नहीं करेंगे तब तक ज्यादा क्लेरिटी नहीं मिलेगी अब आगे बढ़ने से पहले फटाफट एक और चीज आपको दिखाते हैं यहां पर ये हमारी पूरी की पूरी प्लेलिस्ट है यहां पर हमने एचटीएमएल स्टार्ट करके खत्म कर चुके हैं थोड़ी थरेट कल नॉलेज भी आपको दी है सीएसएस किम सीरीज हमारी पूरी चल रही है अभी वेब डेव के पूरे कोर्स के अंदर तो अगर आप पूरे वेब डेव के कोर्स को बिल्कुल ऐसे स्ट्रक्चर वाइज देखना चाहते हैं पहले लेक्चर से तो आप सर्च कर सकते हैं youtube1 की प्लेलिस्ट ये आ जाएगी और आप इसको देख पाएंगे एक्सेस कर पाएंगे ठीक है और कमेंट्स करना ना भूले वो बहुत इंपोर्टेंट है ठीक है तो यहां पर डॉक्यूमेंटेशन है हमारे पास ट्रांजिशन की ठीक है ट्रांजिशन के बारे में 50 चीजें यहां पर बता रखी है ट्रांजीशन आपको पता लग चुका कि आपकी किसी एक स्टेट ऑफ स्टाइलिंग से किसी दूसरी स्टेट ऑफ स्टाइलिंग पर मूव कर रहे हो तो ट्रांजीशन कह दिया एनिमेशन क्या होता है अ सेट ऑफ कॉम्प्लेक्टेड ऑफ ट्रांजिशंस एनिमेशन को मैं कह सकता हूं राइट ठीक है तो अब इसको डिफाइन करते हैं देखते हैं क्या-क्या प्रॉपर्टी हमारे पास अवेलेबल है हमारे पास ट्रांजीशन प्रॉपर्टी है ठीक है कि मैं किस पर्टिकुलर प्रॉपर्टी प्रॉपर्टी में ट्रांजिशन अप्लाई करना चाहता हूं विड्थ के ऊपर हाइट के ऊपर मार्जिन के ऊपर ठीक है तो किस पर्टिकुलर प्रॉपर्टी के ऊपर आप ट्रांजिशन अप्लाई करना चाहते हैं वो ये ट्रांजिशन प्रॉपर्टी दर्शा आएगा ट्रांजीशन ड्यूरेशन आप जो ट्रांजिशन कर रहे हैं स्टेट वन से स्टेट टू की तरफ वो कितने टाइम में होगा ट्रांजीशन टाइमिंग फंक्शन जो लास्ट क्लास में आपने सीखा एनीमेशन टाइमिंग फंक्शन का कि इज इन करना है इज इन आउट करना है बेजियर कर्व यूज़ करना है लीनियर करना है तो वो टाइमिंग फंक्शन आप यहां पर भी अप्लाई कर सकते हैं ट्रांजीशन डिले कि ट्रांजीशन स्टार्ट होने से पहले कितना डिले लगने वाला है वो आप यहां पे देखने वाले हैं और आपके पास एक ट्रांजिशन की शॉर्ट हैंड प्रॉपर्टी भी है ठीक है उस शॉर्ट हैंड प्रॉपर्टी को भी आप पढ़ सकते हैं ठीक है जी बहुत बढ़िया तो चलते हैं वापस डॉक्यूमेंटेशन के अंदर और फटाफट इसे क्रिएट करने की कोशिश करते हैं आप चाहे तो w3 स्कूल्स पर जाकर ट्रांजिशन के बारे में पढ़ सकते हैं 50 प्रकार की नॉलेज आपको यहां पर ही मिल जाएगी मैं जानबूझ के पढ़ता नहीं हूं दोस्त ताकि आप खुद से जाके कुछ होमवर्क करें अगर सब कुछ मैं सून फीड करूंगा तो आपको मजा नहीं आएगा आप ग्रो कैसे करोगे लाइफ के अंदर ठीक है बढ़िया एक और चीज आगे बढ़ने से पहले ये हमारी वेबसाइट है हमारा खुद का वेंचर है कोड हेल्प यहां पर बहुत सारा प्रीमियम कंटेंट आपको देखने को मिलेगा तो आप कोर्सेस पर क्लिक करेंगे तो यहां पर ये सुप्रीम 2.2 का बैच जो है अगले तीन से चार दिन के अंदर लॉन्च हम करने वाले हैं तो अगर आप में से कोई प्लान कर रहा था डाटा स्ट्रक्चर्स एंड एल्गोरिथम्स को स्ट्रांग करने के लिए तो यहां पर आप डेटा स्ट्रक्चर एकदम को स्ट्रांग कर सकते हैं एक लाइव बैच में जहां पर हम आपको पढ़ा रहे होंगे और अगेन यहां पर कुछ और कोर्सेस भी डेड हैं अगर आप इंटरेस्टेड हैं तो आप ले सकते हैं ठीक है चलो वापस चलते हैं कोड की तरफ हम आए यहां पर लेक्चर नंबर 24 राइट चेक कर लेते हैं 24 बढ़िया यह रहा हमारा कोड विंडो फटाफट से इसको प्लेस करते हैं हमने बोला फोल्डर क्रिएट करो लेक्चर 24 का इसके अंदर एक फाइल क्रिएट करो हमने एक फाइल क्रिएट कर दी इक्सड एटीएमएल एक बॉयलर प्लेट कोड ऐड कर दिया यहां पर हमने बोला हम किसके बारे में पढ़ने वाले हैं ट्रांजीशन के बारे में पढ़ने वाले हैं चलो मैंने बो ट्रांजिशन करना है तो मैंने यहां पर एक बॉक्स क्रिएट कर दिया ओके एक बॉक्स मैंने क्रिएट कर दिया उसकी प्रॉपर्टी ऐड कर देते हैं फटाफट तो मैंने बोला कि स्टाइल टैग का यूज करते हैं स्टाइल टैग का फटाफट यूज करते हैं और हमने क्या कहा इस बॉक्स की स्टाइलिंग करते हैं फटाफट हमने बोला डॉट बॉक्स इसकी आप हाइट दे दो ऐसा 400 पिक्सल टाइप्स और इसकी आप विड्थ भी दे दो ऐसे 400 पिक्सल टाइप्स और आप इसका ना बीजी कलर भी दे दो वो आप दे दो बेज और आप इसका ना बॉर्डर भी दे दो बॉर्डर भी दे दो आपने लिख दिया जी टू पिक्सल सॉलिड ब्लैक और अभी तो इतना समझ में आता है फटाफट यूआई पे देखते हैं इसको लाइव सर्वर के द्वारा रन करके क्या बन रहा है तो ऐसा कुछ नजर आ रहा है ठीक है बहुत बढ़िया अब मैंने क्या कहा मैंने कहा कि मेरे को ट्रांजीशन अप्लाई करना है ट्रांजीशन अप्लाई करने के क्या-क्या प्रॉपर्टीज है मेरे पास मेरे पास ये सारी की सारी प्रॉपर्टीज है चलो बढ़िया मैंने बोला वन बाय वन वन बाय वन ऐड करते हैं ट्रांजिशन प्रॉपर्टी देखते हैं पहले ट्रांजिशन प्रॉपर्टी तो मैंने बोला कि इस पे बॉक्स पे ट्रांजिशन अप्लाई करना चाहता हूं तो मैंने लिखा जी ट्रांजीशन और मेरे पास दुनिया भर की चीजें आ गई यहां पे ट्रांजीशन प्रॉपर्टी मैंने यूज कर लिया और मैंने बोला प्रॉपर्टी के अंदर अभी के लिए मैंने क्या बोला हम क्या करना चाहते हैं ट्रांजिशन प्रॉपर्टी हमने विड्थ सेट कर दी ठीक है बढ़िया अब इसके बाद हमने फिर से ट्रांजीशन लिखा कि ट्रांजिशन ड्यूरेशन क्या रहेगी मैंने बोला जी 4 सेकंड और फिर मैंने फिर से ट्रांजिशन लिखा ट्रांजिशन स्टार्ट करने से पहले डिले कितना रहेगा मैंने बोला कि एक सेकंड तुम ऐड करना चाहो कर सकते नहीं करना चाहो तो मत करो तुम्हारे ऊपर है ट्रांजिशन टाइमिंग फंक्शन क्या रहेगा मैंने कहा अभी के लिए लीनियर रख लो ठीक है सेम स्पीड रहेगी कोई स्लो फास्ट नहीं होगा सेम स्पीड चलेगा और ट्रांजीशन में मेरे पास क्या है इतना ही है इतना ही है ठीक है तो यहां पर मैंने ये ट्रांजीशन अप्लाई कर दिया क्या इससे कुछ u आ पर हो रहा है क्या u आ पर इससे कुछ हो रहा है u आ पर तो कुछ हो ही नहीं रहा भैया ऐसा क्यों हो रहा है चेक करते हैं फटाफट हमने यहां पे ट्रांजीशन अप्लाई कर दिया हमें कोई एक एक्शन डिफाइन करना पड़ेगा जिस एक्शन की वजह से ट्रांजीशन होगा जैसे अभी अब देखो यहां पे मैंने ट्रांजीशन कर दिया मार्जिन राइट से दो सेकंड का ट्रांजीशन लगा रखा है कि मार्जिन कम होगा ऐसा कुछ कुछ कर रखा हुआ है इन्होंने ठीक है पर हो नहीं रहा इसको सेलेक्ट किया तब भी कुछ नहीं हो रहा इसको सेलेक्ट किया तब भी कुछ नहीं हो रहा कब हो रहा है जब मैं इसके ऊपर होवर कर रहा हूं तो ट्रांजीशन देखने के लिए हमें होवर करना पड़ेगा या फिर कुछ सूडो क्लासेस का यूज करना पड़ेगा ठीक है सो यहां पे साफ-साफ लिखा हुआ है ट्रांजिशन जो है आपकी दो स्टेट के बीच में स्विच करने के काम आएगा एलिमेंट के लिए ठीक है और जो भी डिफरेंट स्टेट्स आप डिफाइन करेंगे वो जो दो स्टेट्स होंगे डिफरेंट स्टेट वो शो क्लासेस दोबारा डिफाइन कर सकते हैं एक स्टेट अभी क्या है जो अभी नॉर्मल स्टेट है जो भी नॉर्मल स्टेट है एक और स्टेट मैंने क्या ऐड कर द दी होवर स्टेट होवर मतलब जो आप अपने माउस को किसी पर्टिकुलर एलिमेंट के ऊपर ऐसे ऊपर लेकर चले जाते हैं तो मैंने यहां पर होवर स्टेट डिफाइन कर दी मैंने बोला कि भाई साहब बॉक्स के ऊपर मैं होवर करने वाला हूं तो इस केस में क्या करें कहा अच्छा प्रॉपर्टी क्या रखी थी आपने विड्थ रखी थी तो विड्थ को मैं चेंज कर रहा हूं यहां पे चेक करते हैं तो मैंने क्या बोला विड्थ को मार्क कर दो इसके अंदर 1200 पिक्सेल चलो तो बेसिकली मैंने ट्रांजीशन क्या किया हमने बोला कि नॉर्मली जो मेरा बॉक्स है वो ऐसा रहेगा हाइट इतनी होगी विड्थ इतनी होगी बैकग्राउंड कलर ये रहेगा बॉर्डर ये रहेगा एक ट्रांजीशन हमने ऐड कर दिया जो कि हमने विड्थ वाली प्रॉपर्टी प अप्लाई किया है मार्जिन पे नहीं किया हाइट पे नहीं किया सिर्फ विड्थ वाली प्रॉपर्टी पे किया है तुम सब पे करना चाहो सब पे भी कर सकते हो ऑल कीवर्ड का यूज़ करके यहां पर हमने सिर्फ विड्थ पे अप्लाई किया कितना टाइम लगेगा ट्रांजिशन कंप्लीट होने में 4 सेकंड कितना डिले होगा ट्रांजिशन स्टार्ट होने में एक सेकंड ट्रांजिशन टाइमिंग फंक्शन क्या है लीनियर ठीक है ये सारी की सारी चीजें ऑलरेडी पढ़ चुके हम लास्ट क्लास के अंदर कि डिले क्या होता है ड्यूरेशन क्या होता है अ टाइमिंग फंक्शन क्या होता है सब कवर कर चुके हैं अब हमने यहां पे क्या ऑब्जर्व किया अगर मैं यहां पे सिर्फ इतने ही कोड का यूज़ कर रहा हूं तो ट्रांजीशन की कोई भी चीज मैं एक्सपीरियंस नहीं कर पा रहा यूआई पर तो हमने डॉक्यूमेंटेशन में क्या देखा कि मुझे स्टेट डिफाइन करनी पड़ेगी ये तो मेरी नॉर्मल स्टेट होगी ये तो मेरी नॉर्मल स्टेट होगी क्लासिकल स्टेट होगी राइट अब मैंने यहां पर एक स्टेट डिफाइन कर दी यूजिंग अ सूडो क्लास यूजिंग अ सूडो क्लास होवर होवर का मतलब जब मैं लिखता हूं डॉट बॉक्स के ऊपर होवर डॉट बॉक्स कॉलन होवर इसका मतलब बॉक्स वाले एलिमेंट के ऊपर ऐसा कोई भी एलिमेंट जो कि बॉक्स क्लास से बिलोंग करता है उस पर जब भी होवर करूंगा तो जो ये स्टाइलिंग है ये अप्लाई करनी चाहिए चेक करते हैं यूआई पे तो मैं यूआई पर गया अब मैं इसम होवर करने जा रहा हूं मैं होवर कर रहा हूं क्या हम देख पा रहे हैं ट्रांजीशन ये ट्रांजीशन है तो इस प्रकार से आपका ट्रांजिशन काम कर रहा है पहले यह आपका क्या था पहले ये आपका 400 पिक्सल का डब्बा था और जैसे ही मैं इसके ऊपर होवर करता हूं जैसे ही इसपे होवर करता हूं ये 1200 पिक्सेल का डब्बा बन जाता है ठीक है इस प्रकार से काम कर रहा है मैंने कहा चलो और थोड़ा सा आगे बढ़ते हैं मैंने बोला 1200 की जगह इसको ऐसा 1800 कर लो ठीक है और लेट्स से मैं कलर भी चेंज करना चाहता हूं तो बीजी कलर मैंने यहां पे क्या सेट कर दिया बीजी कलर मैंने सेट कर दिया यहां पे ब्लू चेक करते हैं ये पे चेक करते हैं तो मैं यहां पे आया मैंने होवर किया ब्लू हो गया और ये आगे बढ़ रहा है और ये आगे बढ़ रहा है ठीक है तो जब भी आप होवर करेंगे जब भी आप ऐसे होवर करेंगे तो ऐसे ब्लू हो जाएगा ठीक है ये बात समझ में आती है ये बात समझ में आती है पर भैया ट्रांजीशन अच्छा नहीं लगा उतना समझ नहीं आया मतलब ब्लू कलर क्यों आ रहा है ब्लू कलर क्यों आ रहा है ये ब्लू कलर क्यों आ रहा है मैंने कहा ठीक है लेट्स से अभी तुम एक्सपीरियंस पहले एक बार देख लो फिर तुम्हे ब्लू कलर के बारे समझाते हैं अभी मैं आ गया ब्लू हो गया और ये पूरा ट्रांजिशन कंप्लीट करेगा फटाफट और फिर यहां से वापस आएगा यहां से वापस आगा जब मैं हट जाऊंगा तो चलो ये बात समझ में आती है बट लेट्स से मैंने यहां पर ट्रांजीशन प्रॉपर्टी की जगह ऑल कर दिया होता तो अब आपकी हर एक प्रॉपर्टी पे ट्रांजीशन अप्लाई होगा ठीक है अब आपकी हर एक प्रॉपर्टी पे ट्रांजिशन अप्लाई होगा कैसे देखो मैंने होवर किया धीरे-धीरे ब्लू कलर की तरफ जा रहा है पहले क्या हुआ था एकदम से ब्लू पे चला गया था पहले वाला कोड क्या कह रहा था पहले जो आपने यहां पे ऑल नहीं लिखा था आपने यहां पर सिर्फ विड्थ लिखा था तो विड्थ के ऊपर ही ट्रांजीशन लगा था सिर्फ स्मूथली विड्थ ही चेंज होगी आपने जब बॉक्स में बोला होवर पे ये काम कर दो लेट्स से मैंने ट्रांजीशन अप्लाई नहीं किया हो तब भी ये काम हो जाता लेट्स से मैंने ट्रांजिशन अप्लाई नहीं किया हुआ और बॉक्स के ऊपर सीधा होवर के ऊपर ये वाली प्रॉपर्टी डिफाइन करिए तब भी सेम काम हो जाता बट वो झटके से होता है फट से हुआ हुआ मजा नहीं आ रहा है ये सोर ये सोर्स स्ट्रेट है ये डेस्टिनेशन स्टेट है मजा नहीं आ रहा काम तो हो रहा है पर मजा नहीं आ रहा है वो जो स्मूथ मूवमेंट है ना आपका सोर्स से डेस्टिनेशन का वो आपका ट्रांजीशन ही करवा रहा है तो ट्रांजीशन अप्लाई कर दिया विड्थ के ऊपर ये दोनों प्रॉपर्टी सेट कर दी होवर के ऊपर और चेक करते हैं देखो मूवमेंट जो है विड्थ की वो तो स्मूथ हो रही है पर कलर चेंज जो है स्मूथ नहीं है क्योंकि कलर चेंज के ऊपर या बैकग्राउंड कलर के ऊपर आपने ट्रांजीशन अप्लाई ही नहीं किया है सो लेट्स से मैं यहां पे अप्लाई करता हूं ऑल बोल दिया मैंने कहा सारी प्रॉपर्टी प अप्लाई कर दो तो अब आपका कलर चेंज भी स्मूथ हो जाएगा हुआ भाई साहब इस प्रकार से आप हैंडल कर सकते हैं 50 प्रकार की चीजें ट्रांजीशन के अंदर ठीक है तो यहां पे आपने सीखा कि कैसे ट्रांजीशन का यूज करके आप डिफरेंट डिफरेंट चीजें बना सकते हैं अब लेट्स से मैंने बोला यहां पे हाइट भी चेंज करना चाहता हूं मैं हाइट भी मैंने मार्क कर दिया यहां पे 900 पिक्सल अब देखते हैं क्या होता है अब देखते हैं क्या होता है अब अगर मैं होवर करूंगा तो क्या हो रहा है ये देखो दोनों दिशा में विड्थ भी बढ़ रही है हाइट भी बढ़ रही है कलर भी चेंज हो रहा है विड्थ भी बढ़ रही है हाइट भी बढ़ रही है कलर भी चेंज हो रहा है छोड़ दूंगा वापस फिर दोबारा धीरे-धीरे करके ट्रांजिशन वाइज वापस फोर्स प आएगा कलर भी चेंज हो जाएगा मजा आ रहा है बहुत ही बढ़िया बहुत ही बढ़िया बहुत बढ़िया तो इस प्रकार से ट्रांजीशन आपने देखा ज्यादा कुछ ऐसे मुश्किल चीज तो थी नहीं सिंपल सी चीज थी पर चलो कुछ और भी एक बार क्रिएट करने की कोशिश करते हैं ताकि थोड़ा क्लेरिटी मिल जाए जैसे यहां पर सेम काम ही हो रहा है इनका भी ऐसे मूव कर रहा है इस दिशा के अंदर और क्या कर सकते हैं और भी प्रॉपर्टी अप्लाई कर सकते हैं लेट्स से ट्रांजीशन प्रॉपर्टी में यहां पर मैंने ईज का यूज कर लिया तो जज हमने यहां पर लगा दिया है और अगर मैं इसको टेस्ट करके देखूं तो क्या होगा ईज में बेसिकली स्टार्ट स्लो होता है बीच में फास्ट चलता है फिर स्लो हो जाता है तो वही सेम काम यहां पर ईज के अंदर हो रहा है ठीक है अब इज इन की बात करते हैं जहां पे स्टार्ट स्लो होगा और एंड फास्ट होगा तो इज इन से स्टार्ट आपका स्लो होगा एंड आपका फास्ट होगा ठीक है वो वाली मूवमेंट भी आप यहां पर देख पा रहे हैं ट्रांजीशन के अंदर बहुत बढ़िया सेम केस विद इज आउट कि स्टार्ट फास्ट होगा और एंड जो होगा वो स्लो होगा तो वो भी आप यहां से देख सकते हैं ठीक है तो ये सारी की सारी प्रॉपर्टीज इज आउट लीनियर वगैरह ये सब कुछ ऑलरेडी हम लास्ट क्लास में पढ़ चुके हैं ठीक है डिले लेट से मैं नहीं लगाना चाहता इसको हटा सकते हो कोई भी ऐसा इशू नहीं है ठीक है तो मैं जैसे ही मैं यहां पे आता हूं सीधा होर करना शुरू कर द वापस आ जा ओवर आजा वापस आजा ओवर आजा वापस आा ओवर आजा बढ़िया ये सब है ठीक है तो ये सब तो थी मेहनत वाली चीजें ये सब थी मेहनत भरी चीज है मैंने क्या बोला कि यार मैं तो शॉर्ट हैंड नोटेशन का यूज करना चाहता हूं क्या मेरे पास कोई शॉर्ट हैंड नोटेशन अवेलेबल है ये चेक करते हैं तो मैंने बोला कोई शॉर्ट हैंड नोटेशन मेरे पास है क्या भाई तो हम यहां पर फटाफट गए और हमने बोला कि मेरे पास ट्रांजीशन नाम की एक शॉर्ट हैंड नोटेशन है जिसके अंदर मैं भिन्न-भिन्न प्रकार की चीजें ऐड कर सकता हूं ठीक है तो मैंने यहां पर लेट्स से कोई बेजर कर्व है ये ऐड कर लिया फटाफट सिंटेक्स चेक करके आते हैं एक बार ट्रांजिशन शॉर्ट एंड नोटेशन का सिंटेक्स क्या होता है पहले ऐड कर सकते हैं आप यहां पर देखो चार सिंटेक्स तो हमारे पास यहां पर अवेलेबल है ठीक है चलो एक बार देखते हैं यहां पर बता दो भाई क्या पर्टिकुलर प्रॉपर्टी है और उसके ड्यूरेशन क्या है यह टेस्ट करते हैं तो मैंने बोला जी हम हर किसी प्रॉपर्टी पे अप्लाई करना चाहते हैं और ड्यूरेशन जो है मैंने बोल दी ऐसा 2 सेकंड है चलो तो पहली वेरिएशन चेक आउट कर लेते हैं बढ़िया तो बढ़िया चल रही है पहली वेरिएशन बढ़िया चल रही है सेकंड वेरिएशन की बात करते हैं यहां पे प्रॉपर्टी का नाम डालो ड्यूरेशन डालो डिले डालो ठीक है प्रॉपर्टी का नाम डाल रखा है ड्यूरेशन डाल रखा है और डिले डाल देते हैं डिले हमने लेट्स से बोल दिया 5 सेकंड तो 5 सेकंड बाद जाके मेरा ट्रांजिशन स्टार्ट होगा तो यहां पे जाता हूं फटाफट मैं यहां पे होवर कर रहा हूं एक दोती च पा अब स्टार्ट होगा हो जा भाई हो गया बढ़िया तो इस प्रकार से आप डिले भी ऐड कर सकते हैं शॉर्ट हैंड नोटेशन के अंदर नेक्स्ट इ प्रॉपर्टी नेम ड्यूरेशन अ प्रॉपर्टी नेम ड्यूरेशन एंड इजिंग फंक्शन या टाइमिंग फंक्शन तो डिले की जगह मैं चाहूं तो टाइमिंग फंक्शन भी डाल सकता था तो मैंने बोल दिया यहां पे इज इन स्टार्ट स्लो एंड फास्ट तो चेक करते हैं क्या बढ़िया चल रहा है बढ़िया स्टार्ट स्लो एंड फास्ट बढ़िया ये भी सही चल रहा है अगला सिंटेक्स देखते हैं प्रॉपर्टी नेम ड्यूरेशन इजिंग फंक्शन और डिले अब मैं डिले दोबारा से ऐड कर सकता हूं लेट से मैंने बोला कि 5 सेकंड का डिले है तो यूआई पर ऑब्जर्व करो एक दो तीन चार पा चलो भाई साहब ठीक है तो इस प्रकार से आपने एक और सिंटेक्स समझ लिया और लास्ट क्या है आपने बता दिया मार्जिन अप्लाई टू टू प्रॉपर्टी डिफरेंट डिफरेंट प्रॉपर्टी य ल लिखा हुआ है ना तो मैं बो लेट से मैं ऑल नहीं करना चाहता सिर्फ विड्थ को और हाइट को सिर्फ विड्थ और हाइट को चेंज करना चाहता हूं लेट से तो कॉमा के द्वारा मैं कर सकता हूं ठीक है तो मैंने इसको यहां से अभी कमेंट कर दिया मैंने कमेंट कर दिया इसको और मैंने बोला कि मैं कॉमा के द्वारा मल्टीपल प्रॉपर्टीज के ऊपर ट्रांजीशन लगाना चाहता हूं तो वो भी देख लेते हैं तो ने बोला कि लेट्स से मैंने बोला कि पहले विड्थ के ऊपर मैं अप्लाई करना चाहता हूं विड्थ विड्थ हो जाएगी लेट्स से 2 सेकंड में और फिर मैंने कह दिया कि हाइट के ऊपर भी अप्लाई करना चाहता हूं हाइट मैंने बोल दिया हो जाएगी 5 सेकंड में तो ऐसे मैंने विड्थ के ऊपर एक ट्रांजीशन अप्लाई कर दिया और हाइट के ऊपर एक ट्रांजिशन अप्लाई कर दिया फटाफट चेक करते हैं चलेगा या नहीं चलेगा तो मैं यहां पे गया देखो विड्थ हो गई पहले हाइट बाद में हो रही है ऑब्जर्व कर पा रहे हो शुरू के 2 सेकंड के अंदर आपकी पहले विड्थ हो जाएगी देखना अभी ऑब्जर्व करना 2 सेकंड में विड्थ हो जाएगी फिर बचे हुए 3 सेकंड में हाइट हो रही होगी ठीक है क्योंकि विड्थ दो सेकंड दी है मैंने हाइट 5 सेकंड दी है तो विड्थ दो सेकंड में पूरी कंप्लीट हो जाएगी और हाइट को पांच लगेंगे जिसमें दो बीत चुके हैं तो अगले तीन सेकंड में हाइट कंप्लीट हो जाएगी तो पहले देखो विड्थ पूरी हो गई अब हाइट पूरी हो रही है राइट तो ऐसे मल्टीपल प्रॉपर्टीज के ऊपर तुम इस प्रकार अलग-अलग से कॉमा सेपरेट करके भी ट्रांजिशंस अप्लाई कर सकते हो ठीक है तो हमने सारे के सारे सिंटेक्स फॉलो कर लिए हैं दोस्त ठीक है सारे सिंटेक्स फॉलो कर दिए और आई थिंक समझ में तुम्हें आया होगा और डॉक्यूमेंटेशन हमेशा तुम्हारे पास रहेगी ठीक है दैट्ची और सेकंडरी तुम चाहो w3 स्कूल्स की वेबसाइट भी फॉलो कर सकते हो यहां पर भिन्न-भिन्न प्रकार की नॉलेज दी हुई है कुछ समय की बात है ये फॉलो करनी पड़ेग हमको और धीरे-धीरे शिफ्ट कर जाएंगे अपने खुद के प्लेटफॉर्म पे वहीं पर ही डॉक्यूमेंटेशन वगैरह सब पढ़नी शुरू कर देंगे अभी के लिए तुम यहां से पढ़ सकते हो और फ्यूचर के लिए तुम यहां पे इस वाली वेबसाइट को कोड हेल्प वेबसाइट को हमारी वेबसाइट को बुक मार्क करके फेवरेट में ऐड कर लो फट फटाफट ठीक है बुक मार्क कर लो फेवरेट कर लो जो तुम्हारा मन करे वो तुम कर लो और बढ़िया इस क्लास में इतना ही था दोस्त सारी की सारी प्रॉपर्टी हम सीख चुके हैं नेक्स्ट क्लास के अंदर हम पढ़ेंगे ट्रांसफॉर्म्स के बारे में कि ट्रांसफॉर्म्स क्या होते हैं ठीक है तो ये रहा हमारा छोटा सा प्यारा सा कोड जहां पे सिंपल सा एक बॉक्स क्रिएट किया बॉक्स के अंदर हमने इस प्रकार से कुछ प्रॉपर्टीज ऐड कर दी और एक सूडो क्लास सूडो क्लास भैया सूडो क्लास तो आपने पढ़ाया ही नहीं है तो मैंने कहा कि अभी तुम क्या करोगे खुद से एक बार ट्राई करो होमवर्क में सूडो क्लास के बारे में पढ़ने का कैसे पढ़े भैया मैंने कहा बहुत आसान है एमडीएन पे जाओ एमडीएन पे जाके सर्च कर लो तोमने बोला सूडो क्लास तो ऐसे तुम जाके इसके बारे में पढ़ सकते हो सूडो क्लास क्या होता है तुम्हे नहीं समझ में आता तो डेडिकेटेड लेक्चर इसके ऊपर ले लेंगे सूडो क्लासेस के ऊपर ठीक है अभी के लिए इतना ही दोस्त पढ़ो इसके बारे में क्या होता है सूडो क्लासेस कैसे इसको आप यूज़ कर सकते हैं अभी तुम्हें इतना समझ में आया होगा कि जब मैं क्लास के नेम के साथ ठीक है या फिर कोई भी एलिमेंट के साथ ऐसे कॉलन करके होवर लगाता हूं तो बेसिकली वहां पर होवर करने पर उस एलिमेंट के ऊपर होवर करने पर क्या चेंजेज होने चाहिए वो चेंजेज मैं यहां पर डिफाइन कर सकता हूं ठीक है इतना समझ में आया तो हमने सीखा यहां पे सूडो क्लासेस के बारे में हमने सीखा यहां पे ट्रांजिशन के बारे में हमने सीखा यहां पर डिफरेंट डिफरेंट सिंटेक्सिस के बारे में हमने सीखा यहां पर कि कैसे तुम ट्रांजीशन और एनिमेशन में डिफरेंस पता लगा सकते हो ठीक है तो इस क्लास में इतना ही दोस्त मिलेंगे आपसे नेक्स्ट क्लास के अंदर आशा करता हूं समझ में आया होगा कृपया करके कमेंट कर रहे हैं बिल्कुल भी कंजूसी ना करा करें कोई पैसे नहीं लगते कमेंट करने में और हमारे चैनल के स्टैट्स कहते हैं कि 53 पर लोग नॉट सब्सक्राइब वाले हैं 47 पर सब्सक्राइब वाले हैं तो जब तुम लेक्चर देख रहे हो जब तुम्हें पसंद आ रहे हैं तो भैया सब्सक्राइब करने में कैसी शर्म चुपचाप जाओ यह रहा बटन सब्सक्राइब का लाल कलर का आ रहा होगा उस परे क्लिक कर दो फटाफट और सब कर लो भाई मेहनत कर रहा है आदमी तो इतना तो तुम कर सकते हो मेरे लिए यार ठीक है धन्यवाद एवरीवन मिलेंगे आपसे आपका नेक्स्ट सेशन के अंदर बाय बाय लव यू ऑल यहां पर हम पढ़ने वाले हैं ट्रांसफॉर्म्स के बारे में ठीक है ट्रांसफॉर्म्स आप 2d में भी अप्लाई कर सकते हैं 3d में भी अप्लाई कर सकते हैं पर यहां पर इस लेक्चर में हम सिर्फ अभी 2d ट्रांसफॉर्म डिस्कस करने वाले हैं आगे आने वाले कुछ लेक्चर के अंदर हम कुछ प्रोजेक्ट्स क्रिएट कर रहे होंगे हमने जितना भी अब तक पढ़ा है सीएसएस में उस सभी को यूज करके यह हमारा लास्ट टॉपिक है बिफोर प्रोजेक्ट प्रोजेक्ट खत्म होने के बाद दोबारा से ग्रिड के बारे में बात करेंगे ग्रिड स्टार्ट करेंगे पर हां अभी आगे आने वाले लेक्चर के अंदर हम प्रोजेक्ट शुरू करने वाले हैं ठीक है सबसे पहला सवाल आपके मन में क्या होता होगा व्हाट इज अ ट्रांसफॉर्म व्हाट इज अ ट्रांसफॉर्म मैंने कहा कि आपके पास कोई भी एक डिव है कोई भी एक बॉक्स है कोई भी एलिमेंट है जिसको आप आपको थोड़ा ट्रांसफॉर्म करना है जिसे आपको थोड़ा ट्रांसफॉर्म करना है ट्रांसफॉर्म करने का मतलब आप उसको ऐसे लेट्स से रोटेट करना चाहते हैं ठीक है आप उसे लेट्स से बड़ा करना चाहते हैं स्केल करना चाहते हैं आप उसे लेट से मूव करना चाहते हैं मूव करना चाहते हैं मूवमेंट चाहते हैं उसके अंदर आप मूव करना चाहे टेढ़ा करना चाहे रोटेट करना चाहे किसी एंगल के द्वारा बड़ा करना चाहे छोटा करना चाहे तो यह सारे के सारे जो ट्रांसफॉर्मेशन हैं ये आप 2d ट्रांसफॉर्म्स के द्वारा अचीव कर सकते हैं ठीक है तोए फटाफट चलते हैं एक चीज डिस्कस करते हैं अगर आप इस वेब डेव की सीरीज के अंदर नए बच्चे हैं तो आप हमारी पूरी की पूरी प्लेलिस्ट फॉलो कर सकते हैं आपको youtube1 सीरीज और आप इस सीरीज को पूरा का पूरा एक्सेस कर पाएंगे बहुत सारी वीडियोस हमने अब तक बना दी और कंसिस्टेंटली हम आगे और भी वीडियोस ऐड करते जा रहे हैं आशा करता हूं कि आप इसको सब्सक्राइब कर लेंगे चैनल को क्योंकि अभी तक मैंने स्टर्ट्स जो देखी है वो ऐसे चल रहे हैं कि 47 पर बच्चे सब्सक्राइब करके बैठे हैं और 53 पर बच्चे लेक्चर तो देख रहे हैं अच्छे भी लग रहे हैं तभी देख रहे होंगे पर सब्सक्राइब नहीं किया हुआ तो अगर तुम सब्सक्राइब कर लोगे मित्र तो शायद मैं दिन में जो एक वीडियो डाल रहा हूं शायद मेरी और मोटिवेशन बढ़ दिन में दो वीडियो डाल दूं दिन में तीन डाल दूं राइट सो अगर तुम्हें अच्छा लगता है कंटेंट थोड़ा सा सब्सक्राइब वगैरह कमेंट वगैरह तुम कर सकते हो ठीक है आगे बढ़ते हैं ट्रांसफॉर्म के लिए हमारे पास यहां पर ऑफिशियल डॉक्यूमेंटेशन अवेलेबल है एमडीएन पर ठीक है यहां पर तुम पढ़ सकते हो ट्रांसफॉर्म्स के बारे में डॉक्यूमेंटेशन बहुत डिटेल है एक बार जाओ पढ़ो इसके बारे में यहां पर क्या-क्या लिखा हुआ है तुम चाहो तो थ स्कूल्स पर जाकर वहां से भी जो भी ट्यूटोरियल्स यहां पर मेंशन है उन्हें पढ़ सकते हो देख सकते हो क्या-क्या चीजें अवेलेबल है अभी हम सिर्फ डी ट्रांसफॉर्म्स की बात कर रहे हैं डी ट्रांसफॉर्म की बात नहीं कर रहे वो भी आगे आने वाले लेक्चर डिस्कस करेंगे बट ठीक है तो अभी तक मुझसे अगर कोई यह पूछे कि व्हाट इज अ ट्रांसफॉर्म सो बेसिकली ट्रांसफॉर्म यहां पर स्टैंड कर ट्रांसफॉर्मेशन के लिए आपके पास एक पर्टिकुलर एलिमेंट था आपने उसको ट्रांसफॉर्म कर दिया उसकी ट्रांसफॉर्मेशन कर दी वो किसी भी रूप में हो सकती है ज आपने उसको बड़ा कर दिया हो चाहे आपने उसको छोटा कर दिया हो आपने उसको टेढ़ा कर दिया हो आपने उसको रोटेट कर दिया हो आपने उसको मूव कर दिया हो राइट किसी भी तरीके से आप उसको ट्रांसफॉर्म कर सकते हैं एक बार अभी मैं आपको कोड करके दिखाऊंगा तो आपको थोड़ी सी और क्लेरिटी मिल जाएगी मैं क्या कहना चाह रहा हूं चलो तो मैंने कहा मैंने कहा कि चलो ऐसा करते हैं एक सबसे पहले अपना फोल्डर क्रिएट करते हैं लेक्चर नंबर 25 का तो मैं यहां पे आया मैंने फोल्डर क्रिएट किया लेक्चर 25 और हमने यहां पर एक फाइल क्रिएट कर दी index.htm ठीक है यहां पर बॉयलर प्लेट कोड मैंने ऐड कर दिया है फटाफट से यहां पे राइट डाउन कर लेते हैं 2d ट्रांसफॉर्म बढ़िया तो मैंने कहा कि फटाफट से यहां पर एक डिव जो है वह मैं क्रिएट कर लेता हूं और लेट्स से डिव के अंदर जो क्लास है मैंने ऐड कर दी बॉक्स ऐड कर देता हूं कि बॉक्स मैंने यहां पर एक क्रिएट कर लिया और मैंने लिख दिया यहां पर दिस इज कोड हेल्प्स बॉक्स ऐसा कुछ कुछ लिख दिया इसको फटाफट मैं एक बार गो लाइव करता हूं देखते हैं कैसा दिख रहा है ठीक है तो यहां पर दिस इज कोड हेल्प्स बॉक्स ऐसा कुछ कुछ लिखा हुआ आ रहा है मुझे इसको अपने हिसाब से स्टाइल करना है तो स्टाइल कर लेता हूं फटाफट मैंने कहा कि बहुत टाइम से हम स्टाइल टैग का यूज करके यहां पर स्टाइलिंग कर रहे हैं आज ऐसा करते हैं एक नई स्टाइल शीट बना के देखते हैं तो हम यहां पे गए एक नई फाइल हमने क्रिएट की हमने बोला स्टाइल्स ड सीएसएस बहुत बढ़िया और इस स्टाइल शीट को फटाफट लिंक कर देता हूं मैं यहां पे तो मैंने यहां पर लिंक कर दिया मैंने बोला लिंक कर दो फटाफट एक स्टाइल शीट बढ़िया इसका नाम है स्टाइल्ड सीएसएस वेरी गुड तो अब मैंने एटीएमएल फाइल को इस सीएसएस फाइल के साथ लिंक कर दिया अब यहां पर मैं अपनी सीएसएस प्रॉपर्टीज को ऐड कर सकता हूं तो मैंने बोला कि ये रहा मेरा बॉक्स क्लास और मैंने बोल दिया एक विड्थ असाइन कर दो फटाफट मैंने लेट्स से बोला कि 400 पिक्सल मैंने बोला कि एक हाइट असाइन कर दो मैंने बोला जी 400 पिक्सेल मैंने बोला एक बैकग्राउंड कलर असाइन कर दो हमने बोला जी हम देंगे बेज कलर हमने बोला एक बॉर्डर असाइन कर दो हमने बोला जी दो पिक्सल सॉलिड ब्लैक बढ़िया ठीक है और देखते हैं यूआई प कैसा नजर आ रहा है तो u आई पर ऐसा कुछ नज़र आ रहा है मैंने बोला कि यार यह जो दिस इज़ कोड हेल्प बॉक्स लिखा है ना मुझे इसको ना थोड़ अच्छे से प्लेस करना है अच्छे से प्लेस करना है तो मैंने क्या किया मैं वापस गया index.htm के ऊपर मैंने इसको यहां से अभी हटाया और मैंने यहां पे कट कर दिया मैंने एक पैराग्राफ इंसर्ट कर दिया उसके अंदर इसको ऐड कर दिया ठीक है इतनी बात समझ में आती है इतनी बात समझ में आती है ठीक है अब हमने क्या किया हमने क्या किया इस बॉक्स को ना फ्लेक्स बना दिया तो मैं यहां पे गया मैंने फटाफट बोला कि डिस्प्ले जो है उसको फ्लेक्स मार्क कर दो और ऐसा करो जस्टिफाई कंटेंट को सेंटर कर देना और ऐसा कर दो के अलाइन आइटम्स को भी सेंटर कर देना बढ़िया तो इससे आपका कंटेंट सेंटर में आना चाहिए वेरी गुड अब सही लग रहा है मैंने बोला कि पैराग्राफ की साइजिंग थोड़ी सी छोटी लग रही है साइज बढ़ाता हूं तो मैंने बोला कि पैराग्राफ के अंदर हमने बोल दिया जी फंट साइज जो है ना हमें चाहिए ऐसा 28 पिक्सल टाइप तो यूआई पर चेक कराओ वेरी गुड और थोड़ा सा बड़ा कर लेते हैं मैंने कहा 28 नहीं अपने को 36 पिक्सल चाहिए बढ़िया अब मैंने क्या बोला जो मेरा ड था इसको मैंने मार्जिन ऐड कर दिया और मैंने बोल दिया मार्जिन ऑटो कर दो तो मार्जिन ऑटो करने से सेंटर में ये प्लेस हो गया बढ़िया इतना समझ में आ रहा है ठीक है तो हमने इस प्रकार से इसको मार्जिन ऑटो कर दिया हमारा ये डब्बा इस प्रकार से बीच में प्लेस हो गया ठीक है इतना समझ में आता है अब मैंने बोला मैं यहां पर ट्रांसफॉर्मेशन अप्लाई करना चाहता हूं ठीक है ट्रांसफॉर्मेशन के अंदर मैंने आपको बहुत चीजें बताई मूवमेंट करवाना चाहूं मूवमेंट करवा सकता हूं स्केल करना चाहूं बड़ा छोटा करना चाहूं वो कर सकता हूं मैं टेढ़ा करना चाहूं स् क्यू के द्वारा वो कर सकता हूं रोटेट करना चा किसी एंगल के द्वारा वो कर सकते हो तो मैंने पहले बोला पहले ट्रांसलेट कर लेते हैं एक बार ट्रांसलेट कर लेते हैं मैंने कहा ठीक है तो अभी हमने क्या किया हमने यहां पर सिंपल सी एक चीज कही हमने बोला कि जब भी मैं इस बॉक्स पे होवर करता हूं लेट्स से तो अगेन मैं होवर का यूज़ करता हूं अपने सूडो क्लास का यूज़ कर लेता हूं जब भी मैं इस बॉक्स पे होवर करूंगा तो मैं बोलूंगा ट्रांसफॉर्म कर दो तो हमने यहां पे बोला कि ट्रांसफॉर्म कर दो तो ट्रांसफॉर्म के अंदर मैंने क्या बोला रोटेट करना चाहता हूं रोटेट कितने एंगल से 90° से तो मैंने बोला जब भी बॉक्स पे होवर करूं ट्रांसफॉर्म कर दो और ट्रांसफॉर्म कैसे करना है 90 डिग्री से रोटेट कर देना या 90 की ज 45 कर लो इसको रोटेट 45 डिग्री बढ़िया यूआई पर चेक करते हैं अभी तो नर्मल दिख रहा है पर जैसे ही मैं होवर करता हूं क्या 45 डिग्री से रोटेट हुआ भैया पर एकदम झटके से हो रहा है और इसको स्मूथ करना होता तो मैं कैसे करता हां वो तो आता है भैया ट्रांजीशन का प्रयोग कर लेते हैं तो लेट्स से मैंने बोला यहां पर ट्रांजिशन अप्लाई कर दो इस बॉक्स के ऊपर हर प्रॉपर्टी के ऊपर हर प्रॉपर्टी के ऊपर अप्लाई कर दिया मैंने और चेक करते हैं सिंटेक्स सही नहीं है भैया अभी आपका तो सिंटेक्स फटाफट वेरीफाई करते हैं लास्ट क्लास में क्या लिखा था हमने तो सिंटेक्स हम कॉपी करके ले आते हैं तो हमने बोला कि ऑल ड्यूरेशन मेंशन कर दो और फंक्शन मेंशन कर दो और डिले मेंशन कर दो ठीक है तो हमने ड्यूरेशन मेंशन कर दी कि हम कितने ड्यूरेशन में चाहते हैं इसको हमने बोला कि मैं चाहता हूं ट्रांजीशन 3 सेकंड के अंदर हो और लीनियर हो और डिले क्या बोल दिया मैंने न सेकंड का डिले बोल दिया अब चेक करते हैं ट्रांजिशन में अब जो मेरा यह रोटेशन है ये स्मूथ होना चाहिए क्या रोटेशन स्मूथ है बहुत बढ़िया तो जो स्मूथ करने वाला काम था ये स्मूथ करने वाला काम किसने कर दिया ट्रांजीशन ने और जो रोटेट करने वाला काम था वो रोटेशन वाला काम किसने संभाल लिया ट्रांसफॉर्मेशन ने ठीक है तो कंफ्यूज नहीं होना इनके अंदर बिल्कुल भी ठीक है तो इतना समझ में आता है मुझे वेरी गुड अब मैंने बोला मैं रोटेशन नहीं करना चाहता मैं रोटेशन नहीं करना चाहता मैं कुछ स्केलिंग करना चाहता हूं लेट्स से मैं साइज को बड़ा छोटा करना चाहता हूं तो मैंने कहा साइज को बड़ा छोटा कर लो कि जब भी मैं होवर करूं साइज बड़ा हो जाए ठीक है अभी क्या कर अभी इसमें मजा नहीं आएगा ऊपर से कट रहा है ना यह देख ऊपर से ऐसे कट रहा था तो इसको ऐसे करते हैं थोड़ा सा चेंज करते हैं थोड़े से चेंज करते हैं अपने कोड के अंदर फटाफट यहां पर चलते हैं और मैंने क्या किया मैंने इसको ना एक कंटेनर के अंदर इंसर्ट कर दिया तो मैंने इस एनटायर कोड को कंटेनर के अंदर इंसर्ट कर दिया बढ़िया और मैंने यहां पर कंटेनर की प्रॉपर्टी सेट कर दी मैंने य बोला डॉट कंटेनर हमने बोला इसको डिस्प्ले मार्क कर दो फ्लेक्स और मैं सेंटर में रखना चाहता हूं तो मैंने यहां पर सेंटर में रख लिया इसको इसकी नीड नहीं है चेक करो हमने कंटेनर की हाइट और विड्थ प्रोवाइड कर दी एक बार कि भाई विड्थ जो है वोगी 100 वड और हाइट जो है वो हो गई तुम्हारी 100 बीएच अब दिखाओ बढ़िया तो अब बिल्कुल सेंटर में आ चुका है तो बिल्कुल सेंटर में आ चुका है और अब मैं इसको एक बार रोटेशन तुम दोबारा करके दिखाता हूं मैंने कहा लेट्स से यहां पर तुम रोटेशन करना चाहते हो मैंने बोला लेट्स से तुम यहां इसको रोटेट करना चाहते हो अब तुम्हें दिखेगा विदाउट एनी क्लिपिंग तो अगर मैं अब इसपे होवर करूं तो अब ये इस प्रकार से रोटेट कर रहा है वेरी गुड वेरी गुड बहुत बढ़िया लेट्स से मैंने 45 डिग्री के जगह यहां पे 360 डिग्री बोला होता तो क्या होता तो क्या होता तो अगर अब मैं इसके ऊपर होवर करूंगा तो कैसे नजर आएगा अभी करके दिखाता हूं तुम ठीक है तो मैंने इस पर होवर किया और ये ऐसे फटाफट से 360 डिग्री पूरा घूम के आ गया बढ़िया तो रोटेशन तुम्हें समझ में आ गई होगी अब हम सेकंड पॉइंट के ऊपर चल सकते हैं अभी हम सेकंड पॉइंट के ऊपर चल सकते हैं मैंने बोला कि मेरे को क्या करना है मेरे को ट्रांसफॉर्म करना है और मैं स्केलिंग करना चाहता हूं मैं स्केलिंग करना चाहता हूं यानी मैं इस साइज को बड़ा या छोटा करना चाहता हूं तो नॉर्मल डिफॉल्ट साइज तुम वन मान सकते हो और मैंने बोला मैं इसके साइज को दो गुना करना चाहता हूं तो मैंने ट्रांसफॉर्म के अंदर स्केल को टू सेट कर दिया तो जब भी मैं बॉक्स के ऊपर होवर करूंगा तो स्केल दो हो जाएगा दो गुना हो जाएगा अपने साइज में चेक करते हैं तो अगर मैं इसके ऊपर होवर करूं तो क्या हो रहा है स्केल ऐसे धीरे-धीरे दो गुना हो गया डबल साइज का बॉक्स बन गया बहुत बढ़िया हटाऊ तो वापस पुराने वाले साइज तक पहुंच जाएगा बहुत बढ़िया तो स्केलिंग के द्वारा तो मैं से साइज इक्र डिक्रीज भी कर सकते हो तुम चाहो तो साइज को डिक्रीज भी कर सकते हो ठीक है लेट्स से मैंने यहां क्या बोला मैंने बोला ट्रांसफॉर्म मैंने बोला ट्रांसफॉर्म हमने बोल दिया स्केल और हमने बोल दिया 0.5 सो अगर मैं यहां पे 0.5 पे इस पे क्लिक करूंगा तो इसका साइज ऐसे छोटा होता चला जाएगा तो तुमने अभी तक क्या सीखा रोटेशन तुम कर सकते हो तुमने अभी तक क्या सीखा तुम स्केलिंग के द्वारा छोटा भी कर सकते हो बड़ा भी कर सकते हो इस प्रकार से तुमने ये दो चीजें सीख ली है बहुत बढ़िया ऑब्जर्व करते हैं क्या मैं यहां पे नेगेटिव दिशा के अंदर रोटेट कर सकता हूं मैंने बोला कि ट्रांसफॉर्म के अंदर मैंने मेंशन कर दिया रोटेट और मैंने बोल दिया कि नेगेटिव नेगेटिव 45 डिग्री अब क्या होगा क्या यह पॉसिबल है हमने इस पे क्लिक किया तो ये देखो अभी ये एंटी क्लॉक वाइज घूम रहा है अभी ये एंटी क्लॉक वाइज घूम रहा है अगर मैं पॉजिटिव डिग्री दे दूंगा इसको तो ये क्लॉक वाइज घूमना चाहिए देखना अभी पहले ठीक होने दो फिर होवर करेंगे इसके ऊपर तो मैं होवर कर रहा हूं अब ये क्लॉक वाइज घूम रहा है तो यानी पॉजिटिव नेगेटिव दोनों वैल्यूज मैं रोटेट में प्रोवाइड कर सकता हूं क्लॉक एंटी क्लॉक वाइज मूवमेंट हो जाएगी बस स्केलिंग भी मैं वन से ऊपर वन से कम प्रोवाइड कर सकता हूं अकॉर्डिंग आपका जो एलिमेंट है छोटा बड़ा हो जाएगा तो हमने स्केलिंग सीख लिया हमने रोटेशन सीख लिया अब मैं चाहूं तो इस बॉक्स को टिल्ट कर सकता हूं इस बॉक्स को टेढ़ा कर सकता हूं तो मैंने क्या बोला कि मैं चाहूं तो ट्रांसफॉर्म के अंदर स्क्यू प्रॉपर्टी का यूज़ कर लेता हूं और स्क्यू करके मैंने क्या बोल दिया स्क्यू करके लेट्स से 45 बोल दिया तो इससे क्या हुआ ये थोड़ा सा अपनी पोजीशन से टेढ़ा हो जाएगा ठीक है नहीं हुआ तो हमने कहीं पर गलती करी है फटाफट वेरीफाई करके आते हैं स्क्यू कैसे करना है डिग्री भी लिखना था हमें ठीक है डिग्री में गलती कर दी हमने यहां पे डिग्री बढ़िया तो अब ये 45 डिग्री से टिल्ट कर जाएगा ये 45 डिग्र से होवर करने पे टिल्ट कर गया क्या ऑब्जर्व कर पा रहे हो क्या ऑब्जर्व कर पा रहे हो अब ये 45 डिग पर टिल्ट कर गया जैसे मान लो कि पहले तुम्हें ऐसा दिख रहा था अब ये ऐसे करके ऐसा टेढ़ा हो गया राइट तो तुम टिल्ट करना चाहो इस हिसाब से तो तुम टिल्ट भी कर सकते हो यूजिंग स्क्यू वाली प्रॉपर्टी बहुत बढ़िया तो नेटिव 45° मैंने यहां पर ऐड कर दिया ऑब्जर्व करते हैं क्या होगा इससे तो फटाफट यहां पे चलते हैं ओवर करता हूं तो पहले जहां पे इस डायरेक्शन में टिल्ट हो रहा था अब इस डाय के अंदर टिल्ट होगा तो डायरेक्शन बेसिकली चेंज हो रही है बाकी सब तो नॉर्मल है कोई भी इशू नहीं है राइट इस प्रकार चीजें काम कर रही है वेरी गुड तो आपने सीख लिया स्केल के बारे में रोटेट के बारे में स्क्यू के बारे में अब आते हैं सबसे नॉर्मल प्रॉपर्टी सब सबसे ज्यादा यूज की जाने वाली प्रॉपर्टी जो कि ट्रांसलेट मूवमेंट आप चाहते हैं मूव करें लेफ्ट राइट ऊपर नीचे जड डायरेक्शन में अब अंदर बाहर अगर 3d की बात करें तो अभी 2d की बात कर रहे हैं तो मैंने कहा कि मैं मूवमेंट चाहता हूं तो मैंने बोला ट्रांसलेट यानी मूवमेंट की बात कर रहा हूं लेफ्ट में खिसका है राइट में खिसका है ऊपर खिसका है नीचे खिसका है वो सब मुझे ऐड करना है तो यहां पे दो परा मीटर जाएंगे मेरे पास तो ट्रांसलेट के अंदर पहला पैरामीटर दिखाएगा कि एकस डायरेक्शन में कितना मूव करना है दूसरा पैरामीटर दिखाएगा वा डायरेक्शन में कितना मूव करना है तो मैंने बोला कि लेट्स से मैंने य मार्क कर दिया 500 पिक्सल तो मैंने बोल दिया x डायरेक्शन में तो इससे क्या होगा चेक करते हैं एक बार फटाफट हम यहां पे आए हमने यहां पे होवर किया अब ये x डायरेक्शन में मूव कर गया बढ़िया एक डायरेक्शन में मूव कर रहा है बहुत बढ़िया गलती से अगर मैंने -500 पिक्सल कर दिया होता तो तो क्या होगा तो अगेन ओबवियसली डायरेक्शन चेंज होनी चाहिए चेक करते हैं तो क्या डायरेक्शन चेंज हो रही है बहुत बढ़िया आपकी डायरेक्शन चेंज हो गई यहां से तो हमें एक चीज ये समझ में आती है अब लेट्स से मैंने यहां पे मार्क किया हुआ था जीरो पिक्सेल कि x डायरेक्शन में मूव नहीं करना y डायरेक्शन में मूव करना है तो मैंने लेट्स से बोल दिया यहां पे 500 पिक्सेल y वाली पैरामीटर का हमने 500 पिक्सेल सेट कर दिया तो ये ऊपर मूव करना चाहिए या नीचे मूव करना चाहिए चेक करते हैं कहां पे मूव करेगा मैंने होवर किया अब ये नीचे मूव कर रहा है तो पॉजिटिव केस में नीचे की तरफ मूव कर रहा होता है अगर लेट्स से मैंने यहां पे नेगेटिव 500 पिक्सल y के लिए मेंशन कर दिया होता तो तो इस केस के अंदर ये ऊपर की तरफ मूव करेगा बहुत बढ़िया ठीक है तो इस प्रकार से तुम यहां पर x और y की वैल्यू देते हो लेट्स से तुमने यहां बोल दिया कि भाई 500 पिक्सेल जो है मैं पॉजिटिवली यहां पे जाना चाहता हूं 500 पिक्सेल पॉजिटिवली यहां पे जाना चाहता हूं तो x की दिशा में राइट में y की दिशा में नीचे तो बेसिकली आप रिजल्टेंट ऐसे डायगोनल राइट साइड में जा रहे होगे वेरीफाई कर लो वेरीफाई कर लो डायगोनल राइट साइड में जा रहा है कि नहीं जा रहा बिल्कुल जा रहा है तो इस प्रकार से तुम चाहो तो ट्रांसलेट कर सकते हो एक्स डायरेक्शन के अंदर कहीं पर भी लेफ्ट राइट वाई डायरेक्शन के अंदर भी टॉप डाउन और डायगोनल भी जाना चाहो तो वो भी तुम जा सकते हो कोई भी एज सच इशू नहीं है तुमने सीखी चार प्रॉपर्टीज ट्रांसफॉर्म के अंदर रोटेट करना सी सीख गए स्केल करना सीख गए स्क्यू करना सीख गए टिल्ट करना बेसिकली और ट्रांसलेट करना यह चार चीजें तुम सीख चुके हो ठीक है और मुझे मेंशन करना कि और क्या-क्या प्रॉपर्टीज जो होती हैं अवेलेबल है मेरे पास ट्रांसफॉर्म के अंदर और उनको डिटेल में मेंशन करना कमेंट सेक्शन के अंदर मैं देखता हूं तुम खुद से डॉक्यूमेंटेशन पढ़ोगे कि नहीं पढ़ोगे अगर तुम डॉक्यूमेंटेशन खुद से पढ़ने गए आज यहां पे तो तुम्हें एक प्रॉपर्टी और एक्स्ट्रा मिल जाएगी आंखें अगर सही चल रही है तो तुने देख ली होगी अभी तक ठीक है तो प्रॉपर्टी तो मुझे कमेंट सेक्शन में मैच मेंशन करके बताओगे कि प्रॉपर्टी क्या है क्या काम करती है क्या काम नहीं करती है ठीक है दोस्त सो इस क्लास में इतना ही मिलेंगे आपसे नेक्स्ट क्लास में जहां पे कुछ डेवलप कर रहे होंगे प्रोजेक्ट धन्यवाद अगर मजा आया हो तो कमेंट करने में बिल्कुल ना शरमाए अगर सब्सक्राइब अभी तक नहीं किया तो सब्सक्राइब बिल्कुल कर दें क्योंकि हमने अपने स्टैटस चेक किए हमें पता लगे 53 पर लोग लेक्चर तो देख रहे हैं पर सब्सक्राइब नहीं कर रहे हैं 47 पर लोगों ने सब्सक्राइब किया हुआ है बहुत फर्क पड़ता है अगर आप सब्सक्राइब करेंगे आपके क्रिएटर की मोटिवेशन में सो हम आपको रिक्वेस्ट ही कर सकते हैं प्लीज सब्सक्राइब करें धन्यवाद है फ्रेंड मिलेंगे आपसे आपके नेक्स्ट सेशन के अंदर इस सेशन में इतना ही लव यू ऑल बा बाय गुड नाइट यहां पर आप शुरुआत करने वाले हैं सीएसएस का यूज करके प्रोजेक्ट डेवलपमेंट प्रोजेक्ट क्रिएशन आप यहां पर करने वाले हैं तो सबसे पहला हम एक प्यारा सा छोटा सा प्रोजेक्ट क्रिएट करेंगे उसका नाम है रेसिपी प्रोजेक्ट ठीक है तो यहां पर हम बहुत सारे स्वादिष्ट स्वादिष्ट खाने की रेसिपी लेस्ट डाउन करेंगे इन द फॉर्म ऑफ अ ब्यूटीफुल वेब पेज ठीक है तो अब तक बहुत सारी चीजें पढ़ी आपने पढ़ा पोजीशन प्रॉपर्टी के बारे में सीएसएस बेस एक सिलेक्टर फट्स कलर्स बॉर्डर बॉक्स मॉडल पैडिट मार्जिन विड्थ हाइट पोजीशन प्रॉपर्टी डिस्प्ले प्रॉपर्टी फ्लेक्स बॉक्स ठीक है फ्लोट क्लियर एनिमेशन ट्रांजिशन ट्रांसफॉर्म उन सभी का यूज करके उन सभी का यूज करके एक प्यारी सी वेबसाइट क्रिएट करने का हमारा संघर्ष रहेगा आज की वीडियो का जहां पर कुछ एक नव बार हम क्रिएट करेंगे कुछ कार्ड्स हम क्रिएट करेंगे इमेजेस ऐड करेंगे ट्रांजिशंस ऐड करेंगे ट्रांसफॉर्म ऐड करेंगे एनिमेशन क्रिएट करने की पूरी पूरी कोशिश करेंगे और देखते हैं कैसी वेबसाइट ड हम बना पाते हैं तो अभी का टारगेट क्या है पहले मैं तुम्हें एक रफ आइड देता हूं कि हम बनाना क्या चाहते हैं एक रेसिपी प्रोजेक्ट हम क्रिएट करने वाले हैं तो बेसिकली यहां पे क्या होगा एक रेसिपी वेबसाइट हम बनाना चाहते हैं तो हमने क्या बोला हमने बोला कि मान लो मान लो कि यह मेरी पूरी की पूरी वेबसाइट है ठीक है मान लो कि यह मेरी पूरी की पूरी वेबसाइट है ठीक है यह बात समझ में आती है सबसे पहले मैंने स्टार्टिंग में क्या किया सबसे पहले मैंने स्टार्टिंग के अंदर यहां पर एक नव बार बना दी यहां पर मैंने अपनी वेबसाइट का नाम बता दिया यहां पे तीन टैब दे दिए मैंने अ लेट्स से अबाउट सेक्शन हो गया एक कांटेक्ट सेक्शन हो गया और एक प्राइसिंग सेक्शन हो गया ऐसे कुछ मैंने लिख दिया तीन चीज मैंने यहां पर लिख दी ठीक है ऐसा कुछ कुछ लेआउट में चाहता हूं ठीक है फिर मैंने क्या कहा कि यहां पर जो मेरा ओवरऑल कंटेंट होगा वो मैं ऐसे यहां पर प्लेस करूंगा तो जो भी कार्ड्स होंगे जो भी रेसिपीज होंगी वो मैं इस डब्बे के अंदर इस डिव के अंदर प्लेस कर दूंगा और लास्ट में यहां से यहां तक मेरा फुटर बना हुआ होगा ठीक है तो मैंने क्या बोला कि भाई साहब ये हमारी हो गई नव बार बहुत बेसिक सा लेआउट क्रिएट कर रहे हैं आज ठीक है बट हां लर्निंग बहुत है और ये हमारा हो गया फुटर और एट दी एंड यहां पर क्या होगा यहां पर मेरी मल्टीपल आइटम्स होंगी ठीक है कहां पर मैंने बोला कि मेरी पहली रेसिपी जो है वो यहां पर मैं क्रिएट करूंगा दूसरी रेसिपी जो है व यहां पर क्रिएट करूंगा तीसरी रेसिपी जो है मैं यहां पर क्रिएट करूंगा बहुत बढ़िया जब भी किसी रेसिपी की बात आती है तो मैं रेसिपी कैसे क्रिएट करता हूं अ लेट्स से मैंने बोला रेसिपी अगर मुझे क्रिएट करनी है तो मैं ऐसा एक लेआउट क्रिएट कर रहा हूं जहां पे मैंने बोला कि ये ऐसे कुछ कर लेते हैं यहां पे लेट्स से हमने दो डब्बे और बना दिए दो डब्बे और बना दिए पहला डब्बा और ये दूसरा डब्बा दूसरा डब्बा जो है वो मुझे एक इमेज दर्शाता है जो भी रेसिपी होगी जो भी हम गुलाब जामुन लेट से बनाना चाहते हैं तो यहां पर गुलाब जामुन की इमेज आ जाएगी यहां पर सबसे पहले तो एक हेडिंग होगी फिर यहां पर इंग्रेडिएंट्स होंगे और फिर यहां पे प्रोसेस होगा उसको क्रिएट करने का ठीक है तो यही सेम तरीका यहां पर एप्लीकेट करेंगे हेडिंग ऑफ़ द आइटम अ इंग्रेडिएंट्स फॉर द आइटम एंड प्रोसेस टू क्रिएट दैट आइटम और यहां पर उसका इमेज होगी आइटम जो भी हम क्रिएट करना चाहते हैं सेम फॉर दिस बॉक्स ठीक है तो ऐसे करके मैं एक रेसिपी प्रोजेक्ट क्रिएट करने वाला हूं एक रेसिपी वेबसाइट क्रिएट करने वाला हूं तो शुरुआत करते हैं और आज चलते-चलते साथ में सीखेंगे सीखने के लिए कि यारे ये कैसे करते हैं ये कैसे करते हैं तो फटाफट चलते हैं हमारे कोड की तरफ आज ज्यादा लिखेंगे नहीं यहां पर फटाफट बस कोड करेंगे जहां पर फसें google2 तीन चलो बहुत बढ़िया अब चलते हैं कर दिया ना पक्का कमेंट करके आ जाओ फटाफट नहीं किया तो अब चलते हैं हमारी यई पर हमने कहा कि हमारा चैनल है कोड हेल्प बाय बबर अगर आप यहां पर जाएंगे आपको देखेंगी बहुत सारी प्लेलिस्ट ठीक है और इस प्लेलिस्ट के अंदर आपको एक प्लेस दिखेगी हमारी वेब डेव यूजिंग मनक ठीक है इस पे क्लिक करके आप सारे के सारे लेक्चर को एक्सेस कर सकते हैं अगर आपने अभी तक कोई भी लेक्चर फॉलो नहीं किया आपने रैंडम बस इस लेक्चर को डिस्कवर किया तो पूरी की पूरी प्लेलिस्ट एक ऑर्डर वाइज सीक्वेंस वाइज आप यहां से फॉलो कर सकते हैं और हमारे चैनल को सब्सक्राइब भी करेंगे कृपा करके 399 के हो चुके हैं 400 के आज पॉसिबली हो जाएंगे और हमने स्टट्स में वेरीफाई किया कि 53 पर ऑडियंस जो है उन्होंने हमारे लेक्चर देखते हैं पर सब्सक्राइब नहीं किया हुआ दोस्त आप सब्सक्राइब कर देंगे तो बहुत अच्छा लगेगा कृपा कर कर द ठीक है चलो अब आते हैं वापस कोड की तरफ मैंने कहा चलो फटाफट शुरू करते हैं हमने एक फोल्डर क्रिएट किया हमने कहा जी लेक्चर नंबर 26 और लेक्चर 26 के अंदर मैंने अपनी फाइल्स क्रिएट कर ली मैंने कहा जी एक हो गई मेरी इक्ड एल फाइल और एक मैंने क्रिएट कर ली अपनी अ स्टाइल्स ड सीएए फाइल बहुत बढ़िया और मैंने यहां पे दो इमेज इंसर्ट कर दी जो भी रेसिपीज मैं बनाना चाहता हूं लेट्स से मैंने बर्फी बना दी बर्फी की इमेज डाल दी यहां पे और मैंने यहां पर गुलाब जामुन की इमेज डाल दी ठीक है अकॉर्डिंग यहां पर अभी हम क्रिएट कर लेंगे कोड ठीक है मैं index.htm पे गया मैंने बोला कि ये मेरा बॉयलर प्लेड कोड है मैंने बोला तो कोड हेल्प द ढाबा वाली वेबसाइट हम क्रिएट करने वाले हैं और यहां पर फटाफट से कोड राइट डाउन करते हैं सबसे पहले हमने क्या बोला हमें क्या चाहिए सबसे पहले एक अपने को डिव क्रिएट करना है टॉप लेवल डिव जिसके अंदर सारा का सारा कोड आएगा तो मैंने एक कंटेनर क्रिएट कर लिया तो मैंने कंटेनर क्रिएट कर लिया और उस कंटेनर के अंदर मैं सारा का सारा कोड रखूंगा फिर मैंने क्या कहा था मेरी नव बार आनी चाहिए तो मैंने यहां पर क्या किया मैंने यहां पर क्या किया मैंने बोला कि नाव कंटेनर मैंने एक बना लिया नाव कंटेनर मैंने बना लिया इसके अंदर नेव बार मैं क्रिएट करूंगा अपने ठीक है तो इस कंटेनर के अंदर मैंने क्या बोला कि मैंने एक नव टैग का यूज कर लिया इस नव टैग के अंदर मैंने एक अन ऑर्डर लिस्ट क्रिएट कर ली ये रही हमारी पहली लिस्ट आइटम और ये रही हमारी दूसरी लिस्ट आइटम तो बेसिकली यहां पर हमने क्या किया है सबसे पहले हमने नाव कंटेनर बनाया जिसके अंदर मेरी नाव बार पूरी की पूरी आने वाली है फिर मैंने नाव टैग का यूज कर लिया जिसके अंदर मुझे दो आइटम चाहिए पहली आइटम लेफ्ट साइड में एक्सट्रीम लेफ्ट दूसरी आइटम एक्सट्रीम राइट के अंदर ठीक है तो मैंने क्या बोला कि दो आइटम चाहिए तो आइटम्स के लिए मैंने अडर लिस्ट क्रिएट कर ली ठीक है और दो आइटम चाहिए तो दो आइटम मैंने यहां पर क्रिएट कर ली पहली आइटम में मुझे नाम चाहिए तो पहली आइटम में मैंने नाम सेव कर लिया ठीक है मैंने यहां पे नाम सेव कर लिया हमने कहा नाम के अंदर कोड हेल्प डाबा ठीक है और सेकंड आइटम के अंदर हमने तीन चीजें बेसिकली क्रिएट करनी है तीन चीजें बेसिकली क्रिएट करनी है तो वो फटाफट से कर लेते हैं मैंने एक डिव क्रिएट कर लिया और मैंने कहा कि इसके अंदर मेरे पास तीन लिंक्स होने चाहिए जैसे एक होम पेज हो गया एक अबाउट पेज हो गया एक कांटेक्ट अस पेज हो गया तो मैंने बोला कि एक होम पेज हो गया तो मैंने य लिख दिया जी होम पेज और मैंने यहां पर बोल दिया कि इसको कर तो यहां पर हैश और मैंने इसको कर दिया कॉपी पेस्ट ठीक है तो एक मेरा होम पेज हो गया एक मेरा कांटेक्ट पेज हो गया और एक मेरा अबाउट पेज हो गया ठीक है तो इस प्रकार से मैंने यूआई में ये मेरा टॉप लेवल कंटेनर है टॉप लेवल कंटेनर के अंदर ये मेरी नाव कंटेनर हो गया ये मेरा नाव टैग हो गया इसके अंदर दो आइटम क्रिएट करनी है आइटम के लिए मैंने यहां पे अन ऑर्डर लिस्ट क्रिएट कर दी और ये मेरी पहली आइटम जहां पे सिर्फ एक टेक्स्ट लिखा हुआ है ये मेरी दूसरी आइटम जहां पे ये तीन चीजें लिखी हुई है बहुत बढ़िया देखते हैं यूआई पे कैसा बना है तो मैंने फटाफट इसको लाइव सर्वर के द्वारा रन कर दिया बढ़िया सुंदर तो नहीं लग रहा पर चलो ठीक है काम चलाते हैं इससे सही बनाते हैं इसको तो मैंने कहा सबसे पहली चीज जो मुझे यहां पर विजिबल है यहां पर यह डॉट्स आ रहे हैं तो मेरे को लिस्ट के अंदर कोई स्टाइल नहीं चाहिए तो अगर लेट्स से मुझे किसी लिस्ट के अंदर स्टाइल नहीं चाहिए होता तो उस केस में क्या करता हूं तो मैंने क्या किया सबसे पहले तो मैंने इस लिस्ट को आईडी दे दी मैंने बोला जी नाव लिस्ट ठीक है और अब मैं फटाफट जाता हूं इसको स्टाइल करता हूं मैंने बो य पहले लिंक भी करना पड़ेगा स्टाइल शीट को ठीक है तब आप जाओगे स्टाइल्ड सी आपने य पर स्टाइल करना शुरू किया आपने बोला जी डॉट नाव लिस्ट सॉरी हमने आईडी द है ना तो है नाव लिस्ट आपने बोला कि लिस्ट स्टाइल टाइप हमने लेट से इसको नन कर दिया ठीक है अब चेक करते हैं य प फर्क तो नहीं पड़ा तो दोबारा कोई और एटिबल स्टाइल टाइप नहीं है तो कुछ और होगा पर लिस्ट टाइल से रिलेटेड ही होगा लिस्ट टाइल हम नन कर दिया बढ़िया तो इससे भी नहीं बन रही बात तो यानी एक बार चेक करके आना पड़ेगा तो हम गए यहां पर हमने बोला कि यहां पर स्क्वेयर आपने बोला तो स्क्वेयर बुलेट्स आ गई ऐसे इनसाइड में ऐसा हो गया नन के अंदर हट जानी चाहिए लि स्टाइल नन करने से हट जानी चाहिए हटी क्यों नहीं अब तक फिर हटी क्यों नहीं हमने बोला नेव लिस्ट चेक कर लेफ कर लेते हैं आईडी नेव लिस्ट बढ़िया और हमने लिंक सही से किया है ऐसा आएगा यार यहां पर तभी नहीं चल रहा अब चेक कराओ यूआई प बढ़िया हट चुका ठीक है अब मैंने बोला दोनों एक के नीचे एक आ रहे हैं चलो वो बाद की बात है पहले कलर थोड़ा सा ऐड करते हैं मैंने बोला जो भी मेरा नाव कंटेनर है इसके अंदर मैं कुछ कलर ऐड करना चाहता हूं तो मैं फटाफट स्टाइल्ड सीस के अंदर गया मैंने बोला यह रहा मेरा नाव कंटेनर और मैं इसमें कलर ऐड करना चाहता हूं मैंने इसकी विड्थ दे दी 100% 100 वड बहुत बढ़िया ठीक है और लेट्स से मैंने यहां पर कंटेनर बना दिया मैंने यहां पर कंटेनर भी स्टाइलिंग कर दी मैंने बोला कंटेनर जो है उसकी हाइट जो है वो है 100 बीएच एंड उसकी जो विड्थ है वह है 100 वड और मैंने ओवरफ्लो जो है एक्स डायरेक्शन के अंदर नन मार्क कर दिया और कुछ और बेस्ट प्रैक्टिसेस मैंने बोला यूनिवर्सल स्ट्रक्टर का यूज कर लो जो मार्जिन है उसको जीरो मार्क कर दो और जो पडि है उसको जीरो मार्क कर दो और बॉक्स साइजिंग को बॉर्डर बॉक्स कर दो बहुत बढ़िया ठीक है तो ये तो कुछ चीज जो डी हमेशा करते ही है हमने प्रैक्टिस बना रखी तो मुझे करना ही करना है तो अब देखते हैं यूआई प कैसा लग रहा है इसकी विड्थ कंटेनर की मैंने 100 वस दे अब इसका बीजी कलर दे देता हूं मैं बीजी कलर इसका हमने सेट कर दिया ऐसा अच्छा सा ब्लू चाहिए मेरे को ऐसा बेकार सा ब्लू नहीं चाहिए यार तो मैंने बोला मुझको ना अच्छा सा ब्लू चाहिए हल्का सा चाहिए यह वाला फिर भी ठीक है थ और हल्का और हल्का और हल्का और ह और ह ऐसा कुछ कुछ कर दिया हमने थोड़ा सा और हल्का अब ठीक है चेक करते य कैसे बना तो यई प गए ऐसे करके बन रहा है चलो ठीक है ठीक है और अभी के लिए हमने क्या कर दिया हमने इसके बता दिया जो भी मेरा नाव कंटेंट ना इसकी हाइट थोड़ी सी कम लग रही है मेरे को तो मैं इसकी थोड़ी सी हाइट बढ़ा देता हूं तो मैंने बोला इसकी ना एक मिनिमम हाइट सेट कर देता हूं कि भाई आपको 100 पिक्सल तो लेना ही पड़ेगा ठीक है 100 पिक्सल थोड़ा ज्यादा हो गया य मैंने ज़ूम इन कर रखा है ठीक है तो मैंने अभी के लिए इसको 100 पिक्सल कर दिया 80 पिक्सल कर लेता हूं चलो ठीक है ये थोड़ा हिडन ट्रायल तो तुम्हें करना पड़ेगा एक सही नंबर ढूंढने के लिए ठीक है अभी यह टेक्स्ट बहुत छोटा है इस टेक्स्ट को भी मुझे स्टाइल करना पड़ेगा तो एक बार स्टाइल कर देते हैं हम आए टेक्स्ट के ऊपर हमने कहा कि टेक्स्ट कहां है हमारा ये रहा हमारा पैराग्राफ इसको फटाफट से देते हैं एक बार हमने कहा जी आईडी प्रोवाइड कर दी हमने कहा कि कितना चाहिए टेक्स्ट साइज हमें यहां पे हमने बोला इसका नाम पहले देते हैं हमने बोला नाव लोगो बोल देते हैं इसको ठीक है लोगो बोल देते हैं इसको ब्रांड नेम बोल देते हैं य तो जो भी तुम्हे अच्छा लगे वो लिख लेना हमने बोला यहां पे नाव लोगो नाव लोगो तुमने ऐड कर दिया यहां पे इसका फंट साइज और हमने बोला फंट हमने मार्क कर दिया यहां पे लेट्स से 2 आरएम चेक करते हैं कितना साइज बनेगा इससे कोड हेल्प द डाबा 2 आरएम करा मजा तो नहीं आया 2.5 कर सकते हैं क्या अब थोड़ा ठीक लग रहा है मैंने कहा और 2.8 कर सकते हैं क्या अभी और ठीक लग रहा है ठीक है देखो स्टाइलिंग हो सकता है तुम्हें गंदी लगे मतलब ऐसा सुंदर सी ना लगे वेबसाइट यूआई वाला नहीं है यूआई वाला नहीं हूं पर हां मैं डेवलप कर दूंगा ठीक है ये बढ़िया तो अब बात करते हैं यहां पे आपके लिस्ट आइटम्स के अंदर जो भी चीजें पड़ी है उस उसके टेक्स्ट साइज की बात कर लेते हैं तो हमने यहां पर आए और हमने लेट्स से इस नाव लिस्ट के लिए भी सेम मेंशन कर दिया कि नेव लिस्ट की स्टाइलिंग सेम प्रकार से कर दो तो हमने बोला कि यहां पर फंट साइज जो है नेव लिस्ट के अंदर भी हमने मार्क कर दिया ऐसा 2.5 आरएम चेक करते हैं बढ़िया अब सही लग रहा है पर ये दोनों एक के नीचे एक आ रहे हैं और मुझे क्या चाहिए मुझे एक्सट्रीम लेफ्ट और एक्सट्रीम राइट में चाहिए तो एक्सट्रीम लेफ्ट एक्सट्रीम राइट के लिए क्या करना पड़ेगा इन दोनों के पेरेंट को फ्लेक्स बनाना पड़ेगा अब इन दोनों आइटम का पेरेंट कौन है फटाफट चलते हैं कोड में हमने कहा जी इस लिस्ट आइटम का और इस लिस्ट आइटम का पेरेंट कौन है ये है नेव लिस्ट ठीक है तो इस नेव लिस्ट को मुझे फ्लेक्स बनाना पड़ेगा तो फटाफट गया स्टाइल्ड स मैंने नव लिस्ट को बना दिया फलेक्स फलेक्स डिस्प्ले फ्लेक्स सबसे पहले चीज साइड बाय साइड चाहिए तो साइड बाय साइड आ गया होगा डिस्प्ले प्रप फ्लेक्स में बाय डिफॉल्ट आपकी रो डायरेक्शन होती है साइड बाय साइड आ गया मुझे एक्सट्रीम लेफ्ट एक्सट्रीम राइट में चाहिए तो मैंने क्या बोल दिया जस्टिफाई कंटेंट और हमने बोला स्पेस बट बन देखते हैं इससे क्या बनता है स्पेस बिटवीन से एक्सट्रीम लेफ्ट एक्सट्रीम राइट में आ गया थोड़े मार्जिंस ऐड करने पड़ेंगे तो मार्जिन ऐड कर लेते हैं तो हमने कहा जो नेव लिस्ट है उसके मार्जिन ऐड कर दो कुछ तो हमने बोला मार्जिन अ मार्जिन हमने ऐड कर दिए लेट्स से मार्जिन लेफ्ट मैंने यूज कर लिया यहां पे ऐसा 15 पिक्सल टाइप ठीक है और मार्जिन राइट मैंने यूज कर लिया यहां प ऐसा 15 पिक्सल टाइप और चेक करते हैं यूआई पे बढ़िया थोड़ा सही लग रहा है पहले से अब मैंने क्या कर दिया इसको अब मैंने बोला कि इसको वर्टिकली सेंटर में प्लेस कर दो अलाइन आइटम्स सेंटर बढ़िया चेक करो ई पे अभी तो नहीं बनी बात हमने क्या किया हमने बोला इसको सेंटर में प्लेस कर दो ठीक है चेक करते हैं गड़बड़ कहां प हुई है हमने बोला इंस्पेक्ट एलिमेंट हमने बोला कि यह रहा हमारा नेव लिस्ट बढ़िया तो ये ऊपर ऐसे प्लेस है तो इसको भी नेव लिस्ट को भी सेंटर में प्लेस करना पड़ेगा तो मैंने बोला नेव लिस्ट जो है किसके अंडर है नाव लिस्ट जो है वो आपके नाव कंटेनर के अंडर है तो फटाफट से यहां पर गया और मैं नव कंटेनर के अंदर जाकर कहता हूं कि भाई डिस्प्ले फ्लेक्स कर दो और भाई सब कुछ सेंटर में प्लेस कर देना ठीक है तो मैंने इसको सेंटर में प्लेस कर दिया अब चेक करो यूआई प आ गया सेंटर में बढ़िया यह आपका सेंटर में आ चुका है पर दोनों एक दूसरे के पास में आ चुके हैं जबकि हमें एक्सट्रीम लेफ्ट और एक्सट्रीम राइट में चाहिए था चेक करते हैं तो हमने नाव कंटेनर के अंदर ऐसे फ्लेक्सस बना दिया ठीक है और हमने बोल दिया कि दोनों जो है इस प्रकार से आ चुके हैं तो हमें बाय डिफॉल्ट यहां पर एक्सप्लीसिटली मेंशन करना पड़ेगा नेव लिस्ट के अंदर कि भाई वव लिस्ट की जो विड्थ है ना व 100% रहेगी 100% ठीक है तो अभी तो नहीं बनी बात चेक करते हैं क्या हुआ यह तुम्हारा नेव कंटेनर है यह तुम्हारा नेव कंटेनर है या फिर मैं य यह तुम्हारा नेव कंटेनर है यह तुम्हारा नेव कंटेनर है और यह तुम्हारी नेव लिस्ट है ठीक है तो हमने क्या किया हमने जाके ना नव बार जो हमने क्रिएट कर रखी यहां पे उस न बार की भी विड्थ को हमने 100% कर दिया चेक करो बढ़िया तो इस प्रकार तोमने यह संभाल लिया संभाल लिया वेरी गुड थोड़ा सा ओवरफ्लो हो रहा है व लो हम संभालना पड़ेगा हमने बोला के जो आपका यह नाव कंटेनर है जो आपका सबसे ऊपर नाव कंटेनर है इसको पोजीशन रिलेटिव मार्क करते हैं तो हमने कंटेनर एक बार पोजीशन रिलेटिव कर दिया और वि दी और यहां पर बोल दिया कि भाई ओवरफ्लो एक्स नन कर दिया कि एक्स डायरेक्शन में ओवरफ्लो मत करना भाई ठीक है बढ़िया अभी भी कुछ इश्यूज तो हम फेस कर रहे हैं चेक करते हैं कहां पर गलती है तो यहां पर यह थोड़ा स्क्रोल मुझे करना पड़ रहा है ठीक है जो एडेड मार्जिन थे हमारे उनको एक बार कमेंट करते हैं और सही हो गया अब मैंने कहा कि बस थोड़ा सा मार्जिन और मुझे ऐड करना पड़ेगा तो मैंने कहा जी ये विड्थ 100% हो गई 100% हो गई और और हमने कहा हमने कहा कि यहां पर कुछ पैंग ऐड कर लेते हैं पैंग ड कर दिया हमने ऐसा 15 पिक्सल टाइप ठीक है तो इस प्रकार से हमारा य दिख रहा है ठीक है अ यार इतना सुंदर तो नहीं दिख रहा बलो ठीक है अ मैंने क्या बोला मुझे क्या करना है मुझे कोबा का ऐसा कलर चेंज करना है कलर चेंज करना कलर चेंज करते हैं यहां पर तो मैंने बोला मेरा पैरा कहां पर है पैरा कहां पर है फंट साइज नाव लोगो हमने बोल दिया कि इसका फंट कलर जो है ना भाई कलर जो है इसका हमने चेंज कर दिया और बोल दिया वाइट यह वाइट हो गया और हमने इनका भी अंडरलाइन हटाते हैं पहले इसमें से यार हमने बोला कि एक बार चेक करते हैं हमने बोला रिमूव कैसे करते हैं रिमूव अंडरलाइन फ्रॉम एंकर टैग चेक करते हैं तो हमने बोला बा सेटिंग टेक्स्ट डेकोरेशन तो टेक्स्ट डेकोरेशन करके प्रॉपर्टी होगी उसको हमें सेट करना है तो हमने बोला कि यहां पर जो भी मैं एंकर टैग का यूज कर रहा हूं उसके अंदर टेक्स्ट डेकोरेशन को आप मार्क कर देंगे नन ठीक है तो इससे आप अंडरलाइन हटा पाएंगे और इस प्रकार से य आ गए होम कांटेक्ट अबाउट बढ़िया इन स्पेसिंग मुझे बढ़ानी पड़ेगी फ्लेक्स आइटम्स के अंदर एक बार स्पेसिंग देख ले थोड़ा स्पेसिंग बढ़ा के देख लेते हैं तो हमने बोला के आपका जो यह फ्लेक्स था कौन था फ्लेक्स लेट्स से यह वाले डिव की बात कर रहा हूं इस वाले डि में फ्लेक्स बना देता हूं इसको तो मैंने बोला आइटम फलेक्स या फिर सिंपल बोल देता हूं नव आइटम्स तो नव आइटम्स नाम का जो डिव है इसको स्टाइल कर लेते हैं मैंने बोला जी नव आइटम्स और मैंने बोल दिया इसको कि इसको डिस्प्ले बना दो फ्लेक्स और इनके बीच की स्पेसिंग बढ़ानी है मुझे तो क्या कोई गैप है मेरे पास मैंने गैप ऐड कर दिया 10 पिक्सेल का या लेट्स से 20 पिक्सल का चेक करते हैं स्पेसिंग बड़ी बड़ी मैंने बोला इसको 20 की जगह ऐसे कर दो 40 पिक्सल का क्या स्पेसिंग बड़ी बिल्कुल बड़ी तो इस प्रकार से आपका यूआई बन गया ठीक है इस प्रकार से आपका यूआई नजर आ रहा है मैंने कहा मजा नहीं आ रहा देखने में देखने में मजा नहीं आ रहा तो अभी क्या करते हैं ग्रेडिएंट जो बैकग्राउंड कलर ना ग्रेडिएंट ढूंढते हैं तो बड़े वेबसाइट ढूंढेंगे जहां पे अच्छे-अच्छे कलर्स हमको मिल जाए उनका यूटिलाइजेशन यहां पर हम करेंगे ठीक है चलो यहां पे हम आ गए और हमने बोला बैकग्राउंड कलर चाहिए मुझे ग्रेडिएंट में मैं इसके ऊपर आ गया इसको मैंने कर लिया कॉपी ठीक है एक बार पेस्ट करके देखते हैं यहां पर क्या मिला है मुझे यहां पेस्ट करके देखता हूं एक बार ये क्या मिला है मुझे कॉपी कर लिया अब यहां पेस्ट करते हैं ऐसा कुछ कुछ ठीक है तो ये वाला कॉन्फिन फटाफट अप्लाई करते हैं हमारे नाव बार के कलर के अंदर जो हमने यहां पे कलर सेट किया हुआ है इसको हमने भी कमेंट कर दिया और यहां पे हमने और यहां पर हमने जो ग्रेडिएंट कॉपी करके लाए हैं उसको ऐड कर दिया ठीक है चेक करते हैं कैसा लगेगा मेरे हिसाब से सुंदर लगना चाहिए बट वेरीफाई कर लेते हैं तो हम फटाफट गए यहां पे और अब थोड़ा पहले से सुंदर लग रहा है अब थोड़ा पहले से सुंदर लग रहा है मैंने बोला इसका टेक्स्ट में मजा नहीं आ रहा इसको भी वाइट कर दो बोला इसको भी वाइट कर दो तो मैं फटाफट गया मेरे नव आइटम्स के अंदर और मैंने यहां पर बोल दिया जी कलर जो है इसका भी आप और कर दो ठीक है इस प्रकार से यह नहीं चेंज हुआ क्यों चेंज नहीं हुआ इसको चेक करते हैं फटाफट तो हम फटाफट यहां पे आए हमने कहा जी ओ सॉरी यहां पे आते हैं हमने बोला जी इसको कलर जो है अर कर दो बढ़िया अब सही चल रहा है तो हमने एक नव बार क्रिएट कर लिया तो अभी यूआरएल को थोड़ा ऑब्जर्व करना जैसे ही मैं होम प क्लिक करता हूं यहां पे हैशटैग लग जाता है ठीक है अब जैसे मैं कांटेक्ट पर क्लिक करता हूं यहां पर हैशटैग आ जाता है अब जैसे मैं अबाउट पर क्लिक करता हूं यहां पर हैशटैग आ जाता है राइट जैसे तुमने अभी कोड के के अंदर ऐड किया था दैट्ची है यहां पर तुमने ऐड किया हुआ है ठीक है तो इस प्रकार से तुमने एक नव बार क्रिएट कर लिया अगर मुझे इसको थोड़ा सा ब्रेक करना हो तुम्हारे साथ तो मैं ब्रेक करके दिखा देता हूं हमने अभी क्या किया सबसे पहले हमने एक कंटेनर बना लिया अब ये कंटेनर क्या दिखाता है ये ओवरऑल वेबसाइट दिखाता है ये ओवरऑल वेबसाइट है इस कंटेनर के अंदर मैंने एक नव कंटेनर बना दिया जिसके अंदर मैं अपने नेविगेशन बार क्रिएट करूंगा तो मैंने बेसिकली यहां पर एक और कंटेनर बना दिया जिसके अंदर अपनी वेबसाइट जिसके अंदर अपने वव बार मैं क्रिएट करने वाला हूं इस वव कंटेनर के अंदर मैंने नाव टैग का यूज कर लिया तो मैंने यहां पर इसके अंदर नाव टैग का यूज कर लिया इस नाव टैग के अंदर मैंने अन ऑर्डर लिस्ट का यूज कर लिया तो मैंने यहां पर अन ऑर्डर लिस्ट का यूज कर लिया इस लिस्ट के अंदर दो आइटम्स मैंने क्रिएट कर दी पहली आइटम मैंने यहां पर रख दी दूसरी आइटम मैंने यहां पर रख दी ठीक है इसके अंदर मैंने पैराग्राफ टैग का यूज किया था तो यहां पर पैराग्राफ ऐड कर दिया इसके अंदर मैंने एक डिव का यूज किया था जिसके अंदर तीन आइटम्स थी ठीक है इसके अंदर आपने तीन एंकर टैग यूज किए थे तो ये तीनों आइटम आपने यहां पर इंसर्ट कर दी इस प्रकार से काम चल रहा है भैया क्या यहां पे इतना कॉम्प्लेक्शन करना इंपॉर्टेंट क्या इसके मना बात नहीं बन सकती मैंने कहा बिल्कुल बन सकती है क्या इसके मना कोड नहीं चल सकता मैंने कहा बिल्कुल चल सकता है तो फिर आपने किया क्यों है अच्छी प्रैक्टिस फॉलो कर रहे हैं आगे जितना जाओगे ऐसी प्रैक्टिस तुम फॉलो करने वाले हो हो सकता है कोई कोड जो है तीन चार डिव अभी मैंने यूज किया उससे कम करके भी हो जाता हो सकता है जो भी स्टाइलिंग मैंने यहां पर अचीव की है वो स्टाइलिंग तो मेरे से कम लाइन ऑफ कोड लिख के अचीव कर पाते बिल्कुल पॉसिबिलिटी है यहां पर जो चीज मैंने क्रिएट कि है उसको क्रिएट करने के 50 पॉसिबिलिटी होगी बड़े पर्स तुम क्रिएट कर सकते हो कोई भी ऐसा इशू नहीं है ठीक है तो अभी बस तुम समझ चलो जो मैं समझा रहा हूं तुम्हें समझ में आ रहा है बहुत अच्छी बात है नहीं समझ में आ रहा तो पुराने लेक्चर तुमने ढंग से देखे नहीं है अब चलते हैं आगे और मैंने बोला कि यार मेरे को ना ये पीछे वाइट बैकग्राउंड नहीं चाहिए जो नीचे वाइट बैकग्राउंड आ रहा है तो मैंने क्या कर दिया मैं फटाफट इंक्स एटीए पे गया और मैं बोला बॉडी का ना मैं कलर चेंज कर देता हूं मैं बॉडी का बैकग्राउंड कलर चेंज कर देता हूं मैंने कहा ठीक है करते हैं आ जाओ तो हम फटाफट यहां पे गए या फिर कंटेनर कर देता हूं कंटेनर हमने वैसे ही 100 v एच और वड किया हुआ है ना तो इसका कर लेते हैं तो मैंने बोला कि इसका बीजी कलर फटाफट डिफाइन करते हैं एक और मैं फटाफट से एक और ग्रेडिएंट लेके आता हूं तो मैं फटाफट ग्रेडिएंट के अंदर गया मैंने बोला कि मुझे थ वाइट सा ग्रेडिएंट चाहिए मिल जाएगा क्या इसको कर लिया कॉपी और ये ग्रेडिएंट मैंने यहां पर पेस्ट कर दिया सुंदर बनेगी वेबसाइट से थोड़ी सी ऐसा लगता है मुझे बाकी तुम बना लोगे मुझे विश्वास तुम्हारे ऊपर अब तो यहां पे ठीक है तो ऐसा कुछ कुछ बन गया ठीक है ऐसा करके क्रेडिट बन गया अब मैंने क्या बोला था कि अब यहां पर इसके बीच में हम अपना कंटेंट का पूरा बॉक्स बना लेंगे ये वाला ठीक है तो मैंने यहां पर अपना कंटेंट बॉक्स क्रिएट कर लिया मैं इक्स बॉक्स कंटेंट बॉक्स ठीक है एक डिव मैंने क्रिएट कर लिया कंटेंट बॉक्स नाम का इसमें बाद में आइटम्स डालूंगा तो अब यहां पर लिख देता हूं बस आइटम वन ऐसे लिख देता हूं और लास्ट में मेरा क्या आने वाला है लास्ट में एक फुटर क्रिएट करने वाला हूं लास्ट में एक फुटर क्रिएट करने वाला हूं तो मैं यहां प ऐसे कह सकता था के डॉट फुटर बॉक्स ठीक है अब तुम्हें अगर याद होगा तुम्हें अगर याद होगा तो तुम बता रख थे मैंने कुछ टैग्स जहां पे तुम अपनी नाव बार को किस टैग के अंदर इंसर्ट कर सकते हो तो अपने नाव बार को हडर टैग के अंदर इंसर्ट कर सकते कि भाई इसको हेडर के अंदर होना चाहिए ठीक है थोड़ा और बेस्ट प्रैक्टिस की तरफ चल रहे हैं तो मैंने इसको पूरे के पूरे को हेडर टैग के अंदर इंसर्ट कर दिया ठीक है और तुम्हारा जो मेन कंटेंट है उस मेन कंटेंट को तुम किसके अंदर इंसर्ट कर सकते हो तुम्हारा एक मेन टैग था उसका यूटिलाइजेशन तुम यहां पर कर सकते हो मेन टैग तुमने यूज कर लिया यहां पर तुमने अपना बाकी कोड डाल दिया और फुटर जो है उसके तुम्हारे पास ऐसा एक फुटर टैग अवेलेबल है तो फुटर टैग का यूज करके तुम यहां पर सारा का सारा कोड ऐड कर सकते हो ठीक है तो फुटर फटाफट से एक बार क्रिएट कर लेते हैं विदाउट टाइम तो मैंने बोला फूटर में क्या क्या चाहिए होता है मैंने य सिंपल सी चीज बोली मैंने बोला कॉपीराइट सिंबल फॉर एटील तो ऐसा मेरे पास इसको मैं यूज करके कॉपीराइट का सिंबल ड कर सकता हूं तो मैंने यहां पर क्या किया फुटर के अंदर क्या किया मैंने यहां पर एक पैराग्राफ ऐड कर दिया मैंने यहां पर एक पैराग्राफ ऐड कर दिया और मैंने व पर लिख दिया कि कॉपीराइट कॉपीराइट का सिंबल आ गया और यहां पर हमने नाम लिख दिया कोड हेल्प द ढाबा प्राइवेट लिमिटेड ठीक है 2023 ऐसे लिख दिया हमने ठीक है ठीक है फुटर चेक कर लेते हैं अगेन फुटर के अंदर सेम कॉन्फिन हमारी चली जा रही है जो हमारी सेम कॉन्फिन चल रही है उसी सेम कॉन्फिन को मैं यहां पर भी मेंशन कर दूंगा तो हम यहां पर आए मैंने बोला फुटर बॉक्स जो है मेरा डॉट हमेशा मैं तब लगाता हूं जब मैंने क्लास का यूज किया होता है जैसे मैंने यहां पर क्लास का यूज किया है और हैश मैं हमेशा तब लगाता हूं जब मैंने आईडी का यूज किया होता है जैसे मैंने यहां प आईडी का यूज किया ठीक है तो कंफ्यूज मत होना इस छोटी सी चीज के अंदर फटाफट गया मैंने यहां से बैकग्राउंड कॉपी कर लिया और इसी को मैंने फुटर के अंदर भी पेस्ट कर दिया ठीक है मैंने कहा और मुझे टेक्स्ट किस कलर का चाहिए टेक्स्ट मुझे वाइट कलर का चाहिए अजर कलर का चाहिए तो मैंने यहां पर ऐड कर देता हूं फटाफट से मैंने बोला जी कलर और यहां मैंने अजर ऐड कर दिया फटाफट चेक करते हैं यई पे कैसा लग रहा है हमारा भाई यहां पर मैं गया ठीक है फुटर भी बढ़िया आ रहा है अगेन अभी तो ये ऐसा कुछ कुछ आ रहा है बट मुझे कहां चाहिए मुझे बिल्कुल नीचे चाहिए एकदम नीचे पोजिशनिंग करनी पड़ेगी मुझे इसकी तो मैंने सबसे पहले इसकी विड्थ मार्क कर दी भाई विड्थ चाहिए 100% ठीक है जो भी इसका पेरेंट होगा इसने अपनी विड्थ 100% कर ली हो उस हिसाब से अभी तो नहीं की है भैया कोई बात नहीं करवा देंगे तो अभी नहीं की है पर करवा देंगे हम चिंता नहीं करनी चेक करते हैं वैसे क्यों नहीं की एक बार इंस्पेक्ट करते हैं और कुछ गड़बड़ है कुछ गड़बड़ है यह इतनी ही विड्थ ले रहा है यह भी और यह भी कुछ कुछ तो पंगा है चेक करते हैं स्टाइलिंग को यह विड्थ को हम य डब् करना पड़ेगा एच लिख दिया हमने गलती से अब चेक करते हैं बढ़िया चल रहा है सही है तो यह ऐसा आ रहा है और मैंने बोला कि मुझे यहां पर जो भी टेक्स्ट है उसको सेंटर में अलाइन करना है तो फटाफट से यहां पर जाके टेक्स्ट को अलाइन कर दिया हमने सेंटर के अंदर बहुत बढ़िया अब चेक कराओ बढ़िया लग रहा है एक मिनिमम हाइट सेट कर देते हैं इसकी मैंने बोला इसकी एक मिनिमम हाइट है हमने लेट से कर दिया 50 पिक्सल टाइप्स तो चेक कर लेते हैं ठीक है कम है ज्यादा है थोड़ी सी और कम कर लेते हैं हमने बोला कर दो 40 पिक्सेल टाइप्स और हमने टेक्स्ट का य पर थ साइजिंग ऐड कर दी भाई साहब जो भी इसका टेक्स्ट होगा इसके अंदर हमने बोला की फूटर बॉक्स के अंदर पैराग्राफ है ना तो हमने बोला डॉट फूटर बॉक्स के अंदर जो आपका पैराग्राफ है ना उसका कलर आपने यहां से ऐड किया था तो इसको यहां से हटा दो और हमने बोला कि यहां पर इसका साइज भी मेंशन कर दो फंट साइज हम फॉलो कर रहे हैं कम कर रहे थोड़ा 20 20 नहीं आरम कर लेते हैं आओ चेक करते हैं यई प बढ़िया सही लग रहा है और हमने इसको सबसे नीचे बिल्कुल बॉटम में चिपका दिया बिल्कुल बॉटम में चिपका दिया ठीक है तो हमने क्या बोला चलो अभी छोड़ देते हैं जब हम बीच वाला कंटेंट बॉक्स बना लेे उसके बाद देखेंगे तो अभी फटाफट बिटवीन वाला जो चेक बॉक्स कंटेंट बॉक्स था यह वाला उसे क्रिएट कर लेते हैं ठीक हैलो तो यह आ गया प ये आगे मेन वाले टैग में ये डि हमने कट कि कंटेंट बॉक्स के ठीक है सबसे पहली चीज हमने क्या बोली कि भाई इस कंटेंट बॉक्स की ना एक विथ मैं डिफाइन करूंगा और सिर्फ उतनी ही विड इसकी होनी चाहिए फटाफट यहां पर आया मैंने बोला जी डॉट कंटेंट बॉक्स और मैंने बोला इसकी विड्थ जो होगी व होगी 70 पर विथ होगी इसकी 70 पर ऑफ ऑफ पेरेंट तो इसकी विड्थ हो गई 70 चेक करते हैं एक बार य से बढ़िया 70 पर होगी मैं चाहता हूं य सेंटर में अलाइड हो मैंने बोला मैं सेंटर में अलाइन हो ये चाहता हूं तो मैंने बोला इसका मार्जिन जो है वो मैंने सेट कर दिया ऑटो तो क्या सेंटर में आ गया चेक करते हैं क्या बॉक्स सेंटर में आया कि नहीं आया फटाफट चेक करते हैं सेंटर में आ गया बढ़िया अब मैं चाहता हूं इसके ऊपर एक बॉर्डर ऐड किया हुआ हो मैंने बोला कि मैं इसमें एक बॉर्डर सेट करता हूं भाई मुझे टू पिक्सल सॉलिड ब्लैक बॉर्डर चाहिए और मेरा यहां पर जो बैकग्राउंड कलर होगा वो होगा वाइट कलर खत्म चेक करते हैं य वाई अलग से दिख रहा है बिल्कुल दिख रहा है बढ़िया टू पिक्सल थोड़ा सा ज्यादा लग रहा है इसको वन पिक्सल कर लेता हूं मैंने इसको वन पिक्सल कर लिया चेक करते हैं यूआई पे सही है अब यहां पर मैं अपने सारे के सारे आइटम्स जो हैं उसे ऐड करूंगा तो फटाफट आइटम के लिए कोड कर देते हैं तो हमने बोला आइटम मुझे किस प्रकार की चाहिए थी वो एक बार समझा देता हूं तो अगर मैं तुम्हें यहां पे समझाऊं तो आइटम जो है वो इस प्रकार की थी अ हमने बोला कि यहां से ये एक आइटम की बात कर रहा हूं ठीक है एक आइटम बॉक्स की बात कर रहा हूं इस एक आइटम बॉक्स के अंदर आपने दो दो बॉक्सेस अलग से बना र थे एक बॉक्स ये रहा और एक बॉक्स यह रहा इसके अंदर आपने कहा था कि यह वाला जो बॉक्स है ये इमेज को दर्शाता होगा और इस बॉक्स के अंदर पहला एक बॉक्स होगा जो कि हेडिंग को दर्शाए दूसरा एक बॉक्स होगा जो कि ऐसे कुछ इंग्रेडिएंट्स को दर्शाए तीसरा एक बॉक्स होगा जो कि आपका प्रोसेस को दर्शाए तो ये क्रिएट करना है तो यहां पे साफ-साफ मुझे पता लग रहा है कि अगर मुझे किसी एक डब्बे के अंदर दो आइटम है साइड बाय साइड चाहिए तो इसका मतलब है कि ये जो है आपका फ्लेक्स बन जाएगा और इन दोनों को ऐसे मैं अ जस्टिफाई कंटेंट कर सकता हूं स्पेस बिटवीन स्पेस अराउंड जो तुम अा लगे वो तुम प्लेस कर सकते हो और यहां पर इस डब्बे की बात करें तो यहां पर आइटम एक के नीचे एक आ रही है तो मैं इस डब्बे को एक फ्लेक्स बना दूंगा और ये तीनों आइटम जो है एक के नीचे तो डायरेक्शन कॉलम मार्क कर दूंगा ठीक है ऑलरेडी हम कर चुके हैं फ्लेक्स के नेक्स्ट वाले लेक्चर के अंदर समझाया था मैंने आपको ये तो एक बार इसको फटाफट कोड कर लेते हैं चलते हैं इक्ड [संगीत] वन चलो तो आइटम वन इंसर्ट कर लेते हैं तो मैंने यहां पर क्या बोला कि मेरे को यहां पर आइटम वाला डब्बा चाहिए तो मैंने यहां पर एक आइटम का डब्बा बना दिया आइटम ठीक है आइटम के अंदर दो डब्बे होंगे एक लेफ्ट वाला डब्बा एक राइट वाला डब्बा जो आपने जस्ट अभी देखा तो हमने बोला कि ये आ गया लेफ्ट बॉक्स ठीक है लेफ्ट बॉक्स और यह आ गया जी आपका राइट बॉक्स ये आ गया आपका राइट बॉक्स ठीक है और इनके अंदर मैं कंटेंट प्लेस करूंगा अब लेफ्ट वाले बॉक्स के अंदर तीन चीजें मैंने आपको बताई थी पहली क्या थी आपकी पहली हेड थी तो मैंने बोला था हेडिंग ठीक है तो मैं यहां पर आता हूं और मैंने लिख दिया य प ऐसा h2 और मैंने यहां पर हेडिंग इंसर्ट कर दी मैंने बोला जी गुलाब जामुन ठीक है और फिर हेडिंग के बाद मेरे को क्या चाहिए थी क्या क्या इंग्रेडिएंट्स लगेंगे इस गुलाब जामुन को बनाने के लिए तो मैंने बोला कि यहां पर मेरे को लगेगी अन ऑर्डर लिस्ट और अन ऑर्डर लिस्ट के अंदर मैंने मेंशन कर दिया क्याक इंग्रेडिएंट्स ने वाले हैं तो मैंने बोला कि एल आई स्टार 3 तीन इंग्रेडिएंट्स बता देता हूं तो मैंने बोला जी जी क्या लगेगा हमने बोला शुगर लगेगी हमने बोला जी ब्रेड लगेगा हमने बोला जी ऑयल लगेगा ठीक है तो ये तीन इंग्रेडिएंट्स हमने ऐड कर दिए लेट्स से मैं इनको दोबारा से ऐड कर देता हूं तीन ठीक है मेरे हिसाब से चलो और हमने बोला थर्ड एंड द लास्ट थिंग इज प्रोसेस प्रोसेस तो मैंने यहां पर एक प्रोसेस इ इंसर्ट करना है और या फिर मैं एक चीज और कर सकता था यहां पर मैंने यहां पर इसको कर दिया ऐसा यहां पर ऐसा कर दिया और मैंने बोल दिया इंग्रेडिएंट्स ठीक है और लास्ट मैंने क्या किया लास्ट में मैंने इंसर्ट कर लिया प्रोसेस मैंने फिर से यहां पर लिख दिया रेसिपी लिख देता हूं लेट से और रेसिपी के अर हम सारे स्टेप्स मेंशन करेंगे क्याक स्टेप परफॉर्म करेंगे आप गुलाब जामुन बनाने के लिए तो हमने य पर लेट से एक ऑर्डर लिस्ट का यूज कर लिया और मैंने कहा कि इसके अंदर आपके पास ऐसा चार स्टेप्स है ऐसे चार स्टेप्स आपके पास है इसके अंदर आपने पहले वाले में बोला कि लम 10 रम 10 दूसरे वाले में आपने बोला ऐसा रम 4 तीसरे वाले में आपने ऐसे बोला लोरम 8 तो चौथे वाले में आपने ऐसे बोला रम से बढ़िया तो हमने यहां पर पहला लेफ्ट वाला बॉक्स क्रिएट कर लिया हेडिंग तैयार है गुलाब जामुन इंग्रेडिएंट्स भी तैयार है और आपका यह रेसिपी भी तैयार है तो हमने यहां पर क्या किया जस्ट थोड़ा और अच्छी डिवीजन हो जाए हमने इस इंग्रेडिएंट्स वाले पूरे पार्ट को यहां पर प्लेस कर दिया ठीक है यहां से हटा देता हूं और इस पूरे रेसिपी वाले पार्ट को हमने यहां पर प्लेस कर दिया इस डिव के अंदर तो ताकि अच्छी कैटेगरी जशन हो जाएगी चलो ठीक है बढ़िया तो अब मैं इसको ऐसा हाइड कर सकता हूं ठीक है तो मैंने बोला कि मेरी पहली आइटम रेडी है ऐसे ही मैंने क्या किया मैंने एक और दूसरी आइटम भी क्रिएट कर ली मैंने यहां पे ये वाला सेक्शन कॉपी कर लिया आइटम वन का और एक और आइटम मैंने यहां पर इंसर्ट कर दिया लेट्स से इसका नाम मैंने रख दिया बर्फी जामुन ऐसे कुछ भी रख दिया फालतू का फालतू का ठीक है और इसको फटाफट से यूआई पर चेक करते हैं कैसा बन रहा है एक बार फटाफट यूआई पे देखने जाएंगे तो कैसा बन रहा है ऐसा कुछ-कुछ बन रहा है देखने में बहुत ज्यादा गंदा है भैया राइट वाला बॉक्स पॉपलेट नहीं किया मैंने कहा हां राइट वाला बॉक्स रह गया तो मैंने क्या किया राइट वाले बॉक्स के अंदर यहां पर इमेज अटैक का यूज कर लिया और इमेज टैग के अंदर मैंने मेंशन कर दिया कि भाई यहां पर सोर्स मेरा जो है वोह क्या है ऐसा गुलाब जामुन है ठीक है बहुत बढ़िया सेम विद दिस मैं यहां पे आया मैंने यहां पर भी इमेज टैग का यूज कर लिया और मैंने क्या बोला कि यहां पर जो मेरा सोर्स है वो हो गया जी आपका बर्फी ठीक है तो आपने बर्फी इमेज ऐड कर दी बढ़िया कुछ-कुछ आसपास पहुंचे हैं उतना अच्छा तो नहीं है पर ठीक है कुछ-कुछ आसपास पहुंचे हैं अभी आपको इसमें एनिमेशन भी ऐड करके दिखाएंगे पर चलो ठीक है मैंने क्या कहा था लेफ्ट वाला बॉक्स और राइट वाला बॉक्स जो है अगर आप यहां पे देखेंगे तो आपका जो ये लेफ्ट बॉक्स बन रहा है एंड आपका जो ये राइट बॉक्स बन रहा है ये दोनों बॉक्सेस मुझे साइड बाय साइड चाहिए तो उसके लिए मैंने क्या किया इस आइटम वाली क्लास को फ्लेक्स मार्क कर दिया तो फटाफट स्टाइल्स में गया और मैंने बोला डॉट आइटम्स और मैंने बोल दिया डिस्प्ले डिस्प्ले फ्लेक्स डिस्प्ले फ्लेक्स कर दिया मैंने ठीक है एक गैप भी ऐड कर दिया मैंने इनके अंदर मैंने बोला कि लेट्स से यहां पे 30 पिक्सल का हमने गैप ऐड किया हुआ है या फिर गैप छोड़ो फ्लेक्स कर दियाना आपने इसको अने बोल दिया यहां पर कि जस्टिफाई कंटेंट हमने मार्क कर दिया यहां पे स्पेस बिटवीन कर दिया चलो चेक करते हैं यई प अब कैसा हो रहा है बढ़िया आपका लेफ्ट वाली आइटम्स जो है वो यहां पर आ चुकी है राइट वाली आइटम्स यहां पे आ चुकी है बहुत बढ़िया नीचे वाली गेम में भी सेम चल रहा है बढ़िया बहुत बढ़िया हमने क्या बोला किय आइटम वाला काम हमने संभाल लिया है और और क्या कर सकते हैं इमेज जो है बहुत बड़ी आ रही है इमेज थोड़ी छोटी करनी पड़ेगी तो मैंने बोला कि इमेज को फटाफट चेक करते हैं मैंने बोला कि डॉट चक करते इमेज का पाथ क्या है इमेज है आपका इमेज कहां पर है आइटम के अंदर या फिर राइट बॉक्स के अंदर आपकी इमेज है तो राइट बॉक्स के अंदर जो इमेज है उसकी बात मैं कर रहा हूं तो मैंने बोला कि स्टाइल्स डट सीएसएस यहां पर मैं आया मैंने बोला राइट बॉक्स के अंदर जाओ राइट बॉक्स के अंदर जाओ वहां पर जो इमेज है ना उसको स्टाइल करना है तो मैंने इसकी हाइट थोड़ी कम कर दी मैंने बोला इसकी हाइट 400 पिक्सल कर दो यई प कैसा नजर आ रहा है थोड़ा सा सही नजर आ रहा है पहले से ठीक है थोड़ा सा सही नजर आ रहा है हाइट 400 पिक्सेल हमने कर दी इसकी वेरी गुड अब आगे चलते हैं आगे चलते हैं हमने बोला कि जितनी भी आइटम्स है इन आइटम के बीच में स्पेसिंग बहुत बेकार है स्पेसिंग चेक करते हैं तो सारी की सारी आइटम्स कहां पर आ रही है चेक करते हैं देखो यह रही तुम्हारी आइटम नंबर वन यह रही तुम्हारी आइटम नंबर टू ये इस कंटेंट बॉक्स में आ रही है तो कंटेंट बॉक्स के अंदर इसको स्टाइल कर दे फटाफट तो मैंने बोला कंटेंट बॉक्स को जो है आप एक फ्लेक्सस मार्क कर दो जिसके अंदर आइटम एक के नीचे एक आएगी तो आप बोल फ्लेक्स डायरेक्शन कॉलम ठीक है और कॉलम मार्क कर दिया आपने गैप ऐड कर दो भाई इनके अंदर आपने गैप ऐड कर दिया इनके अंदर कि भाई 100 पिक्सल गैप ऐड कर दिया मैंने यहां पे तो ठीक है अब थोड़ा सा पहले सुंदर लग रहा है और मैंने कहा 70 पर थोड़ ज्यादा लग रहा है 70 इसको % कर लेता हूं अब चेक करता हूं यई प ठीक है थोड़ा बहुत समझ में आ रहा है उतनी अच्छी तो नहीं है पर चलो अभी ठीक कर लेंगे इसको अब फटाफट से यहां पर चलते हैं और स्टाइलिंग सोचते हैं कैसे कर सकते हैं मैंने बोला कि सबसे पहली चीज मुझे समझ में आ रही है थोड़ा मार्जिन ऐड करना पड़ेगा तो बहुत गंदी बन जाएगी वेबसाइट तो इतना हो गया इमेज थोड़ी और सुंदर कर सकते हैं हमने बोला जी बॉर्डर रेडियस हमने बोला य परसा 20 पिक्सल थोड़ी सी राउंड हो जाएगी बढ़िया अब हमने क्या बोला कि मुझको क्या चाहिए मुझको क्या चाहिए इसको कैसे लाइन आइटम्स सेंटर मार्क कर दिया वर्टिकली सेंटर प्लेस होगी स्पेस बिटवीन की ज कुछ और करते हैं स्पेस बिटवीन की जगह इसको ऐसा स्पेस अराउंड कर देते हैं और अब चेक करते हैं अब थोड़ा सुंदर लग रहा पहले से ठीक है अब पहले से सुंदर लग रहा है अब पहले सुंदर लग रहा है ठीक है अब फटाफट आते हैं टेक्स्ट को भी स्टाइल करते हैं टेक्स्ट को भी स्टाइल करते हैं मैंने कहा कि टेक्स्ट इक्स एटी में कहां पर लिखा हुआ है आपका टेक्स्ट जो है वो इस लेफ्ट बॉक्स के अंदर लिखा हुआ है तो लेफ्ट बॉक्स के अंदर यह रही पहली चीज दूसरी चीज और तीसरी चीज ठीक है तो तीन डेप्स आपके पास है इस लेफ्ट बॉक्स के अंदर तो मैंने कहा सब एक के नीचे एक है तो फटाफट से इसको एक बार स्टाइल कर लेते हैं मैंने बोला जी डॉट लेफ्ट बॉक्स और आपने बोला भाई इसकी डिस्प्ले को फ्लेक्स मार्क कर दो और इनके बीच के गैप को तुम ऐड कर दो ऐसा 20 पिक्सल टाइप ठीक है अब देखते हैं यई कैसा लग रहा है अच्छा साइड बाय साइड आ गई मुझे एक के नीचे एक चाहिए तो मैंने यहां पर क्या कर दिया फ्लेक्स डायरेक्शन को कॉलम मार्क कर दिया ठीक है अब चेक करते हैं एक के नीचे एक आगे ठीक है पहले सुंदर लग रही है तो टेक्स्ट को बढ़ाना पड़ेगा तो हमने बोला कि लेफ्ट बॉक्स के अंदर टेक्स्ट कहां पर है लेफ्ट बॉक्स के अंदर एक तो हेडिंग है ठीक है तो h2 को थोड़ा सा मैं एक बार स्टाइल कर देता हूं तो मैं यहां पर गया मैंने बोला कि लेफ्ट बॉक्स के अंदर जो मेरी h2 है नाना उसको स्टाइल कर दो तो हमने कहा कि यहां पर फंट साइज जो है वो क्या होगा लेट्स से हमने यहां बोल दिया 2 आरएम चेक करते हैं 2 आरएम इज अ गुड साइज वेरी गुड तो हमने 2 आरएम यहां पर संभाल लिया है और अब इन अन ऑर्डर लिस्ट के अंदर जो डाटा पड़ा हुआ है ऑर्डर लिस्ट के अंदर डाटा पड़ा हुआ है इनको संभाल लेते हैं मैंने कहा इनकी बात कर लेते हैं तो कहां पे है यह आ गया ये आ गई आपकी लिस्ट ठीक है इसको एक आईडी प्रोवाइड करते हैं मैं बोला जी अ मैंने बोला जी इसको एक क्लास प्रोवाइड कर देते हैं हमने बोला जी इंग्रेडिएंट्स और इसको एक क्लास प्रोवाइड कर देते हैं इसको हमने बोल दिया रेसिपी बॉक्स ठीक है तो इंग्रेडिएंट्स को फटाफट स्टाइल करते हैं मैंने बोला कि यहां पे आओ हमने बोला जी डॉट इंग्रेडिएंट्स और हमने मेंशन कर दिया यहां पर फंट साइज ऐसा 1.7 आरएम चेक करते हैं उतना ज्यादा बड़ा हो गया थोड़ा सा इसको 1.4 कर लेते हैं एक बार ठीक है अच्छा लग रहा है पहले से तो अच्छा लग रहा है ठीक है और 1.3 भी कर सकते हैं ट्राई कर लेते हैं एक बार हिडन टल करना पड़ेगा तो स्टाइलिंग के अंदर से याद नहीं कर सकते आप इतना करना है इतना नहीं करना टाइप ठीक है सेम विद रेसिपी बॉक्स तो मैं यहां पर गया मैंने बोला डॉट रेसिपी बॉक्स और यहां पर ही मैंने फंट साइज ड दिया सेम 1.1 आरएम कर देते हैं 1.1 आरएम सूट कर रहा है फिर भी ठीक है तो इस प्रकार से हमने ऐसा कुछ क्रिएट किया ऑब्जर्व करोगे अगर तुम तो तुम्हारा ऊपर से मार्जिन बिल्कुल खत्म है तो मार्जिन ऊपर का संभालना पड़ेगा तो मैं फटाफट गया और मैंने कहा कि ऐसा करते हैं जो भी मेरा एक कंटेंट बॉक्स था ना उस कंटेंट बॉक्स के अंदर एक पडि ऐड कर देता हूं तो एक पैडिट कर दी मैंने इसके अंदर यूनिवर्सल 40 पिक्सल की ठीक है या फिर लेट से मैंने मार्क कर दिया तीन आरएम की तीन आरएम की मैंने डिंग ऐड कर दी तो ये थोड़ा और सुंदर हो गया ठीक है तो कोड हेल्प दबा के अंदर आप देख पा रहे हैं होम पेज है कांटेक्ट पेज है अबाउट पेज है ठीक है और आप थोड़ी सी और पडि ऐड करना चाहे तो ऐड कर सकते हैं कोई इशू नहीं है अगर आप लेट से ऊपर जाए और नाव के अंदर आप जाके कुछ पडि ऐड करना चाहे थोड़ा और सुंदर दिखाने के लिए कि भाई पडि ऐड कर दो कितनी दो आरई एम की तो यूआई पर ये थोड़ा और अच्छा हो जाएगा गंदा हो गया तो अच्छा होने की जगह मैंने बोला पैडिट ऐड कर दो दो आरएम की अब ठीक लग रहा है ठीक है बढ़िया तो थोड़ा सा मुझे पैडिट ऊपर से अबाउट अबाउट के लिए रखनी पड़ेगी ठीक है तो वो कर लेते हैं या फिर मैं क्या करता हूं जहां पर मैंने इसको स्पेस बिटवीन किया ना इसको स्पेस अराउंड कर देता हूं फेस अराउंड कर दिया ठीक है ऐसा कुछ नजर आ रहा है बढ़िया सुंदर लग रहा है कोड हेप द ढाबा आ गया होम कंटेंट अबाउट आ गया ये मेरी सारी आइटम्स आ रही है ठीक है पहली आइटम ये रही दूसरी आइटम ये रही तो काइंड ऑफ एक छोटा सा प्यारा सा हमने ऐड कर लिया है एक छोटी सी वेबसाइट हमने क्रिएट कर ली है ठीक है अभी मैं चाहता हूं ये जो बॉर्डर है ना यार ये मुझे उतना अच्छा नहीं लग रहा तो मैं इसको थोड़ा ब्लर करना चाहता हूं अब मुझे बताओ बॉर्डर ब्लर कैसे करते हैं सिंटेक्स फटाफट फाइंड करके आओ हम गए यहां पे बॉक्स शैडो का सिंटेक्स हमने फटाफट वेरीफाई कर लिया हमने बोला अपने को चाहिए ब्लर रेडियस ठीक है तो हम यहां से उठा के ले आए इसको हमने यह वाला पूरा बॉक्स शैडो उठा लिया और इसको हमने ऐड कर दिया हमारे कंटेंट बॉक्स के अंदर ठीक है जी और हमने इसको बोल दिया ब्लैक है हमें चाहिए ऐसा बस तीन पिक्सल तक हम ऐसा चाहिए बस तीन पिक्सल तक हम ऐसा चाहिए बस तीन पिक्सेल तक चेक कराओ ब पड़ी लेट इसको 30 पिक्सल कर दिया अब चेक करो अब थो पहले से ठीक लग रहा है अब मैं चाहू तो इस बॉर्डर को हटा सकता हूं ठीक है तो इस प्रकार से लग रहा है मैंने बोला इसको कम कर सकता हूं ऐसा न पिक्सेल न पिक्सेल ठीक है बढ़िया मैंने बो इसको थोड़ा और बढ़ा के देखते हैं एक बार इसको कर दिया मैंने ऐसा इसको जीरो करके देखते हैं एक बार आ जाओ जीरो करते हैं एक बार देखते हैं क्या बनता है चलो ठीक है पहले ही सुंदर लग रहा है बहुत बढ़िया तो ये आपने अभी एक नाव बार क्रिएट कर लिया ये आपके आइटम सारी की सारी आ चुकी हैं लास्ट में आपने फुटर क्रिएट कर लिया है अब मैं क्या चाहता हूं इसके अंदर अब मैं एक बड़ी प्यारी चीज में चाहता हूं वो ये है कि जैसे ही मैं इस इमेज के ऊपर होवर करूं जैसे ही मैं इस इमेज के ऊपर होवर करूं एक ग्रे स्केल फिल्टर मुझे दिखाई दे एक ओवरले मुझे दिखाई दे कि भाई जैसे इसको होवर करता हूं इमेज का साइल भी स्केल कर रहा हूं स्केल कर रहा हूं ट्रांसफॉर्म्स आ गए होवर कर रहा हूं सूडो क्लास आ गई तो जैसे ही होवर करता हूं इमेज का साइज थोड़ा सा बढ़ जाए जैसे ही होवर करता हूं एक ओवरले ग्रे फिल्टर इसके ऊपर आ जाए पहले साइज की बात करते हैं तो मैंने बो चलो साइज एक बार फटाफट ऐड करते हैं तो हमने बोला कि भाई जैसे ही तुम राइट बॉक्स की इमेज के ऊपर होवर करोगे तो मैंने यहां पर लिखा कि जैसे ही तुम राइट बॉक्स की इमेज के ऊपर होवर करोगे तो मैं क्या चाहता हूं मैं चाहता हूं ट्रांसफॉर्म के अंदर स्केल के अंदर ये हो जाए तुम्हारा 1.3 चेक करते हैं चेक करते हैं जैसे र करता हूं बड़ा हो गया पर य सुंदर नहीं है झटके से हो रहा है एकदम मैंने कहा 1.3 1.2 करो पहले तो ज्यादा बड़ा हो रहा है अब ठीक है ब झटके से हो रहा मतलब ऐसा ऐसा नहीं चाहिए स्मूथ चाहिए स्मूथ के लिए मुझे क्या करना होता है ट्रांजीशन ड करना होता है तो मैंने ट्रांजीशन ऐड किया तो मैंने इसके अंदर ट्रांजीशन ऐड किया कि भाई साहब ट्रांजिशन आपने बोला कि ऑल अभी सारी प्रॉपर्टी पर लगा दिया ठीक है और कितना ड्यूरेशन मैंने बोला ड्यूरेशन लगेगा जी ऐसा 0.6 सेकंड ठीक है और डिले मैंने बोला जीरो सेकंड चेक करते हैं चेक करते हैं एक बार चेक वेरीफाई कर लेते हैं पहले एक बार कि हमारा सिंटेक्स सही है कि नहीं है ट्रांजिशन का तो ट्रांजिशन का सिंटेक्स क्या होता है चार चीजें आपको ऐड करनी होती है आपको टाइमिंग फंक्शन भी ऐड करना पड़ेगा तो हमने टाइमिंग फंक्शन भी ऐड कर दिया यहां पे कि लीनियर मैं इसको ट्रांजीशन करना चाहता हूं चेक करते हैं अब अगर मैं होवर करूं अब इमेज सही इंक्रीज कर रही है बहुत ज्यादा बड़ी हो रही है अभी छोटा कर सकता हूं मैं इसको और मैंने इसको बोला कि स्केल के 1.1 कर दो अब चेक करते हैं अब अगर मैं इस पे होवर करता हूं बहुत सही इंक्रीज हो रही है बहुत स इंक्रीज हो रही है वेरी गुड वेरी गुड बहुत बढ़िया तो इस प्रकार से आपकी इमेज इंक्रीज कर रही है सही लग रहा है मजा है मजा पहला काम डन तो हमने यहां पे ट्रांजीशन का यूज कर लिया हमने यहां पे ट्रांसफॉर्म का यूज कर लिया अब मैं क्या चाहता हूं अब मैं ये चाहता हूं कि इसके अंदर आप एक ग्रे फिल्टर लगाएं जैसे ही मैं होवर करूं जैसे मैं होवर करूं अ तो कोई टेक्स्ट भी लिखा हुआ है और कोई ग्रे फिल्टर भी आ रहा हो तो चेक करते हैं वो कैसे कर सकते हैं फरव चलते हैं हमारे एचटीएमएल कोड की तरफ ठीक है और हमने बोला ये रहा हमारा एटीएमएल कोड और हमने बोला ये रही हमारी इमेज कहां गई मेरी इमेज दिखाओ दिखाओ राइट बॉक्स के अंदर थी ये रहा राइट बॉक्स के अंदर इमेज ठीक है तो राइट बॉक्स के अंदर एक इमेज पड़ी हुई है मैंने बोला मैं इमेज के साथ-साथ ना एक ओवरले भी ऐड करना चाहता हूं मैं इमेज के साथ एक ओवरले ऐड करना चाहता हूं तो जहां पर मेरी इमेज है उस इमेज के ऊपर एक ग्रे फिल्टर आएगा किसी भी चीज को ओवरलैप करवाना तो याद करो क्या करते थे पोजीशन एब्सलूट तो इस ग्रे वाले फिल्टर को मुझे मुझे पोजीशन एब्सलूट मार्क करना पड़ेगा और अगर मुझे ग्रे वाले फिल्टर को एब्सलूट पोजीशन करनी है तो आई हैव टू मेक श्यर कि मैंने पेरेंट को यानी इस डिव को रिलेटिव पोजीशन कर रखा हो ठीक है तो मैं फटाफट राइट बॉक्स को चेक करता हूं रेट पोजीशन किया कि नहीं किया तो मैं राइट बॉक्स के अंदर गया राइट बॉक्स राइट बॉक्स राइट बॉक्स चेक करते हैं कहां पर लिखा मैंने राइट बॉक्स यह रहा राइट बॉक्स ये रहा लेफ्ट बॉक्स एज सच लिखा नहीं मैंने राइट बॉक्स के अंदर डॉट राइट बॉक्स मैंने बोल दिया कि यहां पर जो पोजीशन होगी ना बेटा वो रिलेटिव कर दो एंड जो भी ओवरफ्लो होगा ना उसको हाइड कर देना कोई भी ओवरफ्लो दिखना नहीं चाहिए यई चेक करते हैं सब कुछ बढ़िया लग रहा अभी तक तो कोई दिक्कत नहीं है अब मैंने यहां पर क्या किया फटाफट गया इक्सड एटी पे मैंने इस इमेज के साथ साथ यहां पर एक ओवरले क्रिएट कर दिया लेट्स से मैंने यहां पर एक क्लास क्रिएट कर दी ओवरले नाम की और उसके अंदर मैंने लिख दिया मैं जो भी टेक्स्ट दिखाना चाहता हूं लेट से मैं टेक्स्ट दिखाना चाहता हूं क्लिक हियर क्लिक यर टू बाय ठीक है तो जब भी मैं होवर करूंगा उस इमेज के ऊपर यह टेक्स्ट मुझे दिखना चाहिए ऐसा कुछ चाह रहा हूं मैं ठीक है तो ठीक है वन बाय वन करेंगे अभी मैं क्या चाहता हूं ये टेक्स्ट मुझे सेंटर में दिखे बिलकुल यह जो टेक्स्ट मैंने यहां पर लिखा हुआ है क्लिक हियर टू बाय यह मुझे इमेज के सेंटर में दिखे जब भी मैं उस पे होवर करूं तो चेक करते हैं अभी यूआई पे क्या दिखता है अभी यूआई पे यहां पर लिखा हुआ दिख रहा है टेक्स्ट ठीक है अभी यहां पर लिखा हुआ दिख रहा है मुझे कहां पे चाहिए मुझे बिल्कुल सेंटर में चाहिए तो मैंने कहा चलो ठीक है वन बाय वन करते हैं कोड तो हम आए यहां पे हमने बोला ओवरले की बात कर रहे हैं तो हमने बोला ओवरले कहां पर है डॉट राइट बॉक्स के अंदर है राइट बॉक्स के अंदर है मेरा ओवरले तो इस ओवरले को मैंने क्या बोला कि सबसे पहले तो इसको मुझे एब्सलूट पोजिशनिंग करानी है तो मैंने यहां पर इसकी एब्सलूट पोजिशनिंग करा दी कि भाई साहब जो भी आपका पेरेंट है आप उसके ऊपर ओवरलैप कर रहे होंगे पोजिशनिंग क्या है टॉप से जीरो प आ जाओ एंड लेफ्ट से भी जीरो पर आ जाओ मैंने बोला जो भी तुम्हारे पेरेंट की हाइट विड हो उसके अकॉर्डिंग अपनी हाइट विट ऐड कर लेना हाइट कर लो भैया 100% और तुमने बोला कि विड्थ जो है अपने पेरेंट के अकॉर्डिंग 100% कर लेना तो पूरी की पूरी इमेज ओवरलैप करवा है ना इमेज तुम्हारी राइट बॉक्स वाले कंटेनर के अंदर है तो अकॉर्डिंग पूरी हाइट विड हमने यहां पर असाइन कर दी अब यहां प एक बैकग्राउंड कलर मैंने दे दिया एक बैकग्राउंड कलर मैंने दे दिया जो तुम्हारा ग्रे स्केल वाले फिल्टर को दर्शाए ब्लैक बोल दिया इसको फटाफट से एक बार इसको फटाफट से एक बार अपने हिसाब से हल्का कर लेते हैं तो हमने बोला कि एक ग्रे फिल्टर चाहिए ना मुझे तो मैं यहां पर आ गया ये थोड़ा लाइट कलर हो गया और मैंने इसको थोड़ा सा और लाइट कर दिया ऐसे इसको थोड़ा सा नीचे ले आऊ इसको और लाइट कर दिया ऐसे इतना ठीक है आईस ठीक है तो आप ने ये ग्रेश सा फिल्टर यहां पर ऐड कर दिया है एक बार देखते हैं इससे क्या होता है एक बार देखते हैं इससे क्या होता है ऑब्जर्व कर पा रहे हो ये है तुम्हारा फिल्टर पहले तो लगा हुआ है हट ही नहीं रहा मैंने कहा अभी हटाएंगे इसको चिंता मत करो पहले टेक्स्ट को देखते हैं टेक्स्ट तुम्हारा ऊपर आ रहा है मुझे इसको सेंटर में रखना है सिंपल है सिंपल है तो मुझे क्या करना पड़ेगा राइट बॉक्स को फ्लेक्स बनाना पड़ेगा ठीक है राइट बॉक्स को मैंने फ्लेक्स बना दिया कहां है मेरा राइट बॉक्स ओवरले अ ध्यान से अगर देखो राइट बॉक्स को भी फ्लेक्स बना सकते हो या फिर ओवरले को भी फ्लेक्स बना सकते हो कोई भी इशू नहीं है ठीक है क्योंकि ओवरले के अंदर स्पैन है ना डिस्प्ले कर दी फ्लेक्स अलाइन आइटम कर दिया सेंटर और जस्टिफाई तुमने कर दिया यहां पर सेंटर अब चेक करो यूआई में सेंटर में आ गया बहुत बढ़िया मैंने कहा इसका जो कलर है वाइट करो तो मैंने क्या बोला डॉट राइट बॉक्स के अंदर डॉट राइट बॉक्स के अंदर एक ओवरले है उस ओवरले क्लास के अंदर एक स्पैन टैग है उस स्पैन टैग की प्रॉपर्टी तुम सेट करना चाहते हो तुमने बोला इसका कलर जो है वो मैंने मार्क कर दिया ऐसा वाइट और तुमने बोला जी इसका जो फंट साइज है वो मैंने मार्क दिया ऐसा 1.2 आरएम अब चेक करते हैं क्या बना बढ़िया सही लग रहा है अगेन फिल्टर हट नहीं रहा फिल्टर हट नहीं रहा बाद की बात है पहले फिल्टर देखो फिल्टर की जो ये बॉर्डर है राउंडेड नहीं है तो फिल्टर के बॉर्डर भी राउंडेड करो तो मैंने यहां पे इसको क्या बोला इस ओवरले का जो बॉर्डर है इसको राउंडेड करो भाई तो आपने बोला जी बॉर्डर रेडियस और 20 पिक्सेल या फिर जो भी आपने पहले यूज़ किया था बॉर्डर रेडियस के अंदर 20 पिक्सल यूज़ किया था उसी को यूज़ करके आप सेम राउंडेड करो इसको हुआ राउंडेड हो गया राउंडेड बढ़िया तो इस प्रकार से आपने इसको राउंडेड कर लिया है वेरी गुड अब आपने क्या बोला कि यार जब मैं होवर करूं तभी मेरे को फिल्टर दिखना चाहिए और यह टेक्स्ट दिखना चाहिए और ओवर ना करूं तो नहीं दिखना चाहिए तो बड़ी सिंपल चीज है कोई भी चीज अगर विजिबल कराना चाहते हैं तो उसका ओपेसिटी आप वन रखेंगे कोई भी चीज आप इनविजिबल करवाना चाहते हैं उसकी ओपेसिटी प्रॉपर्टी जीरो कर देंगे तो हमने यहां पर साफसाफ बोल दिया ओपेसिटी कर दो जीरो यानी नॉर्मल केस में जब होवर नहीं कर रहा हूं तो नहीं दिखना चाहिए मुझे ये नहीं दिख रहा पर जब मैं बोल रहा हूं कि मैं होवर कर रहा हूं तब तो मैं यहां पर आया सिंपल मैंने बोला तो सिंपल सी चीज है हमने बोला कि डॉट राइट बॉक्स पर जब भी आप होवर कर रहे हो तो उस केस के अंदर उस केस के अंदर आपका जो ओवरले है आपका जो ओवरले है उसकी प्रॉपर्टी सेट कर दो क्या कि विजिबल करवा दो ग्रे फिल्टर को तो आपने ओपेसिटी वन सेट कर दी अब चेक करो जाऊंगा तो विजिबल हो रहा है पर झटके से हो रहा है अभी नहीं दिख रहा अब दिख रहा है अभी नहीं दिख रहा अभी दिख रहा है अभी नहीं दिख रहा अब दिख रहा है तो मैंने यहां पर एक ट्रांजिशन सेट कर दिया ताकि झटके से ना हो तो मैंने यहां पर ट्रांजिशन सेट कर दिया कि ट्रांजीशन ऑल और अपना 0.3 सेकंड लीनियर और जीरो सेकंड चेक करते हैं तो अब स्मूथ हो रहा है अब स्मूथ हो रहा है अब स्मूथ हो रहा है अब स्मूथ हो रहा है बढ़िया पर इसमें एक चीज आ रही है भैया क्या आपकी स्केलिंग गायब हो गई आपकी स्केलिंग जो थी वो गायब हो गई मैंने कहा कैसे स्केलिंग कहां पर करी थी हमने हमने स्केलिंग करी थी कहां गया ये रहा कि जब भी राइट बॉक्स में इमेज प होवर करोगे ठीक है तो इसको ऐसा कर लेता हूं राइट बॉक्स के ऊपर होवर की बात ही कर लेता हूं मैं जब भी राइट बॉक्स प होवर करोगे ट्रांसफॉम भी कर देना देखते क्या होता है बढ़िया अब बढ़िया वेरी गुड तो अब तुमने यहां पर यह ऐड कर लिया ठीक है तो राइट बॉक्स पर तुमने ट्रांजीशन ऐड कर दिया साथ में ट्रांजीशन कर लो जी पट ऐसा 3 सेकंड और 0.3 सेकंड ड्यूरेशन हो गई और नहीं सारी प्रॉपर्टी पर करना तुम चाहो तो स्पेसिफिक भी कर सकते हो 0.3 सेकंड लीनियर 0 सेकंड चेक करते हैं तो यहां पे ऑब्जर्व करो स्केल भी कर रहा है फिल्टर भी आ रहा है स्केल भी कर रहा है फिल्टर भी आ रहा है स्केल भी कर रहा है फिल्टर भी आ रहा है बहुत बढ़िया थोड़ा चाहो तो और अच्छा बना सकते हो इसको इस इमेज की शैडो क्रिएट करके ठीक है सो लेट्स से मैं इमेज में शैडो क्रिएट करना चाहता हूं तो फटाफट वो भी वेरीफाई कर लेते हैं मैंने कहा कि इमेज शैडो क्रिएट करनी है एक बढ़िया सा कुछ देखो कुछ भी दे दो बढ़िया सा मेरे को एक इमेज शैडो सीएसएस कुछ मटेरियल डिजाइन से पकड़ा दो यार तो हमने क्या किया ड्रॉप शैडो सर्च करते हैं एक बार देखते हैं क्या होता है ड्रॉप शैडो सर्च करते हैं ड्रॉप शैडो यहां पे आ गया ऑफिशियल स्टाइलिंग पे ऐसे तुम्हारी शैडो आ रही है ठीक है तो मैंने इसी को पकड़ा इसी को पकड़ा मैं कॉपी कर लेता हूं इसको इसको कॉपी कर लिया मैंने इसी को चिपका आता हूं एक बार देखते हैं क्या होता है तो मैं गया फटाफट और मैं आ गया यहां पे इमेज के अंदर या फिर मैंने क्या कर दिया अ इस राइट बॉक्स के अंदर ही शैडो ऐड कर दी कि भाई इसकी शैडो है अब यूआई पे चेक करते हैं क्या बन रहा है ऐसे शैडो आ गई गंदी सी यह तो चाहिए नहीं अपने को ठीक है हमने इसको कर दिया वन पिक्सेल हमने कर दिया न पिक्सेल और हमने इसको कर दिया ऐसा 10 पिक्सल और हमने इसको बॉर्डर रेडियस भी कर दिया भाई सुंदर तो नहीं लग रहा है बट ठीक है काम चला लेंगे ठीक है ठीक है इस प्रकार से हमने कर दिया ठीक है तो आपको एक चीज फाइंड आउट करनी है कि मुझे जो वाइट गैप दिख रहा है यहां प इमेज के नीचे जस्ट नीचे वाइट गैप मैं देख पा रहा हूं ये वाइट गैप क्यों आ रहा है ठीक है ये आप मुझे कमेंट सेक्शन के अंदर बताएंगे और बस इतना ही था इतना ही था आज की क्लास के अंदर जहां पर आपने सीखा कैसे आप एक नेव बार क्रिएट कर सकते हैं अभी मजा नहीं आया भई इसमें नेव बार में नेव बार का अलग से क्रिएट करो मैंने कहा ग्रेडिएंट इन सीएसएस मैंने बोला मटेरियल डिजाइन ग्रेडिएंट इन सीएसएस अच्छी सी वेबसाइट कौन सी थी ये वाली थी शायद सीएस गडि आ इसमें चलते हैं को डार्क सा ग्रेडिएंट बना के लाते हैं तो हम गए यहां पे हमने बोला कि हम जाएंगे और डार्क और मैंने इसको कॉपी कर लिया अच्छा लग रहा है ये मैंने इसको यहां पे पेस्ट कर दिया इस ग्रेडिएंट को अप्लाई करते हैं हमने यहां पर फुटर बॉक्स के अंदर भी इसी को अप्लाई कर दिया और हम ऊपर गए हमने नव कंटेनर के अंदर भी इसको ही अप्लाई कर दिया ठीक है अब चेक करते हैं यवाई पे बढ़िया अब पहले से सुंदर लग रही है ठीक है अब पहले से सुंदर लग रही है ऑब्जर्व करो यह तुम्हारी नाव बार बन गई है और यह तुम हमारा पहली आइटम बन चुकी है यह बहुत अच्छी इमेज आपने क्रिएट कर ली ये आपकी सेकंड आइटम बन चुकी है एक और अच्छी इमेज आपने क्रिएट कर ली आई थिंक और स्कोप है यहां पे अभी इन सभी टेक्स्ट को स्टाइल करने का तो आप होमवर्क के अंदर इन सभी टेक्स्ट को स्टाइल करना और फुटर के नीचे भी अगर तुम देखो यहां प ड़ वाइट स्पेस है ये भी तुम ठीक कर सकते हो दोस्त ठीक है और यह हॉरिजॉन्टल स्क्रोल बार भी आ रही है तो इसको भी फाइंड आउट करना कि इसको कैसे ठीक कर पाओगे ठीक है यह तुम्हारा छोटा सा प्यारा सा एक होमवर्क है ठीक है इसको कंप्लीट करना और मुझे बताना क्या तुम कर पाए कि नहीं कर पाए अभी के लिए इसको थोड़ा और समझ समझने के लिए हम क्या कर सकते हैं इसको थोड़ा और समझने के लिए हम यहां पर और सेक्शंस ऐड कर सकते हैं लेट्स से मैंने इन्हीं दो सेक्शंस को फिर से कॉपी कर दिया बढ़िया अब य आई चेक करते हैं अब यूआई चेक करते हैं यह हमारे कुछ दो सेक्शंस है यह बाकी सेक्शन है बहुत बढ़िया ऑब्जर्व करो एक चीज यहां पर क्या ऑब्जर्व कर पाओगे तुम कि भाई यहां पर ये लाइन कौन सी आ रही है चेक करते हैं किस चीज की लाइन है ये इंस्पेक्ट किया अच्छा ग्रेडिएंट इस तरीके का है शायद ऐसा कुछ इशू नहीं है वो ग्रेडिएंट इस तरीके का है मेरे हिसाब से बढ़िया ठीक है ठीक कर सकते हैं इसको भी इसको भी ठीक कर लेते हैं कोई और ग्रेडिएंट उठा के लाते हैं लेट्स से मैंने ये वाला ग्रेडिएंट उठा लिया इससे देखते हैं क्या होता इस वाले से देखते हैं क्या होता मैं जाता हूं स्टाइल ड सीएए के अंदर और मैंने बोला कंटेनर के अंदर ग्रेडिएंट चेंज करना है मैंने इसको चेंज कर दिया गलती तो है दैट्ची है एक बार जाने से पहले यह भी देख लेते हैं ऐसा करो यहां पर तुमने यह असाइन किया ना v डूवी ए इसको 100% कर दो एक बार बढ़िया अब सही चल रहा है अब बढ़िया चल रहा है एकदम ठीक है तो इस प्रकार से तुमने वाइट वाला ही बढ़िया था वैसे ध्यान से देखा जाए तो पुराने वाला बढ़िया था इसको 100% कर दो इसको 100% कर दो अब चेक करो बढ़िया तो इस प्रकार से तुम्हारी वेबसाइट बनके एकदम तैयार है छोटी सी प्यारी सुंदर सी और आई थिंक समझ में आया होगा आई थिंक मजा आएगा आई थिंक बहुत कुछ सीखने को मिला होगा तो इस क्लास में इतना दोस्त मिलेंगे आपसे आपके नेक्स्ट सेशन के अंदर कृपा करके बताएंगे आप हमें कमेंट सेक्शन के अंदर कि कैसी लगी आपको आज की क्लास और बहुत-बहुत धन्यवाद लव यू एवरीवन बा बाय यहां पर हम बात करने वाले कार्ड्स के बारे में मैंने कहा था सीएसएस करेंगे तो कम से कम तीन प्रोजेक्ट अभी करेंगे फिर बाद में ग्रिड्स पढ़ेंगे फिर प्रोजेक्ट करेंगे और सीएसएस के चैलेंज भी आएंगे तो वो भी कंप्लीट करेंगे तो अभी हम कार्ड्स कंपोनेंट या कार्ड्स से रिलेटेड कुछ प्रोजेक्ट्स बनाने वाले हैं जिससे थोड़ी सी क्लेरिटी हमें और मिले ताकि आगे जाकर ज हम और बड़े-बड़े प्रोजेक्ट्स बना रहे हो तो हमें सोचना ना पड़े कि इसको ब्रेक डाउन कैसे करूं इसमें कौन सी प्रॉपर्टी यूज करूं कौन सा टैग यूज करूं ठीक है तो यहां पर इस लेसन के अंदर आप कार्ड्स के बारे में समझने वाले हैं डिफरेंट डिफरेंट टाइप के कार्ड क्रिएट करने वाले हैं यूजिंग एटीएमएल सा कार्ड है ठीक है इसको फटाफट ब्रेक करते हैं कैसे क्रिएट करना पड़ेगा हमें तो हम फटाफट यहां पे गए हमने कहा जी सबसे पहले हम क्या देख पा रहे हैं ये टॉप लेवल आपका एक कंटेनर है ठीक है सबसे ऊपर आपका टॉप लेवल कंटेनर है ठीक है तो हमने यहां पर एक ये कंटेनर बना दिया ठीक है यह बात समझ में आ गई फिर मैंने कहा इस कंटेनर के अंदर मैंने ये कार्ड बना दिया ठीक है लेट्स से मैंने एक बॉक्स नाम का डेव ले लिया उस बॉक्स डेव के अंदर सबसे पहले मेरे को मेरी ये एक इमेज दिख रही है ये एक इमेज टैग से बन गया होगा फिर मुझे ये एक प्रकार की हेडिंग दिख रही है h2 टैग से बन गया होगा और फिर मुझे एक प्रकार का पैराग्राफ दिख रहा है ये पैराग्राफ टैग से बन गया होगा क्योंकि ये तीनों चीजें 1 2 3 एक के नीचे एक के नीचे एक है तो इस बड़े वाले कंटेनर को जिसके अंदर ये तीनों आइटम्स आ रही है मैं फ्लेक्स डिक्लेयर कर सकता हूं और इसकी फ्लेक्स डायरेक्शन को मैं कॉलम कर सकता हूं जैसे कि हमने लास्ट क्लास के अंदर सीखा भी था तो फटाफट से विदाउट वेस्टिंग एनी टाइम फटाफट से इसे कोड करते हैं ठीक है दोबारा एक बार समझा देता हूं सबसे पहले हम क्या करने वाले हैं सबसे पहले हम यहां पे क्या करेंगे सबसे पहले हम गए हमने सबसे पहले टॉप लेवल कंटेनर अपना सेटअप कर लिया उस टॉप लेवल कंटेनर के सेटअप करने के बाद अपना बॉक्स सेटअप कर लिया और अपने बॉक्स सेटअप करने के बाद हमने यहां पर तीन चीजें इंसर्ट कर दी एक इमेज एक हेडिंग और एक पैराग्राफ डन हमारा काम हो जाएगा ठीक है तो विदाउट वेस्टिंग एनी टाइम फटाफट से कोड करते हैं दोस्त ठीक है ज्यादा टाइम खराब नहीं करना इन चीजों के ऊपर जल्दी से ग्रीट करते हैं अच्छा किसी ने अगर अब तक ये प्लेलिस्ट पूरी की पूरी सीक्वेंस वाइज फॉलो नहीं किया तो आप youtube4 के भी कंप्लीट हो गए हैं ठीक है बड़ा मजा आ रहा है और अपना प्लेलिस्ट में जाके आप क्लिक कर सकते हैं कंप्लीट वेब डेब यूजिंग मन स्क लव बबर और यहां पे आप पूरी की पूरी प्लेलिस्ट को एक्सेस कर पाएंगे यहां पे सारे के सारे लेक्चर आपको विजिबल होंगे ठीक है जी बहुत बढ़िया और सब्सक्राइब भी करना यार हमने चेक किया स्टार्टस हम पता र कि सिर्फ 50 सिर्फ 47 पर बच्चे सब्सक्राइब करके बैठे हैं चैनल को बाकी बच्चे जो 53 पर है बचे हुए बच्चे उन्होंने लेक्चर तो वो देखते हैं पर सब्सक्राइब नहीं किया हुआ तो कृपा करके सब्सक्राइब करें ठीक है ब मोटिवेशन मिलती है इससे तो फटाफट चलते हैं हमारे कोड बेस पे और हमने यहां प बोला कि मुझे एक नया फोल्डर क्रिएट करना है इसका नाम मैंने लिख दिया लेक्चर 27 और लेक्चर 27 के अंदर मैंने क्या किया एक नई फाइल इंसर्ट कर दी और इसका नाम मैं रख दिया index.htm बहुत बढ़िया बॉयलर प्लेट कोड मैंने यहां पर ऐड कर दिया मैंने इसका नाम रख दिया टाइटल में कार्ड्स बहुत बढ़िया मैंने क्या बोला सबसे पहले मुझे क्या चाहिए सबसे पहले मुझे यहां पर एक कंटेनर चाहिए तो मैंने कंटेनर क्रिएट कर दिया अब कंटेनर मैं चाहता हूं कि इसको स्टाइल भी कर लूं तो मैंने बोला जी जो जो मेरा कंटेनर क्लास वाला डेव है जो मेरा कंटेनर वाला डेव है उसको मैं स्टाइल करना चाहता हूं मैंने कहा जितनी भी विड्थ है वो सारी की सारी आप ले ले तो मैंने कहा जी विड्थ ले लीजिए आप 100 वड एंड हाइट ले लीजिए आप 100 वीए ठीक है ये बात समझ में आती है ठीक है तो आपने इस प्रकार से पूरी व्यू पोर्ट की विड्थ और हाइट ले ली और आपने बोला कि यहां पर मुझे ग्रेडिएंट चाहिए तो हमने कल भी एक वेबसाइट देख गी थी तो ग्रेडिएंट उठा के ले आएंगे सुंदर सा प्यारा सा सुशील सा लेट्स से मैंने बोला कि मुझे ये वाला ग्रेडिएंट चाहिए मैंने इसे कॉपी कर लिया और मैंने फटाफट जाके इस ग्रेडिएंट को अपने कोड बेज के अंदर पेस्ट कर दिया ठीक है तो ये कंटेनर के अंदर हमने इसको ऐड कर दिया वेरी गुड बहुत बढ़िया अब मैंने क्या बोला कि मैंने इस कंटेनर के अंदर मैं क्या चाहता हूं बेसिकली इस कंटेनर के अंदर जो भी बॉक्स मैं बनाऊंगा बिल्कुल सेंटर में रखना चाहता हूं हॉरिजॉन्टल भी वर्टिकली भी तो मैंने कंटेनर को फ्लेक्स बना दिया मैंने कहा कि जो कंटेनर है ना इसकी डिस्प्ले जो है उसको मैंने फ्लेक्स मार्क कर दिया और मैंने इसको बोल दिया जस्टिफाई कंटेंट जो है वो सेंटर कर देना अलाइन आइटम जो है वो सेंटर कर देना बहुत बढ़िया एक यूनिवर्सल सिलेक्टर का मैंने यहां पर यूज़ कर लिया एज अ बेस्ट प्रैक्टिस मार्जिन जीरो ऐड कर दिया पैडिट जरो ऐड कर दी और बॉक्स साइजिंग को मैंने यहां पे बॉर्डर बॉक्स मेंशन कर दिया बहुत बढ़िया यूआई पर चेक करते हैं इससे क्या क्रिएट हुआ अभी तक तो इससे हम ये पूरा का पूरा बैकग्राउंड अब तक क्रिएट कर पाए सुंदर लग रहा है सुंदर लग रहा है मतलब बेकार नहीं लग रहा अब मैंने क्या कहा मुझे इसके अंदर ये वाइट कलर का एक बॉक्स सेंटर में प्लेस करना है तो मैं फटाफट गया कंटेनर के अंदर और मैंने कहा कंटेनर के अंदर मेरे को एक कार्ड क्रिएट करना है एक बॉक्स क्रिएट करना है जो तुम्हारा मन करे तुम वो कह सकते हो इसको ठीक है तो मैंने कार्ड क्रिएट कर दिया फटाफट इस कार्ड को स्टाइल करते हैं ठीक है छोटा सा प्यारा सा कार्ड है ज्यादा टाइम लगेगा नहीं इसके अंदर एक कार्ड स्टाइल कर दिया मैंने क्या कहा मैंने क्या कहा कि यार इसको अभी के लिए हम पता है क्या करते हैं इसको ऐसा करते हैं विड्थ और एक हाइट असाइन करते हैं फटाफट ठीक है तो हमने कहा हमने बोला कि इसकी विड्थ आप ले लीजिए ऐसा लेट्स से 360 पिक्सेल हमने बोला जी 360 पिक्सल आप इसकी विड्थ ले लो और आपकी हाइट हमने क्या बोल दी हमने बोल दिया जी आपकी हाइट कितनी होनी चाहिए हाइट हमने कह दिया कि 600 पिक्सेल आप हाइट ले लो चलो ठीक है और मैंने कहा जी अ इसका जो बीजी कलर होगा वो मैंने मेंशन कर दिया जी वाइट और मैंने कहा जी इसकी जो बॉर्डर रेडियस होगी जो इसकी बॉर्डर रेडियस होगी मेंशन कर दी मैंने 20 पिक्सल ठीक है चेक करते हैं यई पे क्या बना क्या एक सुंदर सा बॉक्स बना हां लगता तो है लगता तो है बना तो है वेरी गुड तो ऐसा कुछ कुछ मुझे क्रिएट करना है अभी फटाफट से जो इमेजेस वाला फोल्डर है फटाफट से मैं यहां पर लेके आता हूं मैंने कहा जी मैंने इमेजेस का फोल्डर डाउनलोड कर रखा है और मैंने इसको यहां पर इंसर्ट कर दिया ठीक है इसका नाम चेंज कर देता हूं इमेजेस टू लिखा हुआ आ रहा है बढ़िया तो इस इमेजेस वाले फोल्डर के अंदर मेरे पास भिन्न-भिन्न प्रकार की इमेजेस है मेरे पास यहां पर फकॉन है जो मैं ऐड करना चाहूं तो कर सकता हूं आइकन है एक म्यूजिक का आइकन है और ये एक क्यूआर कोड है इस क्यूआर कोड का मैं यूज करने वाला हूं ठीक है बढ़िया तो मैंने बोला कार्ड मेरा क्रिएट हो चुका है थोड़ा विड्थ हाइट बाद में चेंज कर लेंगे अगर नीट पड़ेगी तो अभी के लिए सब कुछ सही सुंदर लग रहा है ठीक है अभी के लिए सब कुछ सुंदर लग रहा है मजेदार लग रहा है तो अगर मैं इसको थोड़ा सा ऐसे नीचे कर दूं बढ़िया बढ़िया बढ़िया बढ़िया सही है ठीक है तो तो मजा आ रहा है अभी तक तो सुंदर सुशील बना पड़ा है मैंने क्या कहा मुझे इसके अंदर एक इमेज इंसर्ट करनी है इमेज इंसर्ट करने से पहले मैंने क्या बोला मुझे ऑलरेडी पता है कि इमेज हेडिंग और पैराग्राफ तीनों एक के नीचे एक है तो इस बॉक्स को फ्लेक्स बना देता हूं तो मैं फटाफट से इस बॉक्स में या कार्ड में गया और मैंने इसको बोल दिया कि डिस्प्ले जो है बेटा फ्लेक्स मार्क कर दो फ्लेक्स डायरेक्शन को मुझे कॉलम करना है फ्लेक्स डायरेक्शन को मुझे कॉलम करना है बहुत बढ़िया और मैंने क्या बोला इसके अंदर कि मेरे को अलाइन आइटम्स को सेंटर करना है ठीक है और लेट से मैंने बोला कि मुझे गैप हर आइटम के बीच में यरली लेट्स से 25 पिक्सेल का ठीक है ऐसा कुछ कुछ कर दिया 30 पिक्सेल कर देते हैं इसको रैंडम ठीक है बढ़िया अब मैंने क्या कहा कि अब मुझे इस कार्ड के अंदर आइटम इंसर्ट करनी है सबसे पहली आइटम क्या थी सबसे पहली आइटम थी इमेज तो मैंने इमेज टैग का यूज करके एक इमेज इंसर्ट करी और यहां पर आप बहुत चीजें इंसर्ट कर सकते हैं मैं यहां पे सिर्फ सोर्स टैग मेंशन कर रहा हूं अभी के लिए तो मैंने बोला कि मैं जाऊंगा मेरे इमेजेस फोल्डर के अंदर और उसके अंदर मैं क्यूआर कोड ले लूंगा बहुत बढ़िया बहुत बढ़िया अब इस क्यूआर कोड की बात कर लेते हैं मैंने कहा कि जैसे ही मैं गया इस डॉट कार्ड के अंदर इसके अंदर जो इमेज टैग यूज हुआ है उसकी प्रॉपर्टी मेंशन करते हैं तो मैंने कहा इसकी प्रॉपर्टी हमने मेंशन कर दी तो हमने बोला इसकी हाइट जो है हमने मार्क कर दी लेट्स से 40 पर ठीक है अब चेक करते हैं यूआई पे कैसा बन रहा है अब थोड़ा सही लग रहा है पहले से अब थोड़ा सही लग रहा है ठीक है एक काइंड ऑफ पैडिट मुझे ऐड करनी पड़ेगी एक पैडिट मुझे ऐड करनी पड़ेगी इस कार्ड के अंदर मैंने बोला कि एक पैडिट कर दो ऐसे 20 पिक्सल टाइप्स और चेक करो बढ़िया पहले से सुंदर लग रहा है पहले सुंदर लग रहा है मैंने बोला कि थोड़ा छोटा है बस थोड़ा बड़ा कर सकते हैं इसको हम मैंने बोला इसको ऐसा कर दो 60 पर टाइप हाइट बढ़िया पहले सुंदर लग रहा है थोड़ा छोटा कर सकते हैं हमने कहा जी 57 पर बढ़िया अच्छा लग रहा है मैंने बोला इसको भी मुझे राउंडेड करना है क्या चेक करो फटाफट हां इसको भी राउंडेड करना है तो फटाफट यहां पर गया और मैंने बोला जी बॉर्डर रेडियस ऐसे 10 पिक्सल चेक करो फटाफट सुंदर हुआ बिल्कुल सुंदर हो गया इसके बाद मुझे क्या चाहिए इंप्रूव योर फ्रंट एंड स्किल्स बाय बिल्डिंग प्रोजेक्ट एक हेडिंग मुझे यहां पर इंसर्ट करनी है तो मैं फटाफट यहां पर गया मैंने बोला इंप्रूव योर फ्रंट एंड स्किल्स बाय डेवलपिंग प्रोजेक्ट्स ऐसा कुछ लिख दिया मैंने ठीक है चेक करते हैं यूआई पे कैसा आ रहा है सुंदर आ रहा है सुंदर आ रहा है बढ़िया थोड़ा सा इसको मैं थोड़ा और बोल्ड करना चाहता हूं लेट्स से मैं यहां पर आया और मैंने क्या बोला कि भाई कार्ड के अंदर ना एक h2 है तो कार्ड के अंदर एक h2 है और आपने उसको बोल दिया जी फंट अ वेट आपने इसको मार्क कर दिया ऐसा बोल्ड चेक करते हैं यई प कैसा लग रहा है बढ़िया हो गया पर थोड़ा फट साइज और इक्रीज करके देखते हैं मैंने बोला जी फट साइज और मैंने मार्क कर दिया य 1.2 आरम चेक करो छोटा हो गया हमने बोला ऐसा इसको मार्क कर दो ऐसा 1.7 आर ये वैल्यू कहां से आ रही है भैया अभी रैंडम ट्राई कर रहे हैं कुछ भी हिट करके थोड़ा सा इसको मुझे और अच्छे से करना पड़ेगा मैंने कहा कि थोड़ा छोटा कर सकता हूं इसको मैं ऐसा 1.6 अभी भी नहीं बनी बात और मैंने कहा इसको मैंने कर दिया 1.5 अब थोड़ा सही लग रहा है वेरी गुड ठीक है मैंने कहा इसके बाद में एक पैराग्राफ ऐड करना चाहता हूं तो मैंने यहां पर एक पैराग्राफ ऐड कर दिया फटाफट कि भाई यह रहा मेरा पैराग्राफ और उस पैराग्राफ के बो लोरम एसा 18 चलो तो यहां पर कुछ टेक्स्ट आ गया फटाफट वेरीफाई करता हूं फटाफट री करता हूं बढ़िया आ गया ठीक है ऑब्जर्व करते हैं क्या डिफरेंस है इसके अंदर ठीक है यहां पर टेक्स्ट ऐसे लिखा हुआ मैंने अपना खुद का टेक्स्ट डाल दिया और इसको लेट्स से थोड़ा सा और अच्छा करना चाहता हूं तो मैं यहां पर आया मैंने बोला डॉट कार्ड के अंदर एक पैराग्राफ टैग पड़ा हुआ है उसको मैंने बोल दिया जी फंट साइज ऐसा कर दिया मैंने 2m चेक करते हैं क्या बनेगा इससे बहुत बड़ा बन गया बहुत ज्यादा बड़ा बन गया हमने बोला ऐसे 1m छोटा है वैसे का वैसा डिफॉल्ट साइज हमने बोला 1.3m बढ़िया छोटा करना पड़ेगा थोड़ा सा और मजा नहीं आ रहा अभी बोला 1.2m बढ़िया अब सही लग रहा है इस प्रकार से हमने ये जो क्यू आर कोड का एक सिंपल सा कार्ड था वो क्रिएट कर लिया है क्या मुझे यह सुंदर लग रहा है मैंने कहा हां भया थोड़ी सी हाइट यहां पर ज्यादा लग रही है मैंने कहा कोई बात नहीं अभी कम कर लेते हैं हमने लेट्स से यहां बोला कि हाइट जो 600 पिक्सल देर ग थी हमने 570 पिक्सल कर दिया इसे अब बताओ अब भैया बहुत सुंदर लग रहा है अब सुंदर लग रहा है बढ़िया लग रहा है अब अगर मैं इसको इंस्पेक्ट करके देखूं और डिफरेंट डिफरेंट साइजेस पर देखूं तो देखो अगर तुम्हारा साइज ये है तब भी सुंदर लग रहा है तब भी सुंदर लग रहा है छोटा करो तो इस प्रकार से ये इस प्रकार से छोटा होता जा रहा है ठीक है इस प्रकार से छोटा होता जा रहा है बहुत बढ़िया भैया बैकग्राउंड जो है ये ऐसा छोटा क्यों हो रहा है ये जो बैकग्राउंड में आपका कलर है ये ऐसा वाइट वाइट से क्या हो गया नीचे से मैंने कहा अच्छा चेक करते हैं फटाफट क्या हो रहा है हम गए कंटेनर हमने इसको मार्क कर दिया ऐसा 100% ठीक है और इसको भी मार्क कर दिया मैंने सा 100% ठीक है अब देखते हैं क्या होता है अब देखते हैं क्या होता है एक ब फटाफट ऐसा आ रहा है पर नीचे तक क्यों नहीं आ रहा भैया तो मैंने क्या किया मैं यहां पर गया मैंने बोल दिया अभी के लिए कि मिन हाइट जो है ना बेटा मेन हाइट मेंशन करते हैं लेट्स से तुम ऐसा 1300 पिक्सेल ऐसा सा मेंशन कर देना ठीक है तो ऐसे तुम इसको क्रिएट कर पाओगे ठीक है थोड़ा सा बड़ा बना दिया हमने बट ठीक है तुम अरेंज कर सकते हो वैल्यू को अकॉर्डिंग तुम ये कार्ड क्रिएट कर पाओगे ठीक है बहुत बढ़िया अभी केलिए लेट्स से मैं इसको ऐसा 900 टाइप रख लेता हूं ठीक है बढ़िया अब सही बैठ रहा है ठीक है तो इस प्रकार से आपने सिंपल सा प्यारा सा कार्ड क्रिएट कर लिया है फटाफट से ऑब्जर्व करते हैं हमने क्या-क्या किया है और फिर हम आगे बढ़ेंगे मैंने बोला कि चलो शु श करें तो सबसे पहले हमने यहां से लेके यहां तक यह पूरा का पूरा कंटेनर बना दिया इसको फ्लेक्स बोल दिया ताकि मैं इस कार्ड को सेंटर में रख पाऊ बाय बाय राइटिंग बाय राइटिंग जस्टिफाई कंटेंट सेंटर एंड अलाइन आइटम सेंटर फिर मैंने ये कार्ड क्रिएट कर दिया और मैं क्या दिख पा रहा हूं कार्ड के अंदर आपकी इमेज हेडिंग और पैराग्राफ एक के नीचे एक है तो इसको मैंने फ्लेक्स बना दिया फिर मैंने इमेज क्रिएट कर दिया अकॉर्डिंग ली एडजस्ट कर दी साइज हाइट एंड विड्थ मैंने हाइट क्रिएट कर दी बोल्डनेस एंड साइज चेंज कर दिया अपने हिसाब से और पैराग्राफ ऐड कर कर दिया बोल्डनेस और साइज चेंज कर दिया अपने हिसाब से तो ये सिंपल सा प्यारा सा कार्ड था तुम्हारे सामने और आई थिंक तुम्हें देख के अच्छा लग रहा होगा यार सुंदर तो लग रहा है देखो ऐसी बात तो नहीं है बेकार तो नहीं लग रहा राइट तो इस प्रकार से तुमने एक प्यारा सा सिंपल सा कार्ड अपने जीवन का पहला कार्ड क्रिएट कर लिया है क्या बात समझ में आती है मित्रों यस और नो जल्दी से बताएंगे ठीक है जी चलो तो एक चीज तुमने यहां पर हैंडल कर ली है बढ़िया और अभी वापस इसको मैं 100 वी एच और 100 वड ही कर रहा हूं ठीक है क मेरे को वो ज्यादा लॉजिकल लगता है राद देन यह सब कुछ तो मैंने इसको ऐसा कर दिया बढ़िया यूआई पर मुझे ऐसा नजर आ रहा है बढ़िया अच्छा लग रहा है ठीक है इंस्पेक्टर एलिमेंट प जाता हूं बढ़िया सही चल रहा है अपना साइज मेंटेन कर रहा है तो पहला काम आपका यहां पर समाप्त होता है अब मैंने कहा कि यार मुझे फटाफट से ना दूसरा दूसरा बताओ दूसरा असाइनमेंट क्या है मैं दूसरा थोड़ा सा टेडा है पर समझते हैं ऑब्जर्व करते हैं मैंने बोला दूसरा कार्ड कुछ इस प्रकार का है यहां पर थोड़ नंबर ऑफ एलिमेंट ज्यादा है पर हां कर लेंगे सबसे पहले ऑब्जर्व करते हैं क्या देख रहे हैं सबसे पहले मैं देख पा रहा हूं कि यहां से लेके यहां तक तुम्हारा टॉप लेवल कंटेनर हो गया जिसको तुम क्या बोलोगे जिसको तुम बोलोगे भाई मैंने ना एक फ्लेक्स बना दिया और इसमें आपने सेंटर में प्लेस करा दिया इस वाले कार्ड को तो आपने एक ये कार्ड बना दिया और आपने इसको जस्टिफाई कंटेंट सेंटर यहां पे कर दिया होगा जस्टिफाई कंटेंट सेंटर और अलाइन आइटम सेंटर ये आपने कर दिया होगा फिर आपने कार्ड क्रिएट किया कार्ड के अंदर आप क्या ऑब्जर्व कर रहे हो एक आपकी इमेज है एक आपकी हेडिंग है एक आपका पैराग्राफ है एक आपकी यह डिव है ठीक है इस डिव के अंदर क्या-क्या बाद में देखेंगे एक आपका ये बटन है और एक आपका ये एंकर टैग है या फिर हेडिंग है या पैराग्राफ जो तुम्हें अच्छा लगे तुम वो कर सकते हो ठीक है पर ऑब्जर्व क्या कर रहे हैं हर चीज एक के नीचे एक के नीचे एक है तो जब एक के नीचे एक होता तो मुझे इस कार्ड को फ्लेक्स बनाना पड़ेगा विद फ्लेक्स की डायरेक्शन कॉलम ठीक है इतना आपको करना पड़ेगा और अब आते हैं इमेज के ऊपर इमेज हमने मेंशन कर दी ध्यान से ऑब्जर्व करो इमेज यहां से राउंडेड है यहां से राउंडेड है और यहां से राउंडेड नहीं है यहां से राउंडेड नहीं है ऑब्जर्व करो हर किसी के बीच में एक पर्टिकुलर गैप है एक पर्ट गैप है वो गैप आपको देना है ऑब्जर्व करो यहां पर एक शैडो बन रही है और ये जो आपका एंकर टैग है इसके अंडरलाइन गायब है ठीक है बहुत सारी छोटी-छोटी ऑब्जर्वेशन आपको करनी पड़ेगी यहां पे इस डिफ टैग को अलग से मैं बनाऊं तो इसके अंदर तुम देख पाओगे कि तुम्हारे पास दो चीजें हैं एक डब्बा ये रहा और एक डब्बा ये रहा इस डब्बे के अंदर आपने चेंज लिखा हुआ है यानी यहां पर एक एंकर टैग होगा इस डब्बे के अंदर आपके पास दो चीजें हैं तो इसको एक डब्बा मान लो और इसको एक डब्बा मान लो तो आपने बोला इस डब्बे के अंदर और इस डब्बे के अंदर यहां पे आप देखोगे यहां पे आपका म्यूजिक का आइकन है तो मैं इसको एक इमेज मान सकता हूं और यहां पर दो टेक्स्ट हैं तो दो टेक्स्ट को मैं तुम डिव लेना चाहो डि लो पैराग्राफ लेना चाहो पैराफ ले लो ठीक है तो वन बाय वन इसको फटाफट क्रिएट करते हैं ठीक है ज्यादा टाइम वेस्ट नहीं करते इसके ऊपर फटाफट से इसको कोड कर देते हैं ठीक है और तीसरा जो कार्ड है आपको मैं होमवर्क में दे दूंगा फटाफट ताकि आप खुद से भी कुछ प्रैक्टिस करके आए चलो तो हमने यहां पर क्या बोला हमने बोला कि अभी यहां पर इंक्स कार्ड बना रहा हूं अगेन सेम कोड यहां पर भी कॉपी पेस्ट आप कर सकते हैं सबसे पहले आप जाएंगे और ये ये वाला पार्ट तो लेके आ ही सकते हैं कंटेनर वाला ठीक है तो मैं ड एटी में गया और मैंने यहां पर एक कंटेनर सेटअप कर दिया तो कंटेनर के लिए फटाफट अपनी प्रॉपर्टी जो मैंने पहले से मेंशन कर रखी है व कॉपी पेस्ट कर सकता हूं तो यह सारी की सारी प्रॉपर्टीज मैं कॉपी करके आ गया और मैं यहां पर फटाफट स्टाइल टैग के अंदर स्टाइल टैग के अंदर इंसर्ट कर सकता हूं फटाफट इसको एक बार गो लाइव करते हैं देखते हैं कैसा बनेगा ये तो मैंने लाइफ पे क्लिक किया और ये ऐसा कुछ कुछ यई आ रहा है बहुत बढ़िया अब मुझे क्या चाहिए मुझे इसके अंदर ऐसा बीच में कार्ड चाहिए इसका बैकग्राउंड वाइट कलर का हो ठीक है तो अगेन यहां पर भी सेम मैं एक कार्ड क्रिएट कर सकता हूं तो मैंने बोला जी डॉट कार्ड और कार्ड की हम स्टाइलिंग यहां पर करनी पड़ेगी तो मैंने बोला डॉट कार्ड ये रहा और डॉट कार्ड की स्टाइलिंग मैंने यहां पर कर दी फटाफट यहां पर थ सा अंदाजा लेते हैं मैंने कहा कि इन सेम जो स्ट्रेटजी मैंने पहले फॉलो की थी वैसा कुछ कर सकता हूं तो मैंने क्या बोला यहां पर जो मेरी विड्थ है मैंने मार्क कर दिया ऐसे 400 पिक्सेल टाइप्स और यहां पर जो मेरी हाइट है मैंने मार्क कर दिया 600 पिक्सल टाइप्स और मैंने यहां पर मार्क कर दिया जो मेरा बैकग्राउंड कलर है ऐसा मैंने वो वाइट मार्क कर दिया अब य आई पे चेक करो क्या बना बढ़िया कॉर्नर जो है राउंडेड करने पड़ेंगे तो मैंने यहां पे बोल दिया जी बॉर्डर रेडियस एस 20 पिक्सल टाइप्स और यूआई पे चेक कराओ बढ़िया अच्छा लग रहा है अच्छा लग रहा है सुंदर बना हुआ है चलो मुझे क्या करना है सबसे पहले इसके सबसे पहले आप थोड़ा स्टाइलिंग करते हैं मैंने बोला सबसे पहले मुझे इस कार्ड को फ्लेक्स और फ्लेक्स डायरेक्शन कॉलम सेट करना पड़ेगा तो मैं फटाफट से इस कार्ड के अंदर आया और मैंने बोला कि डिस्प्ले फ्लेक्स कर दो और फ्लेक्स डायरेक्शन कॉल कॉलम कर दो क्यों ताकि सारी आइटम इसके अंदर एक के नीचे एक आए बहुत बढ़िया बात है बहुत बढ़िया बात है हॉरिजॉन्ट सेंटर्ड हो सब कुछ तो मैंने बोल दिया हॉरिजॉन्ट सेंटर्ड के लिए यहां पे अलाइन आइटम सेंटर ताकि मैं हॉरिजॉन्टल सेंटर में अलाइन कर पाऊं अब मैंने क्या कहा कार्ड के अंदर सबसे पहले मैं क्या देख पा रहा हूं सबसे पहले इमेज है तो इमेज फटाफट ऐड कर लेते हैं तो मैंने बोला सबसे पहले यहां पर एक इमेज टैग का यूज कर ले आप और इमेज टैग के अंदर आपने मेंशन कर दिया जो भी आपका सोर्स है आपने बोला सोर्स जो है वो हो गया जी मेरा इमेजेस आइकन बढ़िया चेक करते हैं यूआई प क्या यूआई पर आ रही है इमेज बिल्कुल आ गई इमेज पोजिशनिंग करनी पड़ेगी ढंग से इसकी तो मैंने बोला मैं कार्ड के अंदर गया इमेज के अंदर गया और मैंने क्या बोला कि इसकी जो विड्थ है ना इसके पेरेंट के बराबर होगी और इसकी जो हाइट है वो लेटस से मैंने 30 पर बोल दिया 30 पर मुझे हाइट चाहिए ठीक है तो यूआई प कैसी इमेज आ रही है अब इमेज बढ़िया आ गई अगेन ऊपर से कॉर्नर जो है राउंडेड नहीं है तो मैंने क्या बोला एक तो बॉर्डर टॉप लेफ्ट रेडियस मैंने मेंशन कर दिया ऐसा 20 पिक्सल टाइप और ऐसे बॉर्डर टॉप राइट रेडियस मैंने मेंशन कर दिया ऐसे 20 पिक्सल टाइप्स ठीक है तो यूआई पे आपका बॉक्स ऐसा दिख रहा है ठीक है आसपास है आसपास है ऐसा नहीं कि बेकार बन रहा हो आसपास बन रहे हैं और मैंने क्या बोला कि यार मुझे इस कार्ड को ना फ्लेक्स बनाना पड़ेगा मैंने फ्लेक्स बनाया है हां कार्ड को फ्लेक्स बनाया गैप मेंशन कर दो तो मैंने बोला जी यहां पर गैप मैंने मेंशन कर दिया लेट्स से 25 पिक्सल का ठीक है तो अब जो भी आइटम मैं डालूंगा वो सारी गैप्स में डालेगी अगली आइटम क्या है ऑर्डर समरी वाली हेडिंग तो फटाफट यहां पर गया मैंने बोला ऑर्डर समरी वाली हेडिंग चाहिए तो मैंने बोला जी h2 और हमने बोल दिया जी ऑर्डर समरी चेक कराओ एक बार यूआई प अच्छा लग रहा है अच्छा लग रहा है कोई इशू नहीं है उसके बाद क्या है आपने कुछ टेक्स्ट लिखा हुआ है तो मैंने यहां पर कुछ टेक्स्ट लिखा हुआ है मैंने यहां पर एक पैराग्राफ ले लि और मैंने बोला लोरम 20 ठीक है तो मैंने यहां पर कुछ टेक्स्ट लिख दिया चेक कराओ अच्छा लग रहा है पर सेंटर में अलाइन नहीं है अच्छा लग रहा है पर सेंटर में अलाइन नहीं है तो ये सेंटर अलाइन करना पड़ेगा तो मैंने क्या बोला के इस पूरे के पूरे को मैं एक बॉक्स में ले लेता हूं ऐसे करता हूं तो मैंने क्या किया यहां पर एक डेव ले ली मैंने बोल दिया इसका नाम टेक्स्ट बॉक्स और टेक्स्ट बॉक्स के अंदर मैंने क्या किया यह पूरा का पूरा जो है इसको मैंने यहां पर प्लेस कर दिया वेरी गुड और टेक्स्ट बॉक्स को फटाफट से स्टाइल कर लेते हैं बाहर आइसक्रीम वाले भईया आए हैं कोई ध्यान नहीं देगा बाहर तो ये तुम्हारा टेक्स्ट बॉक्स आ गया बहुत बढ़िया और हमने कहा कि इस टेक्स्ट बॉक्स के अंदर हम क्या चाहते हैं हम चाहते हैं सब पहले टेक्स्ट बॉक्स जो है ना ये ये फ्लेक्स हो और इसके अंदर हम क्या चाहते हैं कि फ्लेक्स डायरेक्शन जो है ना वो कॉलम हो और उसके अंदर हम क्या चाहते हैं कि आपका अलाइन आइटम जो है ना वो सेंटर हो और उसके अंदर हम क्या चाहते हैं कि गैप भी हो 25 पिक्सल का और उसके अंदर हम क्या चाहते हैं कि लेट्स से कुछ पैटन कर दिया पैडिट चाहिए मुझे ऐसा 20 पिक्सल टाइप्स ठीक है गैप मैंने छोटा कर दिया छोटा मैं 15 पिक्सल कर दिया पर चेक करते हैं य प बढ़िया अच्छा लग रहा है अच्छा लग रहा है क्या इसके आसपास है थोड़ा सा और हमें देखना पड़ेगा तो मैंने क्या क्या किया मैंने इसमें पैडिट दी मैंने इस टेक्स्ट बॉक्स की पैडिट हटा दी और मैंने इसकी विड्थ मेंशन कर दी मैंने बोला विड्थ जो है ना इसके पेरेंट के पेरेंट के हिसाब से 70 पर ले लेता हूं तो यूआई पे ऐसा आ गया अच्छा लग रहा है अच्छा लग रहा है देखो ऐसा बुरा नहीं लग रहा है सुंदर सुशील लग रहा है अब हमने इसको कर दिया बस टेक्स्ट की अलाइन मेंट थोड़ी सी देखनी पड़ेगी अलाइन मेंट अच्छी नहीं लग रही मुझे बस मैं थोड़ा सा और बड़ा कर दूं क्या इसको 75 पर कर दूं क्या और मैंने यहां पे कोई गैप ऐड कर रखा है गैप ड कर रखा है अच्छा लग रहा है एक टेक्स्ट का ना एक शर करना पड़ेगा एक शर करना पड़ेगा यहां पे कि यहां पर टेक्स्ट अलाइन जो सेंटर में हो रहा हो बढ़िया तो इस प्रकार से हमने यह भी दो चीजें ऐड कर ली अब उसके बाद मैं एक य डिव ऐड करना चाहता हूं जिसके अंदर बहुत सारी चीजें है तो फटाफट मैं गया यहां पर मैंने एक डिव ऐड कर दी इसको मैं भी लैप्स कर देता हूं और मैंने बोला कि एक डिव और मैंने बोला इस डिव की आईडी क्या है हमने इसकी डिव की आईडी रख दी ऐसा अमाउंट बॉक्स रख देता हूं उसका नाम अमाउंट बॉक्स और फटाफट मैं अमाउंट बॉक्स को लेकर गया इसको फटाफट से मैं एक बार स्टाइल कर देता हूं और मैंने बोला इसकी विड्थ कितनी है मैंने बोला जो भी मेरा पेरेंट है ना जो भी मेरा पेरेंट है तो लेट से 80 पर रख द और इसकी हाइट कितनी है लेट से मैंने बोला की जो मेरा पेरेंट है उसकी हाइट के हिसाब से लेट से 10 पर रख दी यई प चेक कराओ क्या बन रहा है नहीं दिख रहा तो बैकग्राउंड कलर इसका ड करो बेटा फटाफट एक बार अमाउंट बॉक्स का पट कौन है माउंट बॉक्स का पेरेंट जो है वो कार्ड है और कार्ड के अंदर विड जो है एक्सप्लिसिट डिफाइन कर रखी है बढ़िया चल रहा है ठीक है सही चलना चाहिए एक बार चेक कर लेते हैं क्यों नहीं चल रहा तो हमने बोला जी बीजी कलर बीजी कलर हमने ऐसा ले लिया बढ़िया सही चल रहा है हमने क्या किया इसको बॉर्डर रेडियस दे दी हमने बोला जी बॉर्डर बॉर्डर रेडियस 10 पिक्सल यई चेक कराओ ठीक है बढ़िया सुंदर सुशील बन रहा है कलर वाइज ठीक है कलर तोम मैच खुद से कर सकते हो अभी पर मेरा मेरा इंटेंट कुछ और क्रिएट करने का है कुछ और तरीके से क्रिएट करने का कलर मैचिंग के ऊपर ज्यादा मैं जोर नहीं दूंगा कि तुम अपने हिसाब से ऐसे टन ट्रायल करके एग्जैक्ट कलर लेकर आ सकते हो तो मैंने अभी ये डिव क्रिएट कर दिया इसके अंदर क्या करना है बाद में करेंगे पहले इसके आगे वाला पार्ट कर लेते हैं तो मैंने कहा आगे मुझे एक बटन चाहिए प्रोसीड टू पेमेंट का ये तो कर लेंगे अभी तो हमने क्या किया इस अमाउंट बॉक्स के बाद मैंने एक बटन क्रिएट कर दिया ठीक है ठीक है बटन मैंने क्रिएट कर दिया और मैंने इसका नाम रख दिया जी ऐसा पेमेंट बटन देखते हैं कि डिव की नीड पड़ेगी इसके साथ ही स्टाइल कर लेंगे हम चेक करते हैं अभी तो यह बटन मेरे पास आया है ठीक है और मैंने क्या कहा मैंने क्या कहा कि इस बटन को फटाफट स्टाइल करते हैं एक बार ठीक है इसके अंदर मैंने क्या लिखा हुआ बटन के अंदर प्रोसीड टू पेमेंट ठीक है हम यहां पर गए हमने बोला जी यहां पर इस बटन को मुझे स्टाइल करना है मैंने बोला इस बटन की विड्थ कितनी है इस बट की विड्थ कितनी है भाई जितनी एटली मेरे डिव की विड थी उतनी ही है यानी 80 पर विथ मैंने इसकी भी ले ली और इसकी हाइट कितनी है मैंने बोला जितनी मेरे डिव की हाइट थी उतनी ही हाइट मैंने इसकी थोड़ा कम कर लेंगे तो मैंने बो इसकी हाइट है लेट से 9 पर रख दी ठीक है चेक करवाओ यई प आ गया बटन बढ़िया लग रहा है बढ़िया लग रहा एकम बढ़िया लग रहा है मैंने बोला कि इसके अंदर जो बैकग्राउंड कलर मुझे चाहिए वो मैंने ले लिया ऐसा ब्लू टाइप इसको मैं अपने हिसाब से चेंज कर लेता हूं डार्क ब्लू ले आता हूं इसको ऐसा ले लिया और मैंने बोला जो भी इसके अंदर का कलर होगा वो मैंने रख दिया वाइट अब चेक कर कलर प्रोसीड टू बन गया अब बस कॉर्नर राउंडेड करनी है थोड़ी सी तो हम यहां पर गए हमने बोला बॉर्डर रेडियस ऐसा 10 पिक्सल चेक करो यई प बढ़िया तो यह बटन भी तुम्हारा यहां पर आ चुका है जैसे यहां पर क्रिएट करना था अब शैडो क्रिएट करनी है ठीक है अब शैडो के लिए हमने बोला दिमाग ज्यादा लगाएंगे नहीं तो हमने बोला कि ऐसा मुझे मटेरियल डिजाइन शैडो सीएसएस चेक करते हैं यहां पर मेरे पास ऐसे शैडोज आ गई देखते हैं बहुत सारी बनी पड़ी होगी शैडोज उसमें से कॉपी करेंगे जो हमें पसंद आएगी तो हमने बोला नहीं मजा तो नहीं आ रहा मजा नहीं आ रहा किसी और पे चलते हैं हम गए यहां पे यहां पर शैडोज बनी पड़ी है वेरी गुड अपने को चाहिए अपने को चाहिए किस टाइप की शैडो ऐसी हल्की सी चाहिए इसे कॉपी कर लेता हूं तो मैंने फटाफट यहां पे जाके इस शैडो को प्लेस कर दिया दिखाता हूं क्या बनेगा देखो बॉक्स शैडो का यूज़ किया हुआ है पर अगेन तुम हिट एंड ट्रायल करोगे इतनी सारी वैल्यूज तुम्हारा टाइम भी खराब होगा और मैं चाहता नहीं इतना टाइम तुम्हारा खराब हो तो तुम ऐसे कॉपी पेस्ट करके बढ़िया सी शैडो लेकर आ सकते हो देखो सुंदर लग रही है शैडो लग तो रही है ठीक है भैया इस वाले शैडो से डिफरेंट है पर यह तो मैंने कहा कोई बात नहीं तुम और शैडोज यहां पर सर्च करोगे लेट से तुम्हें ये वाली पसंद आ गई तुम ये वाली यूज कर लो और अकॉर्डिंग तुम्हारा यूआई अपडेट हो जाएगा ठीक है बेटा तो यह तुम्हारा प्रोसीड टू पेमेंट वाला काम हो गया ठीक है अगेन शैडो थोड़ी ज्यादा है मेरे को तो पसंद नहीं आ ये वाली तो मैं पुरानी वाली शैडो के साथ ही जाऊंगा ठीक है तो पुरानी वाली शैडो के साथ ही जाऊंगा और मैंने बोला कि यह वाला काम हो गया मुझे क्या चाहिए एक कैंसल ऑर्डर का एक एंकर टैग क्रिएट करना है ठीक है तो मैं फटाफट गया लास्ट लास्ट गेम में तो मैंने एक एंकर टैग फटाफट यहां पर क्रिएट कर लिया मैंने लेट्स से एक डिव ले लिया मैंने बोला जी कैंसल बॉक्स और मैंने बोला जी इसके अंदर एंकर टैग यूज कर लिया और मैंने इसके अंदर लिख दिया जी कैंसिल ऑर्डर चलो तो अगर मैं कैंसल बॉक्स की बात करूं इसको मुझे स्टाइल करना पड़ेगा क्लास है तो डॉट का यूज करता हूं आईडी है तो हैश का यूज करता हूं तो हमने कैंसल बॉक्स के ऊपर अप्लाई किया जबक मुझे अप्लाई करना था मेरे एंकर टैग के ऊपर ठीक है अब चलते हैं फटाफट यहां पे कैंसल टैग प अप्लाई हो गया कलर थोड़ा सा डार्क चाहिए मुझे इतने कम ग्रे से बात नहीं बनी तो डार्क ग्रे चाहिए तो मैंने ऐसा यह वाला यह वाला ग्रे यह थोड़ा सा ये वाला ग्रे यूज कर लिया ठीक है तो ऐसा य थ डार्क ग्रे हो गया ठीक है मैंने थोड़ा बोल्ड भी चाहिए मुझे तो मैंने यहां पर इसको बोल्ड भी कर दिया फंट वेट बोल्ड बढ़िया य आई चेक करो वेरी गुड ठीक है तो हमने इस प्रकार से कैंसिल ऑर्डर वाली गेम भी यहां पर सेट कर दी है अच्छे तरीके से एक बार वेरीफाई करते हैं बढ़िया थोड़ा और बड़ा कर सकते हैं साइज में कैंसिल ऑर्डर को तो और अच्छा लगेगा तो हमने बोला फंट साइज भी मेंशन कर देते हैं एक बार हमारा नीचे गोल्डी भौक रहा है उस पर ध्यान नहीं देंगे तो हमने बोला यहां पे इसको लार्ज मार्क कर दो देखते हैं लार्ज में क्या होता है सही है आई थिंक ठीक है बढ़िया तो यह कार्ड ऑलमोस्ट कंप्लीट हो चुका है बस यहां पर फर्क सिर्फ इतना है कि हमें फटाफट डिव था ना यह वाला जो यह वाला डिव था जो हमने देखा था यहां पर इस डिव को फटाफट से एक बार समझना है एक बार इस डिव को देख लेते हैं कैसे हुआ होगा ये ठीक है तो तो मैं ये डिव समझाता हूं फटाफट कैसे क्रिएट करने वाले हैं और तुम्हारा ये कार्ड भी कंप्लीट हो जाएगा ठीक है तो तुम फटाफट आए यहां पे तुमने बोला जी मुझे ये वाला डिव समझना है इसे फटाफट यहां पे रफी क्रिएट करता हूं मैं तो मैंने कहा ये मेरा टॉप लेवल डिव हो गया ठीक है ये मेरा डिव हो गया इस डिव के अंदर मैंने एक बॉक्स यहां पर बना दिया एक्सट्रीम लेफ्ट में एक बॉक्स यहां पर बना दिया एक्सट्रीम राइट में इस बॉक्स के अंदर एक बॉक्स मैंने यहां पर बना दिया एक बॉक्स मैंने यहां पर बना दिया इस बॉक्स के अंदर एक बॉक्स मेरा ये रहा और एक बॉक्स मेरा ये रहा अब अगर मुझे आपको बताना हो कि कौन सी चीज क्या है तो ध्यान से ऑब्जर्व करो ये पूरे बॉक्स को मैंने बोल दिया लेफ्ट बॉक्स ठीक है इस पूरे बॉक्स को मैंने बोल दिया जी अमाउंट बॉक्स ठीक है इस बॉक्स को मैंने बोल दिया राइट बॉक्स अब ध्यान से ऑब्जर्व करो राइट बॉक्स के अंदर एक एंकर टैग आ रहा है तो यहां पे एक एंकर टैग का यूज़ कर रहे हो ये वाले बॉक्स के अंदर एक इमेज आ रही है तो आपने एक आईएमजी टैग का यूज कर लिया ये वाले बॉक्स के अंदर एक पैराग्राफ दूसरा पैराग्राफ तो एक पैराग्राफ टैग यहां पर यूज हो गया एक पैराग्राफ टैग यहां पर यूज हो गया ठीक है और इसको आप कह सकते हो ऐसा इमेज बॉक्स ठीक है और इसको आप कह सकते हो ऐसा टेक्स्ट अमाउंट बॉक्स ऐसा करके तोम इसको आईडी क्लासेस प्रोवाइड कर सकते हो ठीक है तो फटाफट से इसे क्रिएट करते हैं ऑब्जर्व अगर करोगे तुम्हे पता लगेगा कि ये वाली जो आइटम जो है ये तुम्हें फ्लेक्स बनानी पड़ेगी क्यों क्योंकि ये तुमने एक्सट्रीम लेफ्ट में प्लेस किया है ये एक्सट्रीम राइट में प्लेस किया है तो इसका मतलब स्पेस बिटवीन का तुम यूज करने वाले हो इन दोनों फ्लेक्स आइटम्स को ऐसे अरेंज करने के लिए ठीक है फिर अगर इसकी बात करें इस वाले डब्बे की तो यहां पर दो आइटम्स है ठीक है इस प्रकार से अरेंज है ठीक है कुछ करने की नीड नहीं है बस फिर भी फ्लेक्स बना लेना इसको फ्लेक्स डायरेक्शन ड्र कर लेना ताकि साइड बाय साइड आइटम आ जाए और आई थिंक काफी है इतना काफी है इतने काम बन जाएगा हमारा तो फटाफट ट्राई करते हैं इसको एक बार क्रिएट करने का तो हमने बोला इस डिव के अंदर जो हमने माउंट बॉक्स बनाया है इसके अंदर दो बॉक्सेस आएंगे लेफ्ट बॉक्स एक राइट बॉक्स तो हम यहां पर आए हमने बोला एक लेफ्ट बॉक्स क्रिएट कर दो ठीक है लेफ्ट बॉक्स क्रिएट हो गया मैंने कहा कि एक राइट बॉक्स क्रिएट कर दो मैं क्लासेस का यूज कर रहा हूं पर तुम य आईडी का यूज करना ठीक है अब राइट बॉक्स के अंदर तुम्हारे पास एक एंकर टैग था तो तुमने यहां पर एंकर टैग का यूज कर लिया और तुमने कहा कि एंकर टैग से अंदर कंटेंट क्या लिखा है चेंज ठीक है लेफ्ट बॉक्स के अंदर तुम्हारे पास लेफ्ट बॉक्स के अंदर तुम्हारे पास दो बॉक्सेस है लेफ्ट बॉक्स के अंदर तुम्हारे पास दो बॉक्सेस है पहला जो बॉक्स है पहला जो बॉक्स है उसका नाम मैंने रखा है इमेज बॉक्स ठीक है इसके अर तुमने एक इमेज ले रखी है सोस टैग का यूज कर लिया तुमने बोला जी इमेज और यह आ गई तुम्हारी म्यूजिक की इमेज वेरी गुड और यह तुम्हारा इमेज बॉक्स हो गया इमेज बॉक्स के बाद तुमने क्या लिया हुआ है इमेज बॉक्स के बाद तुमने एक और काम किया हुआ है वह काम क्या है तुमने यहां पर एक टेक्स्ट अमाउंट बॉक्स क्रिएट किया हुआ है जहां पर तुमने ऐसे दो पैराग्राफ ऐड एक में तुमने लिखा है जी अमाउंट और सेकंड में तुमने क्या लिखा है सा ड 99.9 पर ईयर चलो ऐसा कुछ कुछ लिख दिया अब इन्ह स्टाइल करना बहुत इंपोर्टेंट है यह मेरा लेफ्ट बॉक्स था इसका पहला बॉक्स इमेज बॉक्स है दूसरा बॉक्स टेक्स्ट अमाउंट बॉक्स है उसके बाद ये राइट बॉक्स है जहां पर हमनेर टैग डाला हुआ है चेक करते हैं य प क्या बन रहा है अभी ऐसा अजीब सा बन के आ रहा है चलो तो हम वन बाय वन इसको क्रिएट करते हैं हमने बोला माउंट बॉक्स प चलते हैं अमाउंट बॉक्स जो है हमने अभी तक ऐसे सेट कर रखा है मैंने बोला अमाउंट बॉक्स के अंदर दो आइटम्स ऐसे एक्सट्रीम लेफ्ट एक्सट्रीम राइट में आ रही है तो इसका मतलब क्या है अमाउंट बॉक्स को मुझे ऐसा डिस्प्ले फ्लेक्स करना पड़ेगा और इसका मुझे जस्टिफाई कंटेंट जो है ऐसा स्पेस बिटवीन ठीक है तो इतना लिखने से हमने क्या किया हमने अमाउंट बॉक्स के अंदर दो डब्बो को एक्स्ट्रीम लेफ्ट एक्सट्रीम राइट में प्लेस करवा दिया कौन से दो डब्बे हैं वो एक है भैया आपका लेफ्ट बॉक्स और एक है आपका राइट बॉक्स बढ़िया अब राइट बॉक्स के अंदर मुझे मुझे क्या दिखता है मुझे वहां पे एंकर टैग दिखता है ठीक है तो अ इनको स्टाइल फटाफट कर लेते हैं लेफ्ट बॉक्स को राइट बॉक्स को लेफ्ट बॉक्स अगर तुम्हें याद हो तो लेफ्ट बॉक्स के अंदर तुम्हें यहां पे दो चीजें दिखती हैं एक ये और एक ये तो इसको फ्लेक्स और डायरेक्शन रो मार्क कर सकते हैं तो हमने बोला कि लेफ्ट बॉक्स के अंदर चलते हैं मैंने बोला कि लेफ्ट बॉक्स की विड्थ कितनी होगी इसकी विड्थ जितना भी कंटेंट होगा फिट कंटेंट कर दिया मैंने और मैंने कहा इतने फिट कंटेंट कर देना है इसके विड्थ के अंदर अ और लेट्स से मैंने मार्क कर दिया इसके अंदर डिस्प्ले फ्लेक्स और बाय डिफॉल्ट तो कॉलम ही होती है ठीक है एक गैप मैंने ऐड कर दिया कि भाई साहब गैप आप 15 पिक्सल का मेंटेन करना जो भी दो डब्बे हैं इसके अंदर एक इमेज बॉक्स है और एक टेक्स्ट अमाउंट बॉक्स है गैप आना चाहिए ठीक है और राइट बॉक्स की अगर बात करें तो राइट बॉक्स के अंदर आपका एक एंकर टैग है मैंने सिंपल सा बोला कि वह एंकर टैग जो है उसे सेंटर में प्लेस करना तो मैंने यहां पे बोल दिया जी अलाइन आइटम्स सेंटर तो यई में देखते हैं क्या बना तो ऐसा करके सेंटर में तो आ गया मैंने कहा थोड़ी पैडिट मुझे ऐड करनी पड़ेगी तो मैंने एक पैडिट कर ली मैंने बोला जी पैडिट ऐसा 20 पिक्सल चेक करवाओ एक बार फटाफट ये तुम्हारा पैडिट राइट के 20 पिक्सल आ गया बढ़िया ऐसी पैंग लेफ्ट भी मैंने ऐड कर ली मैंने बोला पडि लेफ्ट भी मैंने ऐड कर लिया ऐसा 20 पिक्सल ठीक है यह बात समझ में आती है अब इतना समझ में आ रहा है बाकी सारा कंटेंट पता नहीं कहां गायब हो गया पर ठीक है अभी कर लेते हैं उसको भी लेफ्ट बॉक्स की बात कर रहे हैं अभी के लिए मैं इस विड्थ को हटाता हूं एक बार देखते हैं क्या होता है फिर तो आपका कंटेंट अभी भी वहीं पर ही है चेक करते हैं क्या गड़बड़ हो गई तो हमने बोला अमाउंट बॉक्स मेरे पास यह रहा डिस्प्ले फ्लेक्स गैप वगैरह मैंने मेंशन कर रखा है राइट बॉक्स की बात कर रहे हैं राइट बॉक्स में कुछ करने की नीड नहीं पड़ी मेरे को यार कुछ करने की नीड पड़ी अपने आप सेट हो गया वो वेरी गुड अब लेफ्ट बॉक्स जो है यह देखना पड़ेगा कहां पर रख दिया हमने इसका नाम लेफ्ट बॉक्स ही था ना पक्का अमाउंट बॉक्स के अंदर लेफ्ट बॉक्स लेफ्ट बॉक्स में सारा डाटा था इसको आईडी कर दो यार तो मैंने इसको बोल दिया जी आईडी हो गई लेफ्ट बॉक्स बना दिया डिस्प्ले फ्लेक्स कर दी गैप 15 पिक्सल कर दिया ठीक है पोजीशन कहां करें इसको चेक करते हैं दोबारा ये रहा अमाउंट बॉक्स अमाउंट बॉक्स के अंदर मेरा लेफ्ट बॉक्स आ रहा है और मेरा राइट बॉक्स आ रहा है तो इन दोनों को मैंने स्पेस बिटवीन कर दिया ना तो ये स्पेस बिटवीन क्यों नहीं हुआ चेक करते हैं एक बार यूआई पे क्या हो रहा है मैंने बोला कि इसको एक बार रिफ्रेश करो यार कुछ गड़बड़ तो नहीं है इसको हमने इंस्पेक्ट किया और इंस्पेक्ट करके हमने क्या बोला के भाई साहब डॉक करो इसको पहले राइट साइड में और हमने इसको देखा फटाफट यह रहा बढ़िया तो इसकी हाइट जो है बहुत ज्यादा आ रही है इसकी हाइट पहले एक बार मेंशन करते हैं लेफ्ट बॉक्स की हाइट थोड़ी ज्यादा आ रही है तो पहले मैंने क्या किया लेफ्ट बॉक्स के अंदर जाकर हाइट मेंशन कर दी मैंने बोला हाइट जो है 100 100% रख मैंने जो भी इसका पेरेंट होगा उसके अकॉर्डिंग ड हो जाएगी बढ़िया सही आ गई पहले से सही आ गई मैंने बोला 100% इसकी हाइट आ चुकी है ठीक है और हमने क्या किया इसको इसके अंदर जो भी कंटेंट लेफ्ट बॉक्स के अंदर कंटेंट क्या है लेफ्ट बॉक्स के अंदर आपका आइकन है और यह दो डब्बे हैं तो मैंने क्या डिसाइड किया था कि इन दोनों चीजों को मैं ऐसे फ्लेक्स करके फ्लेक्स रो कर दूंगा ठीक है तो मैं लेफ्ट बॉक्स के अंदर ऐसा डिस्प्ले फ्लेक्स करके फ्लेक्स रो कर दिया ठीक रेडी किया हुआ मैंने तो और हमने क्या कर दिया लाइन आइटम सेंटर कर दिया सेंटर में आइटम्स आनी चाहिए सेंटर में आ रही है ठीक है सेंटर में आ रही है अब इमेज की बात करते हैं मैंने कहा कि मैं फटाफट गया मैं फटाफट गया एक इमेज बॉक्स कर यहां पर फील्ड होगी चेक कर लेता हूं फटाफट हम गए यहां पर लेफ्ट बॉक्स के अंदर इमेज बॉक्स की क्लास है मेरे पास तो मैं फटाफट इमेज बॉक्स की क्लास के अंदर इमेज के अंदर गया और इमेज की प्रॉपर्टीज मैंने यहां पर मेंशन कर दी मैंने बोला जी यहां पर जो हाइट है लेट्स से मैंने मेंशन कर दिया सा 20 पिक्सेल है और यहां पर जो विड्थ है मैंने मेंशन कर दिया 20 पिक्सल है बढ़िया चेक करवाओ अभी तो कम आ रही है थोड़ा सा और बढ़ाना पड़ेगा इसे मैंने बोला कि ऐसा इसको वन आरएम लेक देख एक बार कुछ गड़बड़ है वैसे थोड़ी सी आए पकड़ लेंगे 1 आरएम व आरएम सेट कर दिया ठीक है मजा नहीं आ रहा अभी भी हमने इसको कर दिया ऐसा 4 आरएम ऐसा 4 आरएम अब अब सही लग रहा है थोड़ा सा हमने कर दिया इसको 3.5 आरम 3.5 आरई एम अब सुंदर लग रहा है तो क्या हम आसपास पहुंच पाए हैं ध्यान से अगर ऑब्जर्व करो ध्यान से अगर ऑब्जर्व करो मित्र तो ये जो तुमने क्रिएट किया है यहां पर भी तुम सारी की सारी चीज देख पा रहे हो यहां पर भी तुम्हारे पास यह कार्ड है कार्ड के अंदर इमेज है हेडिंग है पैराग्राफ है एक डिव है अमाउंट का आइकन यह रहा अमाउंट ये रहा हाइपर लिंक ये रहा पेमेंट बटन क्रिएट कर दिया और हाइपरलिंक क्रिएट कर दिया ठीक है सेम जो तुम्हें क्रिएट करना था इसी प्रकार का था इसी प्रकार का था ठीक है तो काइंड ऑफ तुमने वो अचीव कर लिया है जो कार्ड तुम बनाना चाहते थे ठीक है इस प्रकार से हिट एंड ट्रायल कर करके कर करके बहुत स स चीजें तुम सीख जाओगे पर हां मेहनत करनी पड़ेगी बिना मेहनत के तो होगा नहीं इस बात की गारंटी है ठीक है तो एक बार इसको फटाफट से नीचे डॉक करके चेक कर लेते हैं कि ठीक है ऐसे तो कोई दिक्कत इशू फेस नहीं कर रहे हम ठीक है ऐसे जब कर रहे हैं फिर भी ठीक चल रहा है ठीक है इसमें तो मीडिया क्वेरी ऐड कर सकते हो दोस्त इसमें तो मीडिया क्वेरी ऐड कर सकते हो मीडिया क्वेरी ऐड कर सकते हो जैसे ही तुम्हारा ये लेट्स से 400 पिक्सेल से कम हो तो तुम्हारी ये तीनों के तीनों चीजें एक के नीचे एक के नीचे एक आ जाए ऐसे करके मीडिया क्वेरी का होमवर्क ऐड कर लो कि डिव के अंदर तुम्हारी इमेज अमाउंट वाला बॉक्स और ये हाइपर लिंक या एंकर टैग एक के नीचे एक के नीचे एक आ जाए यानी फ्लेक्स डायरेक्शन कॉलम हो जाए कब जब तुम 400 पिक्सेल से कम हो जाओगे ठीक है क्योंकि अभी तो खराब हो गया ना तो मीडिया क्वारीज के द्वारा इसको तुम ऐड कर सकते हो बढ़िया बढ़िया आई थिंक अच्छा बन सकता है और अच्छा बना पाएंगे इसको हम इसमें मीडिया क्वेरीज ऐड कर लेंगे एक अच्छा कार्ड आपने देख लिया है अब बात करते हैं होमवर्क के बारे में कि हमें होमवर्क में क्या क्रिएट करना है तो होमवर्क में तुम्हें ये वाला एक कार्ड है तुम्हारे पास ये क्रिएट करना है दोस्त ठीक है सिंपल सा कार्ड है ज्यादा मुश्किल तो तुम्हारे लिए रखा नहीं है मैंने मैंने कहा बच्चे हैं अभी थोड़ा सा सीख ले पहले उसके बाद मुश्किल चीजें पकड़ाएंगे इनको तो मैंने बोला बहुत सिंपल है ध्यान से ऑब्जर्व करो सबसे पहले क्या ऑब्जर्व कर पा रहा हूं सबसे पहले टॉप लेवल एक कंटेनर बनाना है जो कि हम बाकी पिछले दो एग्जांपल में बना चुके हैं इस कंटेनर को मैंने बनाया और मैंने कहा कि इस कंटेनर को मार्क्स कर दिया मार्क कर दिया मैंने फ्लेक्स जस्टिफाई कंटेंट कर दिया सेंटर और मैंने अलाइन आइटम कर दिया सेंटर ताकि मैं इस वाले कार्ड को इस वाले कार्ड को मैं सेंटर में अलाइन कर पाऊं अब ध्यान से ऑब्जर्व करो यहां पर मैंने यहां से लेके यहां तक यह कार्ड बना रखा है ठीक है और कार्ड के अंदर तुम्हारे पास एक तो लेफ्ट वाला बॉक्स है और एक तुम्हारा राइट वाला बॉक्स है ठीक है तो तुमने क्या किया तुमने बोला कि कार्ड के अंदर दो चीजें साइड बाय साइड हैं तो तुमने का को क्या किया तुमने कार्ड को फ्लेक्स बना दिया डायरेक्शन रो कर दी और इसको तुमने कर दिया ऐसा स्पेस बिटवीन कर दिया या गैप जीरो पिक्सल कर दिया जो तुम्हें अच्छा लगे इस बॉक्स का नाम तुमने दे दिया लेफ्ट बॉक्स इस बॉक्स का नाम तुमने दे दिया राइट बॉक्स और राइट बॉक्स के अंदर ध्यान से देखो तुमने क्या यूज किया है एक इमेज टैग का यूज कर लो या फिर एक और तरीका ढूंढना बैकग्राउंड इमेज ऐड करने का तो फटाफट चेक करना कि बैकग्राउंड इमेज नाम की क्या कोई प्रॉपर्टी होती है तो इसमें तुम ट्राई करना बैकग्राउंड इमेज नाम की प्रॉपर्टी का यूज करके इस सिंटेक्स का यूज करके यहां पर इमेज ऐड कर करो ये तुम्हारा होमवर्क है ठीक है इसका कोड मैं तुम्हें ऐड करके दूंगा इसी क्लास के अंदर चिंता ना करें जो भी हम गेटअप पे कोड अपलोड करेंगे वहां पे कोड तो मिल जाएगा बट खुद से भी ट्राई करना अगर मैं लेफ्ट बॉक्स की बात करूं लेफ्ट बॉक्स के अंदर सबसे पहले एक डब्बा ये रहा एक डब्बा ये रहा और एक डब्बा ये रहा तो तीन डब्बे एक के नीचे एक के नीचे एक है यानी लेफ्ट बॉक्स क्या हो गया फ्लेक्स हो गया एक के नीचे एक है तो फ्लेक्स डायरेक्शन मुझे यहां पर कॉलम मार्क करनी पड़ेगी बहुत बढ़िया यहां पर मुझे एक हेडिंग नजर आ रही है यहां पर मुझे एक पैराग्राफ नजर आ रहा है यहां पर मुझे एक डब्बा दो डब्बा तीन डब्बे नजर आ रहे हैं तो अगर लेट्स से मैं इसको स्टार्ट बॉक्स इसका नाम दे दूं कि स्टार्ट बॉक्स है ये तीन चीजें साइड बाय साइड आ रही है तो हमने बोल दिया कि इसको हमने बना दिया फ्लेक्स और डायरेक्शन हो गई रो अब हर एक सिंगल डब्बे में दो डब्बे हैं पहला डब्बा और दूसरा डब्बा इसको पैराग्राफ मान लो इसको भी पैराग्राफ मान लो काम खत्म तो ब्रेक कर दिया मैंने तुम्हारे सामने इसको फटाफट जल्दी से इसको तुम फटाफट से एक बार कोड करना मैं तुम्हें जो कोड शेयर करहा हूं गिट अप के अंदर उसमें इसका एग्जैक्ट कोड तुम्हें दिया होगा और उसमें एक चीज एक्स्ट्रा भी होगी कि जब तुम इसम होवर करोगे तो उसमें ग्रे स्केल का फिल्टर मूव कर रहा होगा तो ऐड करके दूंगा तुम्हें कोड में चिंता नहीं करनी और आई थिंक समझ में आया होगा एक प्यारा सा लेक्चर आपका हमने यहां पर लिया जहां पर एक प्यारे से छोटे छोटे से कार्ड से लेकर थोड़ा इंटरमीडिएट लेवल कार्ड तक हम पहुंचे और उस कार्ड से फिर थोड़ा एडवांस लेवल कार्ड तक हम पहुंचे जो तु जो हमने आपको ब्रेक करके ऐसा होमवर्क में दे दिया ठीक है तो ट्राई करना कोड हम शेयर करेंगे डिस्क्रिप्शन में आप लोग को लिंक मिल जाएगा और मजा आया कमेंट सेक्शन के अंदर बताना कैसी लगी आपको ये वीडियो इस वीडियो में इतना ही दोस्त मिलेंगे आपसे आपके अगले सेशन के अंदर इस सेशन में इतना ही लव यू ऑल बाय बाय इस सिंगल वीडियो के अंदर आप ग्रेड को बहुत ही डेप्थ में समझने वाले हैं इसके बाद आपको ग्रिड को समझने के लिए कोई और वीडियो नहीं देखनी पड़ेगी ठीक है यहां पर हम समझेंगे सीएसए ग्रिड्स होता क्या है फ्लेक्स बॉक्स के साथ कैसे यूज कर सकते हैं फ्लेक्स बॉक्स होने के बावजूद भी हम ग्रिड को इतना अच्छा क्यों कह रहे हैं जबकि हम फ्लेक्सस बॉक्स इतनी आसानी से समझ में आ चुका है लास्ट के कुछ लेक्चर के अंदर और बहुत दिनों बाद मिल रहे हैं बहुत सारा गैप है लास्ट वीडियो दो महीने पहले अपलोड हुई थी दो महीने गैप बीच में क्यों आया तो रिसेंटली एक मेरी सर्जरी हुई थी उस सर्जरी के बाद कुछ दिनों का बेडरेस्ट हमारे डॉक्टर साहब ने हमें बोला कि आपको लेना पड़ेगा बै नहीं पाएंगे ढंग से दैट्ची है कोर्स तो मैंने बोला है कंप्लीट होगा मैं ही कंप्लीट करूंगा तो कंप्लीट तो डेफिनेटली कोर्स होने वाला है उसकी चिंता आप ना करें तो वापस शुरू करते हैं कंसिस्टेंसी के साथ समझते हैं व्हाट इज अ सीएसएस ग्रिड समझते हैं क्या होता है ये ठीक है बहुत ही प्यारा कांसेप्ट है बहुत ही ज्यादा आप इसको यूज करने वाले हैं अपनी डेवलपमेंट जर्नी के अंदर तो हमने कहा अभी तक जब लेआउटिंग की बात करते थे मुझे डिफरेंट टाइप ऑफ लेआउटस बनाने हैं ठीक है लेट्स से मैंने बोला कि एक लेआउट मेरा इस प्रकार का एजिस्ट करता है जहां पर ये मेरी एक हेडर हो गया हां पर ये वाला पार्ट मेरा फुटर हो गया ये वाला पार्ट मेरा साइड बार बन गया ये वाला पार्ट मेरा साइड बार बन गया और बीच में मेरा मेन कंटेंट आ रहा है एक बार ढंग से लिख के बताता हूं मैंने कहा कि ये वाला पार्ट मैंने हेडर बना दिया यह वाला पार्ट मैंने फुटर बना दिया ये साइड बार पहली लगा दी ये साइड बार दूसरी लगा दि और यहां से यहां तक ये पूरा का पूरा कंटेंट मेरा मेन कंटेंट हो गया एक प्रकार का लेआउट है एक प्रकार का लेआउट है जहां पे आपने इस प्रकार के रेक्टेंगल बॉक्सेस के द्वारा कंटेंट को प्लेस किया हुआ है मैंने कहा ठीक है एक प्रकार का लेआउट आपने ये बना दिया अगर मैं फ्लेक्स बॉक्स के द्वारा क्रिएट करना चाहूं तो क्या मैं इसे क्रिएट कर सकता हूं जी हां बिल्कुल कर सकते हैं एक नॉर्मल लेआउट की बात करें जहां पर कुछ ज्यादा फैंसी नहीं है वो डिस्कस कर लेते हैं तो मैंने कहा कि नॉर्मल लेआउट के अंदर मैंने क्या बोला ये रहा मेरा हेडर ये रहा मेरा फुटर और बीच में आ गया मेरा मेन कंटेंट दोबारा रिपीट करते हैं मैंने कहा ये रहा मेरा हेडर और यह रहा मेरा फुटर और बीच में आ गया मेरा मेन कंटेंट एक नॉर्मल सा लेआउट है कुछ भी मुश्किल नहीं है इसके अंदर ठीक है और भी भिन्न-भिन्न प्रकार के लेआउट आप क्रिएट कर सकते हैं जो भी आपका मन करे तो मैंने एक और लेआउट पकड़ लिया ठीक है प्यारा सा कलर चूज कर लेते हैं तो हमने बोला चलो एक और लेआउट क्रिएट करते हैं ठीक है तो हमने कहा कि यहां पर मैंने एक हेडर क्रिएट कर दिया है यहां पर मैंने एक फुटर क्रिएट कर दिया है यहां पर मैंने एक साइड बार क्रिएट कर दी है और यहां पर इस प्रकार से मैं अपने कंटेंट को प्लेस कर दिया ठीक है तो भिन्न-भिन्न प्रकार के लेआउट आप क्रिएट कर सकते हैं उसमें कोई भी ऐसी बाउंस नहीं है कि यह हो पाएगा वो नहीं हो पाएगा तो मैंने कहा जी यह है मेरा हेडर मैंने कहा जी यह है मेरा फुटर और मैंने कहा जी यह है मेरी साइड बार मैंने बोला जी यहां पर मैंने प्लेस किया हुआ हमारा कंटेंट वन यहां पर मैंने प्लेस किया हुआ हमारा कंटेंट टू यहां पर मैंने प्लेस किया हुआ है हमारा कंटेंट थ्री तो डिफरेंट डिफरेंट टाइप ऑफ लेआउटस हैं डिपेंड करता है अपनी वेबसाइट आप कैसे क्रिएट करना चाहते हैं क्या डिजाइन आपने फॉलो करना है और ये सारे के सारे लेआउटस ये सारे के सारे ले अभी तक हमने बहुत सारी चीजें सीखे जिनके द्वारा हम क्रिएट कर सकते हैं अगर आप चाहे तो इनको टेबल्स के द्वारा क्रिएट कर सकते हैं टेबल्स आपको सिखा चुके हैं हम अगर आप चाहे तो आप पोजीशंस का यूज कर सकते हैं ठीक है पोजीशन करके इनको क्रिएट कर सकते हैं अगर आप चाहे तो फ्लेक्स बॉक्स आपको सिखाया हुआ है फ्लेक्स बॉक्स के द्वारा अपन लेआउट का क्रिएशन कर सकते हैं और आज हम पढ़ने वाले हैं ग्रिड्स जिसका प्रॉपर यूज केस ही यह है कि भाई ग्रिड को हम यूज करेंगे लेआउटिंग करने के लिए लेआउट क्रिएट करने के लिए तो जब ग्रिड की बात आती है और मुझे लेआउट क्रिएट करना होता है तो लेआउट क्रिएशन वाला प्रोसेस चाहे यह लेआउट हो चाहे यह लेआउट हो चाहे नीचे जो आपने लेआउट देखा यह वाला लेआउट हो फर्क नहीं पड़ता कोई भी लेआउट मैं बहुत ही आसानी के साथ क्रिएट कर सकता हूं क्या बात समझ में आती है क्या बात समझ में आती है फिर दोबारा रिपीट करते हैं मैंने कहा कि मुझे कोई भी लेआउट कभी क्रिएट करना हो तो मैं सीएसएस ग्रिड का यूज करके बहुत ही इजीली उस लेआउट को क्रिएट कर सकता हूं सवाल है सीएसएस ग्रिड क्या होता है लेमंड टर्म से समझते हैं एक बार मैंने कहा ग्रिड से आप क्या समझते हैं पहले यह बताओ तो आपने बोला भैया ग्रिड से हमें समझ में आता है कि ऐसा कोई ऐसा कोई एक टू डायमेंशन सिस्टम है ऐसा कोई एक टू डायमेंशन सिस्टम है यह समझ में आता है जहां पर मेरे को क्या-क्या दिखता है जहां पर मेरे को रोज दिख रही होती है कि यहां पर रो नंबर वन है यहां पर रो नंबर टू है यहां पर रो नंबर थ्री है यहां पर रो नंबर फोर है यहां पर रो नंबर फाइव है जहां पर मुझे कॉलम दिख रहे होते हैं ये मुझे कॉलम नंबर वन दिख गया ये मुझे कॉलम नंबर टू दिख गया ये मुझे कॉलम नंबर थ्री दिख गया ये मुझे कॉलम नंबर फोर दिख गया तो ग्रिड से मैं ये समझता हूं कि मेरे पास एक टू डायमेंशन सिस्टम है जिसको मैंने रोज एंड कॉलम्स के फॉर्मेट में डिवाइड किया हुआ है ठीक है तो आपने जो मैथ्स में पढ़ा होगा 2d ग्रिड के बारे में कि मैंने बहुत सारी रोज में डिवाइड कर दिया अपने स्पेस को बहुत सारे कॉलम्स में डिवाइड कर दिया अपने स्पेस को रिजल्ट में मुझे बहुत सारे सेल्स मिल गए एक सेल ये रहा एक सेल ये रहा एक सेल ये रहा एक सेल ये रहा एक सेल ये रहा एक सेल ये रहा एक सेल ये रहा ये रहा इस प्रकार से सेल मिल गए इस टू डायमेंशन स्ट्रक्चर को मैं क्या बोलता हूं इसको मैं ग्रिड कहता हूं जितनी मैथ्स मैंने अपने जीवन में बचपन में पड़ी हुई है तो सीएसएस ग्रिड भी इसी प्रकार की एक चीज है सीएसएस ग्रिड भी आपका एक टू डायमेंशन लेआउट सिस्टम है जिसके द्वारा आप अपनी वेबसाइट में लेआउट क्रिएट कर सकते हैं बहुत ही इजीली कुछ टर्म्स हमें समझनी पड़ेगी यहां पर कुछ टर्म्स हमें यहां पर समझनी पड़ेगी मैंने बोला ये मेरी रोज है सारी की सारी ये पहले से जानता था मैंने कहा ये सार के सारे मेरे कॉलम्स है कि मैंने बोला ये मेरा एक कॉलम है ये मेरा दूसरा कॉलम है ये मेरा तीसरा कॉलम है ये मेरा चौथा कॉलम है ठीक है मैंने बोला ये मेरी पहली रो है दूसरी रो है तीसरी रो है चौथी रो है पांचवी रो है तो इस प्रकार से रोज में इसको हमने डिवाइड किया हुआ है बहुत बढ़िया और आप जो ये बॉक्सेस देख पा रहे हैं मैंने कहा ये एक सेल नंबर वन हो गया सेल नंबर टू हो गया सेल नंबर थ्री हो गया सेल नंबर फोर हो गया इसको मैं सेल कह देता हूं किसी भी दो रोज के बीच के गैप को मैं ट्रैक कह देता हूं कि भाई ये रो ट्रैक हो गया कॉलम के बीच के गैप को मैंने कह दिया कॉलम ट्रैक हो गया ठीक है तो एक प्रकार का टू डायमेंशन लेआउट आपको यहां पर विजिबल है जब मैं बात करता हूं इस पूरे के पूरे लेआउट की जिसमें हमने रोज में और कॉलम्स में डिवीजन की हुई है रिजल्टेंट मुझे बहुत सारे सेल देखने को मिल रहे हैं यह बात समझ में आई दोबारा रिपीट करते हैं मैंने कहा सीएसएस ग्रिड क्या है सीएसएस ग्रिड मेरे पास एक ऐसा टूल है जिसको यूज करके मैं लेआउटस को क्रिएट कर सकता हूं सवाल है कैसे वो भी हम देखेंगे सवाल है कैसे वो भी हम देखेंगे बहुत सारी प्रॉपर्टीज है यहां पर जो कंटेनर पर ल लगती है जो आइटम पर लगती है तो उनको डिस्कस करेंगे कंटेनर और आइटम सुनके आपको कुछ कुछ याद आया होगा है ना जब हमने फ्लेक्स पढ़ा था तो हमने पढ़ा था फ्लेक्स के टाइम पे कि एक आपका पेरेंट कंटेनर होगा एक आपका पेरेंट कंटेनर होगा उसके अंदर आप डिस्प्ले को फ्लेक्स मार्क करते थे याद अगर आपको रिवाइज नहीं किया तो एक बार रिवाइज करके आना इसके अंदर आप मार्क करते कि भाई डिस्प्ले जो है वो फ्लेक्स होगी तभी फ्लेक्स क्रिएट कर पाते थे और हमने कहा था इसके अंदर कुछ चाइल्ड आइटम्स होंगी कुछ चाइल्ड आइटम्स होंगी ठीक है इसके अंदर अपने आप कंटेंट को आप प्लेस किया करते थे ठीक है तो फ्लेक्स के द्वारा भी लेआउटिंग हमने की हुई है पर हां पावरफुल लेआउटस अगर हम बात करें तो कैसे बन पाते हैं पावरफुल लेआउटस ग्रिड और फ्लेक्स के कॉमिनेशन से बन पाते हैं यहां पर फ्लेक्स की और ग्रिड की लड़ाई नहीं करवानी है कि भाई फ्लेक्स अच्छा है ग्रेड अच्छा है यहां पर दोनों को साथ में लेके पावरफुल कॉमिनेशन का यूज करके ग्रैंड लेआउटस क्रिएट करने हैं वापस आते हैं तो यहां पर भी जब मैं ग्रिड की बात करता हूं सीएसएस ग्रिड की हम बात करते हैं तो यहां पर भी आपका एक पेरेंट कंटेनर होगा यहां पर भी आपका एक पेरेंट कंटेनर होगा जिसके अंदर आप डिस्प्ले को क्या मार्क कर देंगे जिसके अंदर आप डिस्प्ले को ग्रिड मार्क कर देंगे और यहां पर भी आपके पास बहुत सारी चाइल्ड आइटम्स होने वाली है लेआउटस की वापस बात करते हैं तो यहां पर भिन्न-भिन्न प्रकार के लेआउट हमें विजिबल होंगे ठीक है यह सारे के सारे लेआउटस हैं आप देख सकते हैं कितने सारे अच्छे-अच्छे सुंदर सुंदर सुशील सुशील लेआउट आपको नजर आ रहे हैं और ये देखिए यहां बहुत सारे लेआउटस हैं तो आप सीएसएस ग्रिड की सहायता से ये सारे के सारे लेआउट बहुत ही इजली क्रिएट कर सकते हैं ठीक है डॉक्यूमेंटेशन की अगर बात करें तो एमडीए पर जाकर आप डॉक्यूमेंटेशन एक बार पढ़ सकते हैं अपने एंड से ठीक है और आपको और 50 चीजें नई समझ में आ जाएंगी विदाउट वेस्टिंग एनी टाइम एक और अच्छा रिसोर्स है csc.com यहां पर भी जाकर आप ये पूरे रिसोर्स को पढ़ सकते हैं और फटाफट से बहुत ही सिंपल सी लैंग्वेज के अंदर आपको चीजें यहां पर समझाई गई हैं क्या बात समझ में आती है बहुत बढ़िया बहुत बढ़िया टर्म्स कौन-कौन सी है कंटेनर है ग्रिड आइटम है ग्रिड लाइंस है ये लाइंस है पहली लाइन दूसरी लाइन तीसरी लाइन चौथी लाइन ग्रिड सेल जो मैंने आपको बता दिया एक बॉ हर एक बॉक्स को हम सेल कहते हैं ट्रैक जो हम गैप की बात हम कर रहे हैं कि हां ये गैप है ठीक है तो इस प्रकार से चीजें काम कर रही है आपके सीएसएस ग्रिड के अंदर फटाफट से विदाउट वेस्टिंग एनी टाइम चलते हैं कोड की तरफ क्योंकि इसी वीडियो के अंदर सिंगल हैंडेडली हमें सारा का सारा क्रेडिट समझना है चलो आ जाओ अच्छा हां एक और चीज बताऊं हमने कहा था कि हम तीन प्रोजेक्ट क्रिएट करने वाले हैं जब मैंने लास्ट वीडियो बनाई थी ठीक है दो बना चुके थे एक पेंडिंग था पर वो पेंडिंग वाला प्रोजेक्ट कौन सा होने वाला है ये रहा सीएसएस कोड हेल्प ब्लॉग्स ठीक है इसे क्रिएट करने से पहले वैसे इसको फ्लेक्स से भी क्रिएट कर सकते थे पर जानबूझ के मुझे ग्रिड से क्रिएट तुम्हें करके दिखाना है तो दैट वा हम ग्रिड पहले सिखा रहे हैं आपको ताकि ग्रिड सीख लो उसके बाद तुम्हें ये हम क्रिएट करके दिखाएंगे तो नेक्स्ट क्लास के अंदर हम ये पर्टिकुलर कोड हेल्प ब्लॉग वेबसाइट क्रिएट करने वाले हैं ठीक है होप करूंगा कि आप नेक्स्ट क्लास से पहले खुद से एक बार क्रिएट करने की कोशिश करें ठीक है तो ये नेक्स्ट क्लास के अर हम करने वाले हैं अभी समझते हैं वापस एक बार कोड की तरफ चलते हैं मैंने कहा कहां है मेरा कोड ये रहा तो हम लेक्चर नंबर 28 पे गए मैंने यहां पर एक फाइल क्रिएट कर दी इसका नाम मैंने रख दिया इक्स डॉ एचटीएमएल यहां पर बॉयलर प्लेट कोड ऐड कर दिया मैंने कहा आज हम क्या पढ़ने वाले हैं लर्न करने वाले हैं सी एस ग्रेड्स इन वन वीडियो चलो पहला काम डन बहुत बढ़िया फिर मैंने बोला यार मेरे को ना स्टाइल शीट भी लिंक करनी है तो मैंने यहां पर इसको लिंक कर दिया और यहां पर एक फाइल styles.css नामक फाइल मैंने इस फोल्डर के अंदर क्रिएट कर दी मैंने कहा स्टाइल्ड सीएसएस बहुत बढ़िया चलो अब फटाफट क्रिएट करते हैं विदाउट वेस्टिंग एनी टाइम फटाफट कुछ नॉर्मल प्रैक्टिसेस है जिन्हें हम फॉलो करते आ रहे हैं अच्छी-अच्छी प्रैक्टिस उनको फॉलो कर लेते हैं कि यूनिवर्सल सिलेक्टर का यूज करके मैंने कहा कि मार्जिन को जीरो कर देना पैटन को भी जीरो कर देना साथ में जो बॉक्स साइजिंग है वो बॉर्डर बॉक्स कर देना पुराने लेक्चर के अंदर आपको सिखाया गया कि ये बेस्ट प्रैक्टिसेस मुझे हमेशा फॉलो करनी है ठीक है सेकंड मैं गया मैंने बोला जो मेरा बॉडी टैग है उसको एंटायस विड्थ एनटायर हाइट पकड़ा दो तो मैंने बोला जी ऐसा करो बॉडी टैग के अंदर आप हाइट ले लो 100 v ए ले लो व्यू पोर्ट की हाइट दे दी हमने और हमने बोला विड्थ में ऐसा करो आप 100 वड दे दो ठीक है परसेंटेज भी दे सकते हैं कोई इशू नहीं है उसमें ठीक है तो ये दो चीजें हमने कर ली है और अब चलते हैं हमारे कोड की तरफ मैं क्या क्रिएट करना चाहता हूं मैं नॉर्मल सा लेआउट क्रिएट करना चाहता हूं जिसके द्वारा मैं तुम्हें ग्रिड समझा सकूं मैंने कहा ठीक है तो मैंने पहले कंटेनर क्रिएट कर लिया मैंने बोला एक कंटेनर क्रिएट करो लो कंटेनर हो गया कंटेनर के अंदर मैंने क्या बोला मुझे लेट्स से सिक्स आइटम्स चाहिए तो मैंने बोला कि डॉट आइटम स्टार स तो ये छह आइटम्स मैंने क्रिएट कर ली मैंने कहा ठीक है सबसे पहले आइटम का नाम रख लेता हूं हेडर या लेट्स से मैं इसका नाम अभी आइटम वन रख लेता हूं आइटम वन ठीक है और मैंने यहां यहां पर आइटम टू कर दिया यहां पर आइटम थ्री कर दिया यहां पर आइटम फोर कर दिया यहां पर आइटम फाइव कर दिया यहां पर आइटम सिक्स कर दिया बढ़िया तो ये आइटम्स और कंटेनर मैंने क्रिएट कर दिए फटाफट थ डिफरेंशिएबल ड सीएसएस प मैंने कहा जी जो मेरा कंटेनर है मैंने कहा जो मेरा कंटेनर है उस कंटेनर का आप एक बैकग्राउंड कलर ऐड कर दो लेट्स से मैंने बोला ब्लैक का कोई वेरिएंट बनाते हैं तो कंटेनर का हमने कुछ ऐसे अच्छा सा कलर थोड़ा ग्रेश टाइप का थोड़ा सा डार्क थोड़ा सा हल्का आई थिंक इससे बात बन जाएगी ठीक है तो मैंने कंटेनर के लिए ये कलर ऐड कर दिया अब मैं आइटम के लिए गया आइटम के लिए मैंने एक बैकग्राउंड कलर ऐड कर दिया मैंने बोला आइटम का बैकग्राउंड कलर लेट्स से काइंड ऑफ कुछ ब्लू ब्लू इश चाहिए मुझे तो मैंने ब्लू कलर का एक छोटा सा वेरिएंट फटाफट से निकाल लेता हूं साफ सुथरा सा ऐसे आई थिंक ये ठीक है बढ़िया ठीक है तो ये मैंने कर लिया आइटम्स के ऊपर हम चाहते हैं लेट्स से एक बॉर्डर भी अप्लाई करना चाहता हूं मैं तो मैंने बोला जी वन पिक्सेल या लेट्स से मैंने कर दिया फाइव पिक्सल सॉलिड ब्लैक चलो इतना हमने कर लिया फटाफट चेक करते हैं यूआई पर क्या विजिबल है उसके लिए मुझे अपने लाइव सर्वर को ऑन करना पड़ेगा मैंने बोला गो लाइव और यहां पर मेरा यूआई मुझे दिख रहा है लेक्शन नंबर 28 में मुझे जाना है ठीक है ऐसा कुछ कुछ अजीब सा आ रहा है मजा नहीं आ रहा मजा नहीं आ रहा भैया तो मैंने बोला कोड में चलो मैंने बोला जो मेरा कंटेनर है जो मेरा कंटेनर है ऐसा करो उसको मैंने बोल दिया कि वो कितनी हाइट लेगा उसको मैंने बोल दिया 100% हाइट ले लो बेटा और वो कितनी विड्थ लेगा मैंने बोला उसको मैंने बोल दिया 100% विड्थ ले लो बेटा चलो चेक करते हैं यूआई पर अब ठीक है अब मेरा कंटेनर जो है जो कंटेनर वाला डिव है वो कितना स्पेस ले रहा है कंटेनर वाला डिव मेरा यहां से लेके यहां तक पूरा का पूरा स्पेस ले रहा है बहुत बढ़िया मैंने कहा अगर मुझे इसको कंटेनर को ग्रिड बनाना है तो मुझे यहां पर प्रॉपर्टी ऐड करनी पड़ेगी डिस्प्ले ग्रिड तो डिस्प्ले ग्रिड करते ही कंटेनर जो है वो ग्रिड में कन्वर्ट हो गया एक ग्रिड बन गया देखो इस प्रकार चीजें काम कर रही है मैंने कहा आइटम थोड़ी अच्छी नहीं लग रही देखने में मुझे ना थोड़ा पैडिट ऐड कर देता हूं थोड़ी देखने में अच्छी लगेगी तो मैंने बोला जी पैडिट लेट्स से मैंने ऐड कर दी पैडिका 4 आरएम ठीक है रिलेटिव यूनिट का यूज कर रहा हूं मैं ठीक है अब सुंदर लग रहा है पहले से अब पहले से सुंदर लग रहा है तो इस प्रकार मैंने ग्रिड क्रिएट करने सीख ली तो मैंने ये कंटेनर की प्रॉपर्टीज ऐड कर ली है ये आइटम की प्रॉपर्टीज ऐड कर ली आपको अच्छी विजिबिलिटी के लिए कलर्स वगैरह ऐड कर लिए और डिस्प्ले ग्रिड करते ही मेरा ये कंटेनर ग्रिड बन चुका है ग्रिड बन चुका है पर सवाल ये है लेट्स से मैं देखना चाहता हूं ग्रिड बना है कि नहीं बना तो मैं कैसे कर सकता हूं तो आप जाएंगे यहां पर इंस्पेक्ट एलिमेंट करेंगे इंस्पेक्ट एलिमेंट करके आपको यहां पर ग्रिड दिख रहा होगा इस पर ग्रेड प क्लिक कर दूंगा तो आप ध्यान से देखो आपको बहुत सारी चीजें विजिबल हो गई अब आपको लाइन नंबर दिख रहे हैं कि देखो ये लाइन नंबर वन जो यहां से यहां तक जा रही है ये कॉलम की लाइन नंबर वन है ये लाइन नंबर टू जो यहां से यहां तक जा रही है ये कॉलम की लाइन नंबर टू है ये रो की लाइन नंबर वन रो की लाइन नंबर टू रो की लाइन नंबर थ्री रो की लाइन नंबर फोर रो की लाइन नंबर फाइव रो की लाइन नंबर सिक्स रो नंबर सेवन बढ़िया तो इस प्रकार से आपने वेरीफाई कर ले कि ग्रिड बना कि नहीं बना ठीक है तो यह एक और चीज आपको समझ में आती है अब मेरे मन में यह डाउट आता है यार ये आइटम सारी की सारी चिपकी हुई है एक के नीचे एक तो आ रही है पर चिपकी चिपकी सी है मेरे को नहीं चाहिए मेरे को गैप चाहिए इनके बीच में तो मेरे पास एक और प्रॉपर्टी है एक और प्रॉपर्टी है जिसका नाम मैंने रखा है गैप और मैंने बोल दिया कि रो गैप मैं देना चाहता हूं रो गैप मैंने दे दिया ऐसा 1 आरई एम अब चेक करते हैं यूआई पे बढ़िया तो क्या हम सब देख पा रहे गैप बन पाया कि नहीं बन पाया बिल्कुल हमने आइटम्स के बीच में गैप देख लिया कि हां गैप जनरेट कर लिया अभी तक हमने क्या का वापस रिवाइज करते हैं हमने एटीएमएल डॉक्यूमेंट के अंदर अपना एक कंटेनर क्रिएट किया हुआ है और उस कंटेनर के अंदर हमने सिक्स आइटम्स क्रिएट की हुई है बहुत बढ़िया कंटेनर मुझे ऑलरेडी पता है अगर ग्रिड का यूज़ करना है तो मुझे इस कंटेनर को ग्रिड मार्क करना पड़ेगा तो मैंने स्टाइल शीट के अंदर कंटेनर को ग्रिड मार्क किया हुआ है जिसकी वजह से अब इसमें ग्रिड की प्रॉपर्टीज को मैं यूज कर सकता हूं चाहे कंटेनर के अंदर करना चाहूं चाहे आइटम्स के अंदर करना चाहूं तो मैंने कंटेनर के अंदर ग्रिड की एक और प्रॉपर्टी का यूसेज किया जो कि था रो कैप तो रो कैप मैंने वन आरएम रिलेटिव यूनिट का यूज़ करके ऐड कर दिया है बहुत बढ़िया पर मजा नहीं आ रहा भैया मजा नहीं आ रहा है वो डी स्ट्रक्चर चाहिए मुझे मुझे क्या चाहिए भई आपके पास छह आइटम्स है ना आपके पास छह आइटम है मैंने कहा हां मेरे पास छह आइटम है तो आप छह आइटम को ना इस प्रकार प्लेस कर दो कि पहली आइटम यहां पे आ गई दूसरी यहां पे आ गई तीसरी यहां पे आ गई चौथी यहां पे आ गई पांचवे यहां पे आ गई छठी यहां पे आ गई मैंने कहा हो जाएगा पर इसके लिए तुम्हें मुझे एक चीज देनी पड़ेगी क्या भैया आपको मुझे बताना पड़ेगा कि कितनी रोज हैं और आपको मुझे बताना पड़ेगा कितने कॉलम्स हैं अगर आप मुझे रोज और कॉलम बता दोगे तो मैं अभी कर दूंगा मैंने कहा ठीक है रोज नजर आती है मुझे कितनी है दो और कॉलम नजर आते हैं मुझे कितने कॉलम है तीन ठीक है ठीक है तो मेरे पास यहां पर कुछ प्रॉपर्टीज होती है जिनका नाम होता है ग्रिड टेंप्लेट रो और ग्रिड टेंप्लेट कॉलम उनका यूज करते हैं तो मैं कंटेनर के अंदर गया मैंने बोला ग्रेड टेंप्लेट रो कितनी रोज है आपके पास मैंने बोला मेरे पास दो रोज है दो रोज है मेरे पास मैंने कहा ठीक है तो दो रोज के लिए मैंने क्या बोल दिया 100 पक्स 100 पिक्सल तो मैंने बता दिया पहली रो जो है वो कितने डायमेंशन की है और सेकंड रो क्या डायमेंशन की है बहुत बढ़िया ऐसे मैंने टेंप्लेट कॉलम कर दिया मैंने कहा इसका भी बताओ मुझे तो पहला कॉलम 100 पिक्सेल का है दूसरा कॉलम भी 100 पिक्सेल का है तीसरा कॉलम भी 100 पिक्सल का है अब u पर चेक करते हैं क्या बना क्या जो मैं बनाना चाहता था वो बना हां बना पर कॉलम्स के बीच में गैप नहीं है अगर ध्यान से ऑब्जर्व करोगे यहां पर अभी तो देखो यह वाले कॉलम में और यह वाले कॉलम में और यह वाले कॉलम में तीनों में कोई भी गैप नहीं है क्योंकि हमने ऐड ही नहीं किया तो ऐड करो फटाफट तो मैं कोड में गया और मैंने बोला कि रो गैप के बाद मैंने लेटस से कॉलम गैप भी ऐड कर दिया कॉलम गैप ऐड किया न आरई एम अब चेक करो अब चेक करो सुंदर बना अब सुंदर बन गया तो क्या जो लेआउट हमने अभी सोचा था कि हम क्रिएट करेंगे वही सेम लेआउट में क्रिएट कर पाया हां पर भैया एक गलती कर दी आप अभी तक सारी यूनिट्स रिलेटिवली यूज कर रहे थे आपने व्यू पोर्ट की बात की आपने परसेंटेज की बात की आप आरएम का यूज़ करते ब यहां पे पिक्सेल का यूज़ कर लिया मजा नहीं आएगा हम रिस्पांसिस बनाना चाहते हैं ना भैया सुंदर सुशील बनाना चाहते हैं तो गंदी वेबसाइट बना रहे हो आप मैंने कहा ओके तो मेरे पास एक बहुत ही प्यारी चीज है और एक बेस्ट प्रैक्टिस है जिसे हम कहते हैं एफआर यूनिट फ्रैक्शन यूनिट ध्यान से समझने की कोशिश करते हैं ध्यान से समझने की कोशिश करते हैं तो अभी हम बात कर रहे हैं फ्रैक्शन यूनिट की फ्रैक्शन यूनिट इसको समझते हैं एक बार मैंने कहा कि पहला कॉलम दूसरा कॉलम तीसरा कॉलम तीनों के तीनों डब्बे तीनों के तीनों कॉलम इक्वल डिवीजन है इक्वल डिवीजन है तो इसको मैं कैसे दिखाऊंगा इसको मैं ऐसे दिखा सकता हूं 1fr 1fr और 1fr तो मैंने बोला यहां पर तीनों कॉलम कितने-कितने विड्थ के हैं 1fr 1fr 1fr यानी एक फ्रैक्शन इसको दे दो एक फ्रैक्शन इसको दे दो एक फ्रैक्शन इसको दे दो समझाने की कोशिश करता हूं मैंने बोला लेट्स से एंटायस जो है ग्रिड की ये पूरी ग्रिड है तुम्हारी इस एंटायस को मैंने मार्क कर दिया कि भाई ये एंटायस आपकी 3000 पिक्सेल है ठीक है अब जब मैं कहता हूं मैं पहला कॉलम दूसरा कॉलम तीसरा कॉलम इस पे 1fr दो इस पे 1fr दो इस पे 1fr दो कितनी फ्रैक्शन चाहिए टोटल 1 + 1 + 1 तीन फ्रैक्शन मुझे पता लग गया तीन फ्रैक्शन चाहिए तो मैंने बोला तीन फ्रैक्शन इ इवल ट 3000 पिक्सल तो एक फ्रैक्शन किसके इक्वल हुई 1000 पिक्सल दैट्ची यह बात समझ में आती है पर मैंने बोला पहला वाला डब्बा 2fr लेगा दूसरा वाला डब्बा 1fr लेगा और तीसरा वाला डब्बा 1fr लेगा अब क्या होगा कितनी फ्रैक्शन है टोटल 4 एआर 4 एआर किसके इक्वल है 3000 पिक्सल के इक्वल तो एक एफआर किसके इक्वल आ जाएगी 3000 / 4 दैट इज 750 तो एक f 750 के इक्वल है इसका मतलब ये कितने विट लेगा ये 750 के विट लेगा ये कितने विट लेगा ये 750 के विड्थ लेगा और ये 2f आ रहा है 2 म 750 ये 1500 के विड्थ लेगा अब समझ में आया ए क्यों यूज़ करना है फ्रैक्शन यूनिट हो गई अब ये तो आपकी जितनी भी विड्थ होगी उसके अकॉर्डिंग एडजस्ट कर जाएगा ये बढ़िया तो मैं यहां पे अगर लिखना चाहूं इक्वल डिस्ट्रीब्यूशन कर लिए तो मैं यहां पर लिख सकता था 1fr 1fr और यहां पर भी 1fr पर भैया ऐसे 10 बार लेट्स से 10 कॉलम है तो 10 बार 1fr लिखूंगा मैंने कहा नहीं तो इसी सेम चीज को इसी सेम चीज को मैं रिप्लिकेट कर सकता हूं एक और तरीके से तो मैंने क्या बोला ग्रेड टेंप्लेट रो रिप्लिकेट कैसे करता हूं रिपीट फंक्शन का यूज करके रिपीट फंक्शन कितनी बार रिपीट करना है दो बार तो मैंने लिखा दो क्या रिपीट करना है व एफ आर तो 2 1f आर सो बेसिकली लाइन नंबर 20 इज एगजैक्टली इक्वल टू लाइन नंबर 22 क्या बात समझ आती है आपने दो बार यहां व एफ आर लिखा और आप रिपीट फंक्शन का यूज करके यहां प ऐसे भी बता सकते हैं अब लेट्स से यहां प आपने तीन बार व एफ आर लिखा व एफ आ व एफ आर मैंने बोला कॉलम सारे व 1f आ सेम डिस्ट्रीब्यूशन की हुई है अब सेम लाइन नंबर 23 इज एगजैक्टली इक्वल टू लाइन नंबर 24 जहां पर रिपीट फंक्शन का मैंने यूज़ किया है मैंने बोला यहां पर मैंने तीन बार 1fr अलग-अलग अलग करके लिखा था पर यहां पे रिपीट फंक्शन का यूज़ करके मैंने बता दिया न बार 1fr तो अब देखते हैं हमारा u आ कैसे दिखता है अब देखते हैं u कैसे दिखता है और सुंदर हो गया और सुंदर हो गया तो ध्यान से ऑब्जर्व अगर यहां पे करोगे तो तुम्हें देखने को मिलेगा कि हमने कॉलम सारे के सारे यूनिफॉर्म ली डिस्ट्रीब्यूटर दिए हैं और रो वाइज देखोगे तो रो वाइज भी यूनिफॉर्म डिस्ट्रीब्यूशन हुआ पड़ा है इस प्रकार चीजें काम कर रही है ठीक है तो अभी तक आपको क्या समझ में आया अभी तक आपको समझ में यह आया कि आप कैसे क्रिएट कर सकते हैं ग्रिड को बाय यूजिंग डिस्प्ले प्रॉपर्टी बाय मार्किंग डिस्प्ले एज ग्रिड यह आपकी ब्लॉक ग्रिड बनती है ठीक है आपके लिए होमवर्क में यह है आज की क्लास में आप पढ़ के आएंगे कि इनलाइन इनलाइन ग्रिड का क्या काम होता है उसके बिहेवियर में और आपके नॉर्मल ब्लॉक ग्रेड के बिहेवियर में क्या डिफरेंस होता है इसके बाद आप पढ़ चुके हैं रो गैप के बारे में इसके बाद आप पढ़ चुके हैं कॉलम गैप के बारे में ठीक है अगर आप चाहे दोनों की एक शॉर्ट हैंड प्रॉपर्टी होती है गैप उसको यूज करके रो और कॉलम दोनों गैप आप प्रोवाइड कर सकते हैं इसके बाद आपने पढ़ लिया है ग्रिड टेंप्लेट रोज के बारे में जहां से आप मार्क करते हैं कितनी रोज चाहिए और रोज के अंदर स्पेस डिस्ट्रीब्यूशन कैसे होगी उसके बाद आप पढ़ चुके ग्रिड टेंप्लेट कॉलम के बारे में कितने कॉलम चाहिए उसमें स्पेस डिस्ट्रीब्यूशन कैसे होगी बहुत बढ़िया ठीक है सुंदर सुशील बन चुका है हमारा लेआउट अब ठीक है पहले से बहुत सुंदर लग रहा है पहले से से बहुत सुंदर लग रहा है अब यहां पर मेरे थोड़ा सा विचार बदल रहे हैं अब यहां पर मेरे थोड़े विचार बदल रहे हैं मैंने कहा यार थोड़ा सा अलग चाहिए मेरे को थोड़ा सा अलग चाहिए मैंने कहा ठीक है कैसे करना चाहते हो मैं आइटम वन को ना आइटम वन नहीं बोलना चाहता इसको हेडर बोलना चाहता हूं मैंने कहा ठीक है तो इसको मैंने क्या बोल दिया मैं गया एचटीएमएल के ऊपर और मैंने इसका नाम रख दिया हेडर ठीक है बहुत बढ़िया अब यूआई चेक कर लो भैया ऐसे तो हेडर नहीं हेडर तो टेक्स्ट लिखना ही है हेडर पूरा जैसे मैंने आपको यहां पे भी दिखाया था ना हेडर कैसा दिखता है आपके लेआउट के अंदर यहां ध्यान से हमने खा था अभी ऐसा शुरुआत से लेकर लास्ट तक तो पहली कॉलम लाइन से लेकर लास्ट कॉलम लाइन तक मैं अपने हेडर को पूरा स्ट्रेच करना चाहता हूं क्या मेरे पास कोई तरीका है किसी एक आइटम को अपने हिसाब से स्पैन कराने का मैंने कहा है हो जाएगा हो जाएगा कैसे मैंने कहा बस तुम्हें लाइन काउंट करनी पड़ेगी कौन सी लाइन से कौन सी लाइन तक जाना चाहते हो तो यहां पे अगर ऑब्जर्व करोगे तुम यहां पर अगर ऑब्जर्व करोगे लेट्स से मैं यहां पे इंस्पेक्ट एलिमेंट कर देता और मैं यहां पर ग्रिड पे क्लिक कर देता आ जाओ बेटा ग्रेड यह रहा तो मैं क्या देख पा रहा हूं हेडर को मैं लाइन नंबर वन से लाइन नंबर फोर तक लेकर जाना चाहता हूं तो अगर मैं कोड में जाऊं और लेट्स से इसका मैंने एक क्लास का नाम दे दिया हेडर ठीक है और स्टाइल डस में जाके बोलू डॉट हेडर और मैंने कह दिया ग्रिड कौन से कॉलम लाइन से कौन सी कॉलम लाइन तक जाना चाहते हो ग्रिड कॉलम स्टार्ट मैंने बोला लाइन नंबर वन से ग्रिड कॉलम एंड लाइन नंबर फोर तक जाना चाहता हूं तो हेडर को लाइन नंबर वन से लाइन नंबर फोर तक एक्सटेंड कर दिया क्या हेडर एक्सटेंड हुआ बिल्कुल हुआ बिल्कुल हुआ बिल्कुल हुआ सेम फॉर फुटर सेम फॉर फुटर मैंने बोला भैया लास्ट वाली रो छोटी क्यों हो गई पहले मैंने बोला कि पहली बात तो लास्ट रो आई कहां से यह बताओ मैंने बोला क्योंकि आपके हेडर ने एंटायस ले ली है और पहले यहां पर दो डब्बे और थे एक डब्बा यहां था एक डब्बा यहां था तो सारे डब्बे खिसक गए देखो हेडर के बाद आइटम टू यहां आ गया खिसक के आइटम थ्री यहां पे आ गया आइटम फोर यहां पे आइटम फव यहां पे आ गया आइटम सिक्स आ गया तीन रोज बन गई जबकि मैंने सिर्फ दो ही रो रोज का प्रोविजन दिया था तो मैंने बोला ठीक है तो रोज लेट्स से मैं चेंज कर देता हूं रोज मैंने बोला कि मैं कितनी रोज बनाना चाहता हूं दो की जगह तीन रोज मैंने बोल दिया अब देखते हैं क्या बना अब अच्छा लग रहा है अब अच्छा लग रहा है सेम मैंने बोला जैसे मैंने पहले वाले डब्बे को हेडर बना दिया मैं लास्ट वाले डब्बे को आइटम नंबर सिक्स को फुटर बनाना चाहता हूं मैंने कहा ठीक है मैं फटाफट गया इक्स एटीए मैंने बोला लास्ट वाले का नाम आप फुटर रख दें एक बार समझने में अच्छा लगेगा और लेट्स से मैंने इस क्लास का नाम भी दे दिया फुटर दे दिया बहुत बढ़िया साइल डॉट सीएसएस के अंदर मैं गया मैंने बोला कि सेम प्रॉपर्टी जो हेडर के अंदर अप्लाई की है वही फुटर के अंदर अप्लाई करना चाहता हूं तो मैंने बोल दिया डॉट फुटर बढ़िया तो हेडर और फुटर दोनों के अंदर ही पहले लाइन से स्टार्ट होगा कॉलम की और फोर्थ लाइन पे एंड होगा यूआई चेक करते हैं अच्छा लग रहा है अच्छा लग रहा है बीवी अच्छा लग रहा है पर भैया थोड़ा सा गंदा हो गया लास्ट वाला फिर दोबारा छोटा हो गया मैंने कहा अभी ठीक करेंगे उसका भी ठीक करेंगे ठीक है तो ये एक कुछ कुछ यूआई मैं क्रिएट करने की रा एक राह पे चल रहा हूं और देखते हैं कैसा होता है ठीक है एक यूआई यहां पर सेम ऐसा सा ही था सेम लेट्स से हम येय रेप्ट करना चाहते हैं तो अभी तक हम क्या कर चुके हैं अभी त अगर तुम ध्यान से देखोगे तो हम यहां पर अभी तक जो कर चुके हैं वो क्या है आपने यह पूरी ग्रेड क्रिएट कर दी मैंने कहा जी हां बिल्कुल कर दी आपने ये वाला हेडर क्रिएट कर दिया मैंने कहा जी हां बिल्कुल कर दिया आपने ये वाला फुटर क्रिएट कर दिया मैंने कहा जी हां बिल्कुल कर दिया क्या पेंडिंग है ये साइड बार क्रिएट करो ध्यान से ऑब्जर्व करो साइड बार तुम्हारी रो लाइन नंबर टू से लेके रो लाइन नंबर फोर तक जा रहा है तो मैंने यहां पर क्या बोला सेम अगर मुझे रेप्ट करना है तो आइटम नंबर टू जो है उसको यह वाली लाइन से लेकर देखो ये लाइन नंबर वन है ये लाइन नंबर टू है तो लाइन नंबर टू से लेकर लाइन नंबर फोर तक एक्सटेंड में करना चाहता हूं तो मैंने आइटम नंबर टू को क्या किया मैंने आइटम नंबर टू का नाम रख दिया साइड बार ठीक है चेक करते हैं य प बढ़िया साइड बार नाम आ चुका है यहां पर और मैंने बोला कि साइड बार का लेट से मैंने यहां प साइड बार मैंने लिख दिया और इसकी प्रॉप मैं ड करना चाहता हूं कॉन्फिन ड करना चाहता हूं डॉट साइड बार मैंने लिखा कि मैं क्या चाहता हूं कि यार यह ग्रिड रो स्टार्ट कौन सी रो से स्टार्ट हो लाइन नंबर वन से ग्रिड रो एंड कौन सी रो पे एंड हो लाइन नंबर फोर पे वन से नहीं सॉरी टू लाइन नंबर से स्टार्ट करना था मुझे तो अब यई पर चेक करो क्या हुआ देखो साइड बार भी तुम्हारी बन गई है साइड बार भी तुम्हारी बन गई है क्या बात समझ में आती है साइड बार तुम्हारी बन चुकी है बढ़िया चल रहा है मजा आ रहा है मजा आ रहा है ठीक है अगेन भैया फुटर छोटा आ रहा है मैंने बोला इसलिए फुटर छोटा आ रहा है क्योंकि तुमने रो कितनी बताई है तीन बताई है जबकि यहां पर एक दोती चार रोज बनी पड़ी है तो अगर मैं यहां पे चार रोज का प्रोविजन दे दूंगा रोज के अंदर कि भैया चार रोज बना दो तो अब थोड़ा सुंदर लगेगा अब फिर से यूनिफॉर्म हो गया अब फिर से यूनिफॉर्म हो गया अब देखते हैं इस वाले यूआई में और इस वाले यूआई में क्या डिफरेंस है भैया यहां पे कंटेंट जो है कौन सी कॉलम लाइन से कौन सी कॉलम लाइन तक जा रहा है कॉलम लाइन वन कॉलम लाइन टू कॉलम लाइन यहां पर हटाओ इसे थ्री और कॉलम लाइन फोर तो ध्यान से ऑब्जर्व करो कॉलम लाइन टू से लेकर कॉलम लाइन फोर तक जा रहा है आपका कंटेंट वन मैंने कहा ठीक है तो मैंने अभी तक क्या किया मैं गया यहां पे मैंने कहा आइटम थ्री को कंटेंट वन बना देता हूं मैंने कहा ओके यहां पे गया मैंने इसका नाम रख दिया कंटेंट वन इसका नाम रख दिया इसका नाम रख दिया कंटेंट टू इसका नाम रख दिया कंटेंट थ्री तो अगर मैं लेट्स से इसका नाम रख दूं कंटेंट वन और कंटेंट वन को मैं स्टाइल करने जा रहा हूं मैंने यहां पर राइट डाउन कर दिया डॉट कांटेक्ट वन अब मैंने यहां पर क्या कह दिया कि यार मुझे इसको कॉलम की लाइन नंबर टू से लेके कॉलम के लाइन नंबर फोर तक लेके जाना है मैंने कहा ओके तो ग्रिड कॉलम स्टार्ट लाइन नंबर टू और ग्रिड कॉलम एंड लाइन नंबर फर बढ़िया चेक करो क्या एग्जैक्ट सेम हमने यूआई बना लिया कि नहीं मुझे बताओ एक बार क्या यह वाला यूआई जो हम यहां पर देख पा रहे हैं हेडर साइड बार तीन कंटेंट फुटर क्या सेम हेडर साइड बार तीन कंटेंट फुटर हमने क्रिएट कर लिया जी हां तो आपने अभी बहुत इंटरेस्टिंग चीज देखी आपने पढ़ा कैसे आप किसी भी सेल को स्पैन कर सकते हैं स्ट्रेच कर सकते हैं एक्सपेंड कर सकते हैं कॉलम वाइज और रो वाइज ये आपने सीख लिया बहुत बढ़िया ये बात समझ में आती है मैंने कहा सुंदर नहीं लग रहा है थोड़ा और सुंदर कर सकते हैं टेक्स्ट जो अंदर है उसको वाइट बनाओ वाइट कलर कर दो मैंने कहा ठीक है तो मैं आइटम के अंदर गया और मैंने बोला जी ऐसा करें ऐसे करें आप इसको ना कलर दे दें वाइट ओके जी चेक करो सुंदर लग रहा है बढ़िया सुंदर लग रहा है पर यार टेक्स्ट तो सबका ऐसे कॉर्नर में प्लेस है मुझे सेंटर में चाहिए तो क्या तुम्हें याद है हॉरिजॉन्टल सेंटर प्लेस करना है वर्टिकली सेंटर प्लेस करना है कैसे करते थे भैया फ्लेक्स के द्वारा बड़ी आसानी से हो जाता था मैंने कहा फ्लेक्स के द्वारा करते हैं चलो तो मैं आइटम के अंदर गया मैंने बोला आइटम के अंदर ना मैंने आइटम को फ्लेक्स मार्क कर दिया और मैंने बोला कि इसका जस्टिफाई कंटेंट सेंटर कर देना और इसका अलाइन आइटम जो है वो सेंटर कर देना तो क्या इससे टेक्स्ट सेंटर प्लेस हो जाएगा हो गया और सुंदर लग रहा है और सुंदर लग रहा है मजा आया मजा आ रहा है मजा आ रहा है ठीक है तो इस प्रकार से हमने इस लेआउट को खुद से क्रिएट कर लिया है और थोड़ा सा इसका फॉन्ट साइज बढ़ाते हैं और अच्छा लगेगा फिर ये फॉन्ट साइज हमने बोल दिया 2 आरएम ठीक है अब चेक करो अच्छा लग रहा है अच्छा लग रहा है बहुत अच्छा लग रहा है मैंने बोला कि 2.5 कर लेते हैं या 2.3 कर लेते हैं तो अब चेक करते हैं बढ़िया सुंदर लग रहा है सुंदर सुशील ठीक है बढ़िया तो यहां से मैंने ऑब्जर्व किया कि मुझे लेआउट क्रिएट करना तो आ गया है मैं खुद से बता सकता हूं मुझे कितनी रोज चाहिए मैं खुद से बता सकता हूं मुझे कितने कॉलम चाहिए किसी भी सेल को मुझे एक्सपेंड करना है किसी भी कॉलम वाइज किसी भी रो वाइज तो मैं कर सकता हूं मेरे पास वो सारी सारी प्रॉपर्टीज का ज्ञान है क्याई बात समझ में आती है बहुत बढ़िया मैंने बोला यार मैं गैप लेट्स से गलती से भूल गया होता लेट्स से रो गैप और कॉलम गैप लिखना भूल गया होता तो क्या होता तो सब चिपका चिपका आचा आचा आता ठीक है मजा नहीं आ रहा भैया मजा नहीं आ रहा तो यहां पर मेरे पास एक शॉर्ट हैंड प्रॉपर्टी भी थी जहां पर अलग-अलग नहीं लिखूंगा रो गैप कॉलम गैप को सिंपली लिख दूंगा यहां पे एट से व आरएम तो रो वाइज कॉलम वाइज अपने आप अरेंज कर लेगा खत्म ये शॉर्ट रन प्रॉपर्टी भी मेरे पास है है ना और भी बहुत सारी प्रॉपर्टी है जो खुद से आप एक्सप्लोर कर सकते हैं यहां पर ठीक है बहुत सारी चीजें यहां पर दी हुई है यहां पर ये पेर एट कंटेनर के लिए जो जो प्रॉपर्टीज लगेगी डिस्प्ले प्रॉपर्टी हो गई टेंप्लेट रोज टेंप्लेट कॉलम हम यूज़ कर चुके हैं वो सब हो गया ठीक है वो सब यहां पर लिस्टेड है आप एक बार नजर मार सकते हैं और चीज समझ सकते हैं ठीक है अपने एंड से तो यहां पे मैंने क्या बोला कि एक बार चेक करते हैं रिस्पांसिस बनी भी है थोड़ी बहुत कि नहीं तो हम यहां इंस्पेक्ट करने गए और मैंने बोला कि यार यह बड़ी स्क्रीन साइज रेजोल्यूशन कम करते हैं नहीं यार ये सुंदर तो नहीं लग रही यह अपने आप से नहीं बदल रही है यह कुछ अच्छी तो नहीं बनी है मैं चाहता हूं कि जब भी साइज छोटा हो स्क्रीन का लेट्स से 768 पिक्सल से छोटा साइज इसका हो जाए तो ये सारे के सारे बॉक्सेस एक के नीचे एक के नीचे एक आ जाए मैंने कहा ये सारे के सारे बॉक्सेस एक के नीचे एक के नीचे एक आ जाए तो यहां पर लेट्स से रिस्पांसिस मुझे इसको बनाना होता तो मैं किसका यूज़ करता मीडिया क्वेरी का वेरी गुड वेरी गुड वेरी गुड तो मैंने बोला चलो आओ शुरू करते हैं शुरू करते हैं अभी तो टेक्स्ट मुझे बहुत ज्यादा बड़ा लग रहा है ठीक है इसको मैं कमेंट कर देता हूं अभी के लिए मैंने बोला अभी कैसा नजर आ रहा है अभी कुछ इस प्रकार नजर आ रहा है मैंने कहा कि मीडिया क्वेरी का यूज करते हैं मैंने बोला कि 768 पिक्सल से ऊपर तो यह जो यूआई मुझे दिख रहा है ऐसा रहना चाहिए और 768 से नीचे ये सारे के सारे बॉक्सेस एक के नीचे एक आने चाहिए ठीक है चलो तो मैंने यहां पर एक मीडिया क्वेरी राइट डाउन करी मैंने बोला ट द रेट मीडिया और मैंने लिख दिया कि मिन विड्थ 768 पिक्सल होनी चाहिए मिन विड्थ 768 पिक्सल और इस केस में मैं क्या करूंगा इस केस में मैंने बोल दिया हेडर फुटर जो भी आपने अ चीजें ऐड किए कि हेडर फुटर यहां से स्टार्ट करना साइड बार यहां से स्टार्ट करना कंटेंट वन यहां से स्टार्ट करना आपने आप प्लेस कर दिया ठीक है तो ये प्रॉपर्टीज आपकी तभी अप्लाई करेंगे जब कम से कम आपकी जो स्क्रीन की विट है व्यू पोर्ट की टत है वो 768 पिक्सल है अब कैसा लग रहा है अच्छा लग रहा है पर लेट्स से मैं इसको 768 से कम ले जाऊं तो तो ये इस प्रकार आ गया तो ये इस प्रकार आ गया पर भैया आपने बोला था एक के नीचे एक आएगा यानी कि सिंगल कॉलम होगा पर यहां पर तो तीन कॉलम नजर आ रहे हैं मैंने बोला नहीं चेंज करना पड़ेगा कौन सी प्रॉपर्टी को यहां ये जो दो प्रॉपर्टी खी ना मैंने कॉलम की और रो की इनको चेंज करना पड़ेगा तो मैंने क्या किया कंटेनर की प्रॉपर्टी थी ना तो मैं यहां पर गया मीडिया क्वेरी के अंदर मैंने बोला डॉट कंटेनर 768 से ऊपर क्या रखना चाहते हो भैया 768 से ऊपर मैं रखना चाहता हूं ये दो प्रॉपर्टीज को ये दो प्रॉपर्टीज को कि भाई मेरा रो जो है वो चार होनी चाहिए कॉलम जो है वो तीन होनी चाहिए ये प्रॉपर्टी मैं रखना चाहता हूं पर नॉर्मली क्या रखना चाहते हो फिर फिर नॉर्मली क्या रखना चाहते हो मैं नॉर्मली मैं ये रखना चाहता हूं नॉर्मली मैं यह रखना चाहता हूं कि मेरे पास सिंगल कॉलम हो मैंने कहा ओके जीटीसी मैंने बोला वनमा 1 एफ आर और मेरे पास सिक्स बॉक्सेस है सिक्स रोज मैंने बना दी मैंने बोला जीटी आर और 6 1fr अब चेक कराओ अब चेक कराओ बढ़िया ऑब्जर्व करो 768 से ऊपर के विड्थ के अंदर मेरे पास इस प्रकार का u आई आता है और जैसे ही मैं इसको शर्टन करता रहता हूं करता रहता हूं करता रहता हूं ध्यान से ऑब्जर्व करो ऊपर नंबर्स को जैसे 768 के नीचे जाएगा ध्यान से देखना अभी जाने वाला है जाने वाला है देखो तो ये सिंगल कॉलम के अंडर सारे का सारा कंटेंट प्लेस हो गया अब समझ में आया अच्छे से मीडिया क्वेरी का हमने यहां पर यूज कर लिया बहुत बढ़िया बहुत बढ़िया तो यहां पर आपने अभी तक सीखा कैसे आप किसी भी कंटेनर और आइटम की कॉमिनेशन के अंदर ग्रिड अप्लाई कर सकते हैं कैसे आप फ्लेक्स का यूज ग्रिड के साथ कर सकते हैं आप कैसे रोज डिफाइन कर सकते हैं उनकी विड्थ डिफाइन कर सकते हैं आप कैसे कॉलम डिफाइन कर सकते हैं उनकी विड डिफाइन कर सकते हैं आप कैसे किसी भी पर्टिकुलर सेल को एक्सपेंड कर सकते हैं स्ट्रेच कर सकते हैं किसी भी रो वाइज किसी भी कैसे आप मीडिया क्वेरी अप्लाई कर सकते हैं आपके ग्रिड के केस के अंदर यह बात समझ में आती है और प्रॉप जिन य देखेंगे समझ में आएगा ठीक समझते हैं चलो आ जाओ एक और समझते हैं एक और समझते हैं तो अभी के लिए हमने क्या किया फाइल बना दीने कंटेंट या ग्रिड डॉट एचटीएम कोड ड कर दिया मैंने बोला ग्रिड्स सेकंड एग्जांपल ठीक है चलो और मैंने यहां पर अगेन यहा पर स्टाइल शीट ऐड कर दी ठीक है मैंने लेट्स से इस लिंक को कॉपी कर लिया और मैंने बोला एक अपनी नई स्लाइड स्टाइल शीट बनाऊंगा उसका नाम मैंने लिख दिया ग्रिड स्टाइल ठीक है और यहां पर मैंने अपना कंटेंट प्लेस करना शुरू कर दिया मैंने बोला कि मेरे पास एक कंटेनर है और मेरे पास कंटेनर के अंदर टोटल चार आइटम्स है बहुत बढ़िया चार है बहुत बढ़िया ए बी सी डी बढ़िया ठीक है इस प्रकार से चार आइटम मैंने क्रिएट कर दिए अब फटाफट से मैं एक गड style.css एक बार फाइल क्रिएट कर लेता हूं यहां पर लाइ लेक्चर नंबर 28 के अंदर यहां पर एक फाइल मैंने क्रिएट कर दी ग्रिड स्टाइल ड सीएए यहां पर मैंने अगेन सेम चीजें कॉपी पेस्ट कर दी यहां पर जाकर जो भी मैं अच्छी प्रैक्टिसेस फॉलो करता हूं मैंने यहां से कॉपी कर लिया यहां पर पेस्ट कर दिया मैंने बोला डॉट कंटेनर और कंटेनर के अंदर मैंने एक विड्थ और हाइट प्रोवाइड कर दी मैंने बोला जी अ कंटेनर की हाइट जो है वो 100% आप ले सकते हैं उसके पेरेंट की और विड्थ भी आप 100% ले सकते हैं पेरेंट की एक बैकग्राउंड कलर मैंने यहां पर ऐड कर दिया लेट्स से मैंने ब्लैक ले लिया और ब्लैक का एक पर्टिकुलर वेरिएंट मैं यहां पे हल्का सा लेकर आ जाता हूं ठीक है यह बात समझ में आ गई ठीक है ऐसे ही मैंने आइटम फाइंड आउट कर ली मैंने बोला आइटम्स के केस के अंदर लेट्स से मैंने हाइट और विट डिफाइन कर दी हाइट कितनी है मैंने बोला 100 पिक्सल और लेट्स से मैंने बोल दिया विड्थ कितनी है अ 100 पिक्सल और इस केस के अंदर मैंने क्या बोल दिया एक बैकग्राउंड कलर में फटाफट से ऐड कर देता हूं जो कि मैंने एक एक्वा की शेड दे दि है ठीक है एक अच्छी सी शेड उठा के लाते हैं हमने बोला कि इस प्रकार से आप एक शेड दे रहे हैं बहुत बढ़िया और मैंने यहां पर इसका एक बॉर्डर ऐड कर दिया है बॉर्डर फाइव पिक्सल सॉलिड वाइट ठीक है अब वाइट का एक अच्छी शेड यहां पर ले आते हैं इस प्रकार से मैंने उठा लिया ठीक है चलो यहां से चीजें काम कर रही है और एक बार यूआई में चेक करते हैं एक ग्रिड बना देते हैं तो मैंने बोला जी डिस्प्ले आप कर देंगे यहां पर ग्रिड गर्ड नहीं ग्रिड और मैंने बोला ओहो एक गैप आप ऐड कर दें 1 आरएम का चलो अब य पर चेक करते हैं मैंने एक कंटेनर अब तक क्रिएट कर दिया है जिसके अंदर चार आइटम्स है ऑब्जर्व करोगे तो सही इस के अंदर हमने कंटेनर की विड्थ हाइट पूरी पेरेंट के बराबर दे रखी है बैकग्राउंड कलर दे दिया है ग्रिड में कन्वर्ट कर दिया है कंटेनर को गैप प्रोवाइड कर दिया आइटम्स के लिए आइटम का मैंने यहां प विड्थ और हाइट फिक्स कर दी है आपको समझाने के लिए ताकि अच्छे समझा पाऊ और बैकग्राउंड कलर बॉर्डर ऐड कर दिया ठीक है इसको मैंने फटाफट से एक बार ओपन कर दिया लाइव सर्वर के साथ ओहो लाइव सर्वर के साथ बढ़िया चेक करते हैं इस प्रकार से आ रहा है बहुत ही घटिया बनाया भैया इतने इतनी गंदी विजिबिलिटी नहीं देखी आज तक कभी मैंने लग तो मुझे भी गंदा ही रहा ये चलो दोबारा ट्राई करते हैं अच्छा सा कुछ बॉर्डर क्यों नहीं आया पहले चेक करते हैं बॉर्डर वन बिग शर्ट पता नहीं क्यों नहीं आया बॉर्डर यार सिंपल अच्छा सॉलिड की स्पेलिंग गलत है अब अब पहले से थोड़ा सही लग रहा है पर कलर उतने अच्छे नहीं है अभी भी कलर बेकार है भैया मैंने कहा ओके अभी अच्छा कर देते हैं इसको थोड़ा और लाइट थोड़ा और लाइट थोड़ा और लाइट थ और लाइट नहीं बनी बात ये लो अब तो समझ में आएगा अब ठीक लग रहा है भैया मैंने कहा बहुत बढ़िया तो थोड़ा सा और अच्छे से कर सकते हैं इसको यह चार आ गए बढ़िया तो न आरई एम जो है उसको मैंने कर लिया 0.4 आरएम 0.4 आरएम बता देता हूं यहां पर एक बार टेंप्लेट पपलेट रोज और कॉलम डिफाइन कर देता हूं कि ग्रेड टेंप्लेट कॉलम नव एफ आर ठीक है ग्रेड टेंप्लेट रोज हमने डिफाइन कर दिया क्या रखना चाहते हो आप रोज हमने बोला कि चार रो रखना चाहता हूं ऐसा 200 पिक्सल टाइप्स ठीक है चलो तो यह समझ में आरहा एक बार फटाफट चेक करते ग्रिड कैसी बनी है यहां पे इंस्पेक्ट में जाके अगर मैं ग्रिड पर क्लिक कर दूंगा देख पा रहे हो आप साफसाफ कैसी ग्रिड बनी हुई है क्या बात समझ में आती है क्या बात समझ में आती है इसको छोटा करूंगा ठीक है ऐसा ऐसा कुछ बनाया हुआने गड वाइस ठीक है ये ग्रिड है आपकी चलो यह समझ में आता है कॉलम बलेट से मैं य पर बोल देता हूं न 200 पिक्सल एक ही कॉलम 200 पिक्सल का इंस्पेक्ट कर लेते हैं बढ़िया य आपकी ग बन 200 पिक्सल यह ठीक है यह समझ में आ रहा है इसको मैंने परसेंटेज कर दिया और इसको भी मैंने परसेंटेज कर दिया अ य चेक करते हैं अब बढ़िया लग रहा है ठीक है अब सही लग रहा है अब आगे और प्रॉपर्टी समझने की कोशिश करते हैं आगे और प्रॉपर्टी समझने की कोशिश करते हैं ठीक एक पैंग और ड करता हूं सुनने में और ग देखने में और गंदा लग रहा है अभी एडिंग फोर आरएम चलो अब चेक करो अब ठीक है थोड़ा सा पहले से बढ़िया अब मैंने क्या किया मैंने बोला मैं कंटेंट को ये सारे के सारे आइटम्स को मूव करना चाहता हूं मैं सारे के सारी आइटम्स को मूव करना चाहता हूं फटाफट अपनी गाइड पे गया और यहां मेरे पास डिफरेंट डिफरेंट प्रॉपर्टीज है वो समझ लेते हैं एक बार ठीक है उनके ऊपर काम कर लेते हैं तो मैंने बोला कि ग्रिड कॉलम स्टार्ट ग्रिड कॉलम एंड ग्रिड रो स्टार्ट ग्रिड रो एंड ये चारों पर सीख चुका हूं जहां मुझे सेल को स्ट्रेच करना होता है किसी भी कॉलम वाइज किसी भी रो वाइज तो वहां पर हमने सारी प्रॉपर्टीज ट्राई करके देख ली एक बार ठीक है आगे चलते हैं ग्रिड कॉल कलम ग्रिड रो तो जो आपने चार प्रॉपर्टीज ऊपर पढ़ी है अभी ये वाली इन चारों की शॉर्ट हैंड प्रॉपर्टीज आपकी ग्रिड रो और ग्रिड कॉलम है ठीक है इनको आप खुद से एक बार ट्राई करके देखेंगे और ये आपको होमवर्क है ठीक है सेम चीज परफॉर्म करती है जो ऊपर वाली प्रॉपर्टीज परफॉर्म करती है कुछ नया नहीं है इसके अंदर ठीक है आपने यहां पे देखा होगा ये स्ट्रेच हुआ पड़ा है ये स्ट्रेच हुआ पड़ा है ये भी स्ट्रेच हुआ पड़ा है ये भी स्ट्रेच हुआ पड़ा है तो जो ग्रिड रो स्टार्ट ग्रिड कॉलम स्टार्ट का हमने प्रॉपर्टी का यूज़ किया था उस प्रकार ये स्ट्रेच किया हुआ है जस्टिफाई सेल्फ ये आपकी आइटम के ऊपर प्रॉपर्टी लगने वाली है जो ग्रिड आइटम चाइल्ड आइटम की हम बात कर रहे हैं तो जस्टिफाई सेल्फ के अंदर आप हॉरिजॉन्टल एक्सिस क्या कस्प अलाइन कर सकते हैं कैसे समझते हैं तो मैं यहां पर आया और मैंने बोला कि मेरे पास कौन-कौन से अभी तक अवेलेबल है एक बार यई चेक करते से एग्जांपल ठीक है तो मैं क्या देख पा रहा हूं जस्टिफाई सेल्फ में हम क्या कर सकते हैं अभी भी ग्रिड देखना थोड़ा मुश्किल हो रहा है एक बार बॉर्डर और ड करता हूं लेट से मैंने सड कंटेनर का बॉर्डर ऐड कर दिया बॉर्डर मैं लिख दिया जीटू पिक्सेल सॉलिड वाइट अब चेक करते हैं ठीक है तो यहां से यहां तक पूरी की पूरी ग्रिड है बहुत बढ़िया चलो ये भी समझ लिया हमने हमने क्या बोला इसको लेट से मैंने 300 पिक्सल कर दिया ठीक है देखते हैं बढ़िया अब मैंने क्या बोला मैं आइटम के ऊपर ना कुछ प्रॉपर्टी अलाइन करने वाला हूं मैंने बोला कि आइटम के ऊपर मैंने लगा दिया जस्टिफाई सेल्फ और मैंने बोल दिया इसको आप प्लेस कर दो एंड में इससे क्या हुआ इससे आपका क्या हुआ ये एंड में प्लेस हो गया अगर आपको अभी समझ में नहीं आया तो समझाता हूं वापस लेट्स से मैंने इसको 300 पिक्सल व एफआर कर दिया वन एफआर आपको समझ में अच्छे से आएगा ठीक है तो ये एंड में प्लेस हो गया इस प्रकार से आपके सेल का जो एंड है ना जो भी आपके सेल का एंड है वहां पर ये प्लेस हो गया ठीक है अच्छा सेल का एंड कैसे है भैया एक बार चेक करना मैंने कहा ठीक है एक बार सेल का एंड दिखा देता हूं तुम्हें इंस्पेक्ट किया देखो ये पूरा सेल है जो तुम हाइलाइटेड एरिया देख रहे हो हाइलाइटेड एरिया देख रहे हो ये पूरा का पूरा सेल है तो सेल के राइट मोस्ट जगह पे जाके प्लेस हो गया बट अगर लेट्स से मैं इसको बोलता जस्टिफाई सेल्फ स्टार्ट तो स्टार्ट में क्या होता ये इसी सेल के लेफ्ट मोस्ट एरिया में जाके प्लेस होआ था लेफ्ट मोस्ट में हो गया अब लेट्स से मैं इसको प्लेस करता सेंटर तो इस प्रकार से ये सेल के सेंटर में जाकर प्लेस हो जाता ये सेल के सेंटर में जाके प्लेस हो गया ठीक है तो आपके पास यहां पर ये जस्टिफाई सेल्फ के अंदर इस प्रकार से चीजें काम कर रही है स्ट्रेच भी एक बार यूज करते हैं अगर मैं इसको स्ट्रेच करता तो क्या होता अगर इसको स्ट्रेच कर देंगे अगेन स्ट्रेच कर दिया हमने इसको और इस केस में क्या होगा इस केस के अंदर फटाफट चेक करते हैं यूआई में हमने क्या देखा इस केस में इस केस में कुछ भी नहीं हो रहा भैया क्यों क्योंकि आपने ना यहां पर विड्थ और हाइट असाइन की हुई है लेट्स से मैं इसे कमेंट कर दूंगा तो क्या होगा कमेंट कर दूंगा तो भैया पूरा स्ट्रेच हो गया अब स्ट्रेच हो गया समझ में आया जस्टिफाई सेल्फ अप्लाई करता है चाइल्ड आइटम्स के ऊपर जहां पर अगर आप कहेंगे कि जस्टिफाई सेल्फ स्टार्ट वो सेल के स्टार्ट में प्लेस हो जाएगा एंड सेल के एंड में प्लेस हो जाएगा सेंटर सेंटर में प्लेस हो जाएगा सेल के स्ट्रेच पूरे सेल को एक्वायर कर लेगा अगर आपने फिक्स्ड हाइट र बट असाइन नहीं की हुई है ठीक है तो ये आपने सीखा जस्ट अभी ये सब कौन से एकिस पे था कौन से एक्सिस पे था ये भैया हॉरिजॉन्टल एक्सिस पे था वर्टिकल एक्सिस पे क्या करेंगे अलाइन सेल्फ अलाइन सेल्फ तो अगर नॉर्मली अभी देखेंगे अभी क्या है यहां पर है अब वर्टिकल एक्सिस में स्टार्ट और एंड में खेलेगा तो मैंने बोला अलाइन सेल्फ के ऊपर खेलते हैं अलाइन सेल्फ अलाइन सेल्फ बेटा अलाइन सेल्फ स्टार्ट इससे क्या होगा अभी बाय डिफॉल्ट स्टार्ट ही होता है तो सेम दिखेगा सेम दिख रहा है अगर इसी को मैं मार्क कर दूंगा लेट्स से अ अलाइन सेल्फ एंड हमने बोला अलाइन सेल्फ एंड तो व सेल के अंदर बॉटम मोस्ट पॉइंट पर आ जाएगा तो सेल के अंदर देखो बॉटम मोस्ट पॉइंट पर आ गया आप हर एक सेल देखो हर एक सेल देखो उसमें बॉटम मोस्ट पॉइंट पर आ गया ये ठीक है ऐसे ही आप सेंटर में प्लेस कर सकते हैं लाइन सेल्फ को ठीक है तो ये वर्टिकल एक्सिस प सेल के अंदर सेंटर में आ गया वर्टिकल एक्सिस में सेल के अंदर सेंटर में आ गया ठीक है इस प्रकार से काम कर रहा है क्या स्ट्रेच भी कर सकता हूं इसको मैंने कहा ट्राई कर लेते हैं स्ट्रेच कर दिया और फिक्स हाइट विड्थ को मैंने कमेंट कर दिया अब चेक करते हैं हां हो हो रहा है स्ट्रेच तो हो रहा है वर्टिकल एक्सिस के करेस्पॉन्डिंग्ली एक और प्रॉपर्टी चेक कर ली किस प्रकार काम करती है और मेरे पास क्या है मैंने कहा यार अलाइन सेल्फ जस्टिफाई सेल्फ को अगर मैं कंबाइन कर दूं तो मेरे पास एक प्रॉपर्टी है प्लेस सेल्फ प्लेस सेल्फ का मतलब वर्टिकली हॉरिजॉन्टल दोनों एक्सिस के अंदर आप ये प्रॉपर्टी अप्लाई कर सकते हैं तो अब चेक करते हैं एक बार चेक करते हैं मैंने बोला अभी तो मैं इसको वापस से अनकमेंट करता हूं अलाइन सेल को मैं कमेंट कर देता हूं और सिंपल सा फटाफट से यहां पे आता हूं और कहता हूं कि प्लेस सेल्फ प्लेस सेल्फ से अलाइन सेल्फ और जस्टिफाई सेल्फ दोनों प्रॉपर्टीज को मैं एक ही बार में यूज कर सकता हूं मैंने बोला कि सेंटर अब यह वर्टिकली और हॉरिजॉन्टल दोनों का सेंटर ढूंढ के लाएगा और बीच में प्लेस करेगा नहीं यकीन चेक कर लो चेक कर लो है ना वर्टिक वर्टिकली भी सेंटर में है हॉरिजॉन्टल भी सेंटर में है तो आपने प्लेस सेल्फ के द्वारा दो लाइंस ऑफ कोड को बचा लिया जहां पे आपको अलाइन सेल्फ सेंटर करना पड़ता है और जस्टिफाई सेल भी सेंटर करना पड़ता आपने सिंगल प्लेस सेल से कर लिया ठीक है तो ये प्ले सेल्फ प्रॉपर्टी का आप यूज करके भी आगे बढ़ सकते हैं आप सेंटर में रखना चाहे सेंटर में रख सकते हैं आप स्ट्रेच में रखना चाहे स्ट्रेच में कर सकते हैं आपने बोला स्ट्रेच तो इससे क्या होगा अगेन चेक कर लेते हैं एक बार स्ट्रेच हुआ हो नहीं हुआ भैया क्यों नहीं हुआ स्ट्रेच अगेन वही सेम चीज यार आपने हाइड और विड्थ को फिक्स मार्क किया हुआ है ट्स वई स्ट्रेच नहीं हो रहा होगा है ना अब स्ट्रेच हुआ हां बढ़िया अब स्ट्रेच हो गया तो अगेन हमने सारी की सारी प्रॉपर्टीज देख ली कि आप प्लेस सेल्फ में सेंटर में कैसे अलाइन करेंगे स्ट्रेच कैसे करेंगे आप वर्टिकल एक्सिस के लिए अलाइन सेल्फ कैसे यूज करेंगे रि जंटल एक्सिस के लिए जस्टिफाई सेल्फ कैसे यूज करेंगे सारी की सारी प्रॉपर्टीज हम एक बार गो थ्रू कर चुके हैं और मैं क्या कर सकता हूं और मैं क्या कर सकता हूं मैं चाहूं तो कंटेनर की एक प्रॉपर्टी होती है जस्टिफाई आइटम्स उसको यूज कर सकता हूं तो जस्टिफाई आइटम पे चलते हैं फटाफट उसको ढूंढ के लाते हैं और उसको एक बार रन करके देखते हैं कैसे काम करता है ठीक है अगेन जस्टिफाई की बात हो रही है तो बाय डिफॉल्ट वो हॉरिजॉन्टल एक्सिस पर काम कर रहा होगा तो हॉरिजॉन्टल एक्सिस पर काम करके देखते हैं जस्टिफाई सेल्फ पे कैसे काम कर रहा होता है चलो आ जाओ फटाफट यहां पर हमने जो जस्टिफाई सेल्फ देखा था आइटम के लिए था एक आइटम अपने सेल में एक आइटम अपने सेल में कैसे जस्टिफाई आप कर रहे हैं उसके लिए जस्टिफाई सेल्फ था अब यहां पर आता जस्टिफाई आइटम प ठीक है थोड़ा सा और अच्छे से सुंदर सुशील करते हैं अपने कोड को पहले थोड़ा और चीज ऐड करते हैं मैंने बोला कि यहां पर मैं तीन कॉलम क्रिएट करना चाहता हूं वन एफ आर व एफ आर व एफ आर के और यहां पर लेट्स से मैंने बोल दिया कि न एफ आर का मैं रोज क्रिएट करना चाहता हूं चार और यहां पर लेट्स से मैंने कह दिया कि मेरे को चेक करो एक बार तीन रोज चार कॉलम ऐसे ही कुछ लिखा ना मैंने नहीं तीन कॉलम और चार रोज न च 12 12 य हमने प्लेस किया चेक करते हैं य कैसा दिख रहा है बढ़िया ऐसा कुछ नजर आ रहा है ऐसा कुछ नजर आ रहा है ठीक है बड़ा ही गंदा है पर ठीक है बहुत ही गंदा लग रहा दिखने में पर चलो ठीक है हाइट और विड्थ हमने शायद मेंशन कर रखी है ना इसलिए दिक्कत कर रहा होगा नहीं हटा रखी है इसे एक बार अनकमेंट करते हैं अब ठीक है पहले से अब पहले से ठीक लग रहा है ग्रिड देख लेते हैं एक बार दिखने में कैसी लग रही है एक बार चेक कर लो ग्रेड ऐसी लग रही है ठीक है जो आप ये बीच में हाईलाइट पर्पल लाइंस देख रहे हैं वो आपके गैप्स है और जो हाइलाइटेड ब्लू है वो आपके सेल्स है ठीक है नहीं यकीन तो एक बार दिखा देते हैं ठीक है तो मैंने कहा हमने कहा आपका यहां से लेके यहां तक एक सेल है और यह जो आप लाइनस देख पा रहे हो यहां से लेके यहां तक ये आपका गैप है ठीक है बहुत बढ़िया चलो अब मैंने क्या बोला कि ये मेरा अभी डिफॉल्ट ग्रिड अरेंजमेंट है इसके अंदर मैं चेंजेज करना चाहता हूं तो इसके लिए मैंने क्या बोला मैं क्या करने वाला हूं जस्टिफाई सेल्फ का यूज़ करते हैं एक बार मैंने बोला जस्टिफाई सेल्फ का यूज़ कर रहा हूं जस्टिफाई आइटम सॉरी यहां पर मेरे पास बहुत सारे प्रॉपर्टीज हैं हम जस्टिफाई की बात कर रहे हैं अ मैं जस्टिफाई स्टार्ट करूंगा तो सारे के सारी आइटम अपने सेल में लेफ्ट पे प्लेस हो जाएंगी जस्टिफाई आइटम एंड करूंगा सारी की सारी आइटम अपने सेल में राइट में प्लेस हो जाएंगी जस्टिफाई सेंटर करूंगा तो सारी की सारी आइटम अपने सेल में सेंटर पे आ जाएंगी ठीक है ये सेम चीज हम इंडिविजुअल लेवल पे जस्टिफाई सेल्फ का यूज करके भी कर सकते हैं आइटम्स के ऊपर पर हां यहां पे सबके ऊपर एक ही बार में अप्लाई कर दिया आपने अगर आप स्ट्रेच करेंगे सारे के सारे एक ही बार में स्ट्रेच हो जाएंगे ठीक है बहुत बढ़िया तो हम यहां पे गए और हमने यहां पे बोला कि जस्टिफाई आइटम्स अभी ऑब्जर्व करोगे तो तुम्हें दिखेगा कि सारे के सारे स्टार्ट में प्लेज हैं सारे के सारे स्टार्ट में प्लेज हैं ठीक है पर जैसे ही मैं इसको यहां पे एंड मार्क कर दूंगा तो क्या होगा सारे के सारे एंड में प्लेस हो जाएंगे है ना देखो सारे के सारे एंड में प्लेस हो गए इस प्रकार से काम कर रहा है अगर इसी प्रकार से मैं यहां पे कर दूंगा सेंटर ठीक है तो सारे के सारे सेंटर में प्लेस हो गए होंगे चेक कर लो सेंटर में प्लेस हो गए बहुत बढ़िया अगर इसी प्रकार से यहां पर मार्क कर दूंगा स्ट्रेच तो सारे के सारे स्ट्रेच हो जाएंगे ठीक है सारे के सारे स्ट्रेच हो जाएंगे नहीं हुए क्यों नहीं हुए भैया क्योंकि आपने हाइट विड्थ मार्क कर रखी है यहां पे तो यहां पे हटा दोगे तो ये सारे के सारे स्ट्रेच हो गए इन्होंने अपने पूरे के पूरे स्पेस को हॉरिजॉन्टल एक्वायर कर लिया ठीक है इस प्रकार से काम कर रहा है तो जैसे जस्टिफाई आइटम्स काम करता है ठीक है सेम उसी प्रकार से आपके पास अलाइन आइटम्स भी है आपके पास अलाइन आइटम्स भी है ठीक है अलाइन आइटम्स कैसे काम करता है भैया उस वो वर्टिकली काम करेगा वर्टिकली काम करेगा आपके लिए ठीक है लेट्स से मैंने इसको यहां से उठाया और मैंने बोला इसको राइट में डॉक कर दो ठीक है और मैंने इसके साइज को इंक्रीज कर दिया इंक्रीज कर दिया इंक्रीज कर दिया एक बार चेक करते हैं ग्रेड कैसी है ऐसी है बहुत बढ़िया तो एक बार रो में थोड़ा और स्पेस देना पड़ेगा चेक करते हैं तो हमने बोला आपके पास यहां पर यह एफ आर है यह इस प्रकार से काम कर रहा है हमने हाइट इसकी कर दी लेट्स से 50 पिक्सल और अब चेक करते हैं अब चेक करते हैं यह आपकी छोटी हो गई है जो कि मुझे नहीं करनी है तो मैंने रो के लिए यहां पर अलग से बता दिया कि भाई मुझे 250 200 पिक्सल 200 पिक्सल मुझे यहां पर स्पेस चाहिए बढ़िया अब है स्पेस ठीक है अब यहां पर आके मैंने क्या बोला मैंने बोला कि एक बार वर्टिकली मैं आइटम्स को छेड़ना चाहता हूं छेड़ना चाहता हूं मतलब अभी दिखाते हैं आपको इस प्रकार वर्टिकली अगर मैं लाइन आइटम्स की बात करूं तो ऐसे ऊपर प्लेस करना है सेल वाइज सबको स्टार्ट का आपने यूज कर लिया डाउन वर्ड प्लेस करना है सारी आइटम को एंड का आपने यूज कर लिया सेंटर में प्लेस कर सकते हैं और स्ट्रेच कर सकते हैं अगेन चारों प्रॉपर्टीज है यहां पे फटाफट वेरीफाई कर लेते हैं अलाइन आइटम्स आपने बोल दिया सेंटर तो क्या हमने सेंटर में वर्टिकली प्लेस कर दिया यस और नो चेक करते हैं क्या सेंटर में प्लेस कर पाए जी हां हमने बिल्कुल सेंटर में प्लेस कर लिया है मैंने बोला वापस स्टार्ट में प्लेस करो तो आपने स्टार्ट में प्लेस करने की कोशिश की क्या स्टार्ट में प्लेस कर पाए जी हां बिल्कुल स्टार्ट में प्लेस कर लिया है मैंने बोला एक बार एंड में प्लेस करो आप चेक कर नेंग क्या आपने एंड में प्लेस कर दिया जी हां बिल्कुल वर्टिकल एक्सिस के कॉरस्पॉडिंग एंड में प्लेस कर दिया है मैंने बोला इसको स्ट्रेच कर दो एक बार क्या हम स्ट्रेच कर पाए भैया अभी नहीं कर पाएंगे क्यों क्योंकि हमने अपनी हाइड ऑ को फिक्स मार्क किया हुआ है इसको कमेंट करना पड़ेगा उसके बाद हम कर पाएंगे और इस प्रकार स्ट्रेच कर लिया बढ़िया ये भी हमने सीख लिया ठीक है बहुत बढ़िया अगेन मैं इन दोनों प्रॉपर्टीज को यूज नहीं करना चाहता हूं यार मैं एक सिंगल प्रॉपर्टी से करना चाहता हूं मेरे पास एक प्लेस आइटम्स करके प्रॉपर्टी है जिसके द्वारा मैं हॉरिजॉन्टल एक्सिस वर्टिकल एक्सस दोनों के कॉरस्पॉडिंग एक ही बार में काम कर सकता मैंने सेंटर प्लेस कर दिया तो अगर मैं इसको सेंटर बोलूंगा तो ये सारी की सारी आइटम्स को वर्टिक होरिजेंटली अपने सेल में सेंटर में लेके आ गया होगा बहुत बढ़िया चेक कर लो चेक कर लो ले आया है ना सेंटर में आ गया तो इस प्रकार से चीजें काम कर रही है आपने बहुत सारी प्रॉपर्टीज आज सीखी है ग्रिड्स के अंदर आपने पढ़ा ग्रिड कैसे क्रिएट कर सकते हैं एक बार मैं यहां पे राइट डाउन कर देता हूं मैंने कहा कि बहुत सारी चीजें आपने यहां पर देखिए सराइज कर देते हैं फटाफट एक बार ठीक है हमने अभी तक क्या पढ़ा सबसे पहले हमने पढ़ा कि व्हाट इज अ ग्रिड एक ग्रिड होता क्या है ठीक है ग्रिड की डेफिनेशन हमने समझ ली ग्रिड से रिलेटेड कुछ ना कुछ टर्मिनोलॉजी थी कि ग्रिड के अंदर सेल क्या होता है ग्रिड में कंटेनर क्या होता है ग्रिड में आइटम्स क्या होती है ठीक है वो टर्म्स हमने सीख ली ट्रैक क्या होता है अ ग्रिड में गैप क्या होता है सेल क्या होता है लाइंस क्या होती है रो लाइन क्या होती है कॉलम लाइन क्या होती है वो सब हमने सीख लि यहां पे टर्म्स ठीक है आफ्टर दैट हमने सीखा कैसे हम डिस्प्ले प्रॉपर्टी को ग्रिड मार्क करके किसी भी एलिमेंट को हम ग्रिड में कन्वर्ट कर सकते हैं अगर मैंने ग्रिड में कन्वर्ट कर लिया है तो मैं कंटेनर के ऊपर कुछ प्रॉपर्टीज अप्लाई कर सकता हूं और आइटम चाइल्ड आइटम के ऊपर कुछ प्रॉपर्टी अप्लाई कर सकता हूं तो मैंने यहां पर कंटेनर के ऊपर गैप अप्लाई करके देखा रो गैप अप्लाई करके देखा कॉलम गैप अप्लाई करके देखा राइट मैंने यहां पे ग्रिड टेंप्लेट कॉलम का यूज किया मैंने यहां पे ग्रिड टेंप्लेट रोज का यूज किया मैंने यहां पे रिपीट फंक्शन के बारे में पढ़ा मैंने यहां पे वन एफआर के बारे में सुना फ्रैक्शन यूनिट के बारे में मैंने पढ़ा ठीक है अ मैंने कंटेनर के लिए जस्टिफाई आइटम्स के बारे में पढ़ा मैंने कंटेनर के लिए अलाइन आइटम्स के बारे में पढ़ा मैंने प्लेस आइटम्स के बारे में पढ़ा ये सारी की सारी चीजें मैंने कंटेनर कवर कर ली उसके बाद आइटम्स की जब बात हुई तो मैंने सीखा कि कैसे मैं आइटम को एक्सपेंड कर सकता हूं ग्रिड कॉलम स्टार्ट का यूज करके ग्रिड कॉलम एंड का यूज करके ग्रिड रो स्टार्ट का यूज करके ग्रिड रो एंड का यूज करके कैसे मैं यहां पे जस्टिफाई सेल्फ कर सकता हूं कैसे मैं यहां पे अलाइन सेल्फ कर सकता हूं कैसे मैं यहां पे प्लेस सेल्फ कर सकता हूं तो बहुत भिन्न-भिन्न प्रकार की प्रॉपर्टीज हमने देखी दो एग्जांपल का यूज करके ठीक है आपके पास यहां पर कुछ कोड है आपके पास यहां पर कुछ कोड है और अंत में आपने बहुत ही सुंदर-सुंदर प्यारे-प्यारे लेआउट क्रिएट किए जैसे ये कितना प्यारा लेआउट हमने क्रिएट किया है ठीक है यहां पे एक बेसिक सा लेआउट हम थोड़ा लर्निंग पॉइंट ऑफ व्यू से क्रिएट करने की कोशिश कर रहे थे तो अगेन आपको खुद से भी लेआउट क्रिएट करना है ताकि और थोड़ा कॉन्फिडेंस आप जनरेट कर पाए अपने अंदर तो यहां पर बहुत अच्छे-अच्छे लेआउटस हैं इनको आप रेप्ट कर सकते हैं ठीक है हमने यहां पर थोड़ी रेस्पों सिवनेश भी ऐड की कि लेट्स से मैं इसको इंस्पेक्ट करूं और मैं डिफरेंट डिफरेंट डायमेंशन के लिए चेक करूं मेरे यूआई कैसे बिहेव करेगा तो ये अच्छा ठीक है बढ़िया मीडिया क्वेरीज का यूज़ करके हमने यहां पे इसको रिस्पांसिस भी बनाया हुआ है बेकार नहीं लग रहा सुंदर सुशील ही लग रहा है क्या बात समझ में आती है बहुत बढ़िया बहुत बढ़िया अगेन यहां पर बहुत सारे लेआउटस हैं चाहे इसकी बात करें चाहे यहां पर देखो कितने सारे अच्छे-अच्छे लेआउटस हैं तो अगेन सिंगल ये वाली फोटो पकड़ते हैं इस वाली फोटो में आपका टोटल नाइन लेआउटस है आपका होमवर्क ये है अगर आप वेब डेवलपमेंट के जर्नी के अंदर असलियत में सीरियस है तो आपको नाइन लेआउटस क्रिएट करने हैं ग्रिड का यूज करके ठीक है नेक्स्ट क्लास के अंदर हम कोड हेल्प ब्लॉक वेबसाइट पूरी की पूरी क्रिएट करने वाले हैं ठीक है जहां पर हम ग्रिड का यूज भी करेंगे जहां पर फ्लेक्स का यूज भी करेंगे जहां पर अगेन जो पुराना हमने इस कोर्स के अंदर सब कुछ सीखा हुआ है उसका यूज करने वाले हैं अगेन भैया कहां से पढ़ना था हमको मैंने बोला बहुत आसान है और कोड पर क्लिक कर देंगे यहां पर वीडियोस में जाएंगे और प्लेलिस्ट में जाएंगे यह आपकी वेब डेव की प्लेलिस्ट आप यहां पर सर्च कर सकते हैं कहां पे है यह रही और इस प्लेलिस्ट में जाकर आप एंटायस लेक्चर को एक्सेस कर सकते हैं वन बाय वन मिलेंगे आपको आपके अगले लेक्चर के अंदर जहां पर हम करेंगे अपने कोड हेल्प ब्लॉग वेबसाइट का क्रिएशन सो धन्यवाद एवरीवन मिलेंगे आपसे आपके अगले लेक्चर के अंदर इस लेक्चर में इतना लव यू ऑल बा बाय गुड नाइट बताना कैसा लगा और ब बता देना ब बहुत हेटफुल आते हैं बच्चे कमेंट सेक्शन में संभाल लिया करो बाय बाय हमारी कंप्लीट वेब डेब मन स्टैक कोर्स में यहां पर हम एक प्रोजेक्ट कोड हेल्प ब्लॉग वेबसाइट क्रिएट करने वाले हैं जहां पर कुछ यूआई इस प्रकार का आपको दिखने वाला है एक बार फटाफट रिव्यू करते हैं ऐसी कोड है ब्लॉग वेबसाइट हमारा आज का टारगेट है कि हम इसे आज क्रिएट करेंगे पार्ट वन के अंदर आज के दिन हम सिर्फ एचटीएमएल का कोड लिखने वाले हैं जहां पर सारी लेआउटिंग कर देंगे और कल हम सीएसएस के द्वारा इसको और सुंदर और सुशील बनाने वाले हैं एंड टारगेट हमारा क्या है एंड टारगेट है कि ये प्रोजेक्ट ये पेज मुझे क्रिएट करना है ऑब्जर्व करते हैं क्या-क्या चीजें यहां पर फटाफट ब्रेक करते हैं आगे बढ़ने से पहले बताता हूं कि लास्ट क्लास के अंदर हमने सीएसएस ग्रिड्स के बारे में पढ़ा था तो इस प्रोजेक्ट के अंदर वैसे तो हम इसे फ्लेक्स बॉक्स के द्वारा भी क्रिएट कर सकते हैं हम ट्राई करेंगे ग्रिड का यूज हम करें यहां पर एक कॉमन पैटर्न आपको नजर आ रहा होगा कि ये जो आठ कार्ड्स आपको दिख रहे हैं इनको ग्रिड के द्वारा बहुत इजली मैं अरेंज कर सकता हूं अगर आपने लास्ट क्लास में ग्रिड्स के बारे में नहीं पढ़ा तो कृपया करके जाके पढ़ें ठीक है तो शुरुआत करते हैं पार्ट वन कोड हेल्प ब्लॉग वेबसाइट शुरू करते हैं आ जाओ हमने बोला फटाफट पहले एक बार ब्रेक करते हैं चीजें कैसी है यहां पर उसके बाद थोड़ा और डिटेल में मुझे समझ में आएगा चलो तो हम गए यहां पर हमने बोला चलो ब्रेक किया जाए सबसे पहली चीज जो मैंने ऑब्जर्व करी मुझे पता है कि जो एनटायर जो ये पूरा का पूरा कंटेंट प्लेस है यह पूरा का पूरा कंटेंट कहां पर प्लेस होगा कौन से ब्लॉक के अंदर प्लेस होगा मुझे पता है कि ये बॉडी टैग के अंदर प्लेस होने वाला है ठीक है अब ब्रेक कर रहे हैं फटाफट समझेंगे कि कैसे-कैसे मैं अ चीजों को ऐड कर सकता हूं मैंने बोला उसके बाद मुझे क्या समझ में आ रहा है जो एंटायस है या फिर यह टाइटल है ये डिस्क्रिप्शन है ये हेडिंग है ये एक अलग से ब्लॉक में प्लेस है जिसकी विड्थ इतनी है और इसका नाम मैंने क्या रख दिया अच्छे से बनाते हैं इसको पहले एक बार सुंदर सुशील होना चाहिए मैंने बोला ऐसे जाओ मैंने बोला ऐसे जाओ मैंने बोला ऐसे जाओ और मैंने बोला ऐसे जाओ तो हमने क्या बोल दिया इतने विड्थ के एक ब्लॉक में प्लेज है लेट्स से मैंने एक डिव टैग के द्वारा क्रिएट किया होगा और उसका नाम मैंने लेट्स से रख दिया अ कुछ भी इसका नाम मैंने लेट्स से कंटेनर रख दिया क्लास का नाम कंटेनर रख दिया अंदर अगर मैं जाऊं तो मैं कह सकता हूं कि यहां से लेकर यहां से लेकर यहां तक जो यह कंटेंट है इसको मैंने क्या बोल दिया यह मेरा हेडर वाला पोर्शन है तो मैंने क्या बोल दिया यहां पर भी मैं एक डिव टैग का यूज़ करूंगा उसका नाम दे दूंगा हेडर क्लास का नाम या फिर लेट्स से डिव टैग का यूज़ कर लो या फिर हेडर टैग का यूज़ कर लो बैटर सिमट्रिक्स के लिए जो तुम्हारा मन करे उसके बाद मैंने क्या बोला कि मैं यहां पर इस वाले ब्लॉक की बात कर रहा हूं एक हेडिंग है तो मैंने एक हेडिंग का यूज़ कर लिया मैंने यहां पर कह दिया कि भाई यहां पर मैंने h1 टैग या h2 टैग का यूज़ कर लिया ठीक है इसको मैंने क्या बोल दिया इसकी क्लास का नाम मैंने क्या दे दिया इसका नाम मैंने हेडर टाइटल बोल दिया इसको चलो आगे मैं गया आगे मैं गया मैंने बोला मैं बात कर रहा हूं इस वाले डिस्क्रिप्शन के बारे में इस डिस्क्रिप्शन को मैंने क्या बोल दिया अगेन मुझे पता है कि डिस्क्रिप्शन कहां पर है हेडर वाले क्लास के अंदर है तो मैंने इसका नाम रख दिया हेडर डिस्क्रिप्शन इसका नाम लेट्स से मैंने रख दिया हेडर डिस्क्रिप्शन कौन सा टैग यूज़ किया एक पैराग्राफ नजर आता है पैराग्राफ टैग यूज़ कर लिया ठीक है तो अभी तक चीजें बहुत आसान चल रही है या बॉडी टैग मेरे पास है उसके अंदर मैंने एक डिव टैग के द्वारा कंटेनर बना लिया उसके अंदर मैंने हेडर टैग के द्वारा हेडर बना लिया अंदर दो कंपोनेंट है दोनों को मैंने क्रिएट कर लिया बढ़िया अब यहां पर मुझे क्या समझ में आता है अब मुझे यहां पर एक बड़ी प्यारी चीज नजर आ रही है कि भाई यह सारे के सारे कार्ड्स जो हैं ये सारे के सारे कार्ड जो अगेन मैं इन सारे के सारे कार्ड्स को कह सकता हूं कि ये खुद भी सारे के सारे कार्ड्स एक कंटेनर के अंदर एक डिव के अंदर होंगे कैसे मैंने बोला मान लो कि ये सारे के सारे कार्ड खुद से एक डिव के अंदर प्लेज है खुद से एक डिव के अंदर प्लेज है तो मैंने इस डिव का नाम क्या रख दिया लेट्स से मैंने इस डिव का नाम रख दिया कार्ड कंटेनर कार्ड कंटेनर ठीक है और लेट्स से मैंने बोल दिया डिव टैग का यूज कर लिया अब क्योंकि आठों कार्ड का स्ट्रक्चर एगजैक्टली सेम है बस मेरा कंटेंट थोड़ा सा अलग है तो अगेन मैं सेम कोड को यूटिलाइज कर सकता हूं तो मेरा सारा का सारा ध्यान क्या होना चाहिए कि मैं सिर्फ एक कार्ड क्रिएट कर पाऊं तो हम सिर्फ एक कार्ड को क्रिएट करने की दिशा में बात करते हैं अ एक मैं क्रिएट कर पाऊंगा तो बाकी सारे भी क्रिएट कर लूंगा तो मैंने क्या बोला कि एक कार्ड कैसा नजर आता है एक कार्ड कुछ इस प्रकार का नजर आता है आपने सबसे पहले ये वाली डिव क्रिएट कर ली आपने सबसे पहले एक डिव यहां पर क्रिएट करी उसके बाद आपने क्या किया उसके बाद आपने ये इमेज वाले पार्ट के लिए एक डिव कर ली ठीक है उसके बाद आपने क्या किया उसके बाद आपने यह वाले पार्ट के लिए जहां पर दो टाइटल इनके लिए एक डिव रख ली उसके बाद आपने क्या किया ये वाले फुटर वाले पार्ट के लिए आपने एक डिव रख ली बहुत बढ़िया उसके बाद आपने क्या किया ये पूरा का पूरा कंटेंट एक डब्बे में होगा बहुत बढ़िया ये एक डिव रख ली ये एक डिव रख ली ये एक डिव रख ली और यह पूरा का पूरा एक डब्बे में होगा ठीक है इसे ब्रेक करते हैं फटाफट तो मैंने बोला कि यहां पर मैंने एक डिव रख ली और उस डिव के अंदर मैंने एक इमेज टैग यूज़ कर लिया जहां पर ये इमेज मैं प्लेस कर दूंगा बहुत बढ़िया यहां पर मैंने एक डिव रख ली और उस डिव के अंदर मैंने यहां पर एक टेक्स्ट लिखा हुआ है लेट्स से पैराग्राफ टैग का यूज़ कर लिया यहां पर भी एक टेक्स्ट लिखा हुआ है यहां भी मैंने लेट्स से पैराग्राफ टैग का यूज़ कर लिया अब बात करते हैं इस वाले डिव की जहां मैंने फुटर कंटेनर इसे नाम दे दिया है इसके अंदर मैंने क्या रखा है इसके अंदर मैंने ये इमेज बनानी है तो डिव के अंदर मैंने एक इमेज रख दी और उसके बाद ये दो मेरे पास टेक्स्ट है तो लेट्स से मैंने दो स्पैन टैग का यूज कर लिया बहुत बढ़िया यहां पर अगेन मुझे टेक्स्ट दिख रहा है यहां पर मैंने डिव का टैग का यूज कर लिया पैराग्राफ का यूज कर लिया अगेन यहां पर यह वाला जो डब्बा है एक्सट्रीम लेफ्ट में है यह वाला डब्बा जो है एक्सट्रीम राइट में है ज फ्लेक्स का यूज करके हम एक्सट्रीम लेफ्ट एक्सट्रीम राइट प्लेस कर सकता यूजिंग जस्टिफाई कंटेंट स्पेस बिटवीन प्रॉपर्टी वो चीजें करते करते समझ में आएंगी पर हां एक बार लेआउटिंग कर लेते हैं दोबारा समझते हैं मैंने बोला सबसे पहले मैं क्या करूंगा सबसे पहले मैं यह कार्ड कंपोनेंट क्रिएट करूंगा मेरा कार्ड कंटेनर मैंने क्रिएट कर दिया इसके अंदर मैंने एक डिव क्रिएट कर दी जिस डिव के अंदर लेट्स से मैंने इमेज टैग का यूज़ कर लिया इमेज को प्लेस करने के लिए इसके बाद मैंने यहां पर एक डिव क्रिएट कर दी जो कि मेरे टेक्स्ट को कंटेन कर रही है जिसके अंदर सबसे पहले मैंने यहां पे एक हेडिंग रख ली है या पैराग्राफ रख लिया है और यहां पर इसके लिए मैंने पैराग्राफ टैग यूज़ कर लिया है उसके बाद मैं क्या करूंगा फुटर के लिए मैं एक डिव क्रिएट कर दूंगा इसका नाम मैंने रख दिया फुटर कंटेनर ठीक है इसके अंदर मुझे दो डब्बे नजर आते हैं पहला डब्बा ये दूसरा डब्बा ये इसके लिए मैंने एक डिव रख लिया पहले डब्बे के लिए यहां पे तीन चीजें नजर आती है पहला मुझे एक इमेज तो इसके अंदर एक इमेज को कंटेन करने के लिए डिव के अंदर एक मैंने एक इमेज डाल दी सेकंड मुझे एक डब्बा नजर आता है जिसके अंदर दो टेक्स्ट हैं तो इस बड़े वाले डब्बे को दोबारा उठा के लाता हूं इसके अंदर दो टेक्स्ट नजर आते हैं दोनों को मैंने स्पैन टैग्स रख लिया बहुत बढ़िया इस डब्बे की बात करें तो अगेन मुझे समझ में आ डिव के अंदर आपने पैराग्राफ रखा हुआ है खत्म तो लेआउटिंग पर्पस से या फिर मैं ब्रेक कर रहा हूं इसको कौन-कौन से टैग यूज़ करने हैं कैसे-कैसे टैग यूज़ करने तो उस पर्पस के हिसाब से बहुत सिंपल है ऐसा कुछ मुश्किल नहीं है एक बार फटाफट से क्रिएट करते हैं ठीक है और एक कार्ड अगर मैं सक्सेसफुली क्रिएट कर पाता हूं तो बाकी सारे कार्ड मेरे लिए क्रिएट करना बहुत ज्यादा इज हो जाएगा तो विदाउट वेस्टिंग करने टाइम फटाफट कोड की तरफ चलते हैं और आगे बढ़ते हैं अगेन कोड के अंदर मैं तुम्हें दो एपीआई प्रोवाइड की हुई है एक एपीआई के द्वारा तुम ये इस प्रकार के इमेज को लेके आ सकते हो ठीक है उसको यूज करोगे और एक एपीआई के द्वारा आप ये अवतार्स को लेके आ सकते हो तो डरना नहीं है उनको यूज करके फटाफट हम इन इमेजेस को ऐड कर लेंगे फटाफट चलते हैं कोड की तरफ ये रहा मेरा कोड यहां पर मैंने एपीआई ऐड की हुई है कॉपी पेस्ट करेंगे यहां से अभी हम ठीक है तो मैंने क्या बोला मैंने बोला सबसे पहले लेट्स से मैंने बॉडी को नाम दे दिया क्लास बॉडी कंटेनर नीड नहीं है वैसे परट चलो रख दिया मैंने क्या बोला ओवरऑल जो मेरा कोड है ओवरऑल जो मेरा कंटेंट है वो कैसे है ओवरऑल कंटेंट मेरा ये अ एक कंटेनर था डिव जिसकी विड्थ जो है पूरी बॉडी से मैच नहीं कर रही थी सिर्फ इतनी विड्थ थी तो एक कंटेनर नाम के डिव में मैंने ओवरऑल कंटेंट प्लेस किया हुआ है तो मैंने कहा ठीक है वो बातें करेंगे पर एक बार सीएसएस से लिंक कर लेते हैं हम वापस गए अगेन लिंक वाली लाइन कॉपी पेस्ट करके ले आता हूं मैंने बोला कि ये रही मेरे लिंक वाली लाइन इसे मैंने कॉपी पेस्ट कर लिया और इसे मैं फटाफट से जाके यहां पर राइट डाउन कर देता हूं कि चलो लिंक करना है और मैंने बोल दिया कोड हेल्प लॉग जो है वो मेरी वेबसाइट का नाम है और मैंने साइड सीएए नाम की एक फाइल क्रिएट कर दी यह रही बहुत बढ़िया कुछ यूनिवर्सल सेक्टर के अंदर कोड हमेशा लिखते हैं वो राइट डाउन कर लेता हूं कि मार्जिन मेरा जीरो रख देना पैडिट मेरा जीरो रख देना और मेरी बॉक्स साइजिंग बॉर्डर बॉक्स कर देना बहुत बढ़िया इसके बाद मैंने क्या कहा मैंने कहा जी जो मेरा बॉडी टैग है उसके अंदर ऐसा करो के उसकी जो हाइट है वह 100% कर दो उसकी जो विड्थ है वो भी 100% कर दो और ऐसा करो एक कंटेनर मैंने क्रिएट किया है क्या मैंने कंटेनर क्रिएट किया है नहीं अभी नहीं किया तो मैंने ओवरऑल कंटेनर एक क्रिएट कर लिया मैंने बोला कंटेनर और इस कंटेनर को मैं फटाफट से स्टाइल कर लेता हूं ठीक है मैंने बोला एनटायर विड्थ नहीं लेगा थोड़ी सी विड्थ लेगा डॉट कंटेनर मैंने बोला जो इसकी मैक्सिमम विड्थ होगी ना वो ऐसा 95 वड कर दी लेट्स से मैंने ठीक है ओवरऑल व्यू पोर्ट की विट नहीं ले रहा थोड़ी सी कम विट ले रहा 95 वड कर दी मैंने ठीक है कुछ पैडिट कुछ मार्जिन भी ऐड कर देता हूं तो मैंने बोला जी इसकी पैडिट टॉप और बॉटम से लेट्स से आपने 2 आरएम कर दी और लेफ्ट राइट से आपने लेट्स से वन आरएम कर दी बहुत बढ़िया मैंने बोला कुछ मार्जिन भी ऐड कर देता हूं मैंने बोला टॉप और बॉटम से जीरो मार्जिन ऐड कर दिया और सेंटर में प्लेस करना है जीरो ऑटो कर दिया इसको तो लेफ्ट और राइट से सेंटर में ये कंटेनर प्लेस हो जाएगा बहुत बढ़िया यह बात भी समझ में आती है तो कंटेनर मैंने क्रिएट कर लिया अगर आपको अभी तक नहीं नजर आ रहा है क्योंकि हमने गो लाइव नहीं किया नजर आएगा नहीं तो ऐसा कुछ कुछ है लेक्चर नंबर 29 की हम बात कर रहे हैं ऐसा कुछ नजर आ रहा है पर कंटेनर नहीं दिख रहा है भैया तो एक बार बैकग्राउंड कलर ऐड करता हूं कंटेनर दिखना शुरू हो जाएगा तो मैंने इसका नाम एक्वा कर दिया क्या अब चेक करें अब कंटेनर दिख रहा है ऐसा दिख रहा है भैया ठीक है ठीक है कोई दिक्कत नहीं है अभी कंटेंट प्लेस नहीं किया ना इसलिए छोटा सा दिख रहा है पर चलो ठीक नजर आ रहा है बहुत बढ़िया तो इसको मैंने कमेंट कर दिया इसको मैंने कमेंट कर दिया बहुत बढ़िया चलते हैं स्ट्रक्चर वाइज चलते हैं हमने बोला कंटेनर के अंदर सबसे पहले मुझे क्या नजर आया था भैया कंटेनर के अंदर आपने सबसे पहले कहा था कि आप ना कंटेनर के अंदर ये हेडर वाला डिव क्रिएट करोगे डिव कर लो या हेडर टैग का यूज कर लो जो तुम्हारा मन करे तो मैंने हेडर टैग का यूज कर लिया और अगेन मैंने इसका नाम क्या दे दिया मैंने इसका नाम दे दिया हेडर कंटेनर बहुत बढ़िया हेडर टैग के अंदर दो चीजें मैंने क्रिएट की हुई है वो क्या है दो चीजें क्या है एक तो हेडिंग है एक आपका डिस्क्रिप्शन है बहुत बढ़िया तो मैंने यहां पर लेट्स से एचव टैग का यूज कर लिया और लिख दिया कोड हेल्प ब्लॉग्स और यहां पे क्लास ऐड कर देता हूं फटाफट मैंने बोला क्लास क्या ऐड किया हमने हेडर का टाइटल सेकंड मैंने क्या किया सेकंड मैंने एक पैराग्राफ टैग का यूज किया है और मैंने इस पफ टैग का क्लास ऐड कर दी है मैंने बोला हेडर का डिस्क्रिप्शन और मैंने इसके अंदर कंटेंट कॉपी पेस्ट कर दिया है एक बार यूआई से जाता हूं कॉपी पेस्ट करने के लिए मैंने यहां से कॉपी कर लिया और इसको मैंने यहां पर अपने कोड के अंदर प्लेस कर दिया वेरी गुड वेरी गुड ठीक है तो ये वाला काम भी हमने संभाल लिया ठीक है तो हेडर कंटेनर बिल्कुल रेडी है जो दो चीजें मुके अंदर मुझे इसके अंदर ऐड करनी थी अ एक कोड हेल्प ब्लॉग और एक ये वाला पैराग्राफ दोनों ऐड कर लिया अब मुझे बात करनी है सेकंडरी किसके बारे में इसका कार्ड कंटेनर के बारे में तो इस कार्ड कंटेनर के बारे में डिस्कशन कर लेते हैं तो मैंने क्या बोला ऐसे कर लेता हूं एक डिव यूज करने की जगह एक मेन टैग का यूज कर ले मेन जो सार का सारा कंटेंट है इस पूरी वेबसाइट का वो इसके अंदर ही आ रहा है तो सेंटिक वाइज सब कुछ ही रहेगा ठीक है तो मेन का अगेन मैंने क्लास का नाम दे दिया मैंने बोला जी मेन कंटेनर तुम अगर मेन की जगह नॉर्मल डिव भी यूज करना चाहो कर सकते हो कोई भी उसमें गलती नहीं है मेन कंटेनर मैंने कर दिया अब हर एक मेन कंटेनर के अंदर दो चीजें हैं आठ कार्ड्स है ठीक है तो मैंने क्या बोला आठ कार्ड है तो मैंने बोला कि जो कार्ड वन है ना यार वो यहां से स्टार्ट हो रहा है और कार्ड वन है ना जो वो यहां पर एंड हो रहा है ठीक है तो मैंने इसे कमेंट कर दिया और मैंने इसे कमेंट कर दिया तो एनटायर जो कोड रहेगा कार्ड का वो मैं यहां के बीच में लिखने वाला हूं ठीक है बाद में कॉपी पेस्ट कर दूंगा बाकी सारे कार्ड्स के लिए पर हां अभी के लिए मैं यहां पे कोड लिख रहा हूं तो मैंने क्या किया मैंने सबसे पहले एक डिव क्रिएट करी एनटायर कार्ड को दिखाने के लिए कौन सी डिव की बात कर रहे हो भैया मैंने बोला मैं इस वाली डिव की बात कर रहा हूं जो ये वाली ब्लू कलर की डिव देख र इसमें ए कार्ड का सारा कंटेंट आएगा इसकी डिव क्रिएट कर दी तो मैं फटाफट से गया मैंने बोला डॉट कार्ड कंटेनर लो ये डिव क्रिएट हो गई इसके अंदर सबसे पहले मैं क्या देख पा रहा हूं सबसे पहले मैं देख पा रहा हूं एक इमेज नजर आ रही है इमेज भी ऐसी है कि लेट्स से यूआरएल को ऑब्जर्व करना एक बार यूआरएल को ऑब्जर्व करना अभी यूआरएल में कोई हैशटैग नहीं है अगर मैं इमेज पर क्लिक कर दूंगा तो ये यहां पर ले जा रही है एक नए पेज पर लेके जाने की कोशिश हो रही है यानी के एंकर टैग का यूज हुआ है और जब भी इमेज प होवर कर रहे हो स्केल भी हो रही है तो आपने बोला एंकर टैग का यूज हो रहा है क्योंकि मैं दूसरे पेज प जाने की कोशिश करता तो एंकर टैग का यूज कर लिया और एंकर टैग के अंदर मैंने इमेज टैग डाल दिया बहुत बढ़िया तो मैंने क्या बोला मैंने बोला कि एंकर टैक की क्लास ऐड कर दो हमने बोला क्लास ऐड करनी है और कहां पर लेके जाएगा मुझे ये ये मुझे लेक जा रहा है हैशटैग ये मुझे लेके जा रहा हैशटैग यहां पर लेके जा रहा है क्लास कौन सी बताई भैया आपने क्लास इमेज है इसके अंदर तो मैंने लिख दिया इसके अंदर कार्ड इमेज कंटेनर बहुत बढ़िया इमेज की बात कर लेते हैं इमेज कहां से आएगी मैंने बोला सोर्स के लिए मैंने आपको एपीआई ऐड करके दी हुई है यहां से मेरी इमेज जनरेट हो जाएगी ठीक है यही है नहीं ये नहीं है सेकंड वाला है इससे इमेज जनरेट हो जाएगी नहीं यकीन तो चेक कर लेते हैं एक बार इसको हिट करके हम गए यहां पे हमने यहां पर जाके हिट कर दिया चेक करते हैं क्या बना देखो इमेज आ गई ठीक है मैंने फिर दोबारा हिट कर दिया देखो एक और नई इमेज आ गई मैंने फिर हिट कर दिया एक और नई इमेज आ गई फिर हिट कर दिया एक और नई इमेज आ गई तो यहां पे इस एपीआई का यूज करके मैं इमेज जनरेट कर सकता हूं तो मैंने यहां पे इस एपीआई कॉपी पेस्ट कर दिया बहुत बढ़िया सोर्स ऐड हो गया मैंने बोला अल्टरनेट टेक्स्ट क्या है मैंने बोला कार्ड वन की इमेज अल्टरनेट टेक्स्ट हो गया और मैंने क्या बोला क्या क्लास है मैंने बोला कार्ड की इमेज क्लास का नाम हो गया और लेट्स से मैंने एक और प्रॉपर्टी ऐड कर दी लोडिंग लेजी ये आपको खुद से फाइंड आउट करना है लोडिंग लेजी क्या करता है इसे पढ़ के मुझे बताना है वैसे मैंने आपको सिखा रखा होगा जब एचटीएमएल आपको पढ़ाया होगा बहुत बढ़िया तो पहला पार्ट कंप्लीट हो गया जहां पर मैंने दुनिया भर की चीजें ऐड कर दी हैं एक बार फटाफट से इसको लाइव करके देखते हैं कैसा चल रहा है ये दिखाओ ऐसा कुछ कुछ है भैया कोड हेल्प ब्लॉग लिखा हुआ आ गया डिस्क्रिप्शन लिखा हुआ आ गया और इमेज लिखी हुई आ गई स्टाइल करेंगे अभी स्टाइल नहीं कर रहे बाद में करेंगे ठीक है बहुत बढ़िया इसके बाद क्या करना चाहता हूं भैया मैं इसके बाद क्या सिखाया था आपने आपने कहा था ये ब्लू वाला बॉक्स बना दो बना दिया आपने कहा था इमेज के लिए बॉक्स बना दो बना दिया अब मुझे ये टेक्स्ट के लिए ये टाइटल के लिए बॉक्स बनाना है मैंने कहा ठीक है एक बार ये टाइटल के लिए बॉक्स बना बना लेते हैं ठीक है तो यह जो बड़ा वाला ऑरेंज बॉक्स है ये वाले की बात कर रहा हूं मैं ये वाले बॉक्स की ठीक है इसकी बात कर रहे हैं इसके लिए एक बार एक डिव बना लेते हैं मैंने बोला ये इमेज वाला पार्ट तो हो चुका है ठीक है तो मैंने बोला यहां पर हम टाइटल वाले की बात कर रहे हैं तो मैंने एक कार्ड टाइटल कंटेनर ऐसे करके इमेज बना एक कंटेनर एक डिव क्रिएट कर लिया इसके अंदर क्या-क्या है इसके अंदर भैया दो चीजें हैं पहला तो आपका ये वाला टेक्स्ट दूसरा आपका ये वाला टेक्स्ट ऑब्जर्व करो एक बार जब मैं इस टेक्स्ट प जाता हूं तो क्या होता है तो सबसे पहले कलर चेंज होता है इसका होवर करने पर सेकंड अगर मैं इस पे क्लिक कर दूं तो यहां पे हैशटैग आ गया दोबारा ऑब्जर्व करो दोबारा ऑब्जर्व करो अभी यहां पर कुछ भी नहीं है एचटीएमएल के बाद पर जैसे ही यहां क्लिक करूंगा एक नए पेज पर लेके जाने की कोशिश कर रहा है इसका मतलब ये जो टेक्स्ट है ये एंकर टैग के अंदर है ठीक है ये एंकर टैग के अंदर है तो मैंने यहां पर राइट डाउन कर दिया सबसे पहले मैंने यहां पे एक एंकर टैग का यूज कर लिया मैंने बोला कहां पे लेके जाएगा ये कहां पे लेके जाएगा ये हैशटैग पर लेके जाएगा क्या क्लास है इसकी क्या क्लास है इसकी या क्लास मैंने नहीं ऐड कर रहा है इसके अंदर सिंपल मैंने यहां पर एक पैराग्राफ या फिर हेडिंग ऐड कर दी मैंने बोला कि ए2 ऐड कर दूं और मैंने यहां पर लिख दिया क्या लिखना है इसके अंदर न्यू गैजेट्स रिलीज्ड तो न्यू गैजेट्स रिलीज ऐड कर दिया और यहां पर इसकी क्लास मैंने ऐड कर दी नाम रख दिया मैंने अ कार्ड टाइटल बहुत बढ़िया पहला काम डन सेकंड मुझे क्या करना है सेकंड मुझे जो पैराग्राफ है इसको ऐड करना है तो मैंने इसे कॉपी कर लिया और इस पैराग्राफ को ऐड करने के लिए मैंने यहां पर एक पैराग्राफ टैग का यूज कर लिया कॉपी पेस्ट कर दिया इसकी क्लास ऐड कर लो बाद में स्टाइल करेंगे तो हमने इसका नाम क्या रख दिया कार्ड ब या कार्ड डिस्क्रिप्शन ठीक है जो तुम्हारा मन करे तो तुमने यह वाला जो बॉक्स था यह वाला बॉक्स भी क्रिएट कर लिया य इस बॉक्स को हम क्रिएट कर रहे थे यहां पर तुमने यह वाला भी संभाल लिया यह भी संभाल लिया अब क्या बचा है अब तुम्हारा यह वाला फुटर वाला पार्ट बचा है अब तुम्हारा यह फुटर वाला पार्ट बचा है इसके लिए फटाफट से एक टैग ऐड कर लो ठीक है तो आपने इसको मिनिमाइज कर लिया थर्ड पार्ट में आते हैं फुटर वाला पार्ट तो मैंने बोला एक डिव ऐड कर लेते हैं कार्ड फुटर कंटेनर चलो यह हो गया ये क्या दर्शाता है कार्ड फुटर कंटेनर कार्ड फुटर कंटेनर आपका यह वाले बॉक्स को दर्शाता है अब इस बॉक्स के अंदर दो बॉक्स अलग से हैं एक बॉक्स यह बड़े वाला इसके अंदर तुम्हारा ऑथर की इंफॉर्मेशन है तो मैं लिख दिया ऑथर ऑथर कंटेनर और यह सेकंड वाला जहां पर टैग की इंफॉर्मेशन है इसको मैंने टैग कंटेनर बोल दिया तो फटाफट से यह वाले दो कंटेनर क्रिएट कर लेते हैं तो मैंने बोला यहां पर दो कंटेनर है पहला है ऑथर कंटेनर ठीक है इसके अंदर भी इंफॉर्मेशन डालेंगे और दूसरा है कार्ड गग कंटेनर बहुत बढ़िया तो ये दो चीजें ऐड कर ली अब ऑथर कंटेनर के अंदर क्या-क्या है फटाफट वो देखने चलते हैं तो मैंने बोला कि फटाफट ऑथर कंटेनर में चलते हैं हर एक ऑथर कंटेनर के अंदर अगर मैं बात करूं लेट्स से मैं यहां पर इस वाले ऑथर कंटेनर की बात कर रहा हूं तो इस ऑथर कंटेनर के अंदर क्या पड़ा हुआ है एक डब्बा ये रहा जिसके अंदर अवतार है और एक डब्बा ये रहा जिसके अंदर टेक्स्ट है तो इसको मैंने बोल दिया कि अवतार इस वाले में अवतार कंटेनर इसको मैंने बोल दिया ऑथर इंफो कंटेनर जो तुम्हारा नाम कर तुम वो ऐड कर सकते हो इसके अंदर कोई दिक्कत नहीं है ठीक है चलो तो दो कंटेनर ऐड कर लेते हैं तो मैंने बोला यहां पर एक आ गया मेरे पास ऑथर अवतार कंटेनर ठीक है इस ऑथर ऑफ तार कंटेनर के अंदर हमने क्या ऐड किया हुआ है इस ऑथर ऑफ तार कंटेनर के अंदर हमने क्या ऐड किया हुआ है हमने इसके अंदर एक इमेज ऐड की हुई है तो ये इमेज फटाफट ऐड कर लेते हैं तो मैंने बोला कि इसके अंदर हमने एक इमेज ऐड की हुई है तो हमने यहां पर क्या किया हमने यहां पर सोर्स ऐड कर दिया और सोर्स के अंदर मैंने तुम्हें यहां एपीआई प्रोवाइड की हुई है इस एपीआई के द्वारा तुम अवतार लेकर आ सकते हो नहीं यकीन कर लो यहां पर हिट मार के अवतार आ गया बिल्कुल आ गया तो ऐसे करके तुम अवतार क्रिएट कर सकते हो तो मैंने यहां पर क्या कर दिया मैंने यहां पर बोला कि यह लो इस एपीआई के द्वारा तुम अवतार क्रिएट कर लेना बहुत बढ़िया ठीक है यह समझ में आ गया और क्याक कर सकते हैं हम यहां पर लोडिंग लेजी कर सकते हैं हम यहां पर क्लास का नाम ऐड कर सकते हैं अगर तुम करना चाहो तो तुमने यहां पर कर दिया ऑथर का अवतार ठीक है और क्या कर सकते हैं अल्टरनेट टेक्स्ट तुम रखना चाहो रख लो अवतार वन ऐसा कुछ कुछ रख लिया बढ़िया तो अवतार वाला पार्ट कंप्लीट हो गया अवतार वाला पार्ट कंप्लीट हो गया अगेन ऑथर अवतार कंटेनर के अंदर तुमने अवतार ऐड कर लिया यह वाला काम डन हो गया पर ऑथर कंटेनर के अंदर एक और चीज तो थी क्या था भैया आपने अवतार तो ऐड कर लिया पर यह नाम और यह डेट वाला पार्ट रह गया तो मैंने यह एक बार फटाफट से ऐड कर लेता हूं तो मैंने यहां पर क्या किया मैंने बोला ऑथर इंफो कंटेनर इस इंफो कंटेनर का दो स्पैन टैग यूज कर लिया ठीक है पहले स्पैन टैग में इंफॉर्मेशन ऐड कर देंगे दूसरे स्पैन टैग में इंफॉर्मेशन ऐड कर देंगे ठीक है तो फटाफट से इंफॉर्मेशन लेकर आते हैं हमने बोला जोन डोई हमने यहां पर ऐड कर लिया और सेकें हमने क्या किया यह डेट कॉपी कर ली हमने इस डेट को यहां पर ऐड कर लिया बढ़िया तो ये दो चीजें हमने फटाफट ऐड कर ली है तो यहां पर हमने यह वाला पार्ट त सक्सेसफुली कंप्लीट कर लिया जहां पर हमने ऑथर कंटेनर बनाया यहां पे ऑथर का अवतार कंटेनर बनाया उसके अंदर एक इमेज ऐड कर दी ऑथर का इंफो कंटेनर बनाया उसमें उसके नाम को हैंडल कर लिया उसमें उसकी डेट को हैंडल कर लिया तो ये सारी की सारी चीजें हम ऐड कर चुके हैं अब बात करते हैं ये टैग कंटेनर के बारे में ठीक है तो फटाफट चलते हैं ये टैग कंटेनर देखते हैं हमने क्रिएट किया है कि नहीं किया हमारा ऑथर कंटेनर तो कंप्लीट हो चुका है सेकंड बचा है कार टैग कंटेनर कार टैग कंटेनर के अंदर कुछ एडिशनल हमने खास किया नहीं है बस एक टैग मुझे ऐड करना है तो अगेन मैं चाहूं अ तो यहां पर एक स्पैन टैग का यूज कर सकता हूं और स्पैन टैग का यूज करके जो भी मेरा टैग है जैसे इस केस के अंदर मेरा टैग है टेक्नोलॉजी इसको मैंने कॉपी करके पेस्ट कर दिया ठीक है बहुत बढ़िया नीचे गोल्डी भोक र है उस परे ध्यान नहीं देंगे हम बढ़िया तो इस प्रकार से हमने अब तक क्या किया है हमने जो भी कंटेंट सारा का सारा था वो प्लेस कर लिया कार्ड के हिसाब से स्टाइलिंग अभी नहीं की है वो बाद में करेंगे एक बार देखते हैं हमारा यूआई कैसा नजर आ रहा है बढ़िया इमेज चेंज कर लेते हैं अब ठीक है कोड हेल्प ब्लॉग्स हमारा टाइटल आ चुका है कोड हेल्प का डिस्क्रिप्शन हमारा सही चल रहा है इमेज आई है बहुत बढ़िया उसके बाद यहां पर भैया ये डेकोरेशन हो गई यह अंडरलाइन आ रही है जबकि हमारे यहां पर कोई भी अंडरलाइन नहीं आ रही तो अंडरलाइन कैसे हटाते थे कुछ भी नहीं अपना जाओ स्टाइल ड सीएस फाइल के ऊपर जाके बोल दो जो भी तुम्हारा एंकर टैग है उसके अंदर टेक्स्ट डेकोरेशन को आपने मार्क कर दिया नन अब चेक करो यूआई पे अब चेक करो अब आ रही है अंडरलाइन अब नहीं आ रही भा अब सही अब सही अब सुंदर लग रहा है मजा आ गया बहुत बढ़िया तो हमने क्या बोला टाइटल आ गया टाइटल का डिस्क्रिप्शन आ चुका है इसके बाद अवतार आएगा बहुत बढ़िया अवतार के बाद उसका नाम आ गया डेट आ गई और टेक्नोलॉजी तो डेटा वाइज सब कुछ आ रहा है जो भी डिस्क्रिप्शन हमने ऐड किया था जो भी कंटेंट ऐड किया वो सब कुछ आ रहा है पर सुंदर सुशील नहीं आ रहा है सुंदर सुशील आने के लिए हमें क्या करना पड़ेगा सुंदर सुशील की हमें लिए स्टाइलिंग करनी पड़ेगी रिस्पांसिस के लिए मीडिया क्वेरीज ऐड करनी पड़ेगी वो हम करेंगे पार्ट टू के अंदर इस पार्ट के अंदर अभी हमने इतना ही प्लेस किया है कंटेंट वाइज या एचटीएमएल स्ट्रक्चर वाइज हमने सारा स्ट्रक्चर प्रोवाइड कर दिया है ठीक है ज्यादा मुश्किल नहीं सा छोटू सा था एक बॉडी के अंदर आपने कंटेनर बनाया कंटेनर के अंदर हेडर के अंदर आपने टाइटल को डिस्क्रिप्शन को हैंडल कर लिया फिर मेन टैग के अंदर आपने अ पहला कार्ड अभी ऐड किया ऐसे ही आप बाकी सारे के सारे कार्ड्स ऐड करने वाले हैं आपने कार्ड का एक कंटेनर बनाया सबसे पहले इमेज वाले पार्ट को हैंडल किया उसके बाद टाइटल वाले पार्ट को हैंडल किया और उसके बाद फुटर वाले पार्ट को हैंडल किया ठीक है वन बाय वन पूरे के पूरे कार्ड को ब्रेक करके हमने चीजें ऐड की है क्लासेस वगैरह जानबूझ के अभी से ऐड किए मैंने ताकि अगली क्लास में नेक्स्ट पार्ट में जब इस इसको हम स्टाइल कर रहे हो तो चीजें आपके लिए आसान हो जाए ठीक है तो नेक्स्ट क्लास में आना इसी गंदे इसे प्रोजेक्ट को ये जो गंदा सा तुम्हे अभी लग रहा है इसी को सुंदर बना देंगे इस प्रकार ठीक है तो नेक्स्ट पार्ट में आना बहुत ज्यादा इंपॉर्टेंट है कृपा करके जरूर आए क्या बात समझ में आती है बहुत बढ़िया क्या मुझे थोड़ा सा और शल करना चाहिए इसको भी नहीं नेक्स्ट क्लास में करेंगे ठीक है दोस्तों बताना कमेंट सेक्शन के अंदर कैसा लगा क्या मजा आया क्या चीजें रिवाइज हुई दोबारा कि नहीं हुआ ये प्रोजेक्ट अभी जो ये वाली क्लास थी थोड़ा रिवीजन पॉइंट ऑफ व्यू से थी पर नेक्स्ट क्लास में आप नई-नई चीजें ऐड करने वाले हैं मिलते हैं नेक्स्ट पार्ट के अंदर लव यू ऑल बा बाय गुड नाइट यहां पर हम कोड हेल्प ब्लॉग वेबसाइट की स्टाइलिंग कंटन करने वाले हैं लास्ट क्लास के अंदर लास्ट लेक्चर के अंदर आपने देखा कैसे कोड हेल्प ब्लॉक वेबसाइट को हमने स्ट्रक्चर प्रोवाइड किया था यूजिंग एटीएमएल एंड बेसिक सीएसएस का हमने यूज किया था आज की क्लास के अंदर हम इस सिंपल सी वेबसाइट को ध्यान से एक बार ऑब्जर्व करते हैं जो कि कुछ इस प्रकार नजर आ रही है कुछ ऐसी नजर आ रही है इसे कन्वर्ट करने वाले हैं इस सुंदर सी वेबसाइट के अंदर ठीक है तो आज का टारगेट है कि इस बेकार सी वेबसाइट को अजीब सी बिगड़ी हुई वेबसाइट को हम कन्वर्ट करेंगे यह सुंदर सुंदर सुंदर सुंदर कार्ड्स के अंदर ठीक है तो शुरुआत करते हैं लेक्चर नं 30 कोड हेल्प ब्लॉग वेबसाइट कंटिन्यू करते हैं चलो आ जाओ अभी अगर ध्यान से देखो यहां पर एक टाइटल था यहां पर एक डिस्क्रिप्शन था यहां पर बहुत सार कार्ड्स थे हर एक कार्ड में एक फोटो है एक टाइटल है एक डिस्क्रिप्शन है एक अवतार है एक नाम है एक डेट है और एक टैग है क्या यह सारी चीजें हमारे द्वारा बनाए गए स्ट्रक्चर के अंदर है हां टाइटल भी है डिस्क्रिप्शन भी है इमेज भी है टाइटल फिर से आ गया कार्ड का डिस्क्रिप्शन आ गया कार्ड का अवतार भी आ गया नाम भी है डेट भी है और टैग भी सब कुछ है पर स्टाइलिंग नहीं है बहुत बेकार लग रहा है तो स्टाइलिंग अब शुरू करते हैं विदाउट वेस्टिंग एनी टाइम अगेन एक चीज का ध्यान रखेंगे अभी मैं बहुत सारी वैल्यूज यूज करूंगा कि मैंने बोला कि यार इस इमेज के लिए आप हाइट दे दो 12 आरएम या फिर मार्जिन बॉटम आप प्रोवाइड कर दो 3 आरएम या फिर हमने एक मैक्सिमम वेट डिसाइड कर ली कि 768 पिक्सल मैक्सिमम विथ मुझे रखनी है तो वो सारी फिगर्स कहां से आती है मुझे कैसे पता लगा कि यहां मुझे 2 आरएम लिखना था या यहां पर मुझे फाइ आरएम लिखना था तो कंपनी इस के अंदर क्या होता है एक डिजाइनर होता है जो आपको पूरी पूरी वेबसाइट का डिजाइन बना के देता है और आप एज अ डेवलपर उस डिजाइन को रेफर कर रहे होते हो और उस डिजाइन में से ये सारी वैल्यूज निकालते हो कि अच्छा मुझे इस साइट को इतना रखना है अच्छा मुझे इस टेक्स्ट के साइज को इतना रखना है अच्छा मुझे यहां पे कलर की एग्जैक्ट वैल्यू यहां से मिल जाएगी ठीक है तो वो कलर का एग्जैक्ट वैल्यू वो हाइट कितनी होनी चाहिए फॉन्ट साइज कितना होना चाहिए लाइन हाइट कितनी होनी चाहिए फॉन्ट वेट कितना होना चाहिए बॉर्डर रेडियस कितनी होनी चाहिए बॉर्डर की विड्थ कितनी होनी चाहिए वो सारी की सारी चीजें आपको कौन प्रोवाइड करता है आपका डिजाइनर प्रोवाइड करता है तो इस चीज से बिल्कुल घबराना मत कि भैया कैसे पता र कि यहां पर 2 आरएम रखना है 1 आर रखना है पर भैया हमारे पास तो कोई डिजाइनर है ही नहीं हम क्या करें इस केस में इस केस में तुम हिट एंड ट्रायल करोगे कभी तुम 2 आरएम रख के देख लो हाइट अच्छा नहीं लग रहा 2.5 करके देख लो अच्छा नहीं लग रहा 2.3 करके देख लो हां ये सही लग रहा है तो हिट एंड ट्रायल कर कर के हम एग्जैक्ट वैल्यू फाइंड आउट करने की पूरी पूरी कोशिश करेंगे और फाइंड आउट कर लेंगे ठीक है चलो आगे बढ़ते हैं एक बार फटाफट अपना कोड गो थ्रू कर लेते हैं हमने बोला यहां पे बॉडी कंटेनर है एक टोटल ओवरऑल कंटेनर है हेडर कंटेनर है हेडर कंटेनर के अंदर हेडर टाइटल और डिस्क्रिप्शन है मेन कंटेनर के अंदर कार्ड कंटेनर है एक कार्ड बनाया हु बाकी सारे कार्ड कॉपी वेस्ट करेंगे थोड़ी देर में अ ये हमारी इमेज वाला पार्ट आ गया उसके बाद ये कार्ड का टाइटल ये कार्ड का डिस्क्रिप्शन उसके बाद ये कार्ड का फूटर जहां पे आपका ऑथर कंटेनर था ऑथर कंटेनर में उसका अवतार था ये रहा अवतार एंड यहां पे क्लास का नाम थोड़ा सा गंदा लिखा हुआ है ऑथर और इंफो के अंदर आपका नाम था और डेट थी और लास्ट में आपका टैग था तो ये सारी की सारी चीजें जो हैं ये आपने ऑलरेडी लिखी हुई है ठीक है शुरुआत करते हैं तो अभी जो हमारा ब्लॉग वेबसाइट है वो कुछ ऐसी टाइटल नजर आ रहा है और इनका टाइटल कुछ ऐसा नजर आ रहा है तो मैंने बोला यार टाइटल तो है ठीक है यह बात तो समझ में आ रही है पर यह सारी की सारी चीजें जो है ये सेंटर में अलाइन करनी है मुझे ठीक है तो सेंटर में अलाइन में करना चाहता हूं सेंटर में अलाइन हम करना चाहते हैं पर अगेन ध्यान से देखो हेडर कंटेनर जो है हेडर कंटेनर के जस्ट नीचे आपका इमेज स्टार्ट हो गया जो कि नहीं होना चाहिए था तो हेडर कंटेनर के नीचे पहले मैं एक यहां से शुरू करते हैं हेडर कंटेनर के नीचे पहले मैं एक मार्जिन बॉटम ऐड कर देता हूं तो मैं यहां पर गया मैंने बोला हेडर कंटेनर और मैंने बोला मार्जिन बॉटम लेट्स से मैंने यहां पर 2.5 आरएम ले लिया ठीक है चलो अब यहां पर थ मार्जिन बन गया अगेन यहां पर भी इतना ही मार्जिन था हा इसके आसपास ही लग रहा है भया थोड़ा ज्यादा है पर थोड़ा और बढ़ा लेते हैं इसको ऐसे 2.5 2.8 कर लिया हमने इसको ठीक है अब थोड़ा सा समझ में आएगा अब आई थिंक बराबर मार्जिन हमने ले लिया ठीक है डन ट्रायल कर कर के अपन फाइंड आउट करेंगे अब आगे बढ़ते हैं हम बात करते हैं अगली क्लास के बारे में अगली क्लास कौन सी है मेरे पास मैंने बोला हेडर टाइटल है टाइटल मेरा किस प्रकार का नजर आ रहा है अभी मेरा टाइटल ऐसा कुछ नजर आ रहा है जबकि यहां पर टाइटल कैसा है कुछ इस प्रकार का है ठीक है यह बात समझ में आती है तो हमने क्या कहा कि टाइटल को हम एक बार प्रॉपर्टीज प्रोवाइड करते हैं कुछ कुछ ठीक है तो मैं यहां पर गया और मैंने बोला डॉट हेडर टाइटल और मैंने यहां पर इसकी प्रॉपर्टीज ऐड कर दी मैंने कहा एक मार्जिन बॉटम तो यहां पर भी देना पड़ेगा मुझे है ना कुछ ना कुछ मार्जिन तो है ही देखो इन दोनों के बीच में कितना मार्जिन है और हमारे वाले में कितने बीच में कितना मार्जिन है तो मार्जिन मुझे यहां प्रोवाइड करना पड़ेगा तो मार्जिन बॉटम मैंने यहां प्रोवाइड कर दिया लेट्स से व आरएम और फंट साइज की बात कर लेते हैं फंट साइज लेट्स से मैंने यहां प्रोवाइड कर दिया 1.5 आरएम चेक करते हैं यई कैसा लग रहा है ठीक है पहले से अच्छा लग रहा है थोड़ा सा छोटा है थोड़ा सा छोटा है और थोड़ा बड़ा करना पड़ेगा 1.5 से बात नहीं बनेगी तो हमने इसे कर दिया 1.7 आरएम आई थिंक अब थोड़ा ठीक है पहले से और यहां पे इसका फंट वेट असाइन कर सकते हैं हम लाइन हाइट असाइन कर सकते हैं तो हमने लाइन हाइट असाइन कर दी यहां पे 2 आरई एम लेट्स से मैंने एक फंट वेट भी असाइन कर दिया कि भाई इसका वेट तुम अराउंड ऐसा करो 700 के आसपास मान लो और इस टेक्स्ट को मुझे सेंटर में अलाइन करना है तो मैंने इसको सेंटर में अलाइन कर दिया ठीक है तो चेक करते हैं एक बार क्या बना है इससे बढ़िया कोड हेल्प बॉक्स सेंटर में आ चुका है बढ़िया भैया इन दोनों में डिफरेंस क्यों आ रहा है बेटा h छोटा है इसका h बड़ा कर लो मैंने कहा ओहो देखते हैं एक बार अ हम गए यहां पे हमने यहां पे इसका एच जो है कैपिटल कर दिया अब चेक करते हैं यूआई पे अब ठीक है अब ठीक है अब थोड़ा आसपास है अगेन यहां पे तुम्हारा मार्जिन टॉप से थोड़ा कम है जबकि यहां मार्जिन टॉप से तुमने ज्यादा लिया हुआ है तो इसे हैंड करना पड़ेगा एक बार ठीक है अ अभी रहने देते हैं उतना ज्यादा फर्क नहीं है अगेन छोटा-मोटा फर्क हम देखने वाले हैं क्यों क्योंकि हम हिट एंड ट्रायल कर रहे हैं एग्जैक्ट वैल्यूज का यूज़ नहीं कर रहे हैं अगेन यहां पर जो फॉन्ट फैमिली हम यूज़ कर रहे हैं वो बाय डिफॉल्ट जो है उसे यूज़ कर रहे हैं जबकि यहां पर कोई और फॉन्ट फैमिली का यूज़ किया गया है तो ये डिफरेंस आप नजर आपको नजर आ रहा है सेकंड यहां पर चलते हैं इस वाली लाइन को पकड़ते हैं इसको एक बार स्टाइल करने की कोशिश करते हैं अगेन यहां पे ऑब्जर्व करोगे लाइन सबसे पहले सेंटर में है और लाइन की एक स्पेसिफिक विड्थ दी हुई है कि इस विड्थ के अंदर आपकी लाइन आनी चाहिए तो स्पेसिफिक विड्थ मुझे यहां पर प्रोवाइड करनी पड़ेगी लाइन जो टेक्स्ट है उसका कलर भी चेंज हुआ पड़ा है और उसका साइज भी चेंज हुआ पड़ा है तो कलर चेंज कर दो साइज चेंज कर दो विड्थ चेंज कर दो सेंटर में लाइन कर दो ठीक है तो चलो आओ करें मैंने कहा कि क्या नाम था इसका इसका नाम था भैया हेडर डिस्क्रिप्शन तो हेडर डिस्क्रिप्शन मैं चला गया हेडर डिस्क्रिप्शन और यहां पर मैंने इसके लिए बोला कि इसके जो मैक्स वि है लेट्स से मैंने बोल दिया कि 768 पिक्सल है ठीक है इतने इतने एरिया के अंदर इसको आना ही पड़ेगा तो मैंने यहां पर इसको 768 पिक्सल प्रोवाइड कर दी है इसकी मै विड्थ अब आगे बढ़ते हैं मैंने बोला जो भी टेक्स्ट है उे मुझे सेंटर में अलाइन करना है सेंटर में अलाइन कर दिया मैंने बोला जो भी इसका कलर है मु थोड़ा कलर चाहिए ब्लैक स्टोन में ठीक है अगेन मुझे ब्लैक एग्जैक्ट नहीं चाहिए मुझे चाहिए ग्रे स्टोन थोड़ी सी तो मैं यहां पे गया और मैंने ये ग्रेन टोन सिलेक्ट कर दी बहुत बढ़िया इसके बाद मैंने कहा कि एक मार्जिन भी होना चाहिए तो मैंने बोला कि टॉप और बॉटम से मार्जिन आप जीरो रख लो और लेफ्ट राइट से आप ऑटो रख लो चलो चेक करते हैं तो इस प्रकार से आपका डाटा आ रहा है पर अगेन ये बहुत ज्यादा बहुत ज्यादा स्पेस मिल गया इसको जबकि मुझे इसको इस प्रकार से रखना था बहुत बढ़िया तो मैंने इसका जो 768 पिक्सेल था इसको मैंने कम कर दिया मैंने इसको 568 कर दिया चेक करते हैं इससे क्या होगा चेक करते हैं इससे क्या होगा अब थोड़ा सही है अब सही लग रहा है अब सही लग रहा है ठीक है तो अगेन एगजैक्टली इक्वल भैया नहीं लग रहा है थोड़ा सा डिफरेंस है इसके टेक्स्ट में लिखे गए में और इसके टेक्स्ट में लिखे गए में और कलर में भी डिफरेंस है अगेन वो एग्जैक्ट वैल्यू आपको डिजाइन प्रोवाइड करता है यहां पर हम हिट एंड ट्रायल करके सेम चीज क्रिएट करने की कोशिश कर रहे हैं तो उतना लोड नहीं है चलो आगे बढ़ते हैं अभी तक सब कुछ सही चल रहा है ये दोनों चीजें हमने सेंटर में प्लेस कर ली है अब हम धीरे-धीरे आगे बढ़ सकते हैं मैंने क्या बोला कि ये वाला जो सारा का सारा पार्ट था मैंने बोला कि आपका जो यहां से लेके यहां से लेके यहां वाला पार्ट है ये क्या था ये सारे के सारे कार्ड्स थे इसका नाम क्या रखा था मैंने इसका नाम मैंने कोड में रखा था मेन कंटेनर मेन कंटेनर रखा था तो क्या मैं कह सकता हूं कि मेन कंटेनर एक ग्रिड है जिसके अंदर कार्ड्स आएंगे तो मुझे मेन कंटेनर को एक ग्रिड बनाना पड़ेगा और यहां पर इसको देख के मुझे साफ पता लग रहा है कि एक दो तीन चार चार कॉलम होने चाहिए इस ग्रेड के अंदर ठीक है तो आओ फटाफट तो यहां पर मेन कंटेनर को मुझे ग्रिड में कन्वर्ट करना पड़ेगा फटाफट कोड कर लेते हैं मैं गया कोड पे मैंने बोला स्टाइल्ड सीएए और यहां पे हमने लिखा डॉट मेन कंटेनर मेन कंटेनर मैंने राइट डाउन कर दिया कि भाई इसको मुझे ग्रिड में कन्वर्ट करना है तो डिस्प्ले ग्रेड मार्क कर दिया एक गैप मुझे देना पड़ेगा सारे कार्ड्स में लेट्स से मैंने गैप 1.5 आरएम का रख लिया और मैंने कहा कि मुझे चार कॉलम्स यहां पर देने है तो ग्रिड टेंप्लेट कॉलम प्रॉपर्टी को मैंने सेट कर दिया कि भाई चार कॉलम मुझे देना जिसमें हर कोई एक फ्रैक्शन का स्पेस ले रहा है ठीक है यह बात हमने कर ली ठीक है इससे अगेन यूआई पर कोई फर्क नहीं पड़ेगा अभी हमारे क्यों भैया क्यों नहीं पड़ेगा क्योंकि हमने कार्ड ही एक बनाया सिंगल कार्ड है ना हमारे पास अभी जब मल्टीपल कार्ड बनाएंगे तब समझ में आएगा कि इसका क्या फर्क पड़ रहा है ये बात समझ में आती है ठीक है बहुत बढ़िया तो अब आगे बढ़ते हैं अगेन हमने ग्रेड भी बना ली अब ग्रेड के बाद क्या है हमें कार्ड कंटेनर पर काम करना है अग स्ट्रक्चर वाइज जाओगे तो ये कार्ड कंटेनर है कार्ड कंटेनर के ऊपर काम कर लेते हैं अगेन ध्यान से ऑब्जर्व करोगे कार्ड कंटेनर के अंदर बहुत सारी चीजें हैं जैसे कि ये तुम्हारा यहां से लेके यहां तक कार्ड कंटेनर था इसमें तुम्हारी इमेज आ गई इसमें तुम्हारा टाइटल आ गया तुम्हारा डिस्क्रिप्शन आ गया और तुम्हारा फुटर आ गया चारों चीजें एक के नीचे एक के नीचे एक है तो मैं इस कार्ड कंटेनर को फ्लेक्स बना सकता हूं और फ्लेक्स डायरेक्शन कॉलम सेट कर सकता हूं मैंने कहा ठीक है तो फटाफट कार्ड कंटेनर को स्टाइल कर लेते हैं मैं नीचे गया मैंने बोला कार्ड कंटेनर इसको मैंने स्टाइल कर दिया मैंने बोला फ्लेक्स कैसे बनाएंगे डिस्प्ले फ्लेक्स और मैंने बोला फ्लेक्स की जो डायरेक्शन है वो क्या हो गई फ्लेक्स डायरेक्शन कॉलम होगी ये कुछ छोटी चीजें हमने ऐड कर ली है कुछ बॉर्डर हम ऐड करना चाहे बॉर्डर ऐड कर सकते हैं इसके अंदर लेट्स से मैंने बोल दिया बॉर्डर वन पिक्सेल सॉलिड ब्लैक ऐसा कुछ कर दिया लेट्स से बॉर्डर रेडियस मैं कुछ ऐड करना चाहता हूं बॉर्डर रेडियस लेट्स से मैंने बोल दिया टू पिक्सल तो इससे बॉर्डर रेडियस ऐड हो जाएगी एंड देखते हैं क्या बना इससे तो इससे अगर मैं यूआई पर जाऊं तो अगेन बॉर्डर बना हुआ है वेरी गुड वेरी गुड ठीक है तो बॉर्डर हमारा बना हुआ है अभी कार्ड जब छोटा हुगा तो और अच्छे से समझ में आएगा अभी हमने बॉर्डर जो क्रिएट करना था कर लिया ठीक है अगेन बॉर्डर थोड़ा सा लाइट कलर का है हमने एग्जैक्ट ब्लैक कलर यूज यूज कर लिया अगेन इसको थोड़ा सा और लाइट की तरफ लेके जा सकते हैं एग्जैक्ट वैल्यूज आपको डिजाइन प्रोवाइड करेगा जब आप डिजाइन के साथ काम करेंगे ठीक है अभी हमने एक कार्ड कंटेनर क्रिएट कर लिया है ठीक है यहां पर हम और क्या कर सकते हैं कार्ड कंटेनर के बाद कार्ड कंटेनर के बाद मेरे पास कार्ड इमेज कंटेनर है तो कार्ड इमेज कंटेनर को स्टाइल कर लेते हैं इमेज कंटेनर एक डेव है जिसके अंदर आपने एग्जैक्ट इमेज प्रोवाइड की हुई है तो यहां मैंने बोला कार्ड इमेज कंटेनर और इसको अंदर मैं पोजीशन करूंगा अगेन मैं चाहता हूं इस कार्ड इमेज कंटेनर के अंदर इमेज आए तो मैंने क्या किया मैंने इसकी पोजीशन को रिलेटिव मार्क कर दिया कि भाई इसकी पोजीशन रिलेटिव कर दो ताकि जो इमेज है उसको एब्सलूट करके इसके ऊपर ओवरलैप करवा पाऊं यह बात समझ में आती है मैंने बोला किसी प्रकार का ओवरफ्लो नहीं देखा जाएगा तो ओवरफ्लो को हिडन मार्क कर दिया मैंने और अगेन मुझे यहां पर इमेज जो है बहुत ही ज्यादा बड़े साइज की दिख रही है तो मैंने क्या किया मैंने इसको एक फिक्स साइज दे दिया मैंने बोला इसकी हाइट जो है लेट्स से आप 12 आरएम रख लो ठीक है 12 छोड़ो ऐसे करो 14 कर लो रैंडम कुछ भी ले रहे हैं और देखते हैं क्या होता है तो यहां पर मेरी इमेज छोटू सी हो गई अगेन इमेज तो भैया कट गई इमेज में तो कुछ दिख ही नहीं रहा बस छोटा यहां से य तक का पार्ट दिख रहा है बाकी पार्ट तो हट गया मैंने कहा अभी ठीक कर लेते हैं कोई इशू नहीं है तो इस केस हम क्या करने वाले हैं हमने बोला कि इमेज की प्रॉपर्टी को स्टाइल कर लेते हैं फटाफट इमेज के टैग को स्टाइल कर लेते हैं कार्ड इमेज स्टाइल डॉट सीएसएस आप आए यहां पर आपने बोला कार्ड इमेज और यहां पर आपने बोल दिया कि जो भी इमेज है ऑब्जेक्ट फिट कवर कर दिया और इमेज की पोजीशन जो है वो मैंने कर दी सेंटर पोजीशन ठीक है और मैंने एक और चीज आपको बताई थी कि मैंने जानबूझ के कंटेनर को रिलेटिव मार्क किया था ताकि इस इमेज को मैं ओवरलैप करवा पाऊं तो मैंने पोजीशन को एब्सलूट कर दिया मैंने बोला अब तुम उसकी हाइट जो है वो 100% रख सकते हो हाइट 100% एंड विड्थ 100% चलो चेक करते हैं यई पर क्या बढ़िया इमेज बन गई हां बढ़िया इमेज बन गई थोड़ा सा ये भैया कार्ड जो है पूरा का पूरा स्पेस ले रहा है अभी क्यों ले रहा है पूरा स्पेस क्योंकि भैया आपने ना चार कॉलम बनाने के लिए बोले थे और व का स्पेस बोला हुआ था पर जबकि यहां पर सिर्फ एक ही कार्ड है तो जब यहां पे चार कार्ड ऐड कर दूंगा तो अपने आप सब कुछ सुंदर सु शल हो जाएगा ठीक है अगेन हमने जोय ब ब्लॉक बना रखा है उसमें सिर्फ यहां से लेफ्ट और राइट से इतना ही गैप आ रहा है तो इसको भी अपन ठीक करेंगे अभी थोड़ी देर में ठीक है अभी के लिए इससे ही काम चला लेते हैं तो इतना समझ में आ गया इतना समझ में आ गया अब हम जा सकते हैं अगले एलिमेंट के ऊपर अगला एलिमेंट कौन सा है हमारे पास अगला एलिमेंट है हमारे पास कार्ड टाइटल कंटेनर तो कार्ड टाइटल कंटेनर कौन सा था कार्ड टाइ टाइटल कंटेनर आपका यहां से लेके यहां तक वा वा ब्लॉक है तो इसकी बात करता है अगन मार्जिंस मुझे हैंडल करने पड़ेंगे इसके अंदर और लेट्स से मैं इसे फ्लेक्स भी बना सकता हूं क्योंकि इसके अंदर जो दो एलिमेंट्स है वो एक के नीचे एक है फ्लेक्स डायरेक्शन कॉलम करनी पड़ेगी तो वो फटाफट से एक बार मैं क्रिएट कर लेता हूं है ना तो हमने यहां से इसे कर लिया कॉपी हम गए यहां पे हमने बोला डॉट दिस हमने बोला इसको डिस्प्ले बना दो फ्लेक्स और मैंने बोला फ्लेक्स डायरेक्शन कॉलम और लेट्स से मैंने एक पैडिट ऐड कर दीया मार्जिन ऐड कर दे जो तुम्हें अच्छा लगे 1.5 आरएम ठीक है तो आपने यहां पर जो पैडिट ऐड करनी थी वो कर दिया और आपने फ्लक्स ऐड करया ताकि दोनों आइटम एक के नीचे एक रहे ठीक है ये बात समझ में आती है अगेन एक चीज का और मुझे ध्यान रखना है अ वो क्या है अ वो ये है कि जब भी मैं इस इमेज पे होवर करूं तो स्केल करनी चाहिए जैसे मैं यहां पर किसी भी इमेज होवर करता हूं तो स्केल करती है अगेन सिर्फ इमेज पे होवर करने से स्केल नहीं कर रही भैया पूरे कार्ड पे कहीं पर भी जाते हो होवर करते हो तो स्केल करती है तो पूरे कार्ड का नाम क्या रखा है कार्ड कंटेनर तो कार्ड कंटेनर पर होवर करने से इमेज स्केल कर रही है तो मैंने कहा सिंपल है जैसे मैंने बोला सेम वैसे ही कर लेता हूं मैंने बोला डॉट कार्ड कंटेनर इसके ऊपर जब मैं होव करता हूं तो क्या होता है डॉट कार्ड इमेज जो है वो स्केल कर जाती है तो मैंने यहां पे स्केल करने के लिए बोल दिया मैंने बोला ट्रांसफॉर्म स्केल लेट्स से मैंने 1.2 कर दिया इसको और मैंने कहा कि कितना टाइम लगेगा इस पूरे ट्रांजिशन को होने में ट्रांजीशन ड्यूरेशन लेट्स से मैंने बोल दिया 200 मिली सेकंड चलो ट्राई करते हैं ट्राई करते हैं यूआई पे क्या होगा अब तो मैं गया यहां पे मैं गया बढ़िया स्केल हो रही है ज्यादा हो रही है भैया पर 1.2 ज्यादा हो गया थोड़ा सा तो मैंने 1.1 कर दिया इसको और 1.1 के हिसाब से स्केल करवा के देख लेते हैं एक बार बढ़िया कहीं पर भी कार्ड में जा रहा हूं स्केल कर रही है वेरी गुड बढ़िया सही चल रही है ये बात समझ में आ रही है ये बात समझ में आ रही है आगे देखते हैं और क्या कर सकते हैं इसके अंदर हम अब हमें जो ये कार्ड का टाइटल है इसको स्टाइल करना है ठीक है तो मैंने बोला न्यू गैजेट रिलीजड यहां पर ऐसा दिख रहा है जबकि यहां पर ये बहुत छोटा दिख रहा है ठीक है तो इसको एक बार देख लेते हैं तो मैंने इस कार्ड टाइटल को फटाफट से स्टाइल करने गया मैंने बोला यहां पर मिल गया मुझे कार्ड टाइटल इसको मैंने कॉपी कर लिया और मैंने कहा कि इसे कर दो बेटा यहां पे पेस्ट यहां पर हमने ऐड करना शुरू किया मैंने बोला फॉन्ट साइज इसका कर लेते हैं एक बार फंट साइज मुझे चेंज करना पड़ेगा अभी क्या फंट साइज है अभी बहुत बड़ा दिख रहा है मुझे थोड़ा सा छोटा चाहिए ठीक है तो हम कर रहे हैं कार्ड टाइटल को चेंज और कार्ड टाइटल का फंट साइज लेट्स से मैंने बोल दिया व आरएम चेक करके आते हैं कितना बड़ा आ गया ये बना रही हूं ऐसे आई थिंक कुछ छोटा इस प्रकार दिख रहा है बढ़िया आई थिंक इतना ही चाहिए हमको थोड़ा सा यहां पर मैंने इसका फॉन्ट वेट इंक्रीज कर दिया मैंने बोला फंट वेट और मैंने यहां पर कर दिया 600 रैंडम हिडन ट्राल कर रहे हैं और अपने हिसाब से वैल्यूज चूज कर रहे हैं इस प्रकार दिख रहा है बहुत बढ़िया कलर मैंने इसका चेंज कर दिया मैंने बोला जी कलर जो है इसका मैं ब्लैक रखना चाहता हूं स्टार्टिंग में और मैंने यहां पे एक अपना खुद का वेरिएंट निकाल लिया ब्लैक का कि यार ये वाला ब्लैक चाहिए मुझे ठीक है ये वाला ब्लैक चाहिए अब इतना करने के बाद लेट्स से मैं लाइन हाइट भी चेंज करना चाहूं वो भी कर सकता हूं लाइन हाइट एक बार देख लेते हैं लाइन हाइट हमने कर ली लेट्स से लाइन हाइट मैंने 1.5 आरएम कर ली चेक करते हैं यूआई पे क्या फर्क पड़ता है इससे ठीक है तो इस प्रकार का आपका टेक्स्ट नजर आ रहा है अभी मुझे और आ थिंक इतना काफी है और कुछ मुझे नहीं करना चाहिए ठीक है मार्जिन वार्जिन चेक कर लेते हैं बस एक बार तो मार्जिन आई थिंक थोड़ा सा बढ़ा सकता हूं मार्जिन बॉटम में एक बार मार्जिन बॉटम ऐड कर लेते हैं मार्जिन बॉटम ऐड कर लेते हैं फटाफट मैंने बोला मार्जिन बॉटम वन आरएम करके देखते हैं एक बार क्या होता है वन आरएम किया इतना स्पेस आ गया जबकि मुझे इतना स्पेस नहीं चाहिए था तो मैंने थोड़ा सा कम कर लिया इसको मैंने बोला 0.6 आरएम ठीक है इससे स्पेस इतना हो गया और मुझे इतना स्पेस चाहिए थोड़ा सा और कम कर सकते हैं मैंने कर दिया 0 प 4 आर इससे क्या हुआ इससे इतना होगा मुझे कितना चाहिए थोड़ा सा और कम कर सकते भैया करो ही मत ना फिर 0.3 आरएम अब चेक कर लेते हैं स्पेस इतना है और मुझे कितना चाहिए मुझे इतना ही चाहिए इतना ही चाहिए चलो ठीक है इतना काम हो गया यह हमने संभाल लिया और मैंने बोला बड़ा सिंपल है एक और च ऑब्जर्व करो कि जब भी मैं जाऊंगा इस न्यू गैजेट पर होवर करने तो इसका कलर ब्लू में चेंज हो जाता है जबकि मैं यहां पर होवर कर रहा हूं तो ब्लू में कलर चेंज नहीं हो रहा तो मैंने क्या किया मैंने सिंपल सी एक बात करी मैंने बो बोला के जब भी मैं अ कार्ड टाइटल पे होवर करता हूं मैंने बोला जब भी मैं कार्ड टाइटल पे होवर करता हूं तो उस केस में क्या होता है उस केस में क्या होता है जो भी उसका हाइपर लिंक है उसकी प्रॉपर्टी मैंने चेंज कर दी कि भाई साहब कलर जो है उसका वो ब्लू हो गया ऐसा कुछ कर दिया हमने ठीक है अच्छा ब्लू का भी खुद का वेरिएंट मैं सिलेक्ट करना चाहूंगा कि यार ब्लू भी वो ऐसा वाला ब्लू था चलो एक बार चेक करते हैं यवाई पे अब अगर मैं यहां पे होवर करता हूं तो क्या ब्लू हो रहा है ब्लू तो नहीं हो रहा भैया ब्लू तो नहीं हो रहा कुछ और टेना पड़ेगा कहां पे गलती कर दी हमने भैया उल्टा लिख दिया शायद आपने तो आई थिंक हमने लिखना था कि जब भी मैं कार्ड टाइटल पे होवर करता हूं या फिर मैं ऐसे लिख सकता हूं इसको कि कार्ड टाइटल की प्रॉपर्टी चेंज करनी है जब भी मैं कार्ड टाइटल के ए पे होवर कर रहा हूं तो तब क्या होगा ऐसे चल जाएगा ऐसे भी नहीं बनी बात तो ऐसे कर लेते हैं ऐसे कर लेते हैं मैं ऐसे करता हूं इस एंकर टैग को मैं क्लास प्रोवाइड कर देता हूं तो मैंने क्या बोला अ क्लास मैंने बोला कार्ड टाइटल एंकर तो मैंने बोला जब भी मैं एंकर टैग पर होवर कर रहा हूं जब भी मैं डॉट दिस होवर कर रहा हूं तो उस केस में डॉट कार्ड टाइटल का क्या करना है आपने आपने कलर चेंज कर देना है कलर आपने ब्लू मार्क कर दिया चलो इसे हटा दो तो इस केस में हम चेक करते हैं यई पर जाके क्या हुआ क्या अब मैं जाऊंगा ब्लू हो रहा है हां ब्लू हो रहा है भैया हो रहा है हो रहा है अब सही है अब सही है पहले सही है तो इसका ब्लू का वेरिएंट को मैंने अपने हिसाब से चेंज कर लिया मैंने बोला कि यार मुझे तो ये वाला ब्लू चाहिए ठीक है ये हो गया अगेन मैंने ये होवर वाली गेम भी संभाल ली अब आगे चलते हैं मैंने बोला कि ये जो डिस्क्रिप्शन है ये मुझे संभालना है अगेन मैंने बोला कि थोड़ा टेक्स्ट साइज में डिफरेंस नजर आ रहा है मुझे और कलर में नजर आ रहा है डिफरेंस मुझे ठीक है तो एक बार ये दो चीजें चेंज कर लेते हैं तो मैं गया यहां पे और इसका नाम था क्या नाम था इसका कार्ड बॉडी या कार्ड डिस्क्रिप्शन नाम था कार्ड डिस्क्रिप्शन इसका नाम है और मैंने बोला डॉट कार्ड डिस्क्रिप्शन मैंने बोला डॉट कार्ड डिस्क्रिप्शन के अंदर क्या-क्या चेंज करना है मुझे अ हमने बोला सबसे पहले कलर चेंज करते हैं कलर मैंने मान लिया ब्लैक है ठीक है और ब्लैक के वेरिएंट में थोड़ा हल्का सा वेरिएंट मुझे चाहिए तो ऊपर गया मैंने हल्का सा वेरिएंट सिलेक्ट कर लिया ऐसा कुछ कुछ सिलेक्ट कर लिया ठीक है और चेक करते हैं य प कैसा लग रहा है चेक करते हैं य प कैसा लग रहा है हल्का तो लग रहा है भैया ठीक है और आई थिंक साइज जो है इसका वो भी ठीक ही लग रहा है थोड़ा छोटा कर लेते हैं मैंने बोला फंट साइज थोड़ा छोटा कर लेते हैं फंट साइज मैंने य बोल दिया प से आर चेक कर लेते हैं एक बार यूआई पे बहुत छोटा हो गया भैया ये तो मैंने बोला छोड़ो वन आरएम ही रख लो इसे व आर में रख लो ठीक है तो ये भी हमने संभाल लिया अब इसके आगे बढ़ सकते हैं तो हमने अब तक क्या कर लिया हमने अब तक ये इमेज संभाल ली है यह वाला टाइटल कंटेनर सेमान लिया है अब बारी आती है आपके फुटर कंटेनर यानी ये वाले कंटेनर की अगर फुटर कंटेनर ध्यान से ऑब्जर्व करोगे तो तुहे पता लगेगा कि एक डब्बा हमने इस वाले एक्सट्रीम में रखा हुआ है और एक डब्बा हमने इस वाले एक्सट्रीम में रखा हुआ है तो दो डब्बे मुझे लेफ्ट एक्सट्रीम और राइट एक्सट्रीम में चाहिए तो मैं क्या करूंगा इसको फुटर कंटेनर को एक फ्लेक्स बना सकता हूं जहां पर मैं प्रॉपर्टी डिफाइन कर सकता हूं स्पेस बिटवीन तो एक बार ये फटाफट कर लेते हैं तो मैं गया इंक्स एटीएमएल मैं यहां से फटर कंटेनर का नाम कॉपी करके ले आया मैंने बोला स्टाइल ड सीएसएस यहां परके मैंने कहा स्टाइल ड के अंदर इस प्रकार हमने बोला कि इसको आप एक फ्लेक्स बना सकते हैं और फ्लेक्स की जो डायरेक्शन है उसे आप मार्क कर सकते हैं नहीं नहीं डायरेक्शन नहीं बाय डिफॉल्ट रोही होती है वो तो आप इसको जस्टिफाई कंटेंट कर सकते हैं जहां पर आप कह सक ते हैं स्पेस बिटवीन ठीक है तो इससे दोनों चीजें आपकी लेफ्ट और राइट में आ जाएंगी चेक करते हैं यूआई पे क्या कुछ फर्क पड़ा बढ़िया तो लेफ्ट में आपका अवतार डेट और नाम आ गया राइट में आपका ये टैग आ गया अब थोड़ा-थोड़ा चीजें जो हम बनाना चाह रहे हैं वो बन रही है थोड़ा-थोड़ा आसपास पहुंच रहे हैं एग्जैक्ट तो नहीं बनाया अभी तक पर हां थोड़ा-थोड़ा आसपास पहुंचने की कोशिश कर रहे हैं बढ़िया ये संभाल लिया हमने ठीक है अब आगे चलते हैं फुटर कंटेनर के बाद क्या है तो फुटर कंटेनर के बाद मेरा ऑथर कंटेनर है ऑथर कंटेनर के अंदर मेरा अवतार कंटेनर और इंफो कंटेनर है इन शॉर्ट अगर मैं तुम्हें यहां पर समझाऊं तो यह मेरा ऑथर कंटेनर है इस ऑथर कंटेनर के अंदर दो डब्बे हैं एक डब्बा मेरा यह रहा और एक डब्बा मेरा ये रहा दोनों साइड बाय साइड है तो मैं कह सकता हूं कि फ्लेक्स में क्रिएट कर सकता हूं इस ऑथर कंटेनर को और फ्लेक्स डायरेक्शन रो सेट कर सकता हूं तो मैं गया साइल ड सीएसएस के अंदर और यहां जाके मैं इसका नाम कॉपी कर लाता हूं एक बार ऑथर कंटेनर का मैंने बोला साइल ड सी के अंदर मैं गया मैंने बोला कि इसको मैं मार्क कर सकता हूं कि इसकी डिस्प्ले फ्लेक्स है और मैंने बोला कि इसकी जो फ्लेक्स डायरेक्शन है उसे मैंने सेट कर दिया है रो अगेन बाय डिफॉल्ट भी होती है लिखने की नीड नहीं थी बट फिर भी लिख दिया इसको डिस्प्ले फ्लेक्स सेट कर दिया और इसको मैंने रो सेट कर दिया मैंने बोला जो भी आइटम है उनको वर्टिकली आप सेंटर में प्लेस कर देना ठीक है और एक गैप होगा वो गैप आप मेंटेन करना लेट्स से मैंने वो गैप दे दिया है व आरएम का ठीक है अब चेक करते हैं अगेन इमेज मेरी गायब हो चुकी है इमेज मेरी गायब हो चुकी है क्योंकि उतना स्पेस नहीं है तो एक बार इमेज को वापस लेक आते हैं इमेज को स्टाइल करके तो शुरू करते हैं शुरू कर एक बार देखने की कोशिश करते हैं इमेज कहां है मेरी अगर मैं यहां पर जाऊ और मैं फाइंड आउट करने की कोशिश करूं कि इमेज का कोड कहां है यह रही मेरी बॉडी यह रहा मेरा कंटेनर कंटेनर में यह रहा मेरा मेन कंटेनर मेन कंटेनर में कार्ड कंटेनर कार्ड कंटेनर में हम जाएंगे फुटर कंटेनर फुटर कंटेनर यह रहा ऑथर कंटेनर ऑथर कंटेनर ये रहा थर अवतार तो यहां पर कहीं पर अवतार है जहां पर आपको ये टैग दिख रहा है डॉट ऑथर अवतार कंटेनर पर अभी विजिबल नहीं है इसका साइजिंग वगैरह करनी पड़ेगी उसके बाद जाक विजिबल होगा चलो ठीक है इतनी बात समझ में आई अब चलते हैं फटाफट स्टाइल करने मैंने बोला अगला व्यक्ति कौन है स्टाइल करने का ऑथर अवतार कंटेनर है ठीक है तो ऑथर अवतार कंटेनर को स्टाइल करना फटाफट चलो स्टाइल करते हैं इसको मैंने बोला कि यहां पर ये हो गया इसकी हाइट और विड प्रोवाइड करते हैं पहले तो मैंने बोला हाइट इसकी हमने दे दी 2.5 आरएम लेट्स से और विड्थ इसकी हमने दे दी 2.5 आरएम ठीक है और ओवरफ्लो जो है वो मैंने हिडन मार्क कर दिया कि हिडन होना चाहिए कोई प्रकार का ओवरफ्लो अगर आ रहा है तो एक बार चेक करते हैं इससे क्या फर्क पड़ेगा तो यहां पे ये आ गया ठीक है यहां पर ये आ गया आपका अवतार दिख रहा है मुझे थोड़ा-थोड़ा बहुत बढ़िया और मैं इसमें कैड कर सकता हूं मैं चाहूं तो यहां पे ऑब्जर्व कर सकता हूं कि यहां पर एक सर्कल बन रहा है पूरा का पूरा तो एक सर्कल ऐड कर देते हैं फटाफट तो मैंने बोला कि इसमें आप एक बॉर्डर ऐड कर दीजिए और इसका नाम मैं रख दिया वन पिक्सल सॉलिड ब्लैक चलो तो चेक करते हैं यूआई पे तो ये बन गया अगेन ये पूरा का पूरा आपका स्क्वेयर बन रहा है जबकि मुझे ये एक सर्कुलर फॉर्म में चाहिए ठीक है तो मैंने बोला कि यहां पर बॉर्डर रेडियस आप ऐड कर दीजिए और बॉर्डर रेडियस इसमें आप ऐसे कर दीजिए अ इसको अग लेट्स से मैं ऐसे करूं 50 पर तो क्या होता है चेक करते हैं अगर बॉर्डर 50 कर दी सर्कल बन गया बहुत बढ़िया ठीक है अगेन ये थोड़ा डार्क ब्लैक आ रहा है बॉर्डर इसको थोड़ा सा लाइट कर दो तो मैंने बॉर्डर का ब्लैक कलर को अपने हिसाब से चेंज कर दिया अ मैं यहां पे गया मैंने बोला थोड़ा सा लाइट कलर मुझे चाहिए थोड़ा सा लाइट कलर चाहिए तो मैंने यहां प लाइट कलर ले लिया अब चेक करते हैं अब पहले से ठीक लग रहा है अगेन एक चीज और ऑब्जर्व करोगे तो इस बॉर्डर के पीछे जो बैकग्राउंड कलर आ रहा है वो वाइट है जबकि यहां पर जितने भी बॉर्डर है उन सबके पीछे का बैकग्राउंड कलर कल थोड़ा ग्रे टोन में है तो मैंने कहा ठीक है तो बैकग्राउंड कलर भी मुझे यहां पर चेंज करना पड़ेगा मैंने बोला ब्लैक और ब्लैक की मैं एक टोन लेके आ जाऊंगा जो थोड़ी ग्रेश दिखती होगी बढ़िया ऐसा कुछ कुछ मैं ले आया ठीक है एक बार चेक करते हैं यई पे क्या चेंजेज विजिबल है हां बिल्कुल थोड़ा डार्क कलर है भैया थोड़ा डार्क कलर है अभी भी तो मैं यहां पर गया और मैंने थोड़ा सा और लाइट कर दिया इसको थोड़ा सा और लाइट कर दिया अब चेक करते हैं अब थोड़ा सा लाइट है पर उतना लाइट नहीं हुआ अभी भी मैंने कहा ठीक है थोड़ा और ट्राई करते हैं थोड़ा और ट्राई करते हैं अगेन ये सारी एग्जैक्ट वैल्यूज आपको डिजाइन प्रोवाइड कर तो आपको इतना लोड लेने की नीड नहीं है पर फिर भी पर फिर भी एक बार देख रहे हैं हम अपने हिसाब से टन ट्राल करके अब ठीक है पहले से अब ठीक है ठीक है तो अवतार आपने ऐड कर दिया है ठीक है और अब हम आगे बढ़ सकते हैं हमारे पास यहां पे जोन डो का टेक्स्ट है और यहां पर मेरा ये सितंबर 19 वाली डेट है इसको मुझे स्टाइल करना है फटाफट तो इसको स्टाइल कर लेते हैं तो अगेन यहां पर इसको देखते हैं पहले अ मुझे पता है कि यहां पर इस वाले डब्बे के अंदर जब मैं बात कर रहा था कि यह मेरा पूरा का पूरा ऑथर कंटेनर है ऑथर कंटेनर में ये मेरा पहला डब्बा है इसका नाम ऑथर एव कंटेनर है ये दूसरा डब्बा है इसका नाम है ऑथर इंफो कंटेनर और इसके अंदर ये दो डब्बे दो स्पैन टैग है पहला ये रहा दूसरा ये रहा दोनों एक के नीचे एक है तो ये ऑथर इंफो कंटेनर को मैं फ्लेक्स बना सकता हूं और कह सकता हूं कि फ्लेक्स डायरेक्शन कॉलम कर देना ठीक है ऐसा काम कर सकते हैं हम तो हम गए ऑथर इंफो कंटेनर के अंदर इसके अंदर मुझे ये दो स्पैन नजर आते हैं तो स्टाइल ड स के अंदर जाके मैंने बोला कि यार इसके अंदर ना आप इसको एक फ्लेक्स बना दें और फ्लेक्सस की डायरेक्शन कॉलम सेट कर दें ठीक है इतना काफी है एक के नीचे एक ये आ जाएंगे चलो अब चेक कर लेते हैं यई बै एक बार हां भैया एक के नीचे एक आ गए बिल्कुल आ गए वेरी गुड बढ़िया सही चल रहा है तो ये भी हमने संभाल लिया ये भी हमने संभाल लिया अब इनकी स्टाइलिंग कर लेते हैं ध्यान से देखो तुम्हारा जोन डो जो है इसका कलर थोड़ा ब्लू टाइप है और जो नीचे वाला टेक्स्ट है इसका जो कलर है थोड़ा ग्रे ग्रे वाइप्स आ रही है ठीक है जैसा आपका ये वाला कलर था थोड़ा सा और लाइट है उससे तो एक बार ये देख सकते हैं एक बार ये देख सकते हैं तो अब मुझे क्या करना है मुझे इस टेक्स्ट को जो है ब्लू बनाना है इसको थोड़ा लाइट लाइट ब्लैक बनाना है ठीक है चेक कर लेते हैं जैसे यहां पे ब्लू बना हुआ है और यहां पर लाइट ब्लैक बना हुआ है या ग्रे बना हुआ है जैसे भी है तो अगेन मैं यहां पे जा सकता हूं और सेकंड मैं क्या कर सकता हूं मुझे यहां पर स्पैन टैग मैंने दो दिए हुए हैं लेट्स से मैं यहां पे क्लास प्रोवाइड कर सकता हूं मैं कह सकता हूं कि ऑथर नेम एक तरीका तो मेरे पास ये है कि मैं क्लास सेट कर लूं क्लास के द्वारा स्टाइल कर लूं है ना दूसरा तरीका मेरे पास होगा वो आपको बताता हूं मैं तो मैंने बोला ऑथर डेट ठीक है एक तरीका तो मेरे पास ये है सेकंड तरीका क्या है मैं एनए चाइल्ड सिलेक्टर का यूज कर सकता हूं तो अगर आप चाहो हो तो यहां पर जा सकते हो पढ़ सकते हो एन चा सेलेक्टर के बारे में जहां पर आप कहोगे कि यार इस ऑथर इंफो कंटेनर का पहला चाइल्ड इसको स्टाइल कर लिया ऑथर इंफो कंटेनर का सेकंड चाइड इसको स्टाइल कर लिया ऐसे भी आप कर सकते हैं कोई भी इशू नहीं है ठीक है वापस आते हैं तो मैंने बोला यार मुझे ऑथर नेम को ब्लू कलर का करना है तो मैं यहां पर गया और मैंने बोला कि डॉट ऑथर नेम मैंने बोला जी कलर जो है इसका ब्लू कलर कर देंगे अगेन एग्जैक्ट ब्लू नहीं है वेरिएंट मैं अपने आप सिलेक्ट करूंगा ठीक है मैं यहां पर गया मैंने अपने आप से बोल दिया कि मुझे ये वाला ब्लू कलर चाहिए मैंने बोला डॉट ऑथर डेट करके भी एक मेरे पास क्लास है उसके अंदर मैंने कलर सेट कर दिया मैंने बोला यहां पर मुझे थोड़ा ग्रे स्टोन चाहिए तो मैंने ब्लैक कलर ले लिया और इसके अपने खुद से टोन में निकलूंगा अभी ग्रेश कलर मैंने कहा ठीक है ऐसे मैंने ग्रेश कलर सिलेक्ट कर लिया बहुत बढ़िया तो यूआई पर देखोगे अब तुम्हें ये ग्रे ये ब्लू दिख रहा है और ये ग्रे दिख रहा है ठीक है बढ़िया चल रहा है अभी तक तो लास्ट आते हैं लास्ट आते हैं मेरे पास पेंडिंग है ये टैग वाला पार्ट टेक्नोलॉजी मुझे दिख रहा है जबकि एगजैक्टली किस प्रकार दिखना चाहिए ऐसा दिखना चाहिए तो इसको फटाफट से स्टाइल कर लेते हैं और उसके बाद आगे बढ़ेंगे चलो तो हमने बोला कि चलते हैं यहां पर लास्ट आपका कार्ड टैग कंटेनर तो कार्ड टैक कंटेनर को फटाफट स्टाइल कर लेते हैं और आगे बढ़ते हैं तो मैंने बोला डॉट कार्ड टैक कंटेनर और मैंने बोला यहां पर क्या-क्या चाहिए चलो देखते हैं एक बार मुझे टेक्स्ट का कलर देखना पड़ेगा मुझे बॉर्डर देखना पड़ेगा मुझे बॉर्डर रेडियस देखनी पड़ेगी टेक्स्ट का साइज देखना पड़ेगा ये सब संभालना पड़ेगा तो मैंने बोला लेट्स से फंट साइज की बात कर लेते हैं फंट साइज मैंने बोल दिया लेट्स से 1 आरएम ओके या फिर ऐसे कर लेता हूं 0.8 आरएम चेक कर लेते हैं यई पर और इनका टेक्स्ट इतना है हमारा टेक्स्ट भी आसपास एक छोटा लग रहा है यार व आरएम ही कर लेते हैं हमने यहां पर व आरएम रख लिया चेक करते हैं वैसे कुछ फर्क नहीं पड़ना चाहिए व आम लिख के बट ठीक है छोटा है यार इस व आरम से तो छोटा ही है ख दिया 0.9 आरएम लिख दिया मैंने इसको ठीक है और हमने बोला कि इसमें मुझे एक बॉर्डर भी देना है तो बॉर्डर मैंने दे दिया न पिक्सल सॉलिड ब्लैक ब्लैक का थोड़ा सा हल्का वेरिएंट मैंने यहां पर चूज कर लिया मैंने बो थोड़ा सा हल्का वेरिएंट थोड़ा सा और हल्का थोड़ा सा और हल्का ऐसा मैंने एक वेरिएंट चूज कर लिया मैंने बोला बॉर्डर रेडियस भी चाहिए मुझे तो लेट्स से मैंने बॉर्डर टू पिक्सल की ले ली ठीक है ऐसा कुछ कुछ कर दिया अ इतना काफी है आई गेस और पैडिट मार्जिन वगैरह भी ऐड किया जा सकता है लाइन हाइट भी ऐड कर सकते हैं लेट्स से लाइन हाइट जो है वो मैंने ऐड कर दिया ऐसा 1.3 आरएम रैंडम कुछ वैल्यूज चूज कर रहा हूं उसके अकॉर्डिंग देख रहे हैं कैसे चल रहा है ऐसा टेक्नोलॉजी मुझे दिख रहा है अगेन मुझे से बॉर्डर रेडियस नहीं दिख रहा दोस्त अभी भी बॉर्डर रेडियस तो नहीं दिख रहा मुझे ऐसा करता हूं कि इसको ना मैं हटाता हूं और इसको मैं इसमें चिपका देता हूं स्टाइल ड सीएस फंट साइज आपका आ गया बॉर्डर आपका आ गया बॉर्डर रेडियस हा लिखा ही नहीं भैया आपने कहां से दिखेगी फिर टर रेडियस अब ठीक है अब आया ड़ पैट की मुझे नीड पड़ेगी यहां पर पडि भी ऐड कर लेता हूं फटाफट तो मैं पैंग ऐड कर लेता हूं डिंग 0.25 आरम फ्रॉम टॉप बॉटम और 0.5 आरएम फ्रॉम लेफ्ट राइट चेक कर लेते हैं यई पर कैसा लग रहा है ठीक है अच्छा लग रहा है अच्छा लग रहा है कलर जो है टेक्स्ट का वो भी चेंज करना पड़ेगा थोड़ा सा मुझे ग्रे स्टोन में चाहिए तो मैंने बोला कलर मैंने ग्रे है क्या इनके पास है यार ग्रे तो इनके पास चेक करते हैं यई पर बढ़िया तो इस प्रकार से काम कर रही है चीज अगेन मार्जिन वगैरह भी मुझे ऐड करने पड़ेंगे तो वोह एक बार देख लेते हैं उसके बाद आगे बढ़ेंगे तो मैं बो पूरे फुटर कंटेनर मार्जिन डेड ही नहीं है एक बार टाइटल कंटेनर देख के आता हूं अगेन व सारी सेम प्रॉपर्टी कॉपी पेस्ट कर दूंगा मैं टाइटल क देखने गया टाइटल कंटेनर के अंदर टाइटल कंटेनर के अंदर पैंग 1.5 आरम दी है तो मैंने सेम पैंग 1.5 आरम कॉपी कर ली और सेम मैंने फुटर कंटेनर के अंदर भी ड कर दी कि भाई बराबर यूनिफॉर्म आ जाएगी बढ़िया तो इस प्रकार काम कर अब सुंदर लग रहा है भैया पहले से अब सुंदर लग रहा है मैं सुंदर लग रहा है चलो फिर तैयार हो जाओ एक कार्ड हमारा बिल्कुल सही है एक कार्ड हमा बिल्कुल सुंदर चल रहा है अब ऐसे ही मुझे और कार्ड चाहिए पर मैं ज्यादा मेहनत नहीं करूंगा कि अलग-अलग कार्ड लिखूं मैं एक ही कार्ड को कॉपी पेस्ट कर दूंगा और कहानी खत्म ठीक है तो मैंने क्या किया मैंने इसी कार्ड को कॉपी पेस्ट कर दिया मैंने बोला सेकंड कार्ड मैंने बोला थर्ड कार्ड फोर्थ कार्ड फिफ्थ कार्ड सिक्स्थ कार्ड सेवंथ कार्ड एथ कार्ड आठ कार्ड मैंने ऐड कर दिए हैं अब यूआई पर चेक करते हैं क्या सुंदर लग रहे हैं लग तो रहे हैं भैया लग तो रहे हैं पर अगेन कॉलम तो चार की बात हुई थी भैया चार कॉलम्स की बात हुई थी आपने तो पता नहीं क्या ही दे दिया यह मैंने कहा हां बात तो चार कॉलम की हुई थी पता नहीं ऐसा क्यों आ रहा है यह चलो ठीक करते हैं इसको एक बार ठीक करते हैं एक बार देखते हैं इंस्पेक्ट करते हैं इसको और सारे के सारे कार्ड जो हैं वह एक के नीचे एक आ रहे हैं चलो तो हम गए यहां पे हमने चेक किया हमारा मेन कंटेनर मेन कंटेनर कहां है मेन कंटेनर यह रहा मेन कंटेन में डिस्प्ले ग्रिड मार्क की हुई है गैप 1.5 आरम दे ग्रिड टेंप्लेट कॉलम दिया चार और व एफ आर ठीक है चेक करो यूआई बढ़िया चल गया तो इस प्रकार से चार कार्ड नजर आ रहे हैं अगेन भई अभी उतना अच्छा नहीं लरहा क्योंकि आपकी यहां पर डिफरेंट फोटोज थी यहां पर सारी की सारी सेम फोटोज थी इसलिए आपको थोड़ा अलग लग सकता है ये ठीक है सेकंड जो विड्थ है विड्थ वाइज भी अगर आप चेक करोगे तो यहां पर कम विड्थ ली गई है आपके मेन कंटेनर के द्वारा जबकि यहां पर आप बहुत ज्यादा विड्थ लेके बैठे हो तो मैंने कहा चलो ठीक है एक बार ये भी देख लेते हैं तो मेन कंटेनर कहां है जहां पर हमने 96 वड की विट प्रोवाइड की थी ये रही 95 की दी थी हमने तो यहां पर इसको लेट्स से मैंने बोल दिया 85 तो अब कितनी विड्थ हो गई अब थोड़ा और कम हो गया मैंने बोला और कम चाहिए थोड़ा मैंने बोल दिया 75 ठीक है अब थोड़ा सा आसपास पहुंचे हैं पर थोड़ा और कम कर सकते हैं अभी मैंने बोला 70 हां अब ठीक है थोड़ा और कम कर सकते हैं करना चाहे तो मैंने बोला 66 हां अब ठीक है अब ठीक है ठीक है अगेन थोड़ी एजेस जो है और राउंडेड चाहिए मुझे कार्ड कंटेनर की ठीक है तो मैंने कार्ड कंटेनर की जो एजेस है कार्ड कंटेनर की जो एजेस है उन्हें और और राउंड कर दिया तो मैंने बोला जो भी आपका कार्ड कंटेनर है कार्ड कंटेनर में जो भी आपने बॉर्डर रेडियस दी है उसे मैं बढ़ा के पाच पिक्सल कर देता हूं चेक करते हैं यई प पा पिक्सल कर देता हूं ठीक है मैंने क्या कर दिया कार्ड कंटेनर के अंदर जो भी ओवरफ्लो है उसे हिडन कर दिया मैंने बोला ओवरफ्लो हिडन कर दिया बढ़िया अब सही लग रहा है वो इमेज बाहर निकल र थी ना तो इमेज प्रूड कर रही थी और आपका ये दिख नहीं रहा था ट्स वा मुझे करना पड़ा ये ठीक है आई थिंक अब थोड़ा पहले जैसा लग रहा है अब थोड़ा पहले से लग रहा है ठीक है ओके मैंने बोला बॉर्डर जो है न पिक्सल है ओके और हमने बोला इसको थोड़ा और बढ़ा सकता हूं क्या मैं आठ पिक्सल कर दूं इसको मैं अब अब पहले जैसा लग रहा है ठीक है अब सुंदर लग रहा है तो ये कार्ड्स मैंने क्रिएट कर दिए हैं ठीक है अगेन सब कुछ सुंदर सुशील लग रहा है कोई भी दिक्कत नहीं टेक्नोलॉजी जो है ये आउट जा रहा है एलाइनमेंट वाइज तो हमें याद है फोटर कंटेनर के अंदर हमने जस्टिफाई कंटेंट को स् बटन किया था टेक्नोलॉजी को मुझे नीचे लेकर आना है जैसे यहां पर इन सब में नीचे की तरफ आ रहा है तो मैं क्या कर सकता हूं मैं स्टाइल्ड सीएसएस में जाके जो मेरा फुटर कंटेनर था उस फुटर कंटेनर में जस्टिफाई कंटेंट के बाद देख सकता हूं कि जो अलाइन आइटम्स है ना उसको मैंने फ्लेक्स एंड कर दिया कि एंड में अलाइन करना तो इससे क्या हुआ नीचे आ गया टेक्नोलॉजी ठीक है अब सही चल रहा है अब सही चल रहा है तो इस प्रकार से हमने कार्ड्स क्रिएट कर लिए हैं सब स्केल हो रहा है यह भी बढ़िया है और जब लेट्स से यहां पर मैं क्लिक करता हूं इमेज के ऊपर तो इमेज पर क्लिक करने से यहां पे नए यूआरएल प लेके जाने की कोशिश कर रहा है वेरी गुड फिर मैं यहां पर इस टेक्स्ट पर क्लिक करता हूं तो यहां पर भी न ले जाने की पूरी कोशिश हो र है सही चल रहा है भी कोई दिक्कत नहीं है ठीक है और क्या क्या चेंजेज मुझे करने पड़ सकते हैं इसके अंदर एक बार ऑब्जर्व करते हैं एक बार ब्जर्व करते हैं सब कुछ सही चल रहा है टाइटल बढ़िया लिखा हुआ है डिस्क्रिप्शन बढिया लिखा हु चीज कार्ड सारे के सारे डेड है अच्छे तरीके से मैंने यहां पर इंस्पेक्ट कर दिया एक बार और यह इस प्रकार से बिहेव कर रहा है इस प्रकार से बिहेव कर रहा है ठीक है अगर मैं यही सेम चीज यहां पर कर देता इस वाले यूआई प तो मैं यहां पर ऑब्जर्व करूं तो जैसे-जैसे मैं इसको छोटा करता जा रहा हूं जैसे-जैसे मैं इसको छोटा करता जा रहा हूं वैसे-वैसे नंबर ऑफ कॉलम्स डिक्रीज कर रहे हैं वैसे-वैसे नंबर ऑफ कॉलम्स डिक्रीज कर रहे हैं यहां पे आ खैर खराब होना ही है उसमें कोई इशू नहीं है पर जैसे-जैसे मैं छोटा करता जा रहा हूं तो नंबर ऑफ कॉलम डिक्रीज कर रहे हैं जैसे ऑब्जर्व करते हैं तो ऊपर पिक्सेल ऑब्जर्व करो 600 600 ये आ गया सो लेट्स से हमने बोला 650 पिक्सेल पे मैं दो कॉलम चाहता हूं 650 पिक्सेल में मैं दो कॉलम चाहता हूं तो मैं यहां मीडिया क्वारी लिख दूंगा एक ठीक है मैं यहां पे एक मीडिया क्वेरी लिख दूंगा मैं गया यहां पे अवतार का मेन कंटेनर कहां पे है मेन कंटेनर मेन कंटेनर मेन कंटेनर ये रहा तो मैंने यहां मीडिया लिख दी मैंने बोला रेट मीडिया और मैंने बोला मेन विड्थ इ इक्वल ट 650 पिक्सल लेट से मैंने ले लिया और मैंने यहां पे क्या बोला कि इस केस में क्या करना है इस केस में मुझे चाहिए दो कॉलम चाहिए ठीक है बहुत बढ़िया आगे बढ़ते हैं आगे बढ़ते हैं क्या इशू है एक्सपेक्टेड सीएसएस सीएसएस लिखी है शायद मैंने ठीक है दो कॉलम ऐड कर दिए मैंने और मैं क्या कर सकता हूं अब लेट्स से मैं वापस यहां पे गया तीन कॉलम कब चाहिए मुझे तीन कॉलम मुझे चाहिए लेट्स से 108 पिक्सल प मैंने बोला 1080 पिक्सल जब हो जाए तो तीन कॉलम चाहिए मुझे तो मैंने बोला ट द रेट मीडिया या फर मैं इसे कॉपी कर लेता हूं मैंने इसे कॉपी कर लिया और मैंने बोला जब भी 1080 पिक्सल हो जाए 1080 पिक्सल हो जाए तो उस केस में मुझे तीन कॉलम चाहिए मैंने कहा बहुत बढ़िया और नॉर्मल केस में कितने कॉलम चाहिए नॉर्मल केस में मुझे सिर्फ एक सिंगल कॉलम चाहिए ठीक है और चार कॉलम कब चाहिए होंगे वो चेक कर लेते हैं एक बार चार कॉलम कब चाहिए चार कॉलम कब चाहिए तो मैंने बोला कि जब भी ऐसे 13 40 पिक्सेल हो जाए तो चार कॉलम कर देना तो मैंने अगेन इसे कॉपी कर लिया मैंने अगेन इसे पेस्ट कर दिया मैंने बोला जब भी यह मेरा ऐसा 1340 पिक्सेल हो जाए तो मुझे चार कॉलम दे देना तो ऐसे मीडिया क्वेरी के हिसाब से मैंने डिफरेंट डिफरेंट व्यू पोर्ट विड्थ के हिसाब से अपने नंबर ऑफ कॉलम को चेंज कर लिया ताकि मेरी वेबसाइट रिस्पांस बन जाए अब चेक करते हैं यहां पर क्या हो रहा है अब चेक करते हैं अब चेक करते हैं फटाफट फटाफट तो जैसे ही यहां पर मैं ध्यान से ऑब्जर्व करो इस प्रकार से काम कर रहा हूं तो यहां पर अभी विड्थ 1575 1575 से ज्यादा है तो चार कार्ड नजर आ रहे हैं जैसे मैं छोटा करूंगा तो क्या हो रहा है तो क्या हो रहा है इस प्रकार चीजें काम कर रही है जैसे ही 1350 से कम आ गए तीन का तीन रोज तीन कॉलम्स बन गए ठीक है बाकी कार्ड नीचे शिफ्ट हो गए जैसे इसको और छोटा करूंगा दो कार्ड बन गए जैसे इसको और छोटा करूंगा एक कार्ड बन गया ठीक है तो इस प्रकार से आपने इसको और रिस्पांसिस में थोड़ा सा काम किया है थोड़ा सा काम किया ठीक है अगेन और छोटा करो तो खैर खराब होना ही है इस केस में तो खराब होगा ही कुछ नई चीज नहीं है बट हां ठीक है अगेन यहां पर भी देखो तो यहां पर भी खराब हो रहा है तो तो एग्जैक्ट जो नंबर है कि कहां पर तुम्हें शिफ्ट करना है कहां पर तुम्हारा यूआई ब्रेक करना शुरू कर रहा है वो नंबर तुम्हें चूज करना पड़ेगा मैंने तुम्हें एग्जांपल लेके बता दिया कि 651 रख लिया जैसे मैं होता तो इस पॉइंट पे यानी 724 पे इसको दो कॉलम से एक कॉलम में शिफ्ट करता अगर मैं रिसर्च करके करूं थोड़ा दिमाग लग करूं अभी बस रैंडम करके दिखा रहे हैं आपको ताक समझ में आ जाए या फिर अगर तीन वाला देखोगे तीन में क ना ब्रेक हो रहा होगा तीन में देखो ये वाला जो पॉइंट है अच्छा नहीं लग रहा उतना तो मैं चाहता तो मैं इसको यहां पर ही ब्रेक कर सकता कि 13 15 पे इसको तीन से दो प ले आओ है ना तो और सुंदर लगता है ना इस प्रकार से आप खुद से डिसाइड कर सकते हो कि कहां पर आपका यूआई ब्रेक कर रहा है कहां प आपको चीजें मीडिया क्वेरी में शिफ्ट करनी है समझ में आती है बात बहुत बढ़िया ठीक है और देखते हैं हम क्या कर सकते हैं यहां पे तो मैंने बोला बाकी सब तो मुझे सही लग रहा है कोई ऐसा इशू नहीं है और मैं क्या कर सकता हूं हां ये कर सकता हूं कि अभी मेरी इमेज का साइज इतना आ रहा है ठीक है और जैसे मैं छोटा कर रहा हूं तो मेरी इमेज का भी साइज थोड़ा छोटा कर सकता हूं मैं तो मैंने क्या कर दिया मैंने मीडिया क्वेरी लगा दी इमेज के ऊपर भी इमेज कंटेनर जहां पर था वहां परने इमेज की हाइट सेट की होगी कुछ आरएम ऑब्जर्व करते हैं कहां पर है यह रहा 14 आरम लेट से मैंने सेट किया तो मैंने इसको लेट पहले इंक्रीज कर दिया आ कर दिया ठीक है चेक कर आ में कैसा य नजर आ रहा है ऐसा कुछ नजर आ रहा है ठीक है बढ़िया लग रहा है ठीक है पर मैंने बो जैसे मैं छोटा करूंगा ना इसकी हाइट भी छोटी करना चाहता हूं तो मैंने बोला 16 आरएम नहीं रखना चाहता मैं मैंने बोला इसको मैं 16 आरएम सिर्फ तभी रखना चाहता हूं मैंने बोला रेट मीडिया मैंने बोला मेन विड्थ मिन विड्थ के अंदर मैंने बोल दिया कि भाई जब आपकी हाइट मिन विड्थ ज आपकी विड्थ 768 पिक्सल से यू पोट की विड्थ बड़ी हो तो उस केस में मैं चाहता हूं उस केस में मैं चाहता हूं कि हाइट जो है वो 16 आरएम रहे तो उस केस में मैं चाहता हूं कि हाइट जो है वो 16 आरएम रहे ठीक है पर नॉर्मल केस में चाहता हूं कि हाइट जो 11 आरही ऐसे रैंडम मैंने डिसाइड कर लिया नंबर अब ब्जर्व करते हैं क्या होगा तो अभी 768 से जैसे ही छोटा करूंगा तो देखो इमेज का साइज भी छोटा हो गया है ना तो ये भी आप संभाल सकते थे कि आपने पहले इमेज का साइज बड़ा रखा हुआ है और जैसे ही आप किसी पर्टिकुलर विड्थ से कम होते हैं तो आपने इमेज के साइज को भी छोटा कर लिया मेन मीडिया क्वेरी के द्वारा ठीक है बहुत बढ़िया तो इस प्रकार आप इसको कंप्लीट करते हैं अगेन मैं यहां पर चाहूं तो फोटोस को चेंज कर सकता हूं थोड़ी और चीजें आपको समझ में आ जाएंगी एक बार वो देख लेते हैं चलो चलो चलो मैंने एक बार कर दिया इसको रीलोड ये कर दिया मैंने एक बार बंद बंद इधर आओ बेटा बंद हो जाओ बहुत बढ़िया तो एक बार मैं चाहता हूं इमेजेस में थोड़ा चेंज किया जाए मैंने बोला यहां पर गैजेट्स था सेकंड इमेज मेरे पास लेट्स से हेल्दी थी तो हेल्दी लेट्स से मैं यहां पे जो मेरे पास लिंक है कार्ड के अंदर मैंने बोला कार्ड सेकंड पे चलते हैं अभी ऊपर चलते हैं यह मेरा कार्ड नंबर वन है कार्ड नंबर टू पे पहुंचा मैंने बोल यहां पे मुझे लेट्स से ऐसे टेक्नोलॉजी मैंने लिख दिया तो यहां पे जो इमेज है मेरे पास टेक्नोलॉजी की आनी चाहिए टेक्नोलॉजी की स्पेलिंग ठीक है बहुत बढ़िया तो क्या यहां पे टेक्नोलॉजी की इमेज आ रही है हां आ तो रही है आ तो रही है भैया आ तो रही है इमेज चेंज हो गई है है ना सेकंड जो थी इमेज कौन सी थी सेकंड इमेज न्यूट्रिशन की थी तो मैं जाके फटाफट न्यूट्रिशन वाली जो इमेज है उसके अंदर यहां पर हेल्दी की जगह न्यूट्रिशन लिख देता हूं मैंने बोला न्यूट्रिशन ठीक है थर्ड कौन सी थी थर्ड कौन सी थी थर्ड कौन सी थी मेरे पास ट्रेवल और प्रोडक्टिविटी चलो तो अगले कार्ड में गया वहां पर ट्रेवल की जो इमेज है वो ऐड करनी है तो मैंने यहां पर लिख दिया ट्रेवल जानबूझ के कर रहा हूं ताक आपको अंत में वेबसाइट सुंदर लगे आगे मैं आ गया मैंने यहां पर लिख दिया प्रोडक्टिविटी तो जो एपीआई है वो उस कीवर्ड से मिलती जुलती फोटो आपके लिए ले आएगी प्रोडक्टिविटी आगे मैं आगे मेरे पास क्या चार चीजें हैं माइंड फुलनेस होम डेकोर सस्टेनेबिलिटी पॉजिटिविटी मैंने य पर लिख दिया माइंड माइंड फुलनेस बढ़िया मैंने य पर लिख दिया प्रोडक्टिविटी प्रोडक्टिविटी आई थिंक मैंने पहले वही लिखा था पर चलो कोई बात नहीं प्रोडक्टिविटी यहां मैंने लिख दिया सस्टेनेबिलिटी सस्टेनेबिलिटी सस्टेनेबिलिटी सन एबिलिटी और क्या है पॉजिटिविटी ठीक है तो यह सारी चीजें फटाफट से मैं ऐड कर देता हूं आई थिंक इतना ही था चेक करते य पर तो इस प्रकार से ये मेरे पास अलग-अलग इमेजेस आ रही हैं अब थोड़ा सुंदर लग रहा है भैया पहले से अब पहले सुंदर लग रहा है तो हमारा टारगेट था अ कुछ इस प्रकार की वेबसाइट क्रिएट करना ठीक है और आई थिंक हम इसके बहुत करीब पहुंच चुके हैं आई थिंक हमने ये वेबसाइट क्रिएट कर ली है आप इसको और सुंदर कर सकते हैं अभी अगर आप बिल्कुल एग्जैक्ट सिमलर मिलाने जाएंगे तो दो चीजों की बहुत मेजर डिफरेंस आपको दिखने वाले हैं पहला कि यहां पर फॉन्ट फैमिली जो हमने यूज की है वो डिफॉल्ट फॉन्ट फैमिली यूज की है जबकि यहां पर जो फॉन्ट फैमिली यूज हुई है वो उसका नाम आई थिंक इंटर है तो एक बार अगर आप चाहें तो इसकी फॉन्ट फैमिली को जैसे मैं आपको सिखा रखा है इंपोर्ट करना और एडिशन करना आपके कोड में वो कर सकते हैं हैं और सेकंडरी आप क्या कर सकते हैं सेकंडरी अगेन यहां पर जो वैल्यूज बनी है यहां पर जो ये क्रिएट हुआ है हमें किसे डिजाइनर ने कोई वैल्यू प्रोवाइड नहीं की कितना हाइट आर एम्स लू कितना कलर एग्जैक्ट वेरिएंट कौन सा है एग्जैक्ट फंट साइज क्या लू एग्जैक्ट लाइन हाइट क्या लू तो हमने हिडन ट्रायल करके इस वाली वेबसाइट को रेप्ट करके यहां पर ही बनाने की कोशिश की है ठीक है तो हिडन ट्रायल करके एग्जैक्ट सेम तो नहीं पहुंच पाए हम परट हां बहुत नजदीक तो है बहुत नजदीक तो है ये बात समझ में आती है ये बात समझ में जैसे एग्जांपल देखो कि यहां पर जो कार्ड्स हैं वो थोड़े से छोटे हैं जबकि यहां पर जो कार्ड हैं वो थोड़े बड़े आ रहे हैं इस प्रकार से काम चल रहा है ठीक है तो अगेन आप साइजेस में और हिट एंड ट्रायल करके एगजैक्टली सेम बना सकते हैं उनको इन कार्ड्स के आसपास तो उसमें कोई भी इशू नहीं बट हां जो चीज हमें क्रिएट करनी थी जो बिहेवियर हमें चाहिए था वो बिहेव हमने रिप्लिकेट कर लिया है क्या बात समझ में आती है बहुत बढ़िया तो इस क्लास को यहीं पर समाप्त करते हैं अगेन यहां पर अगेन हमने एक रिस्पांसिस वेबसाइट क्रिएट की है अगर मैं यहां पर साइज इस को चेंज करूं तो यह बहुत अच्छे से बिहेव कर रही है ठीक है बहुत अच्छे से बिहेव कर रही है उसमें कोई भी इशू नहीं है ठीक है सुंदर सुशील लग रही है बट हां अगर आप चाहे तो इसे और अच्छे से बना सकते हैं आई थिंक अगर मैं इमेज का साइज और छोटा कर दूंगा ना तो ये और सुंदर बन जाएगा आई थिंक इमेज के साइजेस हमने बहुत बड़े रखे हुए हैं तो अगर फिर भी ट्राई कर लेता हूं एक बार तो मैंने बोला हाइट को अगर मैं यहां पे ऐसा 7 आरएम रख लूं और यहां पर ऐसे मैं हाइट को ऐसे 12 आरएम रख लूं तो इस केस में शायद और सुंदर बनेगा ठीक है तो देखो और सुंदर बन गए गार्ड्स थोड़े से मैंने बोला कि यहां पर फुटर के नीचे का मार्जिन जो है बहुत ज्यादा लग रहा है मुझे नहीं ठीक ही है आई थिंक हां यह रहा टाइटल कंटेनर और फुटर के बीच का जो मार्जिन है बहुत ज्यादा लग रहा है मुझे आई थिंक इसको हम ठीक कर सकते हैं इसको हम ठीक कर सकते हैं एक बार यहां पर चलते हैं हमने बोला कि हमने पडि असाइन की थ ना इसको पैंग छोटी सी है इसमें कु ज्यादा पडि है नहीं टैग कंटेनर नहीं फुटर कंटेनर में जाओ बेटा फुटर कंटेनर में गया मैं पैडिट से लेट से पडि नहीं देना चाहता तो मैंने बोल दिया जी 0 1.5 आरम बढ़िया बटम से पैट मुझे देनी पड़ेगी पर तो मैंने बोला पैट बॉटम 1.5 आरएम अब चेक करते हैं बढ़िया तो अब वेबसाइट और सुंदर लग रही है अब और सुंदरता की और हम बढ़ चुके हैं राइट अगेन अभी भी तुम्हारे जो यहां का बॉर्डर है ये थोड़ा लाइट कलर का है जबकि हमारा बॉर्डर जो है पूरा ब्लैकिश ब्लैकिश है तो कार्ड कंटेनर का बॉर्डर हम चेंज कर सकते हैं कार्ड कंटेनर का बॉर्डर हमने सॉलिड दिया हुआ है अभी यहां पे इसको और लाइट कर सकते हैं और लाइट की ओर ले जाते हैं इसको ठीक है तो अब ये थोड़ा सा और लाइट हो गया क्या हम और पास पहुंच पाए हां भैया बहुत पास पहुंच गए हैं बहुत ज्यादा पास पहुंच गए हैं ठीक है एक और ऑब्जर्व करो ऑब्जर्व कर सकते हैं ठीक लग रहा है मेरे हिसाब से टेक्नोलॉजी या जो भी हमारे साइज है ये फंट साइज जो है इसका टैग का ये बड़ा लग रहा है मुझे इसको छोटा कर सकते हैं तो मैं यहां पर टैग में गया मैंने फंट साइज बोला कितना है 0.8 कर देते हैं इसको आरम अब ये ऐसा लग रहा है आई थिंक अब ज्यादा अच्छा लग रहा है पहले से आई थिंक और छोटा कर सकते हैं इसको कोई ऐसा इशू नहीं है तो इसको मैंने 0.7 कर दिया अब अब आई थिंक अच्छा लग रहा है नहीं भैया छोटा हो गया ज्यादा तो मैंने बो इसको 0.77 कर दिया अब अब आई थिंक थोड़ा सा आसपास नहीं थोड़ा और बड़ा करना पड़ेगा मैंने बोला 0.79 कर दिया तो ऐसे हिटन ट्रायल कर करके आप इसके पास पहुंच सकते हैं इस प्रकार बॉर्डर थोड़ा सा और रेडियस बढ़ा सकता हूं मैं अगर मैं इसको पाच पिक्सल कर दूं तो शायद और सुंदर लगेगा तो ऑब्जर्व करो अब थोड़ा और पास पहुंच चुके हैं आई थिंक ज्यादा कर दिया थोड़ा सा और कम करना पड़ेगा इसको मैंने चार पिक्सल कर दिया तो इस प्रकार से आपने सुंदर कार्ड्स की वेबसाइट क्रिएट कर ली है और बड़ा मजा आ रहा है इसको देख ने में बड़ा सुंदर सुशील लग रहा है एक बार इंस्पेक्टर एलिमेंट करके रिस्पांस बिहेवियर चेक कर लेते हैं ओए होए होए क्या बात है आ हाहा क्या बात है क्या बात है क्या बात है एक और ची ऑब्जर्व करते हैं ऐसा ऐसा ऐसा ऐसा बन जाता है ये क्या इसमें भी ऐसा कुछ हो रहा है ऑब्जर्व कर लेते हैं तो हम गए यहां पे इसने बहुत सही टाइम पर ब्रेक होने से पहले पहले जैसे यहां पे इन दोनों के बीच में जो गैप एक मेंटेन है वो एक बहुत सही टाइम पे इसने सेकंड यूआई से फर्स्ट यवाई में शिफ्ट किया है जबकि हमने जो शिफ्ट किया है उसमें हमारी डेट ऐसे-ऐसे आ गई राइट इन दोनों के बीच में ये स्पेसिंग कम हो गई तो हमें थोड़ा ये देखना पड़ेगा कि वो ब्रेक किस पॉइंट पर करे तो मैंने बोला कि दो कार्ड मुझे कब चाहिए दो कार्ड मुझे कब चाहिए दो कार्ड में शुरू करूंगा जब इस वाले पॉइंट से यह पॉइंट कौन सा है 935 तो जो मैंने मीडिया क्वेरी लिखी है वहां पर थोड़ा सा चेंज मैं कर देता हूं फटाफट 935 लिख देता हूं पहले वाले दो कॉलम वाले पार्ट के लिए तो मैंने बोला इसके लिए मैंने 768 लिखा हुआ था क्या कहां गया तो मैंने यहां बोल दिया 935 935 ये मैंने रख लिया ठीक है आगे चलते हैं तो मैंने बोला कि यह ब्रेक कर गया बढ़िया और यह दो कार्ड आ गए मैंने बोला तीन कार्ड मुझे कब चाहिए तीन कार्ड मुझे चाहिए तीन कार्ड मुझे चाहिए लेट्स से तीन कार्ड मुझे चाहिए 1380 प ठीक है बहुत बढ़िया तीन कार्ड नहीं तीन कार्ड क है और चार कार्ड मुझे लेट से चाहिए 1600 प ऐसे ही बस रैंडम वैल्यूज रख रहा हूं अकॉर्डिंग देखेंगे कैसा बिहेवियर आ रहा है ठीक है तो देखो ध्यान से ये मेरा एक सिंगल कार्ड है ये सिंगल कार्ड है बहुत बढ़िया बहुत बढ़िया सही चल रहा है सुंदर लग रहा है अभी तक कोई ब्रेक नहीं हो रहा कुछ भी अभी दो कार्ड बन गए अभी भी सुंदर लग रहा है अब दो कार्ड के बाद सही चल रहा है सही चल रहा है सही चल रहा तीन कार्ड बन गए अभी भी सुंदर लग रहा है और ये चार कार्ड है बढ़िया एक बार देखते हैं थोड़ा और इंक्रीज करके इसको ठीक है इस प्रकार और खिसका देता हूं मैं % और इंक्रीज करते हैं इसको बढ़िया सुंदर लग रहा है आई थिंक इसमें थोड़ा और मैं कर सकता हूं कब यहां से 187 से मैं इसको कर लू तो और अच्छा लगेगा ये तो इसको अगर मैं 187 कर लूं तो और सुंदर लगेगा ठीक है तो अब ध्यान से ऑब्जर्व करते हैं ये चार कार्ड है छोटा करा बहुत अच्छा चल रहा है कुछ ब्रेक नहीं हो रहा और छोटा करने जा रहा हूं कु अभी सुंदर लग रहा है कुछ ब्रेक नहीं हो रहा अभी सब कुछ सही है अभी सब कुछ सही है वेरी गुड सही टाइम पर ब्रेक हुआ सही चल रहा है सही चल रहा है सही चल रहा है वेरी गुड सही टाइम पर ब्रेक हुआ तो सही है अब पहले से चीजें सुंदर हो गई है पहले फिर भी थोड़ा सा बेकार लग रहा था पर अब बहुत ज्यादा सुंदर लग रहा है यह देखो सही टाइम पर एकदम आएगा सेकंड आ गया वेरी गुड अगला थर्ड आ गया वेरी गुड इस प्रकार से आपने संभाल लिया तो इस प्रकार से आपने मीडिया क्वेरीज का यूज भी ढंग से कर लिया है और आई थिंक आपको समझ में आया होगा मजा आया होगा कैसे आपने कोड हेल्प ब्लॉग वेबसाइट क्रिएट किया जानबूझ के इसको दो पार्ट में किया मैंने ताकि मैं यहां पर ये सीएसएस वाले पार्ट में आपको अच्छा खासा टाइम दे पाऊं तो एक बार बताना कमेंट सेक्शन के अंदर तो इतना ही था आज की क्लास के अंदर और मिलेंगे आपसे आपके नेक्स्ट क्लास के अंदर कृपया करके हमें जरूर बताएं कैसी लगी आपको आज की क्लास यहां पर बहुत ही इंपोर्टेंट कांसेप्ट लाइक ऑटोफिट मिन मैक्स ग्रिड टेंप्लेट एरियाज इनके बारे में डिस्कशन हम करने वाले हैं कैसे आप ग्रिड का यूज करके रिस्पांसिस डिजाइन क्रिएट कर सकते हैं बहुत आसानी से अब तक ग्रिड के बारे में मेजॉरिटी नॉलेज हमने गेन कर ली है पर यहां पर ग्रिड में एक स्टेप और आगे बढ़कर हम ग्रिड के बारे में और जानने वाले हैं तो अगर आपने लास्ट क्लास देखी होगी तो आपको पता होगा लेक्चर नंबर 30 के अंदर लेक्चर नंबर 29 के अंदर हमने किस प्रकार से प्रोजेक्ट क्रिएट किया था एक बार देखते हैं क्या बनाया था हमने ओपन विद लाइव सर्वर करते हैं तो ये एक प्रोजेक्ट था जो हमने लास्ट क्लास में क्रिएट किया था और आप सभी को याद होगा कि जब हम इसको क्रिएट कर रहे थे तो हमने इसको रिस्पांसिस भी बनाया था अगर आपको याद हो हमने इसको रिस्पांस किस प्रकार बनाया था तो आप बता सकते हैं कमेंट सेक्शन के अंदर बेसिकली हमने यहां मीडिया क्वेरीज का यूज किया था बहुत सारे ब्रेक पॉइंट्स पर मीडिया क्वेरी हमने अप्लाई की थी और दैट्ची करते हैं कोड में किस प्रकार लिखा हुआ है हमने डिसाइड किया कि ऐसा करना 935 पिक्सल पे पे ये कॉन्फिन अप्लाई कर देना 1380 पिक्सल पे ये कॉन्फिन अप्लाई कर देना 187 पिक्सल पे ये कॉन्फिन अप्लाई कर देना क्या भैया इससे आसान कोई तरीका है क्या मैं बहुत कम कोड लिखकर बहुत कम डेवलपमेंट टाइम के साथ बहुत एफिशिएंट वेबसाइट क्रिएट कर सकता हूं तो मैंने कहा हां अभी वही कुछ कीवर्ड्स वही कुछ प्रॉपर्टीज हम डिस्कस करने वाले हैं जिसके द्वारा आपको ये मीडिया क्वेरीज राइट डाउन करने की नीड ही नहीं पड़ती आप बहुत आसानी से सुंदर वेबसाइट और बना पाते हैं ठीक है बहुत बढ़िया तो आगे बढ़ने से पहले एक बार अगर आप चाहे तो आप जा सकते हैं कोड हेल्प चैनल पर वहां पर प्लेलिस्ट सेक्शन के अंदर आपको दिखेगा हमारा वेब डेवलपमेंट का सेक्शन और यहां पर आप सारे की सारी वीडियोस को एक्सेस कर सकते हैं लेक्चर नंबर वन से लेकर लेक्चर नंबर 30 तक और आज हम क्रिएट करें लेक्चर नंबर 31 तो कमेंट सेक्शन में बताना अब तक कैसा चल रहा है समझ में चीजें आ रही है क्या फीडबैक है कैसे और इंप्रूव कर सकते हैं वो सारी की सारी चीजें वापस आते हैं तो मैंने कहा कि अभी मेरी वेबसाइट कुछ इस प्रकार की नजर आ रही है इसको मैंने रेस्पॉन्सिव बनाया हुआ है रेस्पॉन्सिव बनाया हुआ है मीडिया क्वेरीज का यूज करके पर मैंने बोला मैं इसको और कम कोड के साथ क्या से बिहेवियर अचीव कर सकता था जवाब है हां तो फटाफट से एक बार चलते हैं और समझते हैं कैसे तो आ जाओ कोड वाइज चलते हैं सीधा कोड में डीप डाइव करते हैं और उसके बाद चीज समझ में और अच्छे से आने लग जाएंगे लेक्चर नंबर 31 पे चलते हैं यहां पर मैंने एक फाइल क्रिएट की मैंने बोला इक्सड एटीएमएल एक बॉयलर प्लेट कोड मैंने ऐड कर दिया मैंने यहां पर टाइटल में डाल दिया रिस्पांसिस ग्रिड डिजाइन बहुत बढ़िया यहां पर हम आए हमने बोला कि चलो ग्रिड का एग्जांपल चाहिए तो एक कंटेनर क्रिएट कर लो ठीक है भैया कर लिया और ऐसे कर लो यहां पे कुछ आइटम्स क्रिएट करो लेट्स से मैंने आइटम्स क्रिएट कर ली यहां पे अ मैंने कर दी 16 आइटम्स क्रिएट कर दी चलो ठीक है यहां पर मैं इसका नाम ऐड करता हूं ए बी सी डी ई एफ जी एच आई जे के एल एम प ठीक है तो ये मैंने सारे के सारे आइटम क्रिएट कर दी और फटाफट चलते हैं हमारी स्टाइलिंग के अंदर तो यहां पर लेट्स से मैंने स्टाइल टैग का यूज कर लिया स्टाइल टैग का यूज करके मैंने यहां बोला कि यह मेरा कंटेनर है और कंटेनर कॉन्फिन मैंने यहां पर ऐड कर दी कंटेनर मुझे ग्रिड में चाहिए तो मैंने बोल दिया इसको डिस्प्ले ग्रिड मार्क कर दिया एक गैप मैंने ऐड कर दिया न आरई एम का और यहां पर जो मेरी आइटम्स हैं जो मेरी आइटम्स हैं उनको फटाफट मैं लिख देता हूं कॉन्फिन वाइज तो मैंने कहा जितनी मेरी आइटम्स है मैं क्या करना चाहता हूं अ लेट्स से मैंने बोल दिया इनका एक बॉर्डर मैं ऐड करना चाहता हूं तो मैंने बॉडर बोल दिया ऐसे फाइ पिक्सल सॉलिड ब्लैक ऐसा लिख दिया मैंने ठीक है और लेट्स से कंटेनर का भी मैं कुछ बॉर्डर या लेट्स से बैकग्राउंड कलर ऐड करना चाहता हूं तो मैंने बोला यहां पर मैं करना चाहूंगा ब्लैक कलर अपना खुद का एक ब्लैक का वेरिएंट मैंने सिलेक्ट कर दिया कि मुझे एग्जैक्ट ब्लैक का कौन सा वेरिएंट चाहिए तो मैंने ये कर दिया और मैंने कहा यहां पर भी मैं कुछ बैकग्राउंड कलर सिलेक्ट करना चाहूंगा लेट्स से मैंने ब्लू सिलेक्ट कर दिया ब्लू का अपना खुद का वेरिएंट में सिलेक्ट करूंगा कि यार मेरे को तो कुछ कुछ कुछ कुछ इस टाइप का चाहिए ठीक है अब फटाफट इसको एक बार लाइव सर्वर के द्वारा रन करते हैं तो मैंने बोला ओपन विद लाइव सर्वर देखते हैं किस प्रकार चीज नजर आ रही है ठीक है बढ़िया ठीक है उतना सुंदर नहीं है पर चलो बात समझ में आती है इसको और सुंदर बनाने के लिए हम क्या कर सकते हैं क्या कर सकते हैं मैंने बोला कि चलो कुछ कॉन्फिन ऐड करते हैं हम कोड में गए हमने कहा कि हमारी जो बॉडी टैग है बॉडी टैग के अंदर मैंने कह दिया जी आपकी जो विड्थ है वो मैंने दे दी 100% और आपकी जो हाइट है वो मैंने दे दी 100% और जो डिफॉल्ट हम अच्छी प्रैक्टिसेस यूज करते हैं यूनिवर्सल सेक्टर का यूज मैंने किया मैंने बोला मार्जिन जीरो कर देना बेटा पैट भी जीरो कर देना और बॉक्स साइजिंग को बॉर्डर बॉक्स कर देना बढ़िया यूआई चेक करते हैं कैसा लग रहा है कुछ कुछ ऐसा लग रहा है ठीक है मैंने कहा एक पैट मुझे यहां पर चाहिए होगी पर उसको करने से पहले एक बार इसकी विड्थ सेट कर देते हैं कंटेनर की मैंने कहा इसकी विड्थ 100% कर देना और इसकी हाइट इसकी हाइट भी 100% कर देना और एक पैट में जरूर ऐड करना चाहूंगा तो मैं लेट्स से 4 आरई एम की पैटिंग सेट कर दी चेक करते हैं सुंदर लग रहा है पहले से तो सुंदर लग रहा है कोई भी इशू नहीं है ठीक है चलो थोड़ा सा और इसको अच्छा कर सकते हैं क्या मैंने कहा कि लेट्स से जो मेरे आइटम्स है उसमें टेक्स्ट कलर वाइट देता हूं तो मैंने यहां बोला कि जो भी मेरा टेक्स्ट का कलर है इसको वाइट कर दो अब दिखाओ लेट्स से मैंने बॉर्डर भी थोड़ा कम कर दिया म तीन पिक्सल का बॉर्डर चाहिए ज्यादा मोटा लग रहा है यहां पे बहुत बढ़िया इस प्रकार कुछ पैडिट भी मैंने यहां पर आइटम्स के अंदर ऐड कर दी मैं अभी बस सुंदर बनाने की कोशिश करहा हूं ताकि तुम्हें दिखने में थोड़ा सा अच्छा लगे लेट्स से 1 आरएम की पैट मैंने ऐड कर दी आईडिया तो यहां पे कुछ कुछ समझ आ रहा है इस प्रकार से हमारा पूरा का पूरा यूआई नजर आ रहा है अभी लेट्स से आई थिंक मैंने थोड़ी ज्यादा आइटम्स बना दिए तो ये लेट्स से चार पांच आइटम को मैं कम कर देता हूं और मैंने बोला यूआई कैसे दिख रहा है अब ठीक है अब ठीक है ठीक है तो ये मेरा यूआई है जहां पर मैंने ग्रिड क्रिएट किया हुआ है और इस ग्रिड के अंदर मल्टीपल आइटम्स मुझे नजर आ रही है ठीक है ये हम जानते हैं हमें पता था कंटेनर बना बनाते कैसे हैं पता आइटम कैसे बनाते हैं और कैसे मैं ग्रिड में कन्वर्ट कर सकता हूं ये सब मुझे पहले से आता था मैंने सिखा दिया लास्ट क्लास में आपको बहुत बढ़िया अब यहां पर रिस्पांसिस किस प्रकार बनेगा ये लेट्स से मैंने यहां पर कुछ नंबर ऑफ कॉलम सेट कर दिए लेट्स से मैं यहां पर कंटेनर के अंदर गया और कंटेनर के अंदर मैंने मार्क कर दिया कि मेरे को कुछ नंबर ऑफ कॉलम्स चाहिए मैंने बोला कि मेरे को तीन कॉलम चाहिए वन एफआर साइज के तो इससे क्या होगा इससे क्या होगा इससे इस प्रकार का बन जाएगा ये इससे इस प्रकार का आपका यूआई बन गया लेट्स से मैं इसको एक बार चेक करूं इंस्पेक्ट करूं और इसको अगर मैं रिस्पांसिबल कि नहीं चेक करूं तो तो ठीक है साइज छोटा हो रहा है पर यार मैं कुछ ऐसा बिहेवियर चाहता हूं जो सेम मैंने कोड हेल्प ब्लॉक्स में देखा था कि जब मैं इसको इंस्पेक्ट कर रहा था और जब यहां पर साइज चेंज होता था आपके व्यू पोर्ट का आपकी स्क्रीन विड्थ का तो अकॉर्डिंग ये सारे के सारे कार्ड एडजस्ट कर रहे थे नंबर ऑफ कॉलम डिक्रीज कर रहे थे विड्थ कम होने पे और नंबर ऑफ कॉलम इंक्रीज कर रहे थे विट ज्यादा होने पे तो सेम बिहेवियर मैं चाहता हूं यहां पे जबकि यहां पे क्या हो रहा है कि चाहे मैं स्कन विट बढ़ाऊ या स्कन घटाओं नंबर ऑफ कॉलम रिमन सेम शुरू में भी तीन ही कॉलम है और एंड में भी तीन ही कॉलम है तो यहां पर आपका रूल आता है मिन मैक्स फंक्शन का और ऑटोफिट प्रॉपर्टी का तो देखते हैं क्या होता है तो मैंने कहा अगर इसी चीज को अगर इसी यूआई पर मैं ग्रेड टेंप्लेट कॉलम को कमेंट कर दूं और मैं सिंपल सा जाके कह दूं कि भाई जीटीसी और मैंने यहां पर कह दिया कि कितने कोरम चाह ते हैं मैंने बोला मुझे नहीं पता आप अपने हिसाब से देख लेना तो मैंने ऑटो फिट मार्क कर दिया कि भाई ऑटो फिट कर दो और कितने साइज का आपका कॉलम होना चाहिए मैंने कहा मैं रेंज देता हूं उस रेंज के हिसाब से अकॉर्डिंग करते रहना तो मैंने मिन मैक्स फंक्शन का यूज कर लिया और मैंने बोला कम से कम मेरे कॉलम का साइज 200 पिक्सल होना चाहिए और ज्यादा से ज्यादा आप उसको लेट्स से 500 पिक्सेल कर सकते हैं तो यहां पर मैंने एक रेंज प्रोवाइड कर दी मेरे कॉलम की विड्थ के लिए देखो मैंने कॉलम के लिए प्रॉपर्टी सेट की है तो तो मैंने कहा मेरी कॉलम की विड्थ जो है वो 200 पिक्सेल कम से कम हो सकती है इससे कम नहीं हो सकती और 500 पिक्सेल ज्यादा से ज्यादा हो सकती है और नंबर कितना है कॉलम्स का ऑट ऑ फिट अपने हिसाब से देख लेना यानी स्क्रीन में जितनी विड्थ है लेट्स से स्क्रीन में तुम्हारे पास 2000 पिक्सल की विड्थ है तो ऑटो फिट यहां पे क्या करेगा 500 पिक्सेल कॉलम बनाना है चार कॉलम अपने आप बना देगा दोबारा समझते हैं गैप को अभी रिमूव करके बता रहा हूं मैं तुम्हें मैंने कहा लेट से स्क्रीन के अंदर तुम्हारे पास 2000 पिक्सल की विड्थ है और तुम्हें पता है मैक्सिमम तुम्हारा एक कॉलम 500 पिक्सल ले सकता है तो 2000 504 यानी चार कॉलम आपके बन सकते हैं तो मिन मैक्स आपको एक रेंज प्रोवाइड करता है जो भी आप कॉलम के लिए या रो के लिए प्रॉपर्टी सेट कर रहे हैं कि भाई इस रेंज के बीच में आपका जो आइटम चाइल्ड आइटम है वो रिवॉल्व करेगा और कितने रोज या कितने कॉलम बनाने हैं अकॉर्डिंग स्क्रीन के विड्थ के हिसाब से डिसाइड कर लेना यूजिंग ऑटोफिट प्रॉपर्टी चेक करते हैं यवाई पे समझ में आया अभी यह सब अभी ये सब किस कितने विड्थ के हैं एक बार चेक करते हैं 500 आपको दिख रहा हो 500 बा 56 तो 500 का है ये ठीक है अगेन अगर मैं छोटा करूंगा इस परर काम कर रहा है बड़ा करूंगा तो ये देखो बढ़ता जा रहा है राइट ऐसे बढ़ गया लेट्स से मैं इसको 50 पर कर दूं और ध्यान से देखूं अब लेट्स से मैं इंक्रीज करूंगा तो देखो जैसे-जैसे स्क्रीन विड्थ बढ़ती जा रही है और आप अकोमोडेट्स तो और कॉलम बनते जा रहे हैं देखो और बढूंगा और कॉलम बन जाएंगे और करूंगा और कॉलम बन जाएंगे ठीक है तो ये बात समझ में आती है पर जैसे ही स्क्रीन की विड्थ कम होती जाएगी ये अपने आप नीचे नीचे नीचे नीचे आ जाएगा देखो दिखने में कितना सुंदर लग रहा है अगर यही सेम चीज मैंने इन कार्ड्स के साथ की होती तो शायद जो ये वाला पॉइंट आ रहा है शद तो ये वाला पॉइंट आ रहा है अी दिखाता हूं एक पॉइंट कहां गया कहां गया कहां गया ये वाला पॉइंट हां पे कार्ड बहुत ही ज्यादा बड़ा लग रहा है अजीब सा लग रहा है ये वाला पॉइंट आता ही नहीं अगर यही सेम चीज रेप्ट मैंने यहां पर की होती ऑटोफिट और मिनी मैक्स की बात कर रहा हूं मैं तो सेम चीज अगर आपने वहां पर भी की होती आपके कोड हेल्प ब्लॉगस वेबसाइट के अंदर तो वहां पर आपका यूआई और सुंदर बन सकता था तो देखते हैं एक बार वहां पर ट्राई करते हैं करने का मैंने कहा अभी मेरा कार्ड की विड्थ इतनी है और एक बार देखता हूं एक बार देखता हूं के कितनी विड्थ सुंदर लगती है तो मैंने बोला एक बार चेक कर लेते हैं आई थिंक इतनी विड्थ जो है वो सुंदर है एक बार मैं चेक कर लेता हूं कितनी विड्थ आ रही है यहां पर कार्ड की यह आ गई भैया आपकी देख नहीं पा रहा मैं देख नहीं पा रहा आ जाओ बढ़िया 349 350 पिक्सेल के आसपास की विड्थ है इसकी ठीक है तो मैं फटाफट गया पुराने वाले कोड के अंदर index.htm styles.css मैंने बोला जो तुमने मीडिया क्वेरी ऐड किया ना एक बार ऐसा करो इन सब को कमेंट कर दो एक बार इन सबको कमेंट कर दो और ऐसा करो जो भी तुमने ग्रिड टेंप्लेट कॉलम किया था ना इसको भी कमेंट कर दो अब मैं तुम्हें बताता हूं कैसे करना है तो मैंने बोला ग्रिड टेंप्लेट कॉलम्स और मैंने बोला रिपीट मैंने बोला ऑटो फिट कर देना ठीक है ऑटो फिट तुमने कर दिया और मैंने कहा कि जो भी मिन मैक्स है जो भी मिन मैक्स है उसकी रेंज बता दो तो मैंने कहा कम से कम मुझे लेट्स से 350 पिक्सल की विड्थ तो चाहिए ही चाहिए और और क्या कर सकते हैं कम से कम मुझे इतनी विड चाहिए और ज्यादा से ज्यादा मुझे कितनी विट चाहिए लेट्स से ज्यादा से ज्यादा मैंने कह दिया मुझे 400 पिक्सल बट चाहिए इस प्रकार से मैंने एक रेंज सेट कर दी कि इस रेंज के बीच मेरा कार्ड रिवॉल्व करेगा अब लेट्स से मैं यहां पे आके इसको ओपन विद लाइव सर्वर कर दूंगा तो कैसे लगेगा कुछ ऐसा नजर आ रहा है सुंदर लग रहा है सुंदर लग रहा है अगन इंस्पेक्ट करते हैं तब अच्छे से समझ में आएगा तो यहां पे देखो अब अगर मैं इसका साइज इंक्रीज कर दूं तो इस प्रकार कार्ड जा रहे हैं ठीक है पर जैसे ही मैं इसका साइज कम करूंगा जैसे ही मैं साइज कम करूंगा जैसे ही मैं साइज कम करूंगा आई थिंक बहुत यूनिफॉर्म लेआउट अब तुम्हें थोड़ा समझ में आ रहा है जस्टिफाई कंटेंट सेंटर करना पड़ेगा बाकी सब कुछ ठीक है ठीक है जस्टिफाई कंटेंट सेंटर कर देंगे तो चीजें सेंटर में अलाइन होनी शुरू हो जाएंगी बहुत बढ़िया क्या बात समझ में आती है एक बार चेक करते हैं ग्रिड के अंदर जस्टिफाई सेंटर कर सकते हैं कि नहीं कर सकते उसके बाद आगे बढ़ेंगे मैंने बोला मेन कंटेनर कहां है मेरा मेरा मेन कंटेनर ये रहा अब मैंने यहां पे जाके कह दिया जस्टिफाई कंटेंट सेंटर अब चेक करते हैं यूआई पे कैसे लग रहा है मजा आ रहा है अब आया मजा अब लग रहा है सुंदर अब लग रहा है सुंदर अब लग रहा है सुंदर गिनती की दो लाइन मैंने ऐड की है और जो मैंने इतना एफर्ट मारा था कि इतने पिक्सेल पे ये कर दो इतने पिक्सेल पे ये कर दो इतने पिक्सेल पे ये कर दो वो सारा एफर्ट हमने बचा लिया हमने बोला कि इस रेंज के अंदर आपको रिवॉल्व करना है ये आपको ऑटो फिट करना है और जस्टिफाई कंटेंट सेंटर करके आपने सेंटर में प्लेस करा दिया बहुत बढ़िया तो इस प्रकार आपने सीखा कैसे आप बिना मीडिया क्वेरीज के भी अपने डिजाइन को रिस्पांसिस बना सकते हैं तो यह बात मैं समझ में आ गई मुझे समझ में आया ग टेंपलेट कॉलम के अंदर मैं ऑटो फिट का यूज़ कैसे कर सकता हूं और मिन मैक्स का यूज़ कैसे कर सकता हूं एक और कीवर्ड होता है ऑटो फिल उसको भी आपको एक बार पढ़ना है अपने हैंड से होमवर्क में लेना और मुझे बताना ऑटो फिल में और ऑटो फिट में क्या डिफरेंस होता है कमेंट सेक्शन के अंदर ठीक है तुम वैसे बोलते तो बहुत हो भैया अ कंटिन्यू कर दो सीरीज रोज वीडियो डाला करो ये करो वो करो एक बार लास्ट वीडियो को जाके व्यूज देखना और मुझे बताना कि अच्छा पढ़ना होता है तुम्हें लग तो नहीं रहा लास्ट वीडियो को देख के तो अगर थोड़ा सा तुम मुझसे चाहते हो कि मैं कंसिस्टेंट रहू मैं रोज वीडियो डालूं तो मैं तुमसे चाहता हूं कि तुम कमेंट्स में आके बताओ तुम कैसा फील कर रहे हो क्लासेस को लेकर क्या समझ में आया क्या समझ में नहीं आया जो होमवर्क दे रहा हूं उसके रिप्लाई कमेंट सेक्शन में दो ठीक है अगर कुछ भी नहीं कर सकते तो समझ में आया तो सिंपल जाके लिख सकते हो अंडरस्टूड प्लस प्लस बस खत्म इतना कर देना ठीक है चलो थोड़ा जोश दिखाना पड़ेगा ना मित्र अगर तुम मेरे से चाहते हो तो मैं भी तुमसे कु जोश थोड़ा चाह होगा चलो यह बात समझ में आई हमने यह कंप्लीट कर लिया और हमारा यूआई कुछ कुछ इस प्रकार का नजर आ रहा है एक बार लेक्चर 31 को मैं ओपन विद लाइव सर्वर कर देता हूं और मैंने कहा ठीक है ऐसा मेरा यूआई नजर आ रहा है सुंदर है सुंदर है अच्छा लग रहा है रिस्पांस यूआई मैंने क्रिएट कर लिया है कोई भी इशू नहीं है बढ़िया सुंदर सुल लग रहा है मजा आ गया मजा आ गया मजा आ गया ठीक है यह बात समझ में आती है यह बात समझ में आती है अब इसके बाद मैं क्या पढ़ने वाला हूं अब मैं पढ़ने वाला हूं ग्रिड टेंप्लेट एरियाज के बारे में ठीक है ग्रिड टेंप्लेट एरियाज के बारे में पढ़ने वाले हैं अगर आपको को याद हो जो हमने सीएसएस ट्रिक्स का डॉक्यूमेंटेशन पढ़ रहे थे लेक्चर नंबर 29 के अंदर तो उस डॉक्यूमेंटेशन ग्रिट एरियाज का भी एक पर्टिकुलर टॉपिक था तो अभी हम उसके बारे में ही पढ़ने वाले हैं ग्रिड टेंप्लेट एरियाज चलो ठीक है यह बात यह बात समझ में आती है आपको अगर थोड़ा सा याद हो तो आपको ऐसा कुछ कुछ धुंधली यादें आ रही होगी कि आपने ग्रिड के द्वारा एक लेआउट क्रिएट किया था ग्रेड के द्वारा आपने एक लेआउट क्रिएट किया था जहां पर आपने सीखा था कैसे आप स्पैन कर सकते मल्टीपल मल्टीपल कॉलम में इस प्रकार का वो लेआउट था कि आपने बोला कि यह रहा मेरा हेडर और आपने बोला था कि यह रहा मेरा फुटर और यह रहा मेरा साइड बार और यहां पर मैंने कुछ कंटेंट रखा हुआ है कंटेंट वन और यहां मैंने कंटेंट टू रखा हुआ है और यहां मैंने कंटेंट थ्री रखा हुआ है ऐसा ही यवाई हमने क्रिएट किया था अगर आपको धुला धुला याद हो तो ठीक है मैं एक बार यहां फटाफट राइट डाउन कर देता हूं सारे के सारे नाम मैंने कहा था कि ये आपका हेडर है मैंने कहा था कि ये आपका फुटर है मैंने कहा था कि ये आपका साइड बार है मैंने कहा था ये कंटेंट वन है ये कंटेंट टू है और ये कंटेंट थ्री ऐसा कुछ क्रिएट किया था हमने कैसे किया था भैया क्रिएट ये भैया हमने क्या किया था हमने बोला था कि मेरे पास टोटल एक दो तीन कॉलम है और मेरे पास टोटल एक दोती चार रोज हैं तो मैंने कहा था तीन कॉलम बनाओ मैंने कहा था चार रोज बनाओ फिर मैंने इसके लिए बताया था कि ग्रिड कॉलम स्टार्ट क्या है ग्रिड कॉलम एंड क्या है ठीक है फिर मैंने इसके लिए बताया था कि ग्रिड रो स्टार्ट क्या है ग्रिड रो एंड क्या है फिर इसके लिए बताया बताया था ग्रिड कॉलम स्टार्ट क्या है ग्रिड कॉलम एंड क्या है इसके लिए बताया था ग्रिड कॉलम स्टार्ट क्या है और ग्रिड कॉलम एंड क्या है तो मुझे इन चारों ब्लॉक्स के लिए 1 दोती च अलग से डिफाइन करना पड़ा था कि ये कहां से शुरू हो रहे हैं कहां पे खत्म हो रहे हैं कौन सी रो शुरू हो रहे हैं कौन सी रो पे खत्म हो रहे हैं कौन से कॉलम से शुरू हो रहे हैं कौन से कॉलम पे खत्म हो रहे हैं क्या ऐसा ही कोई लेआउट मैं और आसान तरीके से बना सकता हूं मैंने कहा हां मैंने कहा हां ध्यान से ऑब्जर्व करना ध्यान से ऑब्जर्व करना बड़ा प्यारा कांसेप्ट आने वाला है इसको जूम आउट करता हूं एक बार मैंने बोला ध्यान से देखो अगर इस पूरे के पूरे लेआउट को मैं 2d मैट्रिक्स में कन्वर्ट कर दूं तो भैया कैसे बेटा ऐसे देखो तो मैंने बोला अगर ध्यान से ऑब्जर्व करोगे तो कितने कॉलम कितने रो दिख रहे हैं भैया तीन कॉलम चार रोज तो मैंने बोला ये रहा पहला कॉलम ये रहा दूसरा कॉलम ये रहा तीसरा कॉलम रोज कितनी है चार भैया ये रही पहली रो ये रही दूसरी रो ये रही तीसरी रो और चौथी रो बढ़िया एक बार नाम राइट डाउन करो सबके थोड़ी कंफ्यूजन कम हो जाएगी इसका नाम कर दिया रोव इसका नाम कर दिया रोटू इसका नाम कर दिया रो थ इसका नाम कर दिया रो 4 इसका नाम कर दिया कॉलम वन इसका नाम कर दिया कॉलम टू इसका नाम कर दिया कॉलम थ्री अब अगर मैं बोलूं कि इस डी मैट्रिक्स में डिफाइन करो कहां-कहां पर कौन आ रहा है तो मैंने बोला पहला कॉलम दूसरा कॉलम तीसरा कॉलम तीनों में हेडर ही आ रहा है तो मैंने यहां पर लिख दिया हेडर आ गया हेडर आ गया हेडर आ गया बहुत बढ़िया मैंने बोला यहां पे भया साइड बार आ रहा है कंटेंट वन आ रहा है कंटेंट वन आ रहा है साइड बार आ गया कंटेंट वन आ गया कंटेंट वन आ गया यहां पे भी साइड बार आ रहा है कंटेंट टू आ रहा है कंटेंट थ्री आ रहा है साइड बार आ रहा है कंटेंट टू आ रहा है कंटेंट थ्री आ रहा है फुटर आ रहा है फुटर आ रहा है फुटर आ रहा है फुटर आ रहा है फुटर आ रहा है फुटर आ रहा है अगर आपने ये 2d मैट्रिक्स बना लिया तो आप ये लेआउट भी बना पाएंगे तो अब हम ग्रिड टेंप्लेट एरिस कांसेप्ट इस मैट्रिक्स के थ्रू समझने वाले हैं मैंने सिंपल सी बात बोली आप बस मैट्रिक्स के अंदर डिफाइन कर रहे हैं कि कौन सा कॉम्पोनेंट कहां पर आने वाला है और इन टर्न आप यूआई पर उसे देख पा रहे हैं कि अच्छा ये तो हमने बना लिया तो जहां पर आपको अलग से सबके लिए प्रॉपर्टी डिफाइन करनी पड़ी कि इसके लिए ऐसा करो ग्रिड कॉलम स्टार्ट वन रखो ग्रिड कॉलम एंड फोर रखो इसके लिए भी ग्रिड कॉलम स्टार्ट वन रखो ग्रिड कॉलम एंड फोर रखो इसके लिए ग्रिड कॉलम स्टार टू रखो ग्रिड कॉलम एंड फोर रखो इसके लिए ग्रिड रो स्टार टू रखो ग्रिड रो एंड थ्री रख दो ऐसा आपने क्रिएट किया था अब वो डिफिकल्टीज ही हमने हटा दी है हमने बोला कि आपको यह तो पता ही है आपको सबको ये तो पता ही है कि चीजें कैसे काम कर रही होंगी यहां पे राइट तो आपको पता है कि यहां पे एक कॉलम ये है दूसरा कॉलम ये है तीसरा कॉलम ये है पहली रो खत्म हो गई यहां पे दूसरी रो खत्म हो गई यहां पे तीसरी रो खत्म हो गई यहां पे तो यहां पे आपने फाइंड आउट कर लिया कि भाई पहले सेल में हेडर नजर आ रहा है दूसरे सेल में भी हेडर नजर आ रहा है तीसरे सेल में भी हेडर नजर आ रहा है तो हेडर हेडर हेडर लिख दिया पहले सेल में साइड बार नजर आ रहा दूसरे सेल में कंटेंट ब नजर आ रहा है तीसरे सेल में भी कंटेंट ब नजर आ रहा है लिख दिया साइड बार कंटेंट वन कंटेंट वन पहले सेल में साइड बार नजर आया दूसरे सेल में c2 तीसरे सेल में c3 साइड बार c2 c3 पहले सेल फुटर दूस साल फुटर तीस साल फुटर फुटर फुटर फुटर तो आपने अपने दिमाग में ये 2d मैट्रिक्स बना दिया और जैसे ही आपने डी मैट्रिक्स बनाया आप ये यूआई भी क्रिएट कर पाएंगे सवाल है कैसे मैंने कहा ऐसे आओ दिखाएं आओ तुम्हें टेंपलेट एरिया से सिखाते हैं ये छोटे से एग्जांपल के थ्रू तो हमने कहा चलो फटाफट कोड की ओर और हमने यहां पर लिख दिया 31 के अंदर एक फाइल क्रिएट कर दी एरियाज ड क्रिएट कर दी 12 मैंने लिख दिया ए बी सी डी ई एफ जी एच आई जे के एल बढ़िया तो ये सारी आइटम्स आ गई फटाफट मैं यहां पर इनकी स्टाइलिंग कॉन्फिन ऐड कर देता हूं अलक फाइल में कौन जाएगा मित्र दैट्ची उसको ब्लैक दे दो ब्लैक की शेड मैं अपने आप सिलेक्ट करके लाऊंगा ये लो ये वाली शेड चाहिए मुझे और मैंने कहा आइटम्स के लिए फटाफट एक बार कॉन्फिन ऐड करो एक बैकग्राउंड कलर ऐड कर दो लेट्स से मैंने बोला मुझे ब्लू कलर चाहिए ब्लू की शेड जो है मैं अपने आप लेके आऊंगा मैंने यह वाली शेड रख दी मैंने बोला एक बॉर्डर मुझे चाहिए एक बॉर्डर ऐड कर दो टू पिक्सेल सॉलिड ब्लैक बहुत बढ़िया और क्या कर सकते हैं और क्या कर सकते हैं मैंने एक पैडिंडी मैंने बोला पैडिट ऐड कर दो एव आरएम की और मैंने बोला यहां पे भी पैडिट कर दो एसा फ आरएम की और कुछ अच्छी प्रैक्टिस जो हमेशा फॉलो करते हैं हम मैंने बोला कि यहां पर आप ऐड कर दो मार्जिन जीरो पैडिट जीरो और मैंने क्या बोला मैं कर दूंगा बॉक्स साइजिंग बॉर्डर बॉक्स कर दिया बढ़िया मैंने यहां पर कहा कि जो मेरा बॉडी टैग है उसे आप विड्थ दे दें विड्थ दे दें एक बार 100% की और उसे आप हाइट भी दे दें एक बार 100% की और सेम कॉन्फिन मैंने यहां पर भी ऐड कर दी कंटेनर के अंदर ही बढ़िया तो एक बार यूआई चेक करते हैं यूआई पे क्या बना है एक बार फटाफट चेक करके आते हैं उसके बाद आगे सोचेंगे क्या करना है अभी नॉर्मल चीजें हम एडिशन कर रहे हैं बढ़िया यह बात समझ में आती है अगेन यह चीजें अभी चली तो नहीं है देखते हैं क्यों नहीं चली है ओके आइटम्स लिख दिया मैंने तो यहां फटाफट आइटम्स लिख देते हैं ठीक है अब चेक करते हैं ठीक है अब बढ़िया लग रहा है अब बढ़िया लग रहा है ठीक है तो मेरा यूआई इस प्रकार नजर आ रहा है मुझे अभी इस प्रकार नजर आ रहा है अगेन स्क्रैच से बारबार क्यों बनाते हो ताकि तुम थड़ी क्लेरिटी मिल जाए किस प्रकार चीजें काम कर रही है इसलिए स्क्रैच से बनाता हूं अब मैंने क्या बोला यार जो चीजें मुझे यूआई में बनानी थी वो चीजें फटाफट क्रिएट कर लेते हैं अगर ध्यान से ऑब्जर्व करोगे तो मुझे एक दोती च पा 6 सिर्फ छह आइटम चाहिए थी मैंने गलती से बहुत सारे आइटम बना दि है तो सिर्फ छह आइटम रख लेता हूं एक दोती च पा 6 तो मैंने ये सारी आइटम को हटा दिया मैंने बोला मुझे एक हेडर चाहिए था ठीक है मुझे एक साइड बार चाहिए मुझे कंटेंट वन चाहिए ठीक है मुझे कंटेंट टू चाहिए मुझे कंटेंट थ्र चाहिए और मुझे फुटर चाहिए तो ये सारी की सारी चीजें मुझे चाहिए यूआई प कैसे नजर आ रही है ऐसी आ रही है मैंने एक बार कलर इसका चेंज कर दिया मैंने बोला कलर जो है हम वाइट रखेंगे तो फटाफट चेक करते हैं यूआई प इस प्र नजर आ रहा है मुझे अपना डिजाइन अगर मैं इसको रिस्पांस है कि नहीं चेक करूं तो कुछ भी नहीं है नॉर्मल है ठीक है तो ऐसा कुछ कुछ क्रिएट किया है अगेन अब मैं क्या चाहता हूं अब जो मैंने आपको डी मैट्रिक्स बना के दिखाया था जस्ट अभी यही डी मैट्रिक्स वाला कांसेप्ट मैं रिप्लिकेट करना चाहता हूं तो कैसे करेंगे एक बार समझाता हूं फटाफट मैंने फटाफट सबको कुछ आईडी दे दी मैंने बोला कि आईडी इ इक्वल टू हेडर मैंने इसका नाम हेडर रख दिया आजा भाई डर और सबके अंदर मैंने आईडी रेप्ट कर दीन सबकी आईडी डिफरेंट हो गई बस यहां पर भी चेंज करूंगा थोड़ी देर में तो मैंने सबके अंदर एक आईडी दे दी मैं गया मैंने सबको एक आईडी दे दी फटाफट फटाफट ठीक है मुझे पता है शॉर्टकट होते हैं पर मेरे को ऐसे मजा आता है मैंने इसका नाम साइड बार रख दिया मैंने इसका नाम कंटेंट वन रख दिया मैंने इसका नाम कंटेंट टू रख दिया इसका नाम कंटेंट थ्री रख दिया और इसका नाम फुटर रख दिया चलो ये सार आईडी मैंने प्रोवाइड कर दी भैया क्यों देखो अभी स्टाइलिंग करेंगे इनको रेफर करने के लिए दैट्ची सब की बात भी करी मैंने बोला एक मेरे को हेडर चाहिए ऐसी मेरे को कुछ और चीजें भी चाहिए तो मैंने बोला एक हेडर चाहिए मुझको एक मुझको साइड बार चाहिए एक मुझको कंटेंट वन चाहिए एक मुझको कंटेंट टू चाहिए एक मुझको कंटेंट थ्री चाहिए एक मुझको कंटेंट सॉरी कंटेंट फोर तो है ही नहीं फुटर चाहिए तो मैंने सबकी जो आईडी थी अभी समझ में आएगा एक बार प्रोसेस पूरा देख लो फिर समझ में आ जाएगा अभी देखते र चलो क्या कर रहा हूं मैं तो मैंने क्या बोला मैं इन सारे आइटम्स को जिनको मुझे इस प्रकार से ऐसे अलग-अलग विड्थ हाइट प्रोवाइड करनी है इनको अलग से मैंने आईडी प्रोवाइड कर दी ताकि इन सभी आइटम को अलग से मैं कर पाऊ तो हेडर को मैंने क्या बोला कि आपके ग्रिड एरिया का नाम दे देता हूं ग्रिड एरिया का नाम दे देता हूं नाम आपका हेडर दे दिया लेट से नेम का काम चल रहा है यह समझ लो ऐसे में गया यहां पर बो आपके गड एरिया का नाम मैंने बोल दिया साइड बार ऐसे में गया यहां पर मैंने बोला आपके ग्रेड एरिया का नाम मैंने बोल दिया कंटेंट वन ऐसे मैं गया यहां पर मैंने बोला आपके ग्रेड एरिया का नाम मैंने बोल दिया कंटेंट टू ऐसे मैं गया यहां पर कंटेंट थ्र मैंने बोला आपके क एरिया का नाम मैंने बोल दिया कंटेंट थ्री एक बार फटाफट लिख लेते हैं अच्छे से कंटेंट थ्री और यहां पर मैंने बोल दिया कि आपके ग्रेड एरिया का नाम हमने रख दिया फुटर बढ़िया तो ये सारे ग्रिड एरियाज की नेम मैंने कर दी एक नाम मुझे पता होना चाहिए ताकि मैं इस नाम का यूज करके इनको इस ूडी मैट्रिक्स के अंदर प्लेस कर पाऊं अब आती है इम्तिहान की घड़ी जहां पर मैंने क्या बोला कि हम चलते हैं कंटेनर के अंदर कंटेनर के अंदर लेट से कहीं आपने कॉलम्स वगैरह अलग से यूज किए हुए हैं रोज वगैरह जीटीसी जीटीआर यूज किया उन्हें हटा दो और यहां पर राइट डाउन करो ग्रिड टेंप्लेट एरियाज अगेन मुझे क्या पता है यहां पर यह थ्री कॉलम और फोर रोज का मैट्रिक्स बनाना है तो मैंने किस प्रकार किया मैंने बोला के पहले रो में क्या क्या आ रहा है पहले रो में हेडर हेडर हेडर तो मैंने क्या लिख दिया मैंने लिखा हेडर हेडर हेडर तीन हेडर लिख दिए बहुत बढ़िया मैंने बोला सेकंड रो में क्या आ रहा है साइड बार कंटेंट वन कंटेंट वन तो मैंने लिख दिया साइड बार कंटेंट वन कंटेंट वन बढ़िया मैंने फिर बोला कि थर्ड रो में क्या आ रहा है आपने कहा थर्ड रो में साइड बार कंटेंट टू कंटेंट थ्री मैंने कहा ठीक है साइड बार कंटेंट टू कंटेंट थ बहुत बढ़िया मैंने फिर बोला लास्ट रो में क्या आ रहा है फुटर फुटर फुटर तो आपने तीन बार फुटर लिख दिया फुटर फुटर फुटर बढ़िया तो इस प्रकार आपने अपना तीन कॉलम चार रो का लेआउट क्रिएट कर लिया है फटाफट इसको यूआई पे चेक करते हैं कैसा नजर आ रहा है और फिर देखते हैं क्या जो लेआउट हम क्रिएट करना चाहते थे हम क्रिएट कर पाए क्या जो लेआउट हम क्रिएट करना चाहते थे हम क्रिएट कर पाए यस और नो सेम ऑब्जर्व करो यहां पे यहां पर भी तुम्हारा ऑब्जर्व करोगे तो सेम यह तुम्हारा ग्रिड बन गया ग्रिड के अंदर तुमने पहले सबसे पहले हेडर चाहिए था हेडर बना लिया उसका तुम्हें साइड बार चाहिए था साइड बार बना लिया कंटेंट वन चाहिए था कंटेंट वन बना लिया कंटेंट टू चाहिए था यहां पर कंटेंट थ्री चाहिए दोनों के दोनों आ गए और लास्ट में फुटर आ गया ध्यान से ऑब्जर्व करो डिफिकल्टी वाइज तुम्हें यहां पर कुछ सोचना ही नहीं पड़ा तुम्हारे सामने एक डी एरिया था तुम्हारे सामने एक डी एरिया था तुम सिंपल गए तुमने बोला कि यार ये रहा मेरा 2d एरिया इसको मैंने ऐसे डिवाइड कर लिया अब इसके अंदर तुमने बता दिया कि भाई मुझे यहां पे हेडर चाहिए हेडर चाहिए हेडर चाहिए हेडर चाहिए मुझे यहां पे एक साइड बार चाहिए साइड बार चाहिए यहां भी साइड बार चाहिए यहां भी साइड बार चाहिए यहां मेन कंटेंट चाहिए मेन कंटेंट मेन कंटेंट और यहां फुटर चाहिए तो तुम जैसे भी प्लेस करना चाहो अपने डाटा को तुमने यहां पर अपने 2d मैट्रिक्स को फुल कर लिया फिल कर लिया और उसके बाद तुमने सेम चीज यहां पे कोड में रेप्ट कर दी तुम्हें प्रोसेस में क्या करना होता है सबसे पहले अपने एलिमेंट्स को आईडी प्रोवाइड करो सेकंड स्टेप उन आईडी का यूज करके एलिमेंट को ग्रिड एरिया का नेमिन प्रोवाइड करो थर्ड स्टेप ग्रिड टेंपलेट एरिया के अंदर उनको प्लेस कर दो जहां पर भी प्लेस करना चाहते हो तो इस प्रकार तुमने सीखा कैसे ग्रिड टेंपलेट एरिया का यूज करके तुम कोई भी लेआउट जो तुम क्रिएट करना चाह हो कर सकते हो तुम्हें याद होगा जब मैं ग्रेड पढ़ा रहा था मैंने तुम्हें नौ डिफरेंट लेआउटस के होमवर्क दिए थे तो नाइन डिफरेंट लेआउटस को तुम इससे बनाने की कोशिश भी करोगे कैसे तुम ग्रेड टेंप्लेट एरिया का यूज़ करके व सेम नाइन लेआउट क्रिएट कर सकते हो आई थिंक समझ में आया होगा तो इस कहानी को समाप्त करते हैं यहां पर आज की क्लास में आपने सीखा कि किस प्रकार आपका ऑटो फिट काम करता है किस प्रकार आपका मिन मैक्स काम करता है रेस्पॉन्सिव डिजाइन क्रिएट करने में और कैसे आप गड टेंप्लेट एरिया का यूज कर सकते हैं अपने हिसाब से कोई भी लेआउट को फटाफट से क्रिएट करने में बिल्ड करने में आई थिंक समझ में आया होगा आई थिंक मजा आया होगा और बहुत सारे बच्चे कह रहे हैं कि भैया वो चैलेंज की बात की थी आपने चैलेंज कब आएंगे बहुत सारे प्रोजेक्ट जहां पर हम क्रिएट करेंगे तो सीएसएस के हमारे पास आई थिंक अभी तीन वीडियोस और पेंडिंग है बेसिक की तीन या दो-तीन वीडियोस पेंडिंग है जैसे ही वो दो-तीन वीडियोस खत्म होती है यानी कि 16th अक्टूबर तक उसके बाद से हमारे चैलेंज शुरू होने वाले हैं और एक बार जाके हर जगह फैला देना कि बब्बर भैया सीएसएस के चैलेंज स्टार्ट करने वाले हैं मिलेंगे आपसे धन्यवाद एवरीवन लव यू ऑल बाय बाय गुड नाइट कमेंट सेक्शन में बहुत ज्यादा आपका इंतजार रहेगा क्योंकि आजकल कमेंट्स करने बहुत कम कि हुए हैं तो फटाफट कमेंट्स करो ताकि हम दिन के दो-दो वीडियोस भी अपलोड करने टारगेट करें धन्यवाद एवन बा बाय यहां पर आप पढ़ने वाले हैं सीएसएस 3d ट्रांसफॉर्म्स के बारे में अगर आपको याद हो तो इसी प्लेलिस्ट के अंदर आपने सीएसएस के 2d ट्रांसफॉर्म्स को ऑलरेडी स्टडी कर लिया है हमने जो आपको ट्रांजिशंस पढ़ाए थे ट्रांसफॉर्म्स पढ़ाए थे एनीमेशंस की फ्रेम्स की बात की थी तो हमने बहुत प्रकार के ट्रांसफॉर्म्स पढ़े थे जैसे कि ट्रांसलेट अगर आपको कोई इस प्रकार की मूवमेंट करनी हो लेट्स से कोई एक्स एक्सिस के अंदर मूवमेंट है या फिर कोई वा एक्सिस के अंदर मूवमेंट है तो आपने ट्रांसलेट ट्रांसफॉर्म के बारे में पढ़ा था आपने पढ़ा था स्केल के बारे में स्केल ट्रांसफॉर्म लेट्स से यहां पर कोई मेरे पास एक बॉक्स है और मैं कहता हूं x एक्सिस के अंदर इसको स्केल कर दो तो इस प्रकार का हो जाता था मैं कहता हूं इसको y एक्सिस के अंदर स्केल कर दो इस प्रकार का हो जाता था तो आपने इस प्रकार से स्केल ट्रांसफॉर्म के बारे में भी पढ़ा था आपने पढ़ा था रोटेट ट्रांसफॉर्म के बारे में जहां पे x एक्सिस के कॉरेस्पोंडेंस के बारे में जो कि आप टिल्ट करने के लिए या स्लाटर के लिए अपने ऑब्जेक्ट को यूज़ करते थे कोई डब्बा इस प्रकार है अगर आप इसको स्लांट्स फॉर्म्स के बारे में ऑलरेडी आप पढ़ चुके हैं एकस एक्सिस के कॉरस्पॉडिंग y एक्सिस के कॉरस्पॉडिंग किस प्रकार से ट्रांसफॉर्मेशन वर्क करती है ट्रांसलेट के केस में स्क्यू के केस में रोटेट के केस में स्केल के केस में ऑलरेडी आपको पता है अभी हम जो करने वाले हैं वह है 3d ट्रांसफॉर्म तो आपने थर्ड थ्री डायमेंशन के बारे में ऑलरेडी सुना होगा ठीक है तो यहां पर बेसिकली हमारे पास तीन एक्सेस होने वाले हैं लेट्स से मैं ने बोला कि एक दो एंड तीन तो मैं कह सकता हूं यहां पे इसको मैंने कह दिया लेट्स से ये एक्स एक्सिस है इसको मैंने कह दिया ये y एक्सिस है इसको मैंने कह दिया z एक्सिस है अब जो भी ट्रांसफॉर्मेशन मैं पढ़ने वाला हूं व इन तीनों के तीनों एक्सिस के कॉरेस्पोंडेंस हो चाहे वो स्केलिंग हो चाहे वो रोटेशन हो ठीक है किस प्रकार से 3d ट्रांसफॉर्म्स के अंदर आप ये सारे अ ट्रांसलेशन स्केलिंग रोटेशन ऑपरेशन परफॉर्म कर सकते हैं अभी हम सीखने वाले हैं क्या बात समझ में आती है लेट्स से कोई डब्बा है मैं कहता हूं x में ट्रांसलेट करो तो इस दिशा में जाएगा या इस दिशा में जाएगा नेगेटिव वैल्यू है तो मैं बोलूंगा y में ट्रांसलेट करो तो ऊपर जाएगा नीचे जाएगा पॉजिटिव नेगेटिव पे डिपेंड करेगा मैं कहूंगा z में ट्रांसलेट करो तो अंदर की तरफ जाएगा या बाहर की तरफ जाएगा इस प्रकार से काम कर रहा होगा इन तीनों एक्सेस के कॉरस्पॉडिंग ठीक है तो विदाउट वेस्टिंग एनी टाइम फटाफट चलते हैं हमारी कोड विंडो पे और देखते हैं कैसे ये चीजें काम करती है चलिए लेक्चर नंबर 32 हम यहां पे गए एक नई फाइल हमने क्रिएट कर दी नाम रख दिया index.htm एल बहुत बढ़िया बॉयलर प्लेट कोड ऐड कर दिया हमने हेडिंग के अंदर ऐड कर दिया सीएसएस 3d ट्रांसफॉर्म्स और यहां मैंने अपना स्टाइल टैग ऐड कर दिया ठीक है यहां पे जो भी बेस्ट प्रैक्टिस में फॉलो करता हूं फटाफट वो ऐड कर लेता हूं मार्जिन जीरो पैडिट जीरो और बॉक्स साइजिंग जो है बॉर्डर बॉक्स कर दी है बॉडी को मैंने कह दिया है कि बॉडी भाई अब ऐसा करो विड्थ हो जाओ 100% एंड हाइट भी हो जाओ 100% बढ़िया मैंने कहा एक बार फटाफट एग्जांपल पकड़ते हैं उस एग्जांपल के द्वारा सब कुछ हम समझेंगे तो मैंने बोला कि लेटस से मेरे पास एक कंटेनर है ठीक है एक पेरेंट लेवल कंटेनर मैंने क्रिएट कर लिया और इसके अंदर मैंने लेट्स से नाइन आइटम्स क्रिएट कर ली मैंने बोला डॉट आइटम स्टार ना तोय नौ आइटम मैंने क्रिएट कर ली पहली आइटम का नाम मैंने रख दिया लेट्स से रोटेट एक्स बहुत बढ़िया ये थी पहली आइटम तो यहां पे है भैया रोटेट एक्सस रख दिया इसका नाम रो रख दिया इसका नाम रोटेट जड रख दिया बहुत बढ़िया इसी प्रकार में य पर क्या इसका नाम रख दिया ट्रांसलेट एक्स और इसका नाम दिया ट्रांसलेट वा इसका नाम मैंने रख दिया ट्रांसलेट जड अगले तीन की बात करते हैं यख दिया स्केल एक्स इसका नाम ख दिया स्केल वा और यहां पर मैंने नाम रख दिया स्केल z बहुत बढ़िया तो इस प्रकार इस कंटेनर के अंदर मैंने नाइन बॉक्सेस क्रिएट कर दिए हैं नाइन आइटम्स क्रिएट कर दी हैं और इन सभी बॉक्सेस के ऊपर जो भी मैंने टेक्स्ट लिखा है वही सारे ऑपरेशन परफॉर्म करने वाला हूं इसमें रोटेट कर दिया एक्स के करेस्पॉन्डिंग्ली ऐसा कर दो इसका बैकग्राउंड कलर आप रख दो लेट्स से मैंने बोला कि मुझे ब्लू कलर चाहिए तो मैंने ब्लू कलर रख दिया इसका वेरिएंट अपने आप सेलेक्ट कर लूंगा मुझे यह वाला वेरिएंट चाहिए ठीक है मैंने बोला इसका बॉर्डर भी लूंगा मैं तो भाई दो पिक्सेल सॉलिड ब्लैक बहुत बढ़िया और एक बार देखते हैं मैंने बॉडी के अंदर या कंटेनर को भी स्टाइल कर लेते हैं मैंने कंटेनर पकड़ा कंटेनर को मैंने बोला डॉट कंटेनर और मैंने बोला कंटेनर का बैकग्राउंड कलर ऐड कर लेते हैं लेट्स से ये कलर सिलेक्ट कर लिया मैंने मैंने कहा इसके अंदर पडि होनी चाहिए लेट्स से 5 आरएम की पैडिट मैंने कर दी और लेट्स से इसके अंदर मैंने बोल दिया पडि होनी चाहिए 2 आरएम की पैडिट मैंने कर दी बहुत बढ़िया एक बार चेक करते हैं यूआई में कैसा बना है अभी तक हमारा कोड ताकि और क्लेरिटी मिले बहुत बढ़िया ऐसा लग रहा है भैया बहुत अभी तो अजीब सा लग रहा है थोड़ा और अच्छा कर सकते हैं इसको मैंने कहा कि सारे के सारे बॉक्सेस एक के नीचे एक आ रहे हैं मुझे साइड बाय साइड चाहिए तो साइड बाय साइड के लिए मैं इसको फ्लेक्स बना सकता हूं साइड बा साइड आ जाएंगे डिस्प्ले फ्लेक्स मार्क कर दिया मैंने और गैप ऐड कर दिया मैंने व आरई एम का इसको इसको थोड़ा छोटा करके मैंने बोल दिया कि 150 पिक्सेल 150 पिक्सेल अब चेक करते हैं अब ठीक लग रहा है अब ठीक लग रहा है थोड़ा सा ठीक है बहुत बढ़िया बहुत बढ़िया पर मैं इसको और अच्छा करना चाहता हूं यार मैं और अच्छा करना चाहता हूं तो थोड़ा ग्रिड का यूज कर लेते हैं फ्लेक्स की जगह मैंने बोलिया लेट्स से मैंने इसको ग्रिड मार्क कर दिया और मैंने कह दिया ग्रिड मार्क करने के बाद कि मेरे को कितने कॉलम चाहिए मेरे को तीन कॉलम चाहिए व एफआर के तीन कॉलम चाहिए 1fr के चेक करो बढ़िया अब थोड़ा सुंदर लग रहा है अगेन कलर उतने सुंदर नहीं देखो मैं सुंदरता होनी चाहिए तभी मजा आएगा हमें यहां पे नहीं तो ऐसे हम बोर हो जाएंगे तो मैंने यहां पे इसको ग्रीन कलर सिलेक्ट कर दिया और ऐसा सा अब ठीक है अभी भी ठीक है चलो बात बन जाएगी इससे भी कोई दिक्कत नहीं है बढ़िया तो हमारा यूआई अभी ये नजर आ रहा है और फटाफट देखते हैं रोटेट एक्स किस प्रकार कर सकता हूं मैं तो एक् डायरेक्शन के अंदर मुझे रोटेट करना तो बहुत सिंपल है फटाफट मैं एक बार ना इन सभी आइटम्स की आईडी ऐड कर देता हूं ठीक है मैंने बोला कि आईडी ऐड कर देता हूं तो लेट्स से मैंने इसका नाम रख दिया रोटेट x ठीक है ऐसे कर दिया रोटेट x और इस प्रकार मैं सब में कॉपी पेस्ट कर दूंगा अकॉर्डिंग तो इस प्रकार नाम हमने सारे के सारे ऐड कर लिए आईडी इस के अब हर एक को स्टाइल करते हैं तो मैंने बोला कि रोटेट x वाले डब्बे को यानी कि आपका ये वाले डब्बे को मुझे एक्स डायरेक्शन में रोटेट करना है तो मैं फटाफट यहां पे गया मैंने बोला कौन से वाले डब्बे की बात हो रही है रोटेट x की बात हो रही है इसको ट्रांसफॉर्म करना है मुझे ठीक है ट्रांसफॉर्म कर दिया और मैंने कह दिया रोटेट x और आपने यहां पर एंगल बता दिया लेट्स से मुझे 45 डिग्री रोटेट करना है बहुत बढ़िया एक बार फटाफट चेक करते हैं क्या यूआई पे हुआ रोटेट बिल्कुल हो गया भा मजा नहीं आ रहा तो हमने ऐसे कर दिया जब भी मैं इसपे होवर करूंगा ना जब भी मैं इस पे होवर करूंगा तब रोटेट कर जाना मैंने कहा ठीक है अभ ऐसा कैसा है जैसे ही होवर करूंगा रोटेट हो गया तो ये एक्स एक्सिस के अंदर रोटेट हो गया एक्स एक्सिस के कॉरस्पॉडिंग एक डब्बा ऐसे था मैं दिखा सकता हूं आपको तो ये डब्बा मान लो इस प्रकार था और जैसे एक्स एक्सिस बोला ये ऐसे रोटेट हो गया 45 डिग्री ठीक है ऐसे था ऐसे रोटेट हो गया चेक करते हैं एक बार देखो ऐसे रोटेट हो गया तो एग्जांपल के लिए मैं दोबारा एक और एग्जांपल देता हूं यहां समझ में अच्छे से आ जाएगा मैंने बोला एक डब्बा था ऐसा ऐसा खड़ा था आपने बोला 45° रोटेट करो ऐसे रोटेट हो गया ठीक है दैट्ची हैं हुआ बढ़िया तो एक डब्बा इस प्रकार है आपने बोला 45° y एक्सिस में रोटेट करो तो ये ऐसे रोटेट कर गया पहले x में ऐसे रोटेट किया था अब y में ऐसे रोटेट कर गया ऐसा था ऐसे हो गया राइट बहुत बढ़िया लेट्स से भैया आपने गलती से यहां पे 45 की जगह -45 कर दिया होता तो तो क्या होता तब होता बिल्कुल होगा पहले अगर ये ऐसे रोटेट कर रहा था तो अब ये इस प्रकार रोटेट कर गया माइनस एंगल में रोटेट कर गया पहले अगर क्लॉक वाइज कर रहा था तो अब एंटी क्लॉक वाइज हो गया बहुत बढ़ बढ़िया लास्ट प्रोसेस रोटेट जड तो मैं यहां पे आया मैंने बोला रोटेट z जब भी होवर करूंगा तो प्रॉपर्टी चेंज होनी चाहिए तो मैंने यहां बोला ट्रांसफॉर्म और रोटेट z मैंने बोला 45 डिग्री बहुत बढ़िया तो अभी तक कैसे रोटेट हो चुका है x में ऐसे रोटेट हुआ था y में ऐसे रोटेट हुआ था अब कैसे रोटेट होगा अब शायद ऐसे रोटेट हो जाएगा चेक करते हैं चेक करते हैं तो अगर मैं यहां पे जाऊंगा तो देखो ऐसे रोटेट हो गया बढ़िया एकस ऐसे रोटेट हो रहा है एक्स ऐसा था ऐसे हो गया वा ऐसा था ऐसे हो गया z ऐसे हो गया तीनों एक्सेस के अंदर आपने रोटेशन कर ली तीन एक्सिस आपके ये बनते हैं एक बार इस एक्सिस में रोटेट हुआ ऐसे एक बार इस एक्सिस में रोटेट हुआ ऐसे एक बार इसमें ऐसे ठीक है तो तीनों एक्सिस के कॉरस्पॉडिंग आपने रोटेशन सीख ली है एक्स वा जड बहुत बढ़िया ट्रांसलेशन की बात करते हैं लेट्स से मैंने बोला ट्रांसलेट x की मैं बात कर रहा हूं ट्रांसलेट x तो मैंने बोला जब भी मैं ट्रांसलेट जब भी मैं ट्रांसलेट एक्स पे होवर करूंगा तो मैं चाहता हूं कि वो ट्रांसफॉर्म कर जाए मैंने बोला वो ट्रांसलेट एक्स कर जाए बाय मैंने बोल बोल दिया 100 पिक्सल तो एक्स डायरेक्शन में होवर करने पे 100 पिक्सल ट्रांसलेट कर जाएगा तो देखो हो रहा है बढ़िया होवर करने में ट्रांसलेट हो रहा है बिल्कुल हो रहा है तो इस प्रकार एक्स एक्सिस के अंदर मूवमेंट हो रही है पर लेट्स से मैं गलती से नेगेटिव वैल्यू करता तो अगर मैं यहां पर नेगेटिव वैल्यू करता तो तो पॉजिटिव वैल्यू में राइट साइड जा रहा था नेगेटिव वैल्यू में लेफ्ट साइड चला जाएगा यही फर्क होगा तो मैं यहां पे गया लेफ्ट साइड चला गया बढ़िया बढ़िया इस प्रकार काम कर रहा है वेरी गुड आगे चलते हैं ट्रांसलेट वा के अंदर तो ट्रांसलेट वा के अंदर ऐड करते हैं फटाफट मैंने बोला ट्रांसलेट वा जब भी होवर करूंगा ट्रांसफॉर्म ट्रांसलेट बा बाय 100 पिक्सल ठीक है तो हमने बोला कि वा एक्सिस के करेस्पॉन्डिंग्ली ऐड की होती तो अगर यहां पर नेगेटिव वैल्यू ऐड की होती तो भैया अभी नीचे जा रहा था पॉजिटिव के केस में तो नेगेटिव में ऊपर चला जाएगा चला गया ऊपर देखो जा रहा ऊपर है ना इस प्रकार से इस प्रकार से आपने इसको ऊपर भेज दिया ठीक है बहुत बढ़िया अब बचा आपका ट्रांसलेट z इसमें थोड़ा ध्यान से देखना दोस्त इसमें थोड़ी सी गेम चेंज है मैंने बोला ट्रांसलेट जड जब भी होवर करूंगा तो आप क्या करेंगे ट्रांसलेट करेंगे ट्रांसफॉर्म कर दिया मैंने बोल दिया ट्रांसलेट जड कितने से मैंने बोला 100 पिक्सल चलो चेक करते हैं यूआई पे अब अगर मैं इस पर कुछ करता हूं कुछ हो रहा है भैया इसमें तो कुछ हो ही नहीं रहा आप ट्रांसलेट दर प होवर कर रहे हो पर कुछ हो ही नहीं रहा आपको यहां पर एक पर्सपेक्टिव सेट करना पड़ेगा आप किसी भी चीज को कितनी दूरी से देख रहे हो 100 पिक्सल की दूरी से देख रहा हूं 200 से देख रहा हूं 300 से देख रहा हूं तो आपको पर्सपेक्टिव सेट करना पड़ेगा ट्रांसलेट जी को एक बार विजिबिलिटी विजिबिलिटी के लिए आपको विजिबल हो चेंजेज इसके सारे के सारे ठीक है तो हमने क्या कर दिया हमने पर्सपेक्टिव यहां पर सेट कर दिया कि भाई पर्सपेक्टिव लेट्स से 300 पिक्सेल मैं 300 पिक्सेल दूर से इस बॉक्स को दे रहा हूं देख रहा हूं ठीक है अब देखना अब देखना क्या मैं देख पा रहा हूं बढ़िया तो अब ये ट्रांसलेट कर गया देखो z एक्सिस ये वाला है पॉजिटिव के केस में मेरे पास पास आ रहा है डब्बा अभी डब्बा यहां पे है अभी डब्बा ये रहा ये z एक्सिस है पॉजिटिव वैल्यू में ट्रांसलेट कराता हूं मेरे पास आता है नेगेटिव वैल्यू में ट्रांसलेट कराऊंगा मेरे से दूर जाएगा अभी मेरे पास आ गया लेट्स से मैंने यहां पे गलती से - 100 पिक्सल बोला होता तो होवर करने पे मेरे से दूर जाता समझ आई ये z एक्सिस था पॉजिटिव वैल्यू मेरे पास आ रहा है डब्बा नेगेटिव वैल्यू मेरे से दूर जा रहा है तो इस प्रकार आपने सीख लिया कि ट्रांसलेट किस प्रकार आप कर सकते हैं बहुत बढ़िया स्केल एक्स की बात करते हैं आओ हमने बोला स्केल एक् वाला आइटम ये रहा स्केल x हमने बोला स्केल एकस ओवर ट्रांसफॉर्म आपने बोला कि मुझको स्केल x करना है x के डायरेक्शन के अंदर मुझे स्केल करना है लेट्स से मैंने बोला 1.5 टाइम स्केल मतलब अपने साइज को इंक्रीज करना ठीक है तो अगर मैं इस डब्बे पे होवर करूंगा इसको स्केल करना चाहिए क्या होवर कर रहा है क्या स्केल कर रहा है बिल्कुल मैंने कहा था जब भी x में स्केल करते हो इस प्रकार स्केल होता है तो यहां पे आपने x में स्केल कर लिया बहुत बढ़िया सेम चीज अप्लाई करेगी आपकी y में सेम चीज अप्लाई करेगी आपकी y में मैंने इसी को कॉपी कर लिया और मैंने बोल दिया कि स्केल वा की बात कर रहे हैं स्केल वा येलो और स्केल वा येलो तो इसका मतलब एक्स एक्सिस में आपका ऐसे स्केल कर रहा था वा एक्सिस में आपका ऐसे स्केल करेगा चेक कर लो बढ़िया तो वा एक्सिस के अंदर आपका स्केल कर रहा है बहुत बढ़िया ये आपने संभाल लिया अब लास्ट वा स्केल z इसको समझते हैं इसको समझते हैं यहां पर भी थोड़ा स्पेशल ट्रीटमेंट हमें देना पड़ेगा मैंने बोला लेट्स से मैंने यहां पे कर दिया स्केल जड होवर करने पे मैंने बोला स्केल सेड 1.5 अगेन अब मैं यहां पर होवर करता हूं कुछ हो ही नहीं रहा भैया कुछ हो ही नहीं रहा क्या करना पड़ेगा पर्सपेक्टिव सेट करना पड़ेगा तो मैं यहां पे गया मैं पर्सपेक्टिव मैंने यहां भी सेट कर दिया ठीक है तो एक बार मैंने पर्सपेक्टिव 300 पिक्सल कर दिया रोटेट कर दिया 30° से देखते हैं कैसा काम कर रहा है ये तो ये काम कर रहा है इस प्रकार ठीक है इसकी लाइंस देख लो ताकि आप समझ पाओ स्केलिंग हुई है कि नहीं हुई है इस प्रकार से अभी काम कर रहा है ये ठीक है अभी ऐसा कुछ काम कर रहा है पर अगर यहीं पर आकर मैं कह दूं अगर यहीं पर आकर मैं कह दूं कि यार मुझे ना स्केल करना है मैं यहीं पर आके कह दूं कि मुझे स्केल करना है z एक्सिस में लेट्स से फाइव का फैक्टर दे दिया स्केल का मैंने तो अब देखते हैं क्या होगा क्या स्केलिंग ऑब्जर्व कर पा रहे हो अब हुई स्केलिंग भैया अब हो गई तो इस प्रकार से और देखने में आपको यह एडिशनल पर्सपेक्टिव ऐड करने पड़ते हैं रोटेशन ऐड करनी पड़े ताकि विजिबिलिटी आप देख पाओ स्केलिंग की ठीक है क्योंकि पर्सपेक्टिव बहुत इंपोर्टेंट है तभी आप स्केलिंग पकड़ पाओगे तो यहां पे आपने देख लिया कि इस प्रकार चीजें काम कर रही है स्केलिंग आपने ऑब्जर्व कर ली है बहुत बढ़िया ठीक है तो आई थिंक सारे के सारे चीजें आपको समझ में आगी चाहे वो रोटेट एक्स हो रोटेट वाई हो रोटेट जड हो ट्रांसलेट एक्स ट्रांसलेट वा ट्रांसलेट जड एंड स्केल एक्स स्केल वाई स्केल जड पर्सपेक्टिव आपने पढ़ लिया है और बढ़िया सारे के सारे फैक्टर्स आपने पढ़ लिए हैं आपके लिए होमवर्क मित्र ये है कि आपको स्क्यू स्क्यू वाली जो प्रॉपर्टी थी वो भी चलानी है चलो मैं एक बार चला के दिखा देता हूं लेट्स से मैंने बोला स्केल y के अंदर मैं स्क्यू कर देता हूं अभी मैंने इसको बोल दिया कि स्क्यू कर लेते हैं मैंने इसको बोला स्क्यू दो ही प्रॉपर्टी यहां पे स्क्य x और स्वा तो q एक कर दिया मैंने 30° से तो इसमें क्या होता था अगेन टिल्ट होता था तो स्केल y वाला डब्बा टिल्ट हो जाएगा टिल्ट हुआ बिल्कुल हो गया टिल्ट हुआ बिल्कुल हो गया ये था आपका स् एक् करके अगर मैं स्वा करता इसको तो क्या होता तो ये इस प्रकार टिल्ट होता राइट तो इन चारों आपको ट्रांसफॉर्मेशन पता है चाहे वो स्केल हो चाहे वो ट्र ट्रांसलेशन हो चाहे वो रोटेशन हो चाहे वो स्कूइंग हो आपको सारी की सारी चीजें मैंने सिखा दी है और अभी उतना आईडिया नहीं लग रहा होगा कैसे हम इसको यूज़ करने वाले हैं पर जैसे ही हम आगे बढ़ेंगे जीवन के अंदर और प्रोजेक्ट क्रिएट करेंगे तो प्रोजेक्ट क्रिएट करते करते हम इनका यूसेज पता लगेगा कैसे हम इनको यूटिलाइज करने वाले हैं रियल वर्ल्ड प्रॉब्लम्स के अंदर आई थिंक समझ में आगा आई थिंक मजा आओगा कृपा करके कमेंट सेक्शन के अंदर अपना कमेंट छोड़ कर जाए कि भैया समझ में आया भैया अंडरस्टूड प्लस प्लस मुझे बहुत ज्यादा शांति मिलेगी इस चीज से जितने ज्यादा आपके कमेंट होंगे उतने ज्यादा मेरी कंसिस्टेंसी होगी इस बात की गारंटी मेरी है ठीक है धन्यवाद मिलेंगे आपसे आपके अगले सेशन में इस सेशन में इतना ही अगर आप चाहे तो youtube's में जाएंगे और आपने यहां पे प्लेलिस्ट में जाएंगे प्लेलिस्ट के अंदर आपको दिखेगी हमारी वेब डेव की प्लेलिस्ट और यहां से जाके आप एक्सेस कर सकते हैं सारी की सारी वीडियोस को वन बाय वन एक ऑर्डर्स के अंदर तो आई थिंक समझ में आया होगा मिलते हैं नेक्स्ट क्लास में लव यू ऑल बाय बाय गुड नाइट