CSS Crash Course: Master the Essentials in One Video! Elevate Your Front-End Skills Now!

345.81k views4040 WordsCopy TextShare
Sheryians Coding School
Welcome to our CSS Crash Course! In this concise and action-packed video, we will guide you through ...
Video Transcript:
है हेलो सो इस वीडियो में हम लोग बात करेंगे कस के बड़े में दिस इसे गोइंग तू बी आर एन फ्रेश एन वीडियो अगेन कस पे पूरा रिफ्लेक्शन लेंगे और एक जरूरी बात पिछले वीडियो में जैसे बोला था वैसे इस वीडियो में दिस इस नोट तक कंप्लीट सी एस और ऑब्वीजली यार यू डोंट नीड कंप्लीट कस तू मेक एनीथिंग यू नोट तो यू नीड तू नो डी बेसिक फर्स्ट आईटी कंटेंस डी बेस्ट यू नीड तू नो डी इंटरमीडिएट स्टफ आईटी कंटेंस डी इंटरमीडिएट और व्हेन आईटी कॉम तू यूजिंग सम एडवांस तू ऑलरेडी यार यू हैव
योर भैया विद यू वही यू लाइक डोंट बी डोंट बी और सच में आपसे वादा कर रहा हूं ये पढ़ने के बाद आप हम लोग सीधा प्रसक शुरू करेंगे हमारा पहले प्रोजेक्ट है तो एक्जेक्टली सी एस क्या है देखो यह जो है ना यह पहले फोटो देखो राइट दिस इस सम नोट सो लुक गुड लुकिंग थैंक और ओवर हर सेकंड पार्ट पे जैसे सम गुड लुकिंग आ पार्ट ऑफ आईटी राइट सो सीरियस क्या है आपके एलिमेंट को कलर्स देना उसको डिजाइन देना उसको फूल देना उसको जिंदगी के थोड़े और करीब लेकर आना दिस इस सीरियस
और हम लोग यहां पर क्या करेंगे कुछ ऐसे राइट एलिमेंट आपके पेज पर ए गया है बट वो उतना अच्छा नहीं ग रहा हम उसे कलर्स देना चाहते हैं सही तरीके से शो करना चाहते हैं यह सब कस है ओके तो हम इसे एक शब्द में कहेंगे स्टाइलिंग तो कस क्या है दोस्तों स्टाइलिंग है परफेक्ट अब हम चलेंगे हमारे आ अविस्लिम नहीं है कंप्लीट कर लिया तो ग्रीन टेक लगी ओ नो ग्रीक थैंक यू तो नो वे बिल कम हर और बिल मेक एन सिस फाइल स्टाइल डॉट कस परफेक्ट और बाय डी वे दूसरा वीडियो
है ठीक है तो अगर तुमने पहले वाला नहीं देखा जो पहले वाला देख लो क्योंकि उसके अंदर हम लोग देखो हमारा गोल गैप हमारा गोल क्या नहीं है सिर्फ पढ़ के और दफा हो जाना यहां से हमारा गुल क्या है हमें ये पूरा प्रोजेक्ट कंप्लीट करना है दोस्त प्लीज मेरे लिए प्लीज अपने भैया के लिए इतना तो करो यार प्रोजेक्ट कंप्लीट करना है ये वाला है ना और इसमें तीन फेस हैं पहले फेस है रिफ्रेश है रिफ्रेश कस और तीसरा फेस है एक्चुअल प्रोजेक्ट चाहिए डेट इस इट्स नोट अबाउट वाचिंग वीडियो सच बताऊं मां कसम
नोट जस्ट अबाउट वाचिंग वीडियो और कई बार स्टेबल वाले रिफ्लेक्शन में सबसे इंपॉर्टेंट टॉपिक से ये है ये दोनों राइट तो अगर तुमने ये नहीं पढ़े ना तो दिक्कत होगी तुम्हें प्रोजेक्ट में क्योंकि मेरे पढ़ना का तरीका थोड़ा सा डिफरेंट है इसलिए मैं चाहता हूं की तुम यह वाले पार्ट्स से ऊपर लो आप एक बार है ना एटलिस्ट यू वाले पढ़ लो एटलिस्ट और अगर किसी को नहीं आता तो यार आता भी या नहीं भी आता 1.5x पे चला के जल्दी देख लेना ऐसा लेट को तो अपन ने कस फाइल बना ली टेक अंडरस्टैंडिंग लिंकिंग
ये क्या होता है आपको एचटीएमएल फाइल के साथ सीएस फाइल को लिंक करना सीखना पड़ेगा ठीक है तो जल्दी से अपना वेट लेट हैं ये आगे प्लेट अब हम इसे लिंक करना हमारे कस फाइल्स है कैसे करेंगे बहुत इजी है टाइटल ट्रैक के जस्ट बहुत लिखो लिंक कैसे एक बार और ठीक है लिंक तीसरा ऑप्शन पे गए इंटर प्रेस कर दिया लिंक कर दिया किसको एचटीएमएल फाइल को और कस फाइल को तो अब हम चला पाएंगे अब [संगीत] [संगीत] हाथ से लिखना पड़ेगा कैसे लेट को ठीक स्टार मार्जिन जीरो चलो जीरो अजय यार बॉक्स भैया
क्या लिख रहे हो घंटा समझ नहीं ए रहा मेरा साथ दो और इसका स्क्रीनशॉट ले लेना बात सुनो जब भी कस फाइल बनोगे [संगीत] बस इतना समझो पहले ये लिखना बिना इसकी आगे कोड लिखना मत शुरू करना हर कस फाइल में यह लिखना जरूरी है राइट और एक चीज क्या मत करना अच्छा भैया ने 100% लिखा था ना मैं 100 लिख देता हूं मेंटली इसके लिए ऐसा मत सोचना की वहां पर क्या करता है [संगीत] तुम लोग के बॉलर प्ले नेक्स्ट प्लेईंग का बल्ब प्लेट एक्सप्लेन कर दीजिए तो जरूर बता दूंगा ऐसा पढ़ना है यह
चीज नहीं पढ़नी [संगीत] यहां पर थैंक यू वेलकम [संगीत] अगर मैंने यहां पर आईडी दे दी तो इसे टारगेट करने के दो तरीके पहले तो है पी और दूसरा क्या है आईडीए राइट रास्ता है इस तरीके से भी आप टारगेट कर सकते हो राइट सो आई बिलीव आपको ये समझ आया होगा की हम कस में टारगेट कैसे करते हैं राइट एक छोटा सा और मैं कन्फ्यूजन पॉइंट बता रहा हूं कई बार क्या होता है [संगीत] जो [संगीत] पिज़्ज़ा का वो कॉर्नर वाला पीस थोड़ा देते हैं जो आलू पराठे में सिर्फ बीच वाला पार्ट खाता हैं
और साइड साइड वाली रोटी छोड़ देते हैं ब्रेड के भी साइड वाले पार्ट छोड़ देते हैं इनके लिए जिंदगी प्रॉफिट लॉस स्टेटमेंट होती है यह वाले लोग तो ये क्या करते हैं ये पी को आईडी देंगे h1 क्या यह कर सकते हैं हां ये कर सकते हैं ओके तो हैशटैग h1 बोलोगे तो क्या मैच वन को टारगेट कर रहे हैं नहीं दोस्त हम टारगेट कैसे कर रहे हैं पी को बस उसकी आईडी इतनी कन्ज्यूरिंग है की ऐसा ग रहा है की शायद हम h1 को टारगेट कर रहे हैं नहीं आईडी ग गया तो अब ये
कुछ भी हो सकता है ये इमेज भी हो शक्ति है कुछ भी हो सकता है क्योंकि आईटी तो हम किसी को भी दे सकता है और कोई भी नाम दे सकते हो बट वे वांट तो इसलिए कन्फ्यूजन मत लेना ठीक है आप आईडी से भी टारगेट कर सकते हो आपकी मर्जी परफेक्ट लगाएंगे [संगीत] अभी तक इस पेज में कुछ भी नहीं है राइट मैं चाहता हूं मैं चाहता हूं बहुत जरूरी है और नहीं लगाऊंगा तो आंसर नहीं आएगा अच्छा ओके भैया [संगीत] [संगीत] दोस्तों एक नया स्टूडेंट आया है पढ़ने के लिए बड़ी खुशी की बात
है तुम लोगों को काई कटली भेज दे रहा हूं नाइस एक्चुअली वे आर टीम ऑफ 22 पीपल और फॉरेस्ट ऐसा है षडयंस इस डी ओनली थैंक वे डेली क हार्ड पर षडयंस और षडयंस हमारा ख्याल रखिएगा ऐसा हमारे हर टीममेट सोचता है थॉट्स व्हाट था व्हाट शेयर्स पर स अगर तुम लोग हमारी टीम का पार्ट बन गया अगर आप सच में मुझे भैया मनोज और सच में मुझे मौका डॉग सिख सीखने का तो यार लाइक हम लोग बहुत खुश होंगे सारे लोग हम लोग बहुत खुश होंगे बहुत अच्छा लगेगा बस इतना वेट तो हो गया
फूल हाइट हो गया साहब प्रीति डॉग नाइस तो हमें अब यहां पर वेट समझ ए रहा है ओके लेकिन एक दो चीज और देखो अगर मैं 50% वेट कर डन 50% कर डन तो 50% लाइट हो जाएगा [संगीत] तो क्या करेंगे हम करेंगे [संगीत] [संगीत] [संगीत] [संगीत] [संगीत] सही है ना अगर एक्स मां लेते 500 होता तो यह 500 होता है तो हाफ विथ कितनी होती 250 होती अच्छा ठीक है तो क्या ऐसा भी बोल सकते हैं की लट से बताता हूं कैसा बोल सकते हैं क्या मैं ऐसा भी बोल सकते हैं की फूल 100%
है हां बोल सकते हैं हां बोल सकते हैं क्या तुम का सकते हो इसकी टोटल वेट कितनी कई लोग सोचते 1920 होती है [संगीत] 20% [संगीत] समझ रहे हो ना क्वार्टर लेना चाहते हो 25% ऐसे का सकते हो राइट और परसेंटेज का उसे होता है जब आप स्क्रीन के रिस्पेक्ट एलिमेंट के रिस्पेक्ट में उसका एक पर्टिकुलर भाग लेना चाहते हो तब आप परसेंटेज उसे करते हो क्योंकि इसमें इजी पड़ता है आधा बताना राइट हम कभी नहीं जानते की पुरी स्क्रीन का आधा एग्जकताली कितना होगा 500 पिक्सल होगा या 600 होगा मिनी पता राहत पर हमें
ये जरूर पता राहत है वो 50% होगा राइट तो आधा बताना इजी होता है परसेंटेज और रिस्पेक्ट में बताना इजी होता है [संगीत] [संगीत] [संगीत] डिफरेंस क्रिएट करना है तो मैं यहां पर जाऊंगा और कहूंगा जो की दोनों हैं मार्जिन टॉप मॉडल टॉप [संगीत] पहले वाले एग्जांपल [संगीत] [संगीत] थोड़ा सा छोटा हो जाएगा [संगीत] महाजन 20 पिक्सल्स जैसी आप इतना करोगी चारों दिशाओं में एड हो जाएगा तो ऊपर भी लेफ्ट में भी नीचे भी और राइट में भी तो 20 अप्लाई हो गया अगर आप एक डायरेक्शन में देना चाहते हो तो आप लिख सकते हो
आज लेफ्ट तो सिर्फ लेफ्ट में मार्जिन आएगा अगर आप दे डॉग सिर्फ टॉप में मार्जिन आएगा अगर आप दे डॉग राइट तो सर राइट में मार देना कोई फर्क नहीं पड़ेगा और अगर आप डॉग बॉटम तो सिर्फ बॉटम पर ए जाएगा अगेन कोई फर्क नहीं पड़ेगा नहीं क्यों फर्क नहीं पद रहा है क्योंकि नीचे कुछ नहीं है तो वहां से आएगा भी तो दिखेगा नहीं एक तरीका और है विच इस ये वाला जो मैं चाहता हूं तुम समझो घड़ी यादें घड़ी में घड़ी कैसी चलती है 12 मेरा तीन ही है तुम्हारा ये क्या होगा तुम्हारा
क्या होगा ये सॉरी तुम्हारा ये तीन हो गए बिलीव 123 अब समझ लो तुम 12 3 6 9 ऐसे चलती गाड़ी राइट इसको हम कहते हैं [संगीत] क्लाकवाइज आई एम सॉरी टॉप पे फिर लगेगी राइट पे फेयर वैल्यू लगेगी बॉटम पे और फिर वैल्यू लगेगी लपेटे देखो 20 पिक्सल टॉप पे स्पेस है ठीक है 30 पिक्सल राइट तू स्पेस है और 12 पिक्सल समझ रहे हो और अगर आप दो वालुज लिखोगे तो 20 और 30 लिखोगे पहले वैल्यू टॉप और बॉटम और दूसरी वाली लगती है लेफ्ट हैंड राइट ऐसा तो पहले वाली जो 20 पिक्सल
है वो टॉप पे लगी और बॉटम पे लगी और 30 पिक्सल जो है वो लेफ्ट पे लगी और लाइक भी लगी परफेक्ट एक और रास्ता होता है [संगीत] समझो परफेक्ट [संगीत] दो एलिमेंट्स बीच में स्पेस होता है [संगीत] अंदर स्पेस ठीक है इसको बनाया [संगीत] [संगीत] [संगीत] अरे यार ठीक है एलिमेंट के अंदर एक बॉर्डर बन गया [संगीत] है ना तो फर्क क्या है फर्क यही है भाई एम जो आपका पेंडिंग होता है वो अंदर स्पेस बनाता है और जो मार्जिन होता है वो बाहर स्पेस बनाता है ऐसा राइट तो अगर मैं मार्जिन दूंगा ऐसे
तो देखना तो मार्जिन बाहर आएगा [संगीत] [संगीत] तो हमारे पास यहां पे फूल विथ फूल हाइट एक में दीव है अब मुझे यहां पे एक इमेज लगानी है सॉइल को हर अंश flash.com और कोई भी इमेज ढूंढ सकते हो पर एग्जांपल नेचर पे गए और मुझे कोई इमेज लगानी है लेट को ढंग की इमेज है क्या यहां पे चलो ये वाली है ओके ठीक है ठीक है ठीक है सो राइट क्लिक को आप इमेज एड्रेस अब इमेज कैसे लगाते हैं वो देखो बैकग्राउंड इमेज यूआरएल और जस्ट बेस्ट जस्ट नो डेट और दिस बिल गेट यू
डी इमेज यू कैन सी एक इमेज ए गई है बट ये कभी भी प्रॉपर्ली नहीं आई तो प्रॉपर्ली लाने के लिए बैकग्राउंड साइज कर इससे क्या होता है इमेज पूरे एरिया को कर करने लगती है राइट बैकग्राउंड साइज [संगीत] बैकग्राउंड पोजीशन [संगीत] हंसराज पर नेचर पर चलेंगे जो काफी ज्यादा बड़ी हो जैसे यह इमेज काफी बड़ी है राइट और काफी लंबी सी है राइट क्लिक कॉपी इमेज एड्रेस अगर मैं ये इमेज लगाऊंगा तो देखना क्या होगा कभी भी पुरी बेचनी आएगी तो आप क्या यहां से डिसाइड कर सकते हो पहले चीज तो बैकग्राउंड साइज कर
दो चीज आप इमेज का कौन सा पार्ट देखना चाहते हो वो आप कर सकते हो सेंटर तो बीच का सेंटर पॉइंट दिखेगा आप यहां पे डिसाइड कर सकते हो टॉप इसका टॉप पार्ट देखिएगा बॉटम तो मैडम बैठ दिखेगा अब इनकी प्रैक्टिस करना बैकग्राउंड इमेज बैकग्राउंड साइज दिखेगी नहीं इमेज तो आप लोग को लगाना पड़ेगा बैकग्राउंड साइज [संगीत] [संगीत] [संगीत] पोजीशन एब्सलूट समझना जरा ध्यान से सुना अगर ये कर यहां नहीं होती तो सार्थक तू इधर और पहले तो वहां का खड़ा है अगर ये कार्य नहीं होती तो क्या होता है सही है अब मां लेते
हैं की ये कर यहां पर है बोलो हां अब ये कर है तो इसी वजह से ये गाड़ी यहां पर ये अगर इस कर में सलमान भाई होते तो ये गाड़ी ऊपर चढ़ जाति है थोड़ा-थोड़ा लेकिन नहीं ठीक है तो अपन मां लेते हैं की यहां पर सलमान भाई गाड़ी नहीं चला रही है और ये तीन कर सकते हैं बोलो हां अब ये कर अगर अपन ओवर ब्रिज पर ले जैन शहर में दिल्ली में मिलता है आयरन मां टाइम ठीक है तो अपन यहां पर ले गए ठीक है ऊपर वाले ब्रिज पे चल रही है
गाड़ी अब क्या होगा अब ये ऊपर चले गए थे खाली ऊपर से देख रहा है ठीक है तुम ऊपर से देख लो ऊपर से तो तुम्हें क्या दिखेगा ये कर नीचे वाली है ये वाली ये वाली [संगीत] कर अगर ये आगे ए जाएगी तो ये कर चुप जाएगी पीछे ए जाएगी तो ये कर चुप जाएगी क्योंकि हम कहां से देख रहे हैं ऊपर से ऊपर से क्या ये समझ आया ठीक है परफेक्ट अब जरा थोड़ा सा दूर लेकर जाना कैमरे को ओके भाइयों पोजीशन एब्सलूट क्या होता है पोजीशन एब्सलूट का मतलब है जो भी एलिमेंट
पोजीशन एब्सलूट होगा वो ऊपर उठ जाएगा [संगीत] गिरेगी नहीं ऊपर उठेगा सॉरी ठीक है तो जो भी एलिमेंट पोजीशन एब्सलूट होगा दोस्तों वो ऊपर उठ जाएगा कुछ ऐसे और जब वो ऊपर उठेगा तो उसकी जगह खाली हो जाएंगे क्योंकि हम टॉप से देख रहे होंगे तो हम ये वाला एलिमेंट देखें और ये नहीं दिखेगा क्या ये समझ आया अभी अपन कोर्ट में देखेंगे परेशान तो यह है पोजीशन अब्सोल्युटली कहानी अब एक इंपॉर्टेंट बात ये है एलिमेंट फर्स्ट यह है एलिमेंट सेकंड ये है एलिमेंट थर्ड जब ये ऊपर उठेगा तो ये दोनों कार्स आगे जाएगी ठीक
है जब यह ऊपर उठेगा तो ये कर आगे जाएगी और जब ये उठेगा तो कोई कहानी नहीं जाएगा बस ये ऊपर उठेगा ठीक है अब उसके अलावा अगर ये ऊपर उठा तो ये उठेगा लेयर वन में क्योंकि एलिमेंट वन है ठीक है जब ये उठेगा तो हमेशा उठेगा तू में क्योंकि एलिमेंट तू है और साथ-साथ अगर थोड़ी हेल्प करनी है वो उठेगा तो लगा थ्री इसके ऊपर ले जो परफेक्ट तो कुछ ऐसा स्ट्रक्चर बनेगा दोस्तों लेयर वन लेयर तू लेयर थ्री अगर ये लेयर तू का एलिमेंट्स के ऊपर आया तो आपको ये दिखेगा और लेयर
थ्री ऊपर लो तो आपको टॉप वाला दिखेगा और बाकी हाइट हो जाएगी क्या ये समझ ए रहा है तो ये पूरा फॉर्मेट है अबाउट पोजीशन एब्सलूट याद रखना जो भी एलिमेंट उठाता है वो पोजीशन एब्सलूट होता है उड़ते उसकी जगह खाली होती है और आगे के एलिमेंट्स बार-बार एलिमेंट्स आगे ए जाते हैं परफेक्ट और जो भी उठेगा वो अपनी लेयर में उठाता है लेयर वन क्योंकि फर्स्ट एलिमेंट है तू क्योंकि थर्ड एलिमेंट थ्री और मैं समझेंगे बहुत आराम से सब कुछ ए जाएगा अब चलते हैं पोजीशन रिलेटिव समझ में पोजीशन रिलेटिव समझना के लिए थोड़ा
महंगा कम किया है सच में पिछली बार जो थोड़ा सा महंगा हो गया इंतजाम और उसका इंतजाम को देखने के लिए कंपास पास में आओ [संगीत] और ये भी एड कर दो तो और महंगा हो जाएगा बढ़िया ठीक है तो अब बात सुनो अपने पास ये एक बॉक्स से ठीक है और क्योंकि नमक थैंक यू तो अपने पास एक बॉक्स है बॉक्स के अंदर एक और बॉक्स है ठीक है अपन टॉप से देख रहे हैं ठीक है यह बॉक्स अभी इसके बाहर इसलिए नहीं जा का रहा है क्योंकि ये अंदर बाहर भटक जो पैरंट है
उसके अंदर ये डाला हुआ है और इसकी एडजस्ट के बाद वो नहीं जा का रहा है राइट फिर हमने क्या किया इसे पोजीशन एब्सलूट बनाया एब्सलूट से क्या होता था उठ जाता था याद है तो मैंने बताया था पोजीशन एब्सलूट से उठ जाएगा तो ये ऊपर उठ गया अब ऊपर उठ गया तो जरा क्रॉस वाला एरिया दिखाना [संगीत] और जैसे ही मैंने ऊपर उठ गया अब ये ऊपर उठा तो अब ये एरिया इसके बाहर जा सकते हैं तो अगर अपन समझे हिंदी में ऊपर से देखना बन गया ऊपर उठा के बाहर जा सकता है बट
हम चाहते हैं की एब्सलूट तो बने पर ये रहे बॉक्स के अंदर ही बॉक्स के बाहर ना जाए राइट ये पर्टिकुलर चीज को करने के लिए वे उसे पोजीशन रिलेटिव मैं समझता हूं कैसे देखो तो जिसके अंदर रखना पहले उसे रिलाइज करो किसके अंदर रखना है [संगीत] इसके अंदर तो इसे बनाएंगे तो जिसके भी जिसके भी अंदर अपन को एलिमेंट को रखना होता है उसे अपन पोजीशन बनाते हैं डेट इसे डी कप आईटी राइट अब चलते हैं जल्दी से फटाफट अपन देखते हैं कैसे ये परफॉर्म होता है [संगीत] बाहर बनाए हैं राइट तो इनका ख्याल
रखना कई बार लोग ध्यान नहीं देते इसलिए गलती होती है तो यहां पे तीन कार्स हैं फटाफट इंक्वायरी करेंगे कार्बन मैंने बोल दिया वेट तो हो जाति है इसके लिए और हाय का पंजे देते हैं 120 पिक्सल्स ओपन दे देते हैं अपन को कार्बन देख रही है राइट ऐसे ही अपनी कार्टून देख सके ब्लू ब्लू वॉलेट चलेगा [संगीत] [संगीत] [संगीत] [संगीत] तंत्रदान बढ़िया सो यहां तक भी समझ ए रहा है परफेक्ट अब गेम कुछ ऐसा है मेरे प्यार भाई आपने जब भी किसी को उठाया पोजीशन एब्सलूट ऊपर उठ गया ग्रीन ए गया ऊपर उठी है
आप इसको कहानी भी मूव कर सकते हो कहानी भी कैसे देखो टॉप से टॉप से मैंने बोल दिया 20% तो ये देखो ये टॉप से 20% है अगर आप 10% बोलोगे तो टॉप से 10% भी ए जाएगी राइट आप इसे लेफ्ट में भी कहानी मूव कर सकते हो लेफ्ट से 40% तो लेफ्ट से 40% चली जाएगी स्मॉल लाइक डेट आई बिलीव तुम लोगों को समझ आया होगा और अगर आए हैं तो बताना जरूर ठीक है गलती बिना पोजीशन लगाएं टॉपलेस चलने की कोशिश नहीं चलेगा [संगीत] रिलेटिव के अलावा हां एक होती है फिक्स्ड एक होती
है स्टिकी और एक होता है स्टेटिक स्टेटिक बाय डिफॉल्ट होता है मतलब जब आप पोजीशन नहीं जैसा पोजीशन का वैल्यू क्या है और अगर आप यहां पे पोजीशन को देते हो तो एब्सलूट तो एब्सलूट से ऊपर उठ जाएगा आई एम वगैरा वगैरा राइट हमने कॉन्सेप्ट पढ़ा था लेयर जीरो लेयर वन लेयर तू लेट को पहले कर ही है वन में तो वन वाली लेयर वन में उठेगी तू वाली उसकी ऊपर लेयर में उठेगी राइट और जरा देखते हैं तो हम यहां पे जाएंगे कार्बन पोजीशन एब्सलूट ये उठ गई अगर हमने पर्पल वाली भी उठाई तो
ये लेयर तू भी उठेगी मतलब कार्बन के भी ऊपर ये देखो और सबसे ऊपर उठेगी क्या तुम समझ रहे हो क्या हुआ तो ऐसा है की आई बिलीव समझ ए गया होगा राइट तो दिस इसे अबाउट पोजीशन अब एक बार चलते हैं जल्दी से पोजीशन रिलेटिव समझना फटाफट डॉ करो और रिलेटिव भी समझना ही है तो अभी टर्न नहीं करते अभी देख लेते हैं आगे ठीक है तो अब पोजीशन चलते हैं देखो यहां पे मैंने एक बॉक्स बनाया ये बॉक्स है इसका नाम अपुन दे देते हैं बॉक्स क्योंकि उसका नाम बॉक्स है [संगीत] [संगीत] [संगीत]
[संगीत] मेरी बात समझना किसी को तुमने ऊपर उठ गया उसके अंदर भी एक चाइल्ड है पराठे वाले के अंदर और आप चाहते हो की वो चाइल्ड हमेशा उसके अंदर रहे तो अब आपको से रिलेटेड बनाना पड़ेगा पर वो तो ऑलरेडी है तो फिर आपसे रिलेटिव और एब्सलूट दोनों साथ में कैसे बनोगे अगर कोई एलिमेंट ऑलरेडी पोजीशन एब्सलूट है तो आपको रिलेटेड बनाने की जरूर नहीं है वो रिलेटिव का कम भी परफॉर्म कर रहा होता है इस वक्त ऊपर भी उठाएं लेकिन वो रिलेटिव का कम भी परफॉर्म कर रहा है उसके अंदर का चाइल्ड उससे बाहर
वैल्यू उसके रिस्पेक्ट में वालुज लगा मोर लाइक डेट इसे समझ आया तो एक चीज और कंप्लीट कारी अब चलते हैं फटाफट ए जो इंसान तुम लोग को पता ही हम लोग कितने महंगे इंतजाम कर पाते हैं आजाद पर लेकिन ठीक है तुम लोग के लिए ए जो लेट को तो फ्लेक्स बॉक्स समझते हैं ठीक है एक बॉक्स है मैंने उसमें पहले एलिमेंट लगाया जो की ये ठीक है कुछ इतना एलिमेंट है इतनी डर है पुरी मिट्टी इतनी मिट्टी ले रहा है दूसरा एलिमेंट डाला जो की यहां पर रख लेते थे ठीक है और तीसरा एलिमेंट
डाला कुछ ऐसा राइट ये तीन एलिमेंट्स हो गया [संगीत] स्ट्रक्चर कहां है ऊपर से नीचे की तरफ हमें [संगीत] पेरेंट्स कौन है ये वाला ये वाला राइट इसी के तो अंदर है सब कुछ तो ये वाला करंट है इसको बोल दो डिस्प्ले फ्लेक्स अभी अपन कोड में देखेंगे डिस्प्ले फ्लेक्स तो जैसे ही बोलोगे अब बात सुना जरा मेरी बात जरा ध्यान से सुना जैसे ही तुम जैसे ही तुम फ्लेक्स बॉक्स बनाते हो किसी भी एलिमेंट को उसके अंदर दोस्त दो इमेजिनरी एक्सिस चालू होती है एक होती है हाइट वाइस फ्रॉम टॉप से बॉटम और एक
होती है लेफ्ट से राइट ये होगा लेफ्ट यह वाला नहीं तुम लोग का लेफ्ट से राइट परफेक्ट तो एक होती है लेफ्ट से राइट की तरफ और यह होती है टॉप से बॉटम की तरफ आओ जरा समझते हैं तो पर एग्जांपल ये वाला मैंने रख दिया टॉप से बॉटम के लिए ठीक है और अपन ने लेट से यार मेरे पास एक पेन हो रहा है [संगीत] [संगीत] अभी अपन देखेंगे और इस पर उसे होता है जस्टिफाई कंटेंट तो बात सुनो इधर देखो है जो है जो हां वेट पे कम करने के लिए उसे होता है
जस्टिफाई कंटेंट मेरे साथ बोलो मिड पे कम करने के लिए उसे क्या होता है जस्टिफाई कंटेंट बेड पे कम करने के लिए क्या उसे होता है जस्टिफाई कंटेंट और हाइट पे कम करने के लिए क्या उसे होता है एलाइन आइटम ठीक है एलाइन आइटम याद रखना ठीक है और अभी अपन साथ में कम करने के लिए क्या उसे होता है और हाइट भी उसे करने के लिए क्या होता है दोस्तों याद रखना है एकदम नहीं भूलना है जस्टिफाई कंटेंट पर वेट एलेन आइटम्स पर हाइट और अभी अपन चलेंगे और सर झूल्म दाल सब समझ ए
जाएगा क्यों मैंने ये पटाया लेट को अब बड़ी आई है कोड की फटाफट कोडिंग करेंगे समझेंगे तो समझ ए गया होगा फ्लेक्स बॉक्स एग्जकताली क्या है लेट को मेरे पास यहां पे एक बॉक्स है जिसके अंदर मां लेते हैं [संगीत] जरा ध्यान से सुना मेरी बात आई बिलीव तुम्हें समझ आएगा [संगीत] इसके अंदर मेरे को तीन बॉक्स क्रिएट करने हैं बॉक्स वन विच इसे [संगीत] बॉक्स वन रेड की जगह होगा परफेक्ट ऐसा ही है थोड़ी सी बड़ा देते हैं 110 कर देते हैं और यहां पर प्यार भाई हम लोग इसको कर देते हैं [संगीत] मुझे
पता है लेकिन ठीक है [संगीत] तो बहुत गंदा लगेगा [संगीत] ओके ताकि और गंदा लगे ठीक है सुनो तो इस वक्त ये देखो ये ऊपर नीचे ए रहे हैं हमने कॉन्सेप्ट में पढ़ा था यह तो थोड़ा सा तरंगेनी सा लगेगा बढ़िया तो हमने कॉन्सेप्ट में पढ़ा था की भाई बाय डिफोली ओपन नीचे आते हैं लेकिन अगर आप चाहते हैं की वो अगलें| तो उसे चीज को करने के लिए आपको पेरेंट्स को डिस्प्ले फ्लेक्स बोलना है बस और सारे एलिमेंट्स अवेलेबल हो जाएंगे परफेक्ट पैरंट कौन था इन तीनों का ये ग्रे वाला बॉक्स तो हम ग्रे
वाले बॉक्स को बोलेंगे डिस्प्ले फ्लेक्स ना की इन तीनों को राइट याद रखना बढ़िया अब मैंने तुम्हें बार-बार रिटवाया था जस्टिफाई कंटेंट पर वेट देखो जस्टिफाई कंटेंट सेंटर बोलोगे तो तीन एलिमेंट [संगीत] [संगीत] चाहिए तो हमें सेंटर आना चाहिए सेंटर आना चाहिए और हमें आना चाहिए [संगीत] तो आपको बहुत दिक्कत होती है मत करो मैं समझता हूं कैसे देखो वेट में ये एलिमेंट्स कहां है सेंटर पे हाइट में एलिमेंट का सेंटर पे तो दोनों वालुज क्या है सेंटर अगर विटामिन मुझे इसे और में चाहिए हो तो जस्ट और हाइट में अगर सेंटर पर चाहिए और
अब हम शुरू करेंगे हमारा प्रोजेक्ट मेरे प्यार भाई मुझे बहुत खुशी है अपने यहां तक कंप्लीट किया है अगर हम प्रिडिक्शन यकीन रखो खुद पे यकीन रखो मलिक पे यकीन रखो वे बिल लेट को तू डी नेक्स्ट वीडियो
Related Videos
Create a 3D Animated Website Using HTML, CSS & JS | Scrolling Animations with Canvas
1:53:51
Create a 3D Animated Website Using HTML, C...
Sheryians Coding School
216,549 views
JavaScript Crash Course: Master the Basics in One Video! Ignite Your Front-End Mastery Series!
1:13:17
JavaScript Crash Course: Master the Basics...
Sheryians Coding School
815,779 views
Unfiltered Baatcheet | Tips
11:41
Unfiltered Baatcheet | Tips
Sheryians Coding School
13,367 views
JavaScript কে যেভাবে আপনার ওয়েবসাইটে কাজে লাগাবেন ।। JavaScript DOM - 01 ।।
22:03
JavaScript কে যেভাবে আপনার ওয়েবসাইটে কাজে...
ShahriarCode
4,179 views
Learn CSS in 1 hour 🎨
1:00:00
Learn CSS in 1 hour 🎨
Bro Code
1,130,426 views
Learn Flexbox CSS in 8 minutes
8:16
Learn Flexbox CSS in 8 minutes
Slaying The Dragon
1,573,841 views
HTML Crash Course: Master the Essentials in One Video! Start Your Front-End Journey Today!
25:01
HTML Crash Course: Master the Essentials i...
Sheryians Coding School
362,650 views
ReactJs Crash Course: Master the Basics in One Video! Ignite Your Front-End Mastery Series!
1:22:50
ReactJs Crash Course: Master the Basics in...
Sheryians Coding School
277,839 views
CSS Crash Course For Absolute Beginners
1:25:11
CSS Crash Course For Absolute Beginners
Traversy Media
4,452,817 views
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
These CSS PRO Tips & Tricks Will Blow Your...
Coding2GO
247,649 views
How much HTML, CSS and JavaScript is Enough to get a Job 🔥
14:32
How much HTML, CSS and JavaScript is Enoug...
CodeWithHarry
205,666 views
🤯 Mind blowing websites | Reimagine 2024 – Don’t Miss Out! 💻 ❌
23:48
🤯 Mind blowing websites | Reimagine 2024 ...
Sheryians Coding School
211,656 views
Learn CSS in 20 Minutes
23:44
Learn CSS in 20 Minutes
Web Dev Simplified
1,861,987 views
Master Advanced JavaScript Concepts and Become a JavaScript Ninja
1:14:24
Master Advanced JavaScript Concepts and Be...
Sheryians Coding School
246,903 views
Design an Animated Website and Stand Out in College 😎| Front-End Minor Project 2023
2:02:59
Design an Animated Website and Stand Out i...
Sheryians Coding School
351,779 views
10 CSS Pro Tips - Code this, NOT that!
9:39
10 CSS Pro Tips - Code this, NOT that!
Fireship
2,204,405 views
How Much HTML, CSS , JavaScript Required To Get Job in 2024
13:44
How Much HTML, CSS , JavaScript Required T...
Rohit Negi
86,330 views
Learn Complete CSS In One Video In Hindi
1:31:36
Learn Complete CSS In One Video In Hindi
Thapa Technical
608,728 views
CSS 3 Tutorial For Beginners: Learn CSS In One Video In Hindi
1:38:45
CSS 3 Tutorial For Beginners: Learn CSS In...
CodeWithHarry
441,552 views
Copyright © 2025. Made with ♥ in London by YTScribe.com