हाय गाइस तो आज है डे वन ऑफ मेकिंग पाथ फाइंडर विजुलाइजर सो सबसे पहले चलते हैं अपने ब्राउजर में और देखते हैं कि पाथ फाइंडर विजुलाइजर है क्या तो सर्च किया पाथ एक्सप्लोरर नेटलीफ तो मैंने इस प्रोजेक्ट को नेटलीफ पे डिप्लॉयड करने पे आ गया तो एट द एंड ऑफ दिस प्रोजेक्ट मैं आपको यह भी बता रहा हूंगा कि कैसे प्रोजेक्ट को डिप्लॉयड करके या फिर लिंक आप किसी को शेयर कर सकते हो इस प्रोजेक्ट का तो इस प्रोजेक्ट का एक क्विक डेमो मैं आपको दिखा दूं यहां पे कुछ बॉल्स ड्रॉ किया और जैसे ही विजुलाइज पे क्लिक किया देखो कैसे सर्चिंग एल्गोरिथम यहां पे परफॉर्म हो रहा है और पता चल रहा है कि हां शॉर्टेस्ट पाथ फाइंड करने में यह जो एल्गोरिथम्स है किस तरह से काम करते हैं किस तरह से वर्क करते हैं और इसमें बहुत सारे एल्गोरिथम्स अभी इंप्लीमेंट हो रखे हैं इंटरनली जो वर्क हो रहा है अभी तो फिलहाल बीएफएस वर्क हो रहा है हर एक एल्गोरिदम अपना अलग तरीके से फाइंड कर रहा होता है जैसे देखो यहां पे ए स्टार एल्गोरिथम इंप्लीमेंट किया है वो एल्गोरिथम किस तरह से यहां प फाइंड किया पाथ को और यहां पे देखो मेज जनरेशन एल्गोरिथम है ये सारे जो एल्गोरिथम्स है इसमें बहुत एल्गोरिथम्स लगे हुए हैं हर एक एल्गोरिथम्स हम लोग देख रहे होंगे आने वाले वीडियोस में तो यह है पार्ट वन और इसमें हम लोग जस्ट एक सिंपल सा इंटरफेस आज तैयार करेंगे इस पूरे वेब पप का एक इंटरफेस आज तैयार करेंगे इसके लिए चलते हैं अपने डेस्कटॉप स्क्रीन पे और यहां पे एक फोल्डर बना लेते हैं पाथ फाइंडर और इसको ओपन कर लेते हैं सीएस कोड में इसी के साथ यहां पर एस यूजुअल हमेशा की तरह एक इक्सड एटीएम एक फाइल बनाया और एक पड जस फाइल बनाया एक सीएसएस के लिए फोल्डर बनाया जिसके अंदर दो फाइल्स होंगे मेनली एक मेन ड सीएसएस एंड अनदर क्या होगा यूटिलिटी ड सीएस इतना होने के बाद चलते हैं इक्सड एटीएमएल में और एक देते हैं बॉयलर प्लेट यहां से दिया बॉयलर प्लेट यहां पर टाइटल दे दिया पाथ फाइंडर एंड बॉडी में चलते हैं यहां से लाइव और रेफरेंस के लिए साइड में खोल लेते हैं इसको अपने प्रोजेक्ट को जिससे हम रेफरेंस ले रहे होंगे तो देखो सबसे पहले इसमें देखो इसमें क्या है एक ऊपर हेडर है और एक नीचे बोर्ड है इन दोनों को लिखना होगा हेडर एंड बोर्ड को और यह मैंने बनाया है ग्रिड की मदद से तो क्या करूंगा एक टेंप्लेट करके ग्रिड बनाऊंगा जिसके अंदर दो एलिमेंट होंगे एक हेडर एंड अनदर क्या है दूसरा बोर्ड बोर्ड और हेडर हेडर के अंदर भी देखो दो एलिमेंट्स है एक ऊपर नप बार है और एक नीचे गाइड बार है तो नप बार के लिए नप बनाया और गाइड बार नीचे बना लिया अभी हम लोग नप बार बनाते हैं सो नप बार के अंदर एक लोग लोगो है एक बीटीएन है और एक नीचे क्या है नव मेन्यू है तो लोगो एक बीटीएन और एक मेन्यू देख इसको यल इसलिए किया है क्योंकि इसके अंदर एला है ना इसको एंकर टब दे देते हैं सो इसका क्या होगा इक्सड एटील लोगो के अंदर क्या लिखा हुआ है पाथ फाइंडिंग विजुलाइजर बीटीएन के अंदर क्या है विलाज एंड इसको आईडी भी दे देते हैं विजुलाइज करके आईडी दिया विजुलाइज एंड अब बारी है किसका न मेनू के अंदर नब मेन के अंदर क्या है एक तो एई है एई के अंदर एंकर टब बनाया और इसके अंदर क्या लिखा है क्लियर पाथ क्लियर पाथ ना इसको मल्टीपल टाइम नीचे कॉपी करते हैं एंड एल्गोरिथम इतना हो गया देखो अभी गौर से देखो इन सारे प जो है जिस पर एक कैरेट का सिंबल लगा हुआ है इन पर अगर क्लिक करो ना एक नीचे ड्रॉप मेन ओपन होता है इसके अंदर एक एंकर टैब तो है ही जिस पर पिक्सल लिखा हुआ है उसी के साथ एक ड्रॉप मेन्यू भी है तो इनके नीचे एक ड्रॉप मेन्यू बनाया जाए यल डॉट ड्रॉप मेन्यू इसको यूल इसलिए बनाया क्योंकि इसके अंदर भी तो एल है नाना एई के अंदर जो डायरेक्ट ए है इसपे क्या पिक्सल का 14 पिक्सल इसको नीचे मल्टीपल टाइम कॉप कर लेते हैं 26 26 तक ही है एल्गोरिथम स वही है इतना कर लिया इतना हमने सक्सेसफुली यहां पे अपना मार्कअप लिख लिया नप के लिए और एक यहां पे देखो एक यहां पे एक कैरेट का सिंबल लगा हुआ है ना सो इस कैरेट के सिंबल को भी यहां पर बना दिया जाए पिक्सेल के बगल में है स्न स्पन डट कट और इसी को कॉपी करके बाकियों के सामने भी पेस्ट कर दूंगा पिक्सल के सामने था स्पीड के सामने था एंड एल्गोरिदम के सामने था ना सो नीचे ड्रॉप मेनू भी बन गया अब चलते स्टाइल करते हैं तो स्टाइल करने के पहले यहां पर सभी स्टाइल जितने भी फाइल है उनको लिंक करना होगा एक्चुअली मेन है और सीएसएस फोल्डर के अंदर है और सीएसएस फोल्डर के अंदर यूटिलिटी भी है सीस इसको लिंक किया बचा क्या जावास्क्रिप्ट को लिंक करना स स्क्रिप्ट सोर्स में दे देते हैं app.js और चलते हैं फटग से मेन डॉट सीएसएस के अंदर और यहां पे हमारा सारा एलिमेंट आ गया है तो सभी को क्या देते हैं मार्जिन जीरो पडि जीरो बॉक्स साइजिंग बडर बॉक्स फंट फैमिली सेंसरी अ टेक्स्ट डेकोरेशन नन लिस्ट स्टाइल ब नन और इसके बाद क्या कर सकते हैं बॉडी का विड्थ 100 बड हाइट 100 बीए एंड बॉडी के अंदर जो टेंप्लेट है टेंप्लेट जिसको हमने बोला था कि हा ये ग्रिड बॉक्स है और ग्रिड टेंप्लेट रो ऑटो एंड न एफर इसी के साथ ग्रिड गैप 10 पिक्सल और ऐसा क्यों किया क्योंकि आप देखो यह जो पूरा ग्रेड बॉक्स है इसमें क्या है ऑटो जो है ऊपर वाले हेडर को असाइन हुआ है और वन एफर जो है इस बोर्ड को असाइन हुआ और इसको हाइट विथ भी दे देते हैं विथ 100% हाइट 100% और ऐसा य सही से टेंपलेट बना या नहीं देखते हैं तो टेंपलेट के अंदर डायरेक्ट सारे एलिमेंट है उनका बैकग्राउंड कल रेड करके देखते सो हा यहां पर सही से टेंपलेट बन चुका है सो अभी के लिए बैकग्राउंड कलर हटा के य पर बर्डर दे देते न पिक्सल सॉलिड ब्लैक इतना बॉर्डर दिया एंड नेक्स्ट हम लोग क्या कर सकते हैं न प अभी हम लोग बेसिकली काम करेंगे इसका डिस्प्ले फ्लेक्स कि अलाइन आइटम सेंटर अलाइन आइटम सेंटर जस्टिफाई कंटेंट भी सेंटर सेंटर स्पेस बिटवीन और इतना होने के बाद इसमें जितना कलर्स यूज हो रहा है ना उन सारे कलर्स को य से सेलेक्ट कर लेता हूं वह सारे कलर्स मैं यहां से सेलेक्ट कर लेता हूं जल्दी से चलके यह रहा इसमें यूज होने वाले सारे कलर्स इसको यहां से कॉपी किया एंड सबसे ऊपर जाकर यहां पर पेस्ट कर देता हूं रूट और यह सारे कलर्स के वेरिएबल यहां से सिलेक्ट कर लिए हमने और इनको यूज करेंगे हम लोग स्टाइलिंग में तो न का ना बैकग्राउंड कलर भी है वेर नेवी कलर और ने के अंदर देखो अभी क्या है लोगो बचा स्टार्टिंग में है ना सो इसका कलर वाइट देते हैं फंट साइज 20 पिक्सल एंड फंट वेट 600 इसी के साथ अच्छा लग रहा है बीटीएन को भी क्या करते हैं बैकग्राउंड कलर क्या बैकग्राउंड कलर वेर प्राइमरी देन कलर वाइट पडि 8 पिक्सल 8 पिक्सल एंड 16 पिक्सल बॉर्डर रेडियस फ पिक्सल का एंड कर्सर पॉइंटर यहां पर मस्त लग रहा है बटन अब बचा क्या नब मेनू ना नब मेनू का भी डिस्प्ले फ्लेक्स किया अलाइन आइटम सेंटर और नब मेनू प ऐसा करने प कुछ हुआ नहीं क्योंकि हमने यहां पर नप मेन्यू नहीं सिर्फ मेनू लिखा था नब मेनू प करते हो गया अभी प्रॉब्लम क्या दे रहा है यह जो देखो यह प्रॉब्लम दे रहा है ना ड्रॉप बॉक्स जो ड्रॉप मेन्यू है सो ड्रॉप बॉक्स को ना पोजीशन एब्सलूट देना होगा इसके लिए सबसे पहले ड्रॉप मेन्यू का जो पेरेंट है तो ड्रॉप मेन्यू का पेरेंट कौन है यह एल है इनको एक क्लास दे देता है ड्रॉप बॉक्स ताकि ऐसे ड्रॉप बॉक्स देने से पता चले कि हां इनके अंदर ड्रॉप मेन्यू है तो यहां पर भी एक क्लास दे देता हूं क्लास ड्रॉप बॉक्स और देखो ड्रॉप बॉक्स के अंदर क्या है एक एंकर टैब है और एक ड्रॉप मेन्यू है तो इनका पैरेंट कौन सा है ड्रॉप बॉक्स है ना तो ड्रॉप बॉक्स इनका क्या कर सकते इनका पोजीशन रिलेटिव करना होगा एंड ड्रॉप बॉक्स के अंदर ड्रॉप मेन ड्रॉप बॉक्स के अंदर जो ड्रॉप मेनू है इनका पोजीशन एब्सलूट करना हो और बूम ऐसा करते देखो यह सारे अलग हो गए इनसे और इनका बैकग्राउंड कलर सेम कर देते हैं र नेवी मिन विड्थ 120 पिक्सल डिंग फो पिक्सल बॉर्डर रेडियस 8 पिक्सल हां इतना ऑसम लग रहा है इसी के साथ देखो राइट से ना एक स्क्रोल आ गया एक स्क्रोल आ गया इसको खत्म कैसे कर सकते हैं राइट से जीरो किया स्क्रोल गायब और क्या कर सकते हैं टॉप से 100% हो एंड प्लस 20 पिक्सल और नीचे आ जाए तो य प कैल्क मेथड यूज करना होगा और देखो एक मिस्टेक जो बिगिनर्स यहां पर करते हैं कि कैल्क मेथड के अंदर ना ये जो अर्थमेटिक ऑपरेटर है और यहां पर जो इनके आर्गुमेंट इनके बीच में ना यह नहीं करते स्पेस एक गैप नहीं देते और गैप नहीं देने पर क्या होगा काम नहीं करेगा देखो अभी गैप नहीं है काम नहीं कर रहा है कैल्क मेथड एंड द मोमेंट मैंने गैप हटाया य पर कैल्क मेथड काम करने लगा तो अब क्या बचा यहां पर जो एंकर टैब है इनको स्टाइलिंग देना तो न मेनू के अंदर डायरेक्ट ए के अंदर ए है उनका कलर क्या कर दो वाइट कलर वाइट एंड देन पैंग पिक्सल एंड 16 पिक्सल और देखो पडि य पर सही से नहीं लगा इसका रीजन है कि डिस्प्ले ब्लॉक करना होगा क्योंकि बाय डिफॉल्ट एंकर टैब का डिस्प्ले क्या होता है इनलाइन होता है ना एंड एंकर टैब पर जब कोई होवर करे देन इसका कलर र सेकेंडरी इस हो करने पर पता चल रहा है एक सेकेंडरी कलर लग रहा है और इसी के साथ जो अगर एल आई एक्टिव है एई एक्टिव है तब क्या कर दो ए का जो बैकग्राउंड कलर है ना वेर इनको प्राइमरी कर एक्टिव क्लास दे देते हैं इनके ऊपर एक्टिव य एक्टिव नहीं देना एक्चुअली यहां पर एक्टिव देना इतना डन हो गया अब क्या करना है देखो ड्रॉप मेन्यू के अंदर भी तो एंकर टब है इनका भी कलर वाइट करना होगा सेम स्टाइलिंग य भी देंगे ना सेम स्टाइल देना कलर वाइट किया पैंग 8 पिक्सल एंड डिस्प्ले ब्लॉक और यहां पर आ गया ऑसम लग रहा है एक चीज और एंकर टैब जो हो होवर हो तब इनका क्या करना है बैकग्राउंड जो कलर है उनको प्राइमरी कर दो प्राइमरी और इस होवर इफेक्ट लग गया बोर्डर रेडियस फ पिक्सल और इनप होवर होने पर क्या होगा इस पर कलर आ रहा है साथ ही जो इसमें एक्टिव भी हो ना अगर इनके अंदर जो ए है जो कि एक्टिव हो एक्टिव देन इसके अंदर जो एंकर टैब है उनका भी बैकग्राउंड कलर क्या करना है वेर प्राइमरी स दोनों में सेम स्टाइलिंग लगा है तो यहां पर डायरेक्ट ऐसे कर सकते हैं और देखो तो और क्या कर सकते हैं यह जो ड्रॉप मेन्यू है इसको अभी के लिए डिस्प्ले नन करते हैं डिस्प्ले नन और जो ड्रॉप बॉक्स एक्टिव है ड्रॉप बॉक्स डॉट एक्टिव उनके अंदर जो ड्रॉप मेन्यू है वही विजिबल ड्रॉप मेन्यू वही स डिस्प्ले ब्लॉक हो जैसे कि यह पिक्सल एक्टिव था तो पिक्सल का जो ड्रॉप मेनू है व यहां पर डिस्प्ले ब्लॉक है बाकी सब डिस्प्ले नन है यह सिर्फ ड्रॉप बॉक्स के अंदर है और यह ड्रॉप एक्टिव के अंदर ड्रॉप बॉक्स डॉट एक्टिव एक और चीज जो य हम लोग कर सकते हैं कि यह देखो जो वर्ड है ना ब्रेक हो जा रहा है क्योंकि यहां पर बहुत कम थ इसको मिला हुआ है तो वर्ड ब्रेक ना हो इसके लिए क्या करेंगे न में ना वाइट स्पेस को नो रप कर देंगे नो रप और ऐसा करने पर देखो स्क्रोल आ जाएगा स्क्रोल आ जाएगा लेकिन वर्ड ब्रेक नहीं होगा तो स्क्रोल को खत्म करने के लिए क्या करते हैं इसको थोड़ा सा रिस्पांस बना दिया जाए मीडिया स्क्रीन एंड विड्थ एंड मैक्स विड्थ 1000 पिक्सल विथ जैसे 1000 पिक्सल या उससे कम हो तब ये स्टाइल अप्लाई होगा इसमें क्या करेंगे न जो है इसका डिस्प्ले ग्रिड करेंगे एंड ग्रिड टेंप्लेट कॉलम न एफ आरव एफ आर व थ्री इक्वल सब डिवीजन में इसको सेपरेट कर दिया एंड डॉट नप मेन्यू जो है वो क्या करेगा वो पूरा विड्थ ले लेगा ग्रिड कॉलम वन से लेके टोटल पूरा ले लो और ऐसा पूरा चक इसने ले रखा है इसलिए ये नीचे आ गया और दोनों के बीच में ग्रिड रो गैप कितना अब क्या कर सकते हैं इनका जो एक सेकंड देखते हैं बर्डर देख के कि यह एक्चुअली में कितना बड़ा है सॉलिड वाइट सो इसका विथ ना मैक्स कंटेंट कर देते हैं सही है अब क्या बचा अब हमको जस्ट बनाना यह है इसमें जो बोर्ड है उसको सिर्फ इंप्लीमेंट करना है उसको हम लोग अपेंड करेंगे जावास्क्रिप्ट की मदद से इसके अंदर जो यह सब सेल्स आप देख रहे हो यह सारे जो सेल्स है इनको हम जावास्क्रिप्ट की मदद से ऐड करेंगे तो ऐसा करने के लिए क्या कर सकते हैं पड जस में चलते हैं और सबसे पहले तो बोर्ड को सिलेक्ट कर लेते हैं बोर्ड इक्व डॉक्यूमेंट डॉट गेट एलिमेंट बाय आईडी बोर्ड और एक मेथड बना लेते हैं फंक्शन रेंडर बोर्ड और यह मेथड क्या करेगा इस यह बोर्ड को रेंडर करेगा सो इसके अंदर लेट रो अभी के लिए 20 रख लेते हैं लेट कॉलम इ 20 एंड एक नेस्टेड फॉर लूप बनाएंगे लेट आ इ 0 आ लेसन रो आ प्लस प्लस सिमिलरली और लेट ज = 0 ज लेसन कॉलम ज प्स प्स ये एक मैट्रिक्स के ऊपर ट्रैवर्स करने जैसा एक सिंपल सा नेस्टेड फॉर लूप है तो सबसे पहले क्या एक रो एलिमेंट बनेगा रो एलिमेंट इ इक्वल ू डॉक्यूमेंट ड क्रिएट एलिमेंट डिव एंड यह जो रो एलिमेंट है इसको एक क्लास लिस्ट डॉट ड एक क्लास नेम दे देते हैं रो एंड देन इसको एक आईडी भी दे देते हैं रो एलिमेंट डॉट सेट एट्रबीक इज इनको रो से कॉलम करना होगा तो यहां पे कॉलम एलिमेंट भी बनके तैयार हो गया और यहां पे आईडी आई ज आई रो एंड जे कॉलम दे दिया और एक बार कॉलम बन गया उसके बाद रो एलिमेंट में अपेंड कर लेते हैं रो एलिमेंट डॉट अपेंड चाइल्ड अपेंड करते चलेंगे सारे कॉलम एलिमेंट को अपेंड चाइल्ड कॉलम एलिमेंट कॉलम एलिमेंट एंड एट द एंड ऑफ दिस फॉर लूप क्या कर रहे होंगे हम हर एक रो एलिमेंट को ना बोर्ड के अंदर अपेंड करेंगे बोर्ड डॉट अपट चाइल्ड रो एलिमेंट रो एलिमेंट इसके अंदर अपेंड कर दिया और एक हम लोग यहां पर क्या कर सकते हैं वेर सेल्स एक बना लेते हैं सेल्स जो कि सेल्स इ इक्वल टू अभी एमटी है इसके अंदर सारे कॉलम्स का रिकॉर्ड रखेंगे जो कि आगे हेल्पफुल होगा क्योंकि हम लोग सेल्स पर वर्क भी तो करना है सेल्स डॉट पुश कॉलम एलिमेंट एक पूरा एरे बना लेते हैं जिसके अंदर सारे सेल्स का रिकॉर्ड रहेगा और ऐसा करने के बाद इसके अंदर सारे एलिमेंट आ जाने चाहिए उसके पहले इस मेथड को कॉल करना होगा और कॉल करते ही इसके अंदर सारे एलिमेंट अपेंड हो चुके होंगे देखते हैं चल के सारे एलिमेंट्स अपेंड हुए या नहीं तो सिंपली टेंप्लेट के अंदर बोर्ड के अंदर देखो देखो बोर्ड के अंदर देखो बोर्ड के अंदर ये सारा अपेंड हो गया है लेकिन फिर भी दिख इसलिए नहीं रहा है क्योंकि हमने स्टाइल अभी कुछ दे ही नहीं रखा है कॉलम्स वगैरह को जो हमने वहां प क्लास लिखा उनको कोई स्टाइल नहीं दे रखा है इसके लिए सबसे पहले क्या करेंगे डॉट कॉलम का क्या कर देंगे एक्सपेक्ट रेशियो वन ऐसा करने से क्या होगा जो विड्थ दूंगा सेम वही विड्थ हाइट भी हाइट के लिए भी उतना ही हो जाएगा ये होता है एक्सपेक्ट रेशो यूज करने से सो विड्थ इसका बाय डिफॉल्ट दिया हुआ है सेल विड्थ एंड बोर्डर वन पिक्सल सॉलिड वेड लाइट लाइन और देखो ऐसा करते हैं यहां पे आ गया लेकिन ये जो इसको हॉरिजॉन्टल होना चाहिए ये वर्टिकली इसलिए आ रहा है क्योंकि सोचो ना रो के अंदर हमने पेंट किया था ना तो रो को क्या करना होगा डिस्प्ले फ्लेक्स और द मोमेंट हमने डिस्प्ले फ्लेक्स किया यहां पर सारे सेल्स आ गए लेकिन य हो क्या रहा है पूरे थ को नहीं ले रहा है सिर्फ इतना ही ले रहा है क्योंकि हमने 20 20 दे रखा है ना 20 रो एंड 20 कॉलम दे रखा है स यह नहीं करना है हमें रो उतना चाहिए जितना इसमें फिट हो सके तो कैसे पता चलेगा कि रो कितना इसमें फिट होगा तो अभी फिलहाल इसका विथ कितना था विथ ये मेथड ना विथ भी ले रहा होगा बाय डिफॉल्ट सो बाय डिफॉल्ट का विड्थ 22 पिक्सेल का होगा और कैसे पता चलेगा कि इसमें कितना रो होगा तो वो पता करने के लिए क्या करना होगा बोर्ड डॉट क्लाइंट हाइट जो है अगर उसको डिवाइड कर दे विड्थ से अगर उसको सेल विथ से डिवाइड कर दिया जाए तब क्या होगा कि हमें पता चल जाएगा कि इसमें कितना रो आएगा सिमिलरली कॉलम्स में भी वही होगा अगर विड्थ को इसके विड्थ से डिवाइड कर दे सेल विथ से तो पता चल जाएगा कि कॉलम्स कितना इसमें फिट होगा और ऐसा करने के बाद देखो पूरा फिल हो गया एक चीज यहां पर क्या हो रहा होगा ये जो कंसोल डॉट लॉ रो और कॉलम को प्रिंट करके दिखाता हूं ऐसा करने पर क्या होगा ना देखो कंसोल में देखो फ्लोटिंग वैल्यू आ रहा है और ऐसा आएगा ही क्योंकि डिवाइड ऑपरेशन हो रहा है सो इस चीज को हैंडल कैसे कर सकते हैं मैथ डॉट मैथ क्लास के अंदर एक फ्लोर मेथड है उसका यूज कर लेंगे और यह एक्सक्लूड कर देगा फ्लोटिंग पॉइंट के आगे का जितना वैल्यू है उसको एक्सक्लूड कर लेगा और देखो नीचे यहां पर क्या आ रहा है सिर्फ 12 एंड 34 12 रोज एंड 34 कॉलम्स तो यहां से पूरा फिट हो रहा है ना इसमें य से क्या हो रहा है थोड़ा सा गैप रह जा रहा है और ऐसा क्यों हो रहा है क्योंकि मेन डॉट कॉलम को हमने कहा स्टाइल दे रखा है यहां विथ दिया है ना इसको मेन विथ दे देते हैं विथ होगा 100 पर और ऐसा करने से देखो फिक्स हो गया य एकदम पूरा फिट हो गया इसमें और क्या कर सकते हैं चलते हैं यहां पर लोगो इसको पैंग दे दिया जाए ऊपर नीचे से जीरो एंड साइड साड से कितना 16 पिक्सल इतना सही है और नव को भी थोड़ा पडि दे दिया जाए न न न और देखो न भी बहुत ही ऑसम लग रहा है एक यहां पर क्या है कि यह जो बीटीएन है ये स्ट्रेच हो गया है इस बीटीएन को भी यहां प स्टाइल किया जाए बीटीएन इसका जस्टिफाई सेल्फ स्टार्ट इतना से काम बन गया एक और चीज क्या करते हैं यहा से एक्टिव क्लास हटाते हैं और यह जो बे फालतू का बॉर्डर दे रखा है यहां पर उस बॉर्डर को भी यहां से हटाते हैं बॉर्डर को हटाया यहां से एंड यहां से एक्टिव क्लास हटा लेते मार्क अप एचटीएम में क्या है एक्टिव क लिख रखा है यहां पर एक्टिव है यहां से एक्टिव रिमूव किया और इसका थोड़ा सा विथ भी है ना इसमें देखो इसम थोड़ा फंट वेट इसका थोड़ ज्यादा ही है सो कॉलम्स एंकर टप क है फंट वेट 600 एंड एक और चीज रह गया य पर कैरेट का जो सिंबल है उसको हम लोग य यूटिलिटी के अंदर डिफाइन कर देते हैं के जो कैरेट सिंबल है जो हमने यहां दे रखा है ये जो स्पैन जो कैरेट सिंबल दे रखा है पिक्सेल के बगल में स्पीड के बगल में इनको यहां पे डिफाइन करते हैं जो स्पैन है ना तो सबसे पहले इसका डिस्प्ले इनलाइन है डिस्प्ले ब्लॉक किया एस्पेक्ट रेशो वन विथ 14 पिक्सल एंड बैकग्राउंड कलर वाइट और देखो बैकग्राउंड कलर ना देकर क्या करेंगे बैकग्राउंड देंगे यूआरएल हमने एसेट्स इसमें जितने यूज हो रहे हैं उनको अभी तक एक्सट्रैक्ट नहीं किया सो यहां से हम लोग कॉपी करेंगे जो एसेट यूज हो रहा है और अपने इस फोल्डर के अंदर आके पेस्ट कर देंगे और ऐसा करने के बाद यहां से हम लोग वो सारे एसेट्स को यूज कर सकते हैं आइकंस एंड आइकंस के अंदर जो कैरेट का सिंबल है यहां पे ऐड कर दिया कैरेट का सिंबल ऐड करते ही क्या हुआ ये नीचे आ रहा है इसको भी फिक्स कर लेते हैं मेन रोट इसमें क्या डिस्प्ले डिस्प्ले फ्लेक्स लाइन आइटम सेंटर एंड गैप फोर पिक्सल 8 पिक्सल और देखो ऑसम नेक्स्ट वीडियो में हम लोग देख रहे होंगे कि इन सभी के ऊपर हम लोग देख रहे होंगे कि कैसे एक्टिव क्लास इस पे ऐड हो रहा है जैसे इस पे जैसे एक क्लिक होता है देखो एक एक्टिव क्लास ऐड हो जा रहा है ना इन सभी के ऊपर तो ये सब हम लोग देख रहे होंगे कैसे नीचे इस पे क्लिक करने पे पॉप अप आ रहा है ये सब देखेंगे नेक्स्ट वीडियो में आज सिर्फ एम यही था कि एक बेसिक स्ट्रक्चर बनाना था एक बेसिक टेंप्लेट क्रिएट करना था तो अभी के लिए बहुत ही ऑसम लग रहा है अब देखते हैं नेक्स्ट वीडियो में