Hello and welcome to Aapna College, this is the Web Development Course और आज के इस वीडियो में हम पढ़ने वाले हैं Layouts के बारे में तो पिछले वीडियो में मैंना आपको बताया था कैसे Responsiveness काम करती है कैसे हम अलग-अलग Devices के लिए अपनी Website को Layout करते हैं तो इस वीडियो में हम देखेंगे Layout होता क्या है कैसे हम किसी वीडियो को Layout कर सकते हैं फिर हम डिस्कस करेंगे कुछ Important Properties जैसे कि Display, Position, Floats और सबसे पहले देखते हैं यह layout होता क्या है तो basically हमारे जितने भी HTML के elements है उनको हम अभी तक position नहीं कर सकते हैं हम चाहे वहाँ नहीं रख सकते हैं उनका एक order है जिसमें वो display हो रहे होते हैं तो layout कैसे करते हैं वो समझने से पहले हम देख लेते हैं यह normal flow क्या चीज़ है ठीक है तो normal flow का मतलब होता है यार कैसे हमारा जो web browser है वो default चीज़े दिखाता है किस order में हमारी चीज़े display हो रहे होती है उसको हम यार normal flow कहते हैं ठीक है तो अगर आपको याद हो तो यार HTML वाले वीडियो में हमने एक web page बनाया था है ना तो उसके अंदर हमने कुछ CSS लगाई थी लेकिन अगर हम उस CSS को हटा देते हैं तो हमारा जो HTML से जो भी elements आ रहे होते हैं वो दिखने लग जाते हैं तो वो जो flow होता है ना तो उसी का हम normal flow कहते हैं तो यहां पर हम आ चुके हैं यार हमारे web page पर और अब इसकी CSS को हटाते हैं ठीक है और मैं इसको comment कर रहा हूँ, save करेंगे, और जाएंगे वापस इधर, और refresh करते हैं, तो आप देख सकते हैं यह जो यहाँ पर elements आ रहे हैं, वो एक normal flow के अंदर है, क्योंकि यार हमने सबसे पहले use किया है, h1, जो कि यहाँ पर आपको दिख रहा है, और वो यहाँ पर display हो रहा तो हमको इसके ऊपर कुछ CSS लगाने पड़ेगी, ठीक है? तो जब हम बात करते हैं या लेआउट की, तो सबसे important property है हमारी display, है न? तो display property के अंदर हमने कुछ बहुत important values discuss करी थी, जैसे कि inline और block, लेकिन उसके अंदर और भी बहुत सारी values है, जो कि हमको अभी तक discuss करनी है, ठीक है? तो सबसे पहले हम float property का use करेंगे, तो basically ये जो हमारा कोई भी element है, वह एक नॉर्मल फ्लो से बाहर आ जाएगा सबसे पहले और फिर वह जो उसकी पोजीशन है वह जैसे हम लिखेंगे वैसे होने लगी जैसे अगर हम लेफ्ट लिखेंगे तो वह इमेज अगर है तो वह इमेज पूरी लेफ्ट में आने लगेगी और अगर हम राइट लिखेंगे तो वह जो इमेज है वह राइट में आ जाएगी ठीक है और यह जो इसका नॉर्मल फ्लो है अगर मतलब साइड में अगर टेक्स् है तो सबसे पहले हमको एक फोल्डर बनाना होगा तो यहां पर मैं डेक्स्टॉप पर जाता हूं और राइट क्लिक करके नया फोल्डर बना देते हैं नाम मैं इसका रख रहा हूं लेआउट सीएसस ठीक है और इसको मैं यहां पर रख देता हूं और पर क्लिक करते हैं इसको सेव करते हैं और मैं इसका नाम दे रहा हूं फ्लोट डॉट एचटीमल ठीक है और सेव करते हैं इसको तो सबसे पहले हम क्या करते हैं हम एक document structure बना देते हैं और इसके अंदर हमको यहाँ पे float property के बारे में discuss कर रहे हैं तो मैं लिख देता हूँ float फिर हम क्या करेंगे यार इसके अंदर मैं कुछ resume type structure बना रहा हूँ तो body के अंदर यार सबसे पहले तो मैं एक heading लगा देता हूँ और heading में मैं फिर से float property लिखता हूँ क्योंकि हम float के बारे में discuss कर रहे हैं ठीक है फिर नीचे यार मैं एक image डाल रहा हूँ जो की एक user की image होने वाली है अब इस image को यार हम कहां से download करेंगे तो मैं google chrome में जाता हूँ और as a user कोई image download करनी है तो मैं लिखूँगा user image और यहाँ पे आर कुछ images आ गई है तो इन में से कोई एक pick कर लेते हैं और यार images अगर आप pick करो तो png में pick करा करो अगर आपको मिल जाए तो क्योंकि png वाली image जो होती है ना उसका background नहीं होता है ना तो यहाँ पे background blur है आपको दिख रहा होगा तो इसको मैं download कर देता हूँ तो right click करेंगे open image in new tab है और फिर से मैं कर देता हूं सेव और सेव करेंगे और उसी फोल्डर में जहां हमारा यह फोल्डर पड़ा है लेट सीएसस नाम ठीक है सेव कर दिया अब इसको मैं लोग करता हूं इसको भी मैं लोग करता हूं आ जाते हैं हमारे यह इस कोड के चेंज कर देते हैं इसे और इसका मैं रख देता हूं नाम यूजर डॉट जेपीजी ठीक है अब यह फाइल जेपीजी में आई है कोई दिक्कत नहीं इसको अब हमको खाली यहाँ पर link करना है तो मैं user.jpg नाम की file को link कर देता हूँ और इसको ऐसी छोड़ देते हैं और फिर हम आते हैं नीचे और नीचे इसके अंदर मैं एक heading लगा देता हूँ और इसमें लिख देता हूँ resume और इसका जो output है यार वो अभी हम एक second में देखन पैराग्राफ डाल रहा हूं ठीक है अब यहां पर फिर से इसको सेव करते हैं और यह वर्ड रैप नहीं हो रहा है तो उसको एक बार में वर्ड रैप कर देता हूं ताकि आपको यह अच्छे से दिखे तो यहां पर हम जाते हैं व्यू के अंदर और यहां पर ऑप्शन जड़ आपको यह थोड़ा यार बड़ा दिख रहा है तो मैं इसको छोटा कर देता हूं और ऐसे ही कुछ फिफटी बाइफिटी के और दो-तीन परिवर्फ बना देता हूं है अब इसको सेव करते हैं और गो लाइव पर क्लिक करते हैं जिससे हमारा आउटपूट दिखें तो गो लाइव का यहां पर अगर आप देखो तो बटन नहीं आ रहा है क्यों नहीं आ रहा है तो यहां पर मेरा लाइव सर्वर भी इंस्टॉल्ड है CSS के selector से इसको edit करूँगा, तो इसके अंदर मैं style दे देता हूँ, और style में सबसे पहले यार हम body को change कर देते हैं, तो basically यार मैं चाहता करूँ, ये पूरा single page में एक resume जैसा दिखे, तो इसके अंदर यार हम body में, हम सबसे पहले margin दे देते हैं, और auto लिखे हम इसको save करते हैं, और फिर जाते हैं हम नीचे लिखेंगे max width, 900 pixels, और आगे हम width दे देते हैं इसको, तो वो width हम देंगे 90%, ठीक है?
तो हमारे ब्राउजर का जो 90% वह दिखने लग जाएगा तो यहां पर आप देख सकते हो यह एक अच्छा सा रेजूम लाइक दिख रहा है लेकिन यहां पर अभी भी जगह है तो वह हम फ्लोट प्रॉपरिटी से हटा देंगे तो जैसे मैं नीचे आता हूं और सबसे पहले ह पिक्सल्स और फिर हमने आगे यहां पर बॉडर रेडियस लगाया और यहां पर हम बॉडर रेडियस क्यों लगा रहे हैं ताकि यह जो हमारा बैकग्राउंड कलर हम देने वाले हैं उसको एक रेडियस मिले और वह कर सकते हैं ताकि थोड़ा खूबसूरत होगा तो जैसे मैंने यहां पर दिया इसको कलर तो इसमें आप यह कलर मांग रहा है तो मैं आप इसको एक लाइट लूट और फिर हम इसको save करते हैं और एक बार यार इसका output देख लेते हैं तो जैसे मैं यहाँ पर जा रहा हूँ तो आपको दिख रहा होगा एक अच्छा सा यहाँ पर output दिख रहा है लेकिन अभी हमने float property का use नहीं किया है ना तो चलते हैं float property का use करके देख लेते हैं तो सबसे पहले में हम लिखेंगे float और यहाँ पर left आ रहा है तो left side में हमारे इमेज है उसका box float करना चाहिए तो वो जो normal layout है उससे बाहर आ जाएगा और बाकी सारी चीज़े यार वैसी की वैसी रहीगी तो उसका मतलब क्या है जो हमारा text है उसको लगेगा कि normal flow से हमें दिखना है तो वो उपर आ जाएगा और साइड में हमारा वो जी इमेज हो फ्लोट हो रहा है तो वो लेफ्ट की साइड आ देगा तो देखो कैसा इसका आउटपूट आ रहा है तो आप देख सकते हैं यहाँ पे हमारा इमेज आ रहे हैं और हमारा यह जो टेक्स्ट है वो उपर की तरफ चला गया है लेकिन इसके प्रॉपर्टी का यूज करके इसे बैकग्राउंड दे देता हूं तो यहां पर हमारा रेजूमे जो है वह जो टेक्स्ट है उसको मेरे को सेलेक्ट करना है तो उसको एक हम क्लास देते हैं ठीक है तो क्लास में लिख रहा हूं यार स्पेशियल और सेव करते हैं और यहां पर हमारा सेलेक्टर है इसको सेलेक्ट करेंगे डॉट स्पेशियल नाम के सेलेक्टर से ठीक है और फिर और फिर इसके अंदर हम padding दे देंगे और padding में मैं लिख रहा हूँ 15 pixels और इसके नीचे हम यहाँ पर दे देते हैं कुछ और property जो की है color और color हम क्यों दे रहे हैं ताकि हमारा जो text है उसका color हो जाए change तो white रखते हैं इसका color और save करते हैं तो आप यहाँ पर देख सकते हैं यहा तो मान लो अगर मैं right में use करना चाहूँ तो क्या होगा तो basically यार जैसे हम right करेंगे तो यहाँ पे सारी चीज़े right में आ जाएगी और हमा तो ये तो आपने देखा है यार float property को कैसे हम use कर सकते हैं, अब हम देखते हैं यार float के साथ में एक और property है जो की है clear, जो की use करी जाती है यार अगर आपको मान लो ये वाला जो text है हमारा आ रहा है ये वाला, second वाला, इसको आप side में नहीं दिखाना चाहते हो, खाली आप चा clear नाम की एक property है उसका use करते हैं तो एक बार आप example से देखोगे तो आपको अच्छे से समझ में आएगा कि मैं क्या कहना चाह रहा हूँ तो यहाँ पे मैं कहा चाहता हूँ मैं इस वाले paragraph को select रहना चाहता हूँ है ना तो सबसे तो यहाँ पे मैं इसको select कर रहा हूँ एक class देता हूँ और class में हम लिख रहे हैं cleared ठीक है save करते हैं और यहाँ पे उपर जाते हैं हम कुछ properties दे देते हैं तो यहाँ पे हम लिखेंगे cleared और clear property तो यहाँ पे यार clear नाम की हमारी property है और इसको हम left से clear करना चाहते हैं हाल फिलाल actually right से clear करना चाहते हैं तो मैं right लिख रहा हूँ और जैसे ही मैं इसे save करूँगा आप यहाँ पे देख सकते हो यह जो हमारा text है वो नीचे से start हो रहा है बहना यहाँ तक हमारा first वाला और इसमें अगर मैं left डालू तो क्या होगा तो basically यार कुछ नहीं हो रहा है क्योंकि हमने float जो है वो right रख रहा है तो जैसे मैं इसको left कर दूँगा और save करूँगा तो आप देख सकते हो फिर से हमारा इस जो है float मतलब float का opposite है आपको कोई पे float यूज़ करना है और उसके साथ में कोई particular elements है उसके अंदर फिर से float की जो property है उसको हटाना है तो आप उन particular elements में clear नाम की जो property है उसका यूज़ कर सकते हो और फिर यार वो जो अली चीज़ जो है हमारी वो normal flow से चलने लगी ठीक है तो बस यह था यार हमारा float property next हम देखते हैं यार हमारा position property ठीक है तो फिर से यार हम VS code खोलेंगे और यहाँ पर एक नई file बनाते हैं और file का नाम हम इस बार देंगे position क्योंकि हम यार position property के बारे में discuss करने वाले हैं ठीक है और इसे save करते हैं और इसके अंदर हम लिखें और इसे save करते हैं, फिर आते हैं हमारे body के अंदर, और body के अंदर अब हम यार एक div बनाने वाले हैं, और उस div के अंदर मैं बहुत सारे boxes बनाऊंगा, पहले तो हम empty boxes बनाएंगे, फिर CSS की मदद से उसे style करके एक box shape में कुछ color दे देंगे, ठीक है, तो कैसे करेंगे, देख ल उस parent element को सबसे पहले हमें कोई class देनी है तो उसको भी हम emit की मदद से लिखने वाले है तो जब भी हमें class देनी होती है किसी भी element के अंदर तो हम element का alarm लिख देते हैं और फिर dot लगा कर उस class का नाम और अगर आपको id देनी है तो उस dot की जगे आप hash लगा सकते हो और मैं उस class का नाम दे देता हूँ जो की है box set अब इसके अंदर हम कुछ child देने वाले हैं तो चार मैंने कहा div child देंगे div element को as in child दे रहे हैं और फिर मैंने लिखा into 4, जिससे इसके अंदर 4 div as in child बन जाएंगे, अब उन चारों के अंदर हमको एक और class देनी है, तो मैं इस div के आगे भी लिख देता हूँ dot, और फिर मैं इसमें लिख देता हूँ class का नाम, जो की है box, ठीक है, अब इसे 4 रखते हैं, और दबाएंगे enter, चीट देखोगे तो यह वाली जो मैं क्लास लिख रहा हूं ना बॉक्स 123 यह भी हम एमिट की मदद से कर सकते हैं ठीक है तो यहां पर मैंने बॉक्स 1234 लिख दिया है अब हम क्या करेंगे अब हम जाएंगे फिर से इस डिव के अंदर और इसमें कुछ टेक्स दे देते ह लेकिन अगर हमको कोई बड़ा code लिखना हो कोई website है और अगर किसी web page पे हम काम कर रहे हैं तो हम यार उस styling को अलग file में लिखे लिंक कर सकते हैं अभी के लिए हम यार style tag का use कर लेते हैं और इसके अंदर हम क्या लिखेंगे इसके अंदर मैं सबसे पहले box set को और साथ मैं box को कुछ styling दे देता हूँ तो basically यार मैं border देने वाला हूँ ताकि इसके अंदर जो color हो उसका भी एक border आ जाए तो मैंने लिखा यार पे box और दूसरा मैंने लिखा box और फिर यहां पर कॉमा लगाना जरूर है ताकि हम दोनों में दे रहे हैं यह पता चलेगा ठीक है अब यह सेलेक्ट हो गया है तो इसमें एक बॉर्डर रेडियस दे देते हैं जिससे यहां पर कुछ कर्व शेप में हमारा बॉर्डर आ जाए ठीक है इसे सेव करते हैं और नीचे जा सरी box जो class है उससे style करते हैं तो मैंने यहाँ पे box class को select किया और यहाँ पे मैं background दे रहा हूँ तो background color में हम लिखेंगे फिर हम इसके अंदर यार कुछ height दे देते हैं, जिससे कि वो height हमको box की एक size में दिखने लगे, है ना, तो यहाँ पे हम manually ले ये height, और फिर हम width देंगे, width में भी मैं same ले रहा हूँ, क्योंकि हम एक square बना रहे हैं, है ना, तो यहाँ पे हमारी height और width आ चुकी है, तो अब हम तो अब यार ये एकदम सही से हमें दिखने लगेगा तो हमारा यार वो एक बार फिर से खोल देते हैं go live करके और जैसे ही मैं इसे खोलूँगा तो आप देख सकते हैं यार हमारे boxes दिख रहे हैं लेकिन इसके बीच में यार margin नहीं है तो एक बार हम margin भी दे देते हैं तो यार पे मैंने लिखा margin और फिर हम लिख देते हैं यार 20 pixels अब फिर से हम browser में जाते हैं और अब हम देखते हैं हमारी position property जिसके बारे में हम अभी discuss करने वाले हैं तो सबसे पहले हम यार एक position में देखेंगे static नाम की एक value होती है उसको देख लेते हैं तो static नाम की एक value है यह एक default value है जो हमेशा हर element में लगी होती है जब भी हम default कोई भी property element लिखते हैं तो हर element की value यहाँ पे position static होती है ठीक है अब यह default value है तो इसके अंदर जो भी हमारा flow होगा वो natural ही होगा और इसके अंदर कोई change नहीं आएगा अगर आप box properties को use करो अब box properties क्या है वो अभी हम देखते हैं तो सबसे पहले मैं अगर इसको दूसरा value दू जो की है relative तो इसमें क्या हो सकता है तो basically अगर हम relative का use करते हैं तो हमारे जो natural flow है वो वैसा का वैसा रहता है जैसे कि मेरा alignment था वो वैसा ही है जैसा पहले हमारा दिख रहा था अब लेकिन इसमें फरक क्या है इसमें हम box properties का use कर सकते हैं तो यहाँ पे अगर मैं top लिखूं और फिर लिखूं 20 pixel और save करूं तो क्या होगा तो अब इस top का मतलब क्या है basically अगर हम position relative लिख रहे हैं और फिर हमने top 20 pixel लिखा तो वो top से 20 pixel नीचे की तरफ किसक जाएगा कैसे देखते हैं तो यहाँ पे मैंने यार top लिखा था 20 तो आप देख सकते हैं यार यह पूरा यहाँ से नीचे की तरफ आ गया है तो यह सारे boxes select हो रहे हैं लेकिन अगर हम किसी particular box को select करें तो क्या होगा तो यार इसको एक बार हटा देते हैं और हम एक बार एक particular box को select करते हैं तो मैं याद पर बॉक्स वन को सेलेक्ट कर रहा हूं ठीक है और इसके अंदर मैंने पेस्ट कर दिया वह टॉप तो हमारा जो बॉक्स वन वाला जो है वह टॉप से 20 पिक्सल नीचे की तरफ की सक जाएगा तो अगर मैं याद पर देखूं तो आप देख सकते हैं यार ये जो थोड़ा सा अगर और मैं नीचे करूँ तो आप देखो कि ये overlap भी हो जाएगा, ठीक है, तो इसे 100 pixel करके देखा, तो आप देख सकते हैं यार, ये जो box 1 है, वो box 2 के पीछे चला गया है, और अब हमको बिलकुल भी नहीं दिख रहा है, है ना, तो बस यार ये ही काम आता है हम वो normal flow में नहीं आती है, तो एक बार मैं इसको हटा देता हूँ, और save करता हूँ, तो आप देखना यार, यहाँ पे हमारे सारे जो boxes थे, वो एक के उपर एक आ रहे हैं, क्योंकि यार इसको हमारे जो normal flow है, उसमें कोई जगा नहीं मिल रही है, तो हमारे जैसा page है, वो सारे उसके ancestor वाले element के नीचे एक साथ ही दिखेंगे, कि इसमें खाली box 4 है, तो ऐसा नहीं है, इसके पीछे box 3 भी लगावा है, box 2 भी लगावा है, तो अगर उसको देखना है तो मैं क्या करता हूँ मैं इस box 4 को एक बार delete करके दिखाता हूँ तो मैं इसे delete करता हूँ तो delete के लिए आप basically किसी भी element पर click करो और delete दबा दो तो आप देख सकते हैं यहाँ पर box 3 आ रहे हैं तो अगर मैं 3 को delete करूँ तो 2 आ रहे हैं तो आपने देखा कि एक के पीछे एक था यह सारे साथ में है क्योंकि हमने absolute का यूज किया अगर मैं इसको यहाँ पर टॉप से थोड़ा सा किसका के देखूं तो क्या होगा तो basically हमारा क्योंकि एकी जगह सारी चीजें आ रही है तो आपको दिख नहीं रही है लेकिन अगर मैं इसको यहां पर बॉक्स वन को थोड़ा सा टॉप से या बॉटम से बॉटम भी उसकर सकते हैं मतलब टॉप बॉटन राइट लेफ्ट यह सारी प्रॉपरिटीज है जिनको हम यूज कर सकते हैं इसके अंदर और जब भी हम पो� अब अगर मैं इसको यहाँ पर right से करूँ तो क्या होगा तो यहाँ पर अगर मैं right से करूँ तो आ कि हमारा right side से 10 pixel दूर की तरफ है ना तो बस यार कुछ इस तरह से हम position absolute का use करते हैं तो अब इसके अंदर यार चौती value हमारी है वो है fixed तो fixed का भी use करके देख लेते हैं तो fixed क्या होता है तो basically इसके अंदर हमारा जो normal flow है वही रहेगा अंदर हमारा जो box है वो fixed एक जगे पे वो सारी वैसी रहेगी लेकिन ये जो element है वो वही का वही रहेगा चाहे आप scroll down करो right करो left करो वो चीज वही चिपकी रहेगी एक बार आपको अगर example से देखना है तो मैं कुछ random text लिख देता हूँ इसके नीचे ताकि हम scroll bar का use कर सकें और आपको पता चले कि कैसे ये चीज़े काम कर रही है तो यहाँ पे आर मैं low ram 1000 लिख देता हूँ और save करते हैं और जाएंगे हमारे browser में तो अभी भी यार ये थोड़ा सा कम है तो मैं एक और p tag खोल देता हूँ और एक और low ram लिख देता हूँ तो मैं लिख रहा हूँ low ram और 2000 कर देता हूँ और फिर एंटर दबाएंगे सेव करेंगे और जाएंगे ब्राॉजर में तो आप देख सकते हैं यहाँ पर यह जो हमारा बॉक्स है यह तो उपर आई रहा है क्योंकि यह नॉर्मल फ्लो में नहीं है बट साथ में अगर मैं इसे स्क्रोल करूँ तो आप देखो यह जो बॉक् वन को सेलेक्ट कर रहा हूं सबसे पहले टॉप से टेन पिक्सल्स और फिर मैं इसको कॉपी करके नीचे कर देता हूं तो उसके लिए मैंने यहां पर चार और बॉक्स ले लिए तो अब यहां पर मैं इसको बॉक्स टू से सेलेक्ट कर देता हूं और फिर बॉक्स थ्री से और फिर बॉक्स फॉर से ठीक है और एक और काम करेंगे यहां पर इसको राइट से ला लेते हैं उसको तो आप देख सकते हैं यहाँ पर box 3, 4, 2, 3 वो आ रहे हैं लेकिन हमारा box 1 नहीं आ रहा है क्यों? क्योंकि यार उसको हमने बोला है left से शुरू होना 10 pixel दूर जो कि यहां से यहां आ रहा है और दूसरा हमने box 3 को बोला है top से शुरू होना वो भी यहीं आ रहा है तो फिर से यार हम VS Code में जाएंगे और अब हम यार last वाला value देख लेंगे जो कि है sticky तो basically हम यार इसके अंदर scroll bar की मदद से कुछ एक transition ला सकते हैं जो की बहुत ही cool लगेगा अगर आपको मैं एक बार दिखाता हूँ तो sticky से होता क्या है तो basically यार हमारा ये mixture है fixed और relative का कैसे तो यार इसके अंदर हमारा जो normal flow है वो भी आ रहा है लेकिन ये fixed भी है कैसे until and unless box 2 उसके उपर ना आ जाता है और जैसे ही box 2 आएगा वो हलका से उपर जा रहा है box 4 उपर जा रहा है और फिर वो चला गया है ना तो ये कैसे हुआ तो यह हुआ यार हमारा position sticky की मदद से ठीक है तो यह थी floats और position property अब next video में मैं आपको थोड़े से challenges देने वाला हूँ तो मिलते हैं next video में तब तक के लिए see you have a great day and I will catch you up in the next one