Day - 22 | CSS Max-Width, Min-Width & Units Explained | Complete Class

Name: Day - 22 | CSS Max-Width, Min-Width & Units Explained | Complete Class
Uploaded: 2025-12-19T06:57:51+00:00
Duration: 1 h 3 min 47 s
Channel: skillwaala

skillwaala

2 weeks ago

👨‍💻 What You’ll Learn in This Class:
✅ Difference between width, max-width, and min-width
✅ How max-width helps in making layouts responsive
✅ How min-width prevents elements from shrinking too much
✅ Understanding different CSS units — px, %, em, rem, vh, vw
✅ Practical examples and how to choose the right unit for design
✅ Real-time coding with responsive demo

Category

📚

Learning

Transcript

Display full video transcript

00:00:00गुट इनिंग, गुट इनिंग, आशिश ने भेजा है अपना जो टास्क है को कम्प्लीट करके

00:00:30एक बार के लिए मैं आपको श्क्रीन श्याय कर देता हूँ

00:00:32ठीक है, प्रमटेड और फिफ्टी परसेंट और टू थार्टी एट मिनट बिल्कुल सही टास्क एक तम सही है आपने पोजिशन से यूज करिए

00:00:50अब डाविलोपर ठीक है, सही है ये टास्क भी और ये वाला भी सही है टास्क जिसने भी बेजा है अलका सही है आपका भी गुड इवनिंग सायदान, गुड इवनिंग से बूल, अनमोल, अशिश ठीक है, सही है

00:01:07अब इनननने भी जा है, ठीक है, प्रमोटेड, परफेक्ट, अच्छा बना है, सिबुल, ठीक है, परफेक्ट, एक तम परफेक्ट, गुड इवनिंग जिपिका, परफेक्ट, सही है

00:01:26इसमें देखो, यह प्रमोटेड में पैडिंग लगाओ, लेप राइट की थर्टी एट मिनिट में भी पैडिंग लगाओ, लेप राइट की तो अच्छा लगेगा, उतुम लाज पूरा, गुड आणिग मिं, गुड इवनिंग, छीक है, परफेक्ट, सरा आज में यही बन

00:01:56एक बार सब रेस्पोंस कर दो कि निए वॉइस क्लियर है और डिस्प्ले भी वीजिबल है आप सबी हो यह

00:02:04रेस्पोंस कर दो फिर उसके बाद अपनी क्लास चाहर करते हैं आज की

00:02:07हौल के लिए ठीक है च्छेड़ ऑई आज अपन क्या डिसकस करने वाले है आग

00:02:18जो भी CSS में चीज़े बच लिए उस पर discussion करते हैं देखते हैं क्या करना है आज discussion

00:02:23देखो पने width और height पढ़ी थी width और height में maximum width और maximum height पर पने discussion नहीं तो उस चीज़ पर discuss कर लेते हैं

00:02:33maximum width, maximum height इस चीज़ के उपर अपने बाद discuss कर लेते हैं फिर उसके बाद आगे देखेंगे और क्या क्या चीज़े देखने हैं तो मैं यहाँ पर file then open folder और अपने folder की उपर

00:02:47CSS class करके अपने पास folder है इसके उपर मैं आ जाता हूं

00:02:54ठीक है तो अपने discuss करते हैं यहाँ पर अपने maximum width और maximum height क्यूब पर

00:03:02यहाँ पर अपने एक नया folder बना लगते हैं जिसको मैं यहाँ पर करता हूं max width.stml

00:03:12बागी की folder close कर तो बागी की files बंद कर देता हूं मैं एक बार के लिए जितने भी अपने

00:03:24open कर रखी है यहलो यहलो यहलो यहलो यहलो यहलो ठीक है boilerplate लगा लो अब देखो अपने देखा था width और height

00:03:36अपने पास क्या होती है width और height set करना तो अपने देखा था कि अपनी width और height अपन यहाँ पर किस तरीके से set करते हैं

00:03:42width और height वाला concept तो easy था कि अपने estimate अपन किसी भी element के उपर जैसे मालो div ले रहे

00:03:49image ले रहे अपनी card ले तो वहाँ पर अगर अपन width और height देते हैं उसका मतलब यह है कि आपने

00:03:56width और height देए वो fix है ठीक है जो pixel के अदर अपन दे लेते हैं जैसे मालो मैं यहाँ पर कोई

00:04:01बॉक्स ले लेता हूँ मैंने गुला dot box ले लेते हैं यहाँ पर ठीक है और इसको मैं यहाँ पर style कर लेता हूँ मैंने गुला dot box को मैंने यहाँ पर target किया उसको एक background color दिया और open यहाँ पर देते जैसे green और मैं

00:04:18विट देता हूँ 100 pixel और उसके अलावा 100 नहीं तो जैसे मालो पन यहाँ पर देते हैं 400 देता हूँ मैंने 400 पिक्सल विट देदी और यहाँ पर height देदी और वो मैं देता हूँ 300 पिक्सल ठीक है यह मैंने यहाँ पर pass करा और इस file को पर run करके देखते हैं तो अपने पास एक

00:04:48सूरच क्या सर कुर्यू ओज प्लीज ब्रीज ब्रीज डैनल सफिंपन्ताश यह बिल्कुल

00:05:07कि वोईस नहीं आ रहی है एक बार रैस्पोंस कर दो कि वोईस का इस्व है मेरे चाव से सब की क्लिर होगा सूरच कर बार क्लियर प्लीज चैक थीक है

00:05:16क्या सही में वोइस नहीं आ रही है मिली या फिर वोइस का इश्यू है

00:05:25नो सर इट्स ओड़ेबल ठीक है अगर सही है तो फिर आशिश आप अपना जो सिस्टम को चेक करो या फिर नेटवर्क चेक करो

00:05:34देखो यूनेट्स पर अपन डिसकस करेंगे आज जो भी चीज़े रिमेनिंग रही हो उन पर सब कर डिसकेशन करते हैं फिर उसके बाद कुछ-कुछ चीज़े और बचेगी

00:05:43मेजर मेजर चीज़े वो करेंगे फिर उसके बाद अपनी css complete हो जाएगे तो देखो यहां पर अपने इस पर width और height लगाई है मैंने बुला 400 पिक्सल इसकी क्या है width है और 300 पिक्सल मैंने इसकी height रखी है इसका मतलब यह जो मैंने element की size लगाई है यह अगर screen छोटी हो या �

00:06:13इस और height चेंज नहीं हो घी है देखो यहां पर अगर आप इसको scroll effect में आगया है इसकी width और height वही है जो है

00:06:24तो यह जो width और height है यह fix होती है जो पन देते है लेकिन अब मैं चाहता हूं कि responsive design में रहे है अपने पास पूरा जैसे माल लो अपना यह box है कभी छोटा हो जाए

00:06:43अब भी मैंने एक limit set कर दी कि width इतनी रहे और height इतनी रहे यह तो मैंने limit set कर दी कि यह width और height रहने वाली है तब आपके पास

00:06:51solution आता है आपके maximum width, minimum width, minimum height, minimum height यह इसका solution होता है तो सबसे पहले आपन यहाँ पर discuss करते हैं

00:07:01यहां पर Ida पर क्या इसको मैं सिस्टाई सब्सक्राइब है

00:07:27इसको अपन यहाँ पर टार्गेट कर लेते हैं, अब मैं यहाँ पर इसकी एक बैक्राउंड कलर में यहाँ पर सेट कर देता हूँ, जैसे मैंने बूल दिया ग्रीन कर देना, और इसका जो कलर है, वो आप रख लेना भी के लिए वाइट, चीक है, यह चीज मैंने यहाँ पर �

00:07:57अब यहाँ पर देखो, मैं क्या करता हूँ, इसकी minimum width मैं यहाँ पर सेट करता हूँ, मैंने बोला कि जो मेरा box है, यह जो new box है, इसकी initial width तो मैं कह देता हूँ कि आप 50% रख, initial width तो क्या रखो 50%, तो अब भी अगर आप देखो गी तो को percentage की अंदर है, 50% का मतलब 100% का आदा

00:08:27तो आपको यहाँ पर क्या रखनी है, वो मैं कह देता हूँ, जिसे 200 pixel आप यहाँ पर सेट कर देता हूँ, ठीक है, तो यहाँ पर मैंने बोला, initially 50% रखो, लेकिन minimum width कितनी रखो, 200 pixel यहाँ पर रखो, ठीक है, तो अगर अपना screen छोटा होता है, ठीक है, जैसे 50% अपने पास

00:08:57मैंने यहाँ पर सेट करी, 200 pixel यहाँ पर अपने सेट करी है, ठीक है, जैसे अपन यहाँ पर देखते हैं, मैं यहाँ पर आता हूँ, और अपी के लिए 50% अपने को देख रहा है, देखो, मैं यहाँ पर इसकी display size change करता हूँ, तो देखो, जैसे-जैसे display size change हो दीए, वैसे-�

00:09:27यहाँ पर change होगा, वैसे वैसे आपका वो element यहाँ पर change होता रहेगा, देखो, ठीक है, यह element अपने पास यहाँ पर क्या हो रहा है, अपना change हो रहा है, ठीक है, तो यह अपने पास होता है, अपना क्या, जो अपने देखा अपना minimum width, अगर अपने को minimum width लगानी है, तो यह responsive के

00:09:57तो अगर अपन बात करें इसका यूज अपन कहां कहां करते हैं

00:10:17जैसे मैं commonly अगर मैं बताओं यूज कहां कर सकते हैं

00:10:20अपने buttons बनाते हैं या फिर अपन cards बनाते हैं

00:10:24उनके अंदर text देते हैं तो वहाँ पर अपन ज्यादा यूज करते हैं

00:10:27यहाँ पर minimum width का ठीक है ताकि अपना जो container है

00:10:32उसी के अंदर आपका text पूरा रहे हैं

00:10:35यहाँ पर जैसे जैसे change हो रहा है वैसे वैसे वो यहाँ पर हुई है

00:10:39ठीक है परफेक्ट यहाँ तक की चीज किलियर है आप सभी को

00:10:45I hope minimum width वाला concept समझ में आया कि किस तरीके से यूज रहते हैं

00:10:49चलो वाई आगे चलते हैं

00:10:52ऐसे ही अपने पास आती है अपनी maximum width चीक है

00:10:58अब देखो maximum width का मतलब क्या है आपने एक maximum width विर्ट यहाँ पर उसकी set कर दी

00:11:04चीक है मतलब element इतना बड़ा हो सकता है उससे ज़्यादा नहीं हो सकता हो

00:11:10एक limit आपने set कर दी maximum set कर दिया minimum और maximum से साफ के लिए हो रहा है

00:11:14minimum मतलब आपने minimum point set कर दिया maximum का मतलब आपने maximum point यहाँ पर set कर दिया

00:11:20minimum मैंने जैसे इस पर set करा था मैंने बोला 200 pixel तो यह इसका minimum point है 200 pixel

00:11:26इससे छोटा नहीं होगा और अगर मैं maximum set कर देता हूं तो उससे ज़्यादा नहीं जायता हो

00:11:32ठीक है जैसे मालू मैं यहाँ पर एक और box बनाता हूं ठीक है मैं यहाँ पर बोलता हूं

00:11:371 करके

00:11:38.1 करके अपने यापर कर दिया

00:11:40मैं इसको यापर target कर लेता हूँ

00:11:42मैं बोलता हूँ .1

00:11:43चीक है

00:11:43इसको मैंने यापर target कर लिया

00:11:45और इसके अंदर कुछ भी content देता हूँ

00:11:48अब यहाँ पर मैं बोलता हूँ

00:11:53कि इसकी जो initial width है

00:11:55वो तो आप जैसे रख लो 80%

00:11:57यह तो देना जरूरी है

00:11:58चीक है

00:11:59उसके अलाव मैं यहाँ पर कहता हूँ

00:12:01कि आप इसकी जो maximum width है

00:12:03चीक है

00:12:04इसकी जो maximum width है

00:12:06वो आप यहाँ पर रख लेना

00:12:08600 pixels जैसे मैं कहता हूँ

00:12:10600 pixels

00:12:11चीक है

00:12:13maximum width 600 pixels है

00:12:15तो देखो अब यहाँ पर आके

00:12:17अगर आप चेक करोगे

00:12:18इसको भी एक background color पर दो थोड़ा सा

00:12:19आपको चीज़े समझ मैं है

00:12:21तो इसके लिए background color और मैं कहता हूँ brown

00:12:23और यहाँ पर अपन color कह देते है

00:12:25और color अपन यहाँ पर कह देते है

00:12:27इसका क्या कह देना

00:12:28वाइट कह देना

00:12:29ठीक है

00:12:30और इसमें भी अपन margin लगा देते है

00:12:33तेन पिक्सल की

00:12:34पर्केट तो यहाँ भॉक्स अपने पास

00:12:38इस तरहीके से आ रहा है

00:12:40अब अपने यहाँ पर क्या बोला

00:12:4280%

00:12:43अब यहाँ पर देखोगे

00:12:50अभी यह कितना है

00:12:5180% है

00:12:52जैसे आप इसको चेंज करोगे

00:12:53वैसे वैसे आप देखोगे

00:12:54तो जैसे 600 pixel से नीचे जाएगा, जैसे 600 pixel से, जैसे जैसे यहाँ पर change होगा, वैसे वैसे वो आपका box यहाँ पर क्या हो रहा है, वो आरेंज हो रहा है, वो यहाँ पर अपना responsive रह रहा है, तो जैसे maximum मैंने यहाँ पर कहा दिया, maximum का मतलब क्या हो गया, कि मैंने यहाँ पर maximum set क

00:13:24ठीक है, तो 80% का मतलब यह है कि 1200 पिक्सल पर अपना यह सैट हो जुगा है, ठीक है, यहाँ पर अगर आप देखोगे तो इस तरीके से वो सैट हो गया, तो यह minimum होता है, minimum point यहाँ पर, इसका मतलब वो minimum सैट है, maximum मतलब आपने maximum वो दे दिया, अब उससे नीचे जा रहा है तो

00:13:54यह अपने पास अपनी maximum width और अपनी minimum width होती है, जो अपन यहाँ पर use लेते हैं, क्लियर है यहाँ तक की चीज यहाँ तक की चीज क्लियर है, तो इसका मेंट करके बताओ, यहाँ तक की चीज क्लियर है,

00:14:24झाल, क्योंट की ऩ मगला यहाँ तक कुछ की चाल मिला ओना फिका खास का सवब यहाँ धीयर है, तक की चीज खी जhoonë में थारे वे करका आपनी यहाँ यहाँ झालma कि यहाँ प्पनीSu 이해

00:14:54बाल कि लिएसे आजए

00:15:24ठीक है ठीक है

00:15:27तो प्रेस का शर्ट में बता देता हूं प्लास के बाद तोड़ा और एक्स्प्रीन कर दूँँगा तेखो फॉल स्टैक वाइब डिलपेंट जो होता है उसका मतलब ये है कि आप

00:15:54जो है ओल राउनर हो जिसमें आपको मान स्टैक भी आता है मीन स्टैक भी आता है जितने भी स्टैक है जितने भी अपने स्टैक होते हैं मान स्टैक मीन स्टैक नहीं है और भी स्टैक है तो जितने भी स्टैक है वो आपको सारे आते हैं उन में से किजी एक स्टैक की नॉलेज ह

00:16:24PHP भी है

00:16:25तो वो web development होता है

00:16:27उसमें आप development से related

00:16:29कोई सी भी language select कर सकते हो

00:16:31सिर्फ JavaScript की बात नहीं करते हुआ

00:16:32लेकिन अगर अगर अगर अपने बात करते

00:16:34full stack development की तो इसमें अपने पास

00:16:36अलग-अलग stack बने में जिससे

00:16:38आप complete एक website

00:16:41develop कर सकते हो

00:16:42जैसे अभी मान stack के पर अपना

00:16:44web development होता है

00:16:45web development में full stack होता है

00:16:47full stack में पर अपन पढ़ रहे हैं पर अपना

00:16:49mon stack ऐसे यह है

00:16:51तोड़ा सा और अच्छे सा

00:16:53explain कर दूँँगा मैं आपको आगे

00:16:54अभी class पर discuss कर लेते हैं

00:17:00उसके बाद मैं आपको आगे और अच्छे सा

00:17:02explain कर दूँगा ताकि आपको clear रहेगा कि

00:17:05क्या होता है web development क्या होता है

00:17:06full stack और क्या होता है

00:17:08अपने अलग-अलग stack

00:17:09minimum width और एक बार बताएं सर ठीक है

00:17:14चलो एक बार और आते हैं आपन यहाँ पर

00:17:17मैं इहाँ पर कहता हूँ

00:17:19एक नई फाइल जिसको मैं यहाँ पर कहता हूँ

00:17:21example.stml

00:17:23और एक बार के लिए आपन वापस समझते हैं

00:17:26कि important है

00:17:26responsibly use लेते हैं पर इन दोनों चीज़ों को

00:17:29maximum width और minimum width

00:17:31दोनों में चीज समझना क्योंकि

00:17:33same चीज होती है आपकी maximum height

00:17:35और minimum height

00:17:36या आप खुद example से समझ जाओगे उसको

00:17:38maximum width का मतलब है कि

00:17:41element जो है

00:17:42कभी इस width से ज़्यादा नहीं होगा

00:17:46क्योंकि maximum है हो

00:17:47वो मैंने maximum height कर दी

00:17:49maximum का मतलब कि वो maximum है

00:17:51उससे ज़्यादा नहीं होगा

00:17:53जैसे मालूम मैंने बोल दिया 600 pixel

00:17:55तो 600 pixel उसकी maximum width होगी

00:17:58उससे ज़्यादा नहीं होगा

00:17:59उससे कम हो जायागा

00:18:00लेकिन उससे ज़्यादा नहीं होगा

00:18:02ठीक है

00:18:03और minimum width का मतलब होगा

00:18:05कि यहाँ पर अपने

00:18:08एक width side कर दी

00:18:09तो इससे छोटा नहीं होगा

00:18:11जैसे मालूम मैंने 200 pixel

00:18:14बोल दी थी महाँ पर

00:18:15तो 200 pixel से छोटा नहीं होगा

00:18:17ठीक है

00:18:18चाहे इस्क्रिन कितनी भी छोटी हो

00:18:20तो यह maximum width और minimum width होगी

00:18:22जैसे अपन एक example समझते है

00:18:24जैसे मैं एक box बना लेता हूँ

00:18:27मैं आपर कहलता हूँ box 1

00:18:28वापस से उसी चीज को समझा रहा हूँ

00:18:30वापस से अपन box 1 और box 2 बना लेते हैं

00:18:34और इसको मैं जैसे कहता हूँ

00:18:36यह अपना maximum width का example दोपा मैं आपर

00:18:39maximum width

00:18:40example

00:18:43ऐसे ही मैं यहाँ पर कहलता हूँ minimum width

00:18:46example

00:18:50ठीक है इन दोनों को मैं आपर target कर लेता हूँ

00:18:53इन box इसको मैं यहाँ पर create कर लेता हूँ

00:18:55तो मैंने style के मैंने बूल है dot box 1 इसको मैंने यहाँ पर target कर Summer

00:19:00ठीक है और इसको एक background color आपन देदे हैं

00:19:04जैसे मैं यहाँ पर कुछ भी देता हूँ मैं कहते हूँ यहाँ ब्राउन देता हूँ

00:19:09color मैंने यहाँ पर करदेना इसका white ठीक है और width मैंने यहाँ पर बोली कि

00:19:15आप initial इसकी width रखो 100% 100% में आप अच्छे से समझूगे इसको मैंने 100% रख दी और मैंने गोला maximum width जो है वो आप इसकी रखो जैसे 400px इससे ज्यादा width नहीं लेगा वो इससे ज्यादा width नहीं होगी यह मैंने आपर बोल दिया फिर उसके बाद अपन यहां पर इसकी height दे दे

00:19:45height हो जाएगा देखो यहाँ पर यहाँ पर यहाँ पर आता हूं मैं box 2 के उपर मैं बोलता हूं dot box 2 और उसको अपने एक background color दिया वो मैं यहाँ पर देता हूं जिसे green और यहाँ पर अपन दे देते अपना color और color अपन यहाँ पर देते अपना

00:20:15white ठीक है और width मैं यहाँ पर देता हूं 100% और minimum width मैं यहाँ पर दे रहाँ इसको कितनी minimum width मैं यहाँ पर देता हूं इसको जैसे 400 pixel

00:20:27सेम सेम देरी मेरा है इसको भी 400 पिक्सल इसको भी 400 पिक्सल चीक है ये काम पर ने यापर करा और यहाँ पर पर देते हैं हाइट और हाइट में कहने तो 100 पिक्सल चीक है ये दोनों के उपर मैंने काम करा अब देखो डिफरेंट समझ में आ रहा है दोनों में क्या है मैंने इस

00:20:57तो उसकी maximum width कितनी है 400 pixel और box 2 की क्या है यहाँ पर 400 pixel ही set करी है अपने लेकिन minimum width ठीक है अब यहाँ पर देखो पन इसकी device को device की हिसाब से देखते हैं मैं inspect करके देखता हूँ कि यह तो initial मेरे को यहाँ पर दिखाए ज़रा है ठीक है तो यहाँ पर जैसे जैसे अपने पास अ�

00:21:27maximum तो अपने क्या set करी है 400 pixel तो जैसे आप यहाँ पर चेक करोगे तो जैसे 400 से यह हो रहा है तो यहाँ पर उससे साथ से उसको responsive कर रहा है और minimum वाले की बात करते हैं तो वह अपने उसकी minimum width 400 pixel यहाँ पर set कर दी मतलब 400 pixel तक बढ़ेगा ठीक है जैसे अगर आप यहाँ पर द

00:21:57नीचे तो चला जाएगा लेकिन उससे उपन नहीं जाएगा समझ रहे हो क्या मैंने यहाँ पर पहले box को बोला कि 400 pixel तो 400 pixel से नीचे नहीं जाएगा यह 400 pixel से उपन नहीं जा रहा है यह 400 pixel से नीचे नहीं तो यह आपकी minimum width और maximum width होती है

00:22:27किलियर है यहाँ तक की चीज अगर यहाँ तक की चीज के लिए दे तो एक बार कमेंट करके बताओ यह सर यहाँ तक की चीज के लिए है

00:22:43अजय सही बनाया आप नहीं है

00:22:52सर 80%

00:22:58तक की चीज मैं एक्स्प्रेइन करा हूं यहाँ यहाँ पर वो समझो यहाँ पर मैंने उसको बहुत अच्छे से आपको एक्स्प्रेइन का है यह वाला उसमें शाहिए इतना अच्छे से आप नहीं समझ पाया हूंए लेकिन यहाँ इस

00:23:18आप समझ आप मतलब इनिशल जो आपने दे रखी हो रहेगी लेकिन वह 400 पिक्सल से नीचे नहीं जाएगा और मैंग्जिम मतलब आपने मैंग्जिम साइट कर रखी है वह से नीचे कितना भी जा सकता है डिवाइस के हिसाप से बस इतना सा कॉंसेट समझ गए तो यह आपक

00:23:48यह किस तरीके यहां पर यूउज आती है जैसे अपने कोई hero section बनाते है जैसे मालों माने कोई

00:24:12hero section बनाना हो तो वहाँ पर ज्यादा use होती है इस ऐसी जगे पर यहाँ पर use होती है चीक है

00:24:18कहीं पर भी scroll bar आ जाए या फिर जैसे मालों कोई chat box अपन बनाना चाहरे है

00:24:23notification list बनाना चाहरे है या फिर कोई comment section बना तो वहाँ पर height का concept

00:24:28होता है चीक है

00:24:31ठीक है चलो अब अपन नेक्स आते हैं अपने नेक्स चीच के उपर और वह है css की

00:24:48units बहुत important है शायद मैंने आपको पहले नहीं बताई लेकिन अब अपन डिसकस कर लेते हैं

00:24:54units के उपर units.html अब देखो css में units की बात करते हैं तो आपने

00:25:02percentage भी देखा है आपने pixel भी देखा है ठीक है दो unit आपने देखी

00:25:08percentage भी मैं यूज कर रहा था pixel भी मैं यूज कर रहा था लेकिन इनको

00:25:11use करना कैसे है ठीक है वो चीज अपने को पता होनी चीए कि इनको

00:25:16use कैसे करना है अब अपने पास दो units आती है एक तो अपने पास आती है अपनी

00:25:20absolute unit ठीक है

00:25:23absolute units दो units आती है एक तो absolute और एक अपने पास आती है अपनी

00:25:33में समय लेटिव डॉटिव के तो दो टाइप थी निया हो तो मतलब ये अब

00:25:46फिक्सट साइज आफ दे रहे हो ज़आब आप एप्सेयूट यूज कर रहे हो ज़ीश मालोब

00:25:52उसका मतलब है कि तो मतलब साइज भूर टो मतलब या बड़ी हो मतलु

00:25:58सेम ही रहेगा आपका जैसे मालो आप बोलो पिक्सल में दे रहो पिक्सल दे रहो पिक्सल आपकी absolute unit कौन-कौन से आती absolute units जैसे अगर अपने example देखे तो यहाँ पर absolute units आती है आपकी pixel आपकी centimeter आपकी millimeter ठीक है आपकी यहाँ पर inch में अगर आप देते हो ठीक है उसके अलावा �

00:26:28को इंची यह तो कुछ बताए नहीं सिर्फ फिकसल अपन यहां पर यूज करते हैं क्रें यह भीiff

00:26:32यूज कर सकते हो आप सैंटिमिटर भी कर सकते हो मिलीटर भी

00:26:48इंच भी साइट करना है, अगर आपक्सब्साइब लेकिन अपने च stroll को किसको यूज करेंगे

00:27:03इसका मतलब यहाँ पर यहाँ पर चीज पर होगी इंट क सल आपकी absolute unit है जो आपकी fixed है

00:27:09� si

00:27:13relative का मतलब

00:27:14वो depend करती है आपके

00:27:16parent पर, मतलब किसी न किसी से

00:27:18relate कर रही है, तो relative का

00:27:20मतलब हो गया कि वो आपके parent element

00:27:23या फिर आपका जो viewport है

00:27:25मतलब आपका body tag है

00:27:26ठीक है, आपके screen की size है

00:27:28उस हिसाथ से वो adjust हो जाएगी

00:27:30responsive रही थी, तो

00:27:32अपन absolute unit

00:27:34यूज करते है जहाँ पर अपने को fixed दिखाना है

00:27:37और जहाँ पर अपने को

00:27:38responsive भी बाद आजाती है, वहाँ पर relative units

00:27:40अपनी काम आती है, अब relative units

00:27:43है कौन-कौन सी, relative units

00:27:45है अपने पास अपनी percentage

00:27:47इतोपन यूज करी रहते, अपनी

00:27:49percentage अपनी relative unit है

00:27:51ऐसे अपने पास आती है

00:27:52अपनी EM unit, चीक है

00:27:54EM अपने पास unit है, इसको EM ही बोलते है

00:27:57इसका वह fully EM आपने पास

00:27:58ऐसे अपने पास REM unit भी आती है

00:28:01अपने CSS के अंदर, चीक है

00:28:03ऐसे अपने पास VW unit

00:28:05आती है, viewport width, चीक है

00:28:07ऐसे अपने पास VH unit

00:28:09भी आती है, viewport height, चीक है, तो ये अपने पास ऐसे v minimum, v maximum भी आती है, वो अपन इतने use नहीं करते हैं, चीक है, तो ये अपने पास अपनी units आती है, तो अगर अपन यहाँ पर बात करते हैं, अपने pixel के उपर, pixel का example देखो कैसे समझ सकते हैं, मैं यहाँ पर आता हूँ, और अ�

00:28:39font के उपर ही कर लेते हैं, मैं यहाँ पर कोई भी एक paragraph tag ले लेता हूँ, और उसके अंदर अपने लारेंपर के 10 का content अपने दे दिया, चीक है, और मैं यहाँ पर आके style करता हूँ, मैंने बोला है style, और मैंने paragraph tag को target किया, और उसकी जो font size है, वो मैंने यहाँ पर कह दी कि आ�

00:29:09चीक है, 50 pixel आप यहाँ पर इसको set कर देना है, तो आपकी इस paragraph tag की font size क्या होगी, 50 pixel होगी, और यह 50 pixel आपकी fixed unit है, यह हमीशा 50 pixel का ही रहेगा, हमीशा 50 pixel का रहेगा, चीक है, कैसे पता चलता है, जैसे मालो आप यहाँ पर आते हो, pixel का मतलब fix size हो चुकी है, जैसे मैं यहाँ

00:29:39यह तो इसमें देख रहे option, browser में आओ, browser, setting, setting, कहाँ पर है setting, के रहे, इसमें देखो अपने पास appearance आता है, इसमें आते है, और मैं यहाँ पर आता हूँ, और इसकी font size में change कर देता हूँ, मैं कहता हूँ, large कर देना, चीक है, मैंने font size क्या कर दी, large कर दी, तो देखो, अब भ

00:30:09change होनी चीए, कैसे बता चलेगा change होरी यह नहीं होरी, चलो Wikipedia के उपर आता हूँ, Wikipedia पर आता है अपर, और अपन select करते हैं, कुछ भी select कर लो, जैसे English ही कर लो है, तो देखो, यहाँ पर phone size change हो चुकी है, देख पार है, नहीं देख पार है, कोई बात नहीं, यहाँ पर setting में आ

00:30:39चीए, मतलब जैसे ही आपका जो browser है, वो change हो रहा है, उसकी phone size change हो रही है, तो यहाँ पर इस पे भी effect पढ़ रहा है, लेकिन यहाँ वो effect नहीं पढ़ रहा है, यहाँ पर remove ऐसे ही है, क्यों, क्योंकि यह pixel unit है, आपने pixel use का है, pixel का मतलब आपने fix size लेती है, यह यही रहेगी

00:31:09pixel unit है, जो अपन use कर रहे है, ठीक है, तो यहाँ पर जैसे मैंने browser हो change करा तो आपके phone भी change हो रहे है, मैं यहाँ आता हूँ, और setting में आके मैं आपस normal कर देता हूँ, medium में आ जाते है, ठीक है, तो यह pixel unit होती है, अतलब यहाँ पर fix होती है, चलो भाई, यह तो pixel थी जो अपन

00:31:39जब वो इन project बनाएंगे तो आपको clarity मिलेगी कि मैं कहा pixel यूज करूँ और कहा EM यूज करूँ, कहा REM यूज करूँ, अब next बनाते हैं यहाँ पर अपने relative units के उपर, यह important है, percentage, अब देखो, percentage हमीशा divide होती है आपके parent के साथ से, जैसे मालोग मैं यहाँ पर इस paragraph tag को बोलता

00:32:09यह हमेशा depend किस पर आपके parent के उपर, क्योंकि relative unit हमेशा relate करती है, किसी ने किसी चीज से, और वो parent element या viewport पर चलती है, तो अब भी अगर आप देख रहे हो, तो इसकी width कितनी होगी, 50% हो गई है, मैं यहाँ पर आता हूँ, और इसको border देता हूँ, border देके अपन समझते हैं

00:32:3950% रहेगी, किस के साब से, अपने display के साब से, हमेशा 50% रहेगी, क्योंकि आपने इसको दिया है paragraph टेक को, और इसका parent को अने body है, चलो भाई, थोड़ा सा और अच्छे से समझते हैं, मैं यहाँ बनाता हूँ, मैंने एक box बनाया, box 1, और इसके अंदर मैंने एक और box 2 बना �

00:33:094 पिक्सल की बना देना, सॉलिड बना देना, और brown कलर की बना देना, ठीक है, box 1 के उपर, box 2 के उपर भी आज हो गई, और उसके उपर भी आप border बना देना, और 5 पिक्सल की बना देना, ठीक है, solid बना देना, yellow, solid और green कलर की बना, यह दोनों पर मैंने बोला है, box 1 और box 2 के उ

00:33:39फिर्थ भोल देता हूं 100% है चीलीर और हैराइच भी सब्सक्राइफ से इत contest । भी

00:33:45दिलीक स्प्सरा इसे नहीं देता हूं और इसों मेरा नीचरीट ही सिस्ट जिए आपको करीनगा हुआ

00:33:58आपका ब्राउन वाला बॉक्स है उसके अंदर क्रीन वाला बॉक्स क्रीट हो क्या रहा है यह इसी के अंदर क्यों नहीं आ पार है क्योंकि आपने बॉर्डर को लग लग बना दिया तो फोल पिक्सल फोल पिक्सल ही बना दो तो आप देख पार है हुआ हंड्रेट परसेंट म

00:34:28क्या है तो उस हिसाब से यह अपना 100% है अब मैं बॉक्स 1 को बोलता

00:34:32हूं कि बॉक्स बीकरde को और जी घो रहा आपके इस 100% की हिसाब

00:34:49आपके box 1 की इसाब से क्योंकि box 1 इसका parent है और box 2 यह है चलो एक काम करते हैं मैं box 1 को बोल देता हूं 50% box 1 को मैंने बोल दिया 50% अब देखो क्या हो रहा है box 1 50% ले रहा है किसके इसाब से body की इसाब से और जो box 2 है वो 50% ले रहा है box 1 की इसाब से

00:35:09क्योंकि box 1 को आपने 50% यह है तो यह पूरा 50% है 50% का 50% यह ले रहा है क्योंकि यह तो पूरा इसके लिए तो पूरा 100% है लेकिन यह डिवाइड हो रहा है कितने मैं 50% के इंदर ठीक है तो यह अपने पास अपना percentage होता है जो पन यहां पर यूज लेते हैं जैसे मालो आप ब

00:35:39की चीज समझ में क्या आप सभी को

00:35:55सर रैस्पोंसिव बनाने के लिए minimum और maximum concept यूज करना जरूरी है क्या इसके बिना responsive create नहीं हो सकता क्या देखो ये भी यूज करते है

00:36:04media query भी यूज करते है flags भी यूज करते है grid भी यूज करते है सब चीजे यूज करते है यह सब अपन प्रोजेक्ट में यूज करेंगे आपको automatically clarity मिलेगी कि क्या चीज में ज्यादा

00:36:13यूज कर रहा है किस तरीके SMS को बना रहा है प्रोजेक्ट में आप वो सब चीजे के लिए हो जाएगी प्रोजेक्ट बनाएंगे अपने एक बढ़िया सा जिसमें सारे सारे जितनी भी प्रोपर्टीज जो भी चीजे अपने देखी वह सारी उसमें इन्क्रिउट

00:36:24ठीक है तो चलो आगे बढ़ते हैं without waste time चलो भई यह तो बात होगे अपने पास percentage की अब बात आती है EM की

00:36:39EM unit depend करती है आपके phone size के उपर हमीशा phone size के उपर depend करती है आपकी EM unit आपका जो भी phone size होगा उसके हिजाब से ही आपकी जो भी यहाँ पर width दे रहे हो जो भी size दे रहे हो वो उसके हिसाब से ही set होगी देखो कैसे मैं यहाँ बनाता हूँ

00:37:01मैं यहाँ पर एक और बॉक्स बनाता हूँ और इसको मैं कह देता हूँ क्या कहें क्या क्या क्या क्या क्या क्या क्या क्या क्या क्या क्या क्या क्या क्या वाक्स थ्री बनाया है चलो वाई बॉक्स थ्री को मैं आप टार्गिट कर लेता हूँ इसमें कुछ भी अपन यहाँ पर क

00:37:31तो मैंने प्रेगाव टारगेट करता हूं अपने प्रेगाराफ टैग ने ही न के इसको

00:37:48हटा दो और इसको भी हटा दो इस पेरेगाफ टेक को मैं यहाप टार्गेट करता हूँ और इसको मैं यहाप पर एक ग्लास ही दे दे दे ता हूँ ता कि आगे अगर पेरेगाफ टेक लिए तो दिक्कत ना है तो मैं यहाँ पर इसको कह देता हूँ जैसे

00:38:05आप इसको डार्गेट कर लेता हूँ मैं बोल देता हूँ यहलो और इसको मिने टारगेट किया falei अब

00:38:14यह यहां पर इसकी फोन साईस कर देता हूँ फोन साइस मैं आ पर साइड

00:38:23केलेगा टैक की फॉन साइज मैंने या पर 16 फिक्चल और γेह बन पास की अक्षीं पिसल होती है इसकी फॉन साइज में इसले ढूर पर अब देखो नहीं

00:38:40इंशल मेंने वह पे लो प्रण रगाता हूं और यह अ�पर क्लर न allen बेर्म न इसपर

00:38:46या फिर बायक्राउं ख़रण लगा दो और अमा हम ब्राउन और यहां पर आपना कलर और कलर में पर जाए है क्या है तो यह अपने पास अपना बॉक्स के लिए तोकिया रहा है अब मैndy उसके उपर लगाता हूं पैडिंग और पैडिंग की जो मैं युनिट यूस करूए है

00:39:16पर आपका तू टाइंब किशके आपकी फोन साइस के आपने फोन साइस को 16 पिक्सल रखा है

00:39:32इसका मतलब क्या हो गया नीचे लिए लिए देट आ है इसका मतलब

00:39:37तो यहीं कमेंट कर दो और मैं यहां पर लिखता हूँ, तो आप यहां पर बेरो एम और एम किससे मल्टिप्लाइ होगा इम मल्टिप्लाइ होगा आपके हमीशा आपकी फोन साइस से और आपने 16 दे रखिए तो अब भी अगर मैं यहां पर पैडिंग की बात करता हूँ तो 32 �

00:40:07फोन साइस के 16 ट्रिफर चलो चैक करते ही यह हुराे गयाया फिर मैं मचात कर रहा हूँ चुलो चक करते है इंसपेक्ट करें मैं इसी आलिमेंट को आपर टार्गट करता हूँ और इस पे मैंने यहां ऑर क्या लगा रहे है।

00:40:21यॉव और उसके उपकर जब मैं क merciful तो पदा थी गोई चलो यहांहाँ पर चेंज करो

00:40:27phone size को यहाँपर चेंज करो phone size को आप यहांपर कर दो जैसे

00:40:2930 पिक्सल मैंने कर यहां ऑगर आप देखोगे 30 पिक्सल कर दिया पने यह

00:40:36अब यहां पर आप देखो कि नहीं कितनी होगे 60Pstart

00:40:40मतलब यहां पर 30Pront का 2Times हो रही है

00:40:4530Pissance का क्या हो रही है 2Times हो रही है

00:40:47मैंने 30pיכL side करी PhoneSize

00:40:49और जैसे आपने padding लगई 2EM

00:40:51इसका मतलब वो क्या हो रही है 2 time हो रही है

00:40:53किसका आपके PhoneSize का

00:40:56जो भी आपका phone size होगा उसका यहाँ पर multiply होगा हमेशा चीज़ के उसी का multiply होगा क्योंकि उसी के respect में आपकी EM unit work करती है आपकी जो भी phone size होगी उसी के respect में आपकी EM unit यहाँ पर work करने वादी है तो इसका मतलब EM depend करती है किसके अपने parent के phone size के उपर और वो उसका multiply होके चलती ह

00:41:26की चीज बताना एक बार यहां तक जो अपने देखा यूनिट्स वह आला कॉंसेप्ट के लिए रहे तो एक बार बताओ यहां तक की चीज के लिए रहे तिर अपन आगे वाली यूनिट्स दिखते अपने

00:41:34खीक है पर्फेक्ट एक नंबर बनाया है रभी बिल्कुल सही बनाया है एकदम पर्फेक्ट

00:41:57इसको रख लगा है यह स्थी से अधार है ठीक है लेकिन सही है

00:42:07एक आगा और अग्याग्स को शूंसर आगर एम फोन पे ही कök यह सरबता इस फोंट पर

00:42:18यहं हो तो नहीं एम पनिलगाओ तो शूनन प्लाइब एक्वर्रि स्क्साइब एपन प्क्सल में ही यूज करते

00:42:23फोन साइज को पिक्सल में देते फिर उस हिसाब से अपन अपनी एम सेट करते हैं अगर आप फोन पे एम नहीं लगा रहे हैं जैसे मालों इम मैं फोन साइज लगाई नहीं रहा है तो उसकी जो इनिशल फोन साइज होगी जैसे मालों पहरे अगर आपकी इनिशल फोन साइज

00:42:53parent के phone size के हिसाब से

00:42:55वो हमेशा उसका multiply होके चलती है

00:42:57अब आप padding में लगाओ, margin में लगाओ

00:42:59कहीं भे भी लगाओ उसको

00:43:00वो हमेशा multiply होगी आपके parent की phone size के हिसाब से

00:43:04अब बात करते हैं

00:43:05अपने next unit की

00:43:07REM की

00:43:09यह रही आपकी REM

00:43:11अब यह REM क्या होती है

00:43:13REM है आपकी root EM

00:43:16root EM मतलब

00:43:17आपका जो root element है

00:43:20आपका जो

00:43:21HTML element है उसके

00:43:23respect में हमेशा आपकी phone size

00:43:25set होगी और आपके

00:43:27HTML की जो phone size initial

00:43:29जो set है वो है 16 pixel

00:43:31ठीक है

00:43:32मतलब आपके इस

00:43:35HTML element की कितनी set है

00:43:3716 pixel initial phone size

00:43:39set होती है

00:43:40तो इसी के phone size के हिसाब से

00:43:43अपन REM सेट करेंगे

00:43:44जैसे मालन मैं यहां पर आता हूँ

00:43:46और एक paragraph tag fall ले ले दाहूँ

00:43:48उसमें मैं कहते हूँ

00:43:52लॉर म

00:43:5220 गा content

00:43:54और इसको मैं यहां पर

00:43:56class लेता हूँ

00:43:57और P17 इसको target कर दिये

00:43:59मैं कहां पर आता हूँ

00:44:00और मैं यहां पर इसको target करता हूँ

00:44:02मीने बोला P1

00:44:02.P1

00:44:04मैं यहां पर आता हूं और पैरेग्राफ टैक जो अपना है

00:44:33इसी के उपर मैं हम नब घाता हूं जैसे

00:44:35अपन लगाता है कि

00:44:37phone size लगाता हूं जैसे आप बोलगों कि

00:44:39phone size लगा और और

00:44:41वह मैं आपर बसे te working

00:44:431.2 जैसे five

00:44:44मैंने बुला 1.5

00:44:46rdm ठीक है

00:44:481.5 rdm मैंने

00:44:50आपकर set करी है

00:44:52अब अगर

00:44:54मैं बात करूं 1.5

00:44:56का मतलब इस paragraph tag इस P1 की font size set हुई कितनी है तो आपके

00:45:03estival tag के हिसाब से चलेगी estival tag की initial font size कितनी होती है 16

00:45:08pixel इसका मतलब 16 pixel की हिसाब से यह set हुई होगी कैसे चलो calculate

00:45:13करता हूँ मैं यहाँ आता हूँ मैं कहता हूँ कि मैंने यहाँ पर बोला 1.5 और

00:45:20मैंने unit लगाई है REM REM का मतलब हो गया 1.5 time होगी किसके आपके

00:45:27root element की font size कितनी है root element की font size है 16 pixel जल्दी से

00:45:35multiply करो 16 pixel को 1.5 से करेंगे तो 24 pixel तो यहाँ पर इसकी font size

00:45:46है 24 pixel यहां पर इसकी font size है 24 pixel यहां पर इसकी font size है

00:45:56चलो check करते हैं मैं यहां बराता हूँ चलो और यह जो है अपना paragraph

00:46:02यहां पर इसके फॉन साइज करता हूं रही है, क्या सुछलो मैं यहां पर अपने

00:46:16HTML को टारगेट करता हूं और इस HTML को टारगेट करके मैं इसकी

00:46:20पर चेंज कर देता हूं, मैं बोलता हूं कि आप इसकी फोन साइज कर देना 50 Pixel, किसकी करिए,

00:46:28html element की मैंने, html element की phone size चींज करिए, जैसे मैंने html element की करी,

00:46:34यह change हो चुगा है पुरा, क्योंकि यह depend रह रहा है आपकी किसके उपर,

00:46:37आपके HTML element के उपर, मैं इसको target करूँ हूँ है, इसकी check करूँ हूँ है, 75 pixel, 1.5 time में किसका, आपने जो 15 pixel दी है, आपने HTML element को उसका,

00:46:48तो कितनी हो रही है, 75 pixel, समझ पा रहे हैं, तो ये आपकी REM होती है, हमेशा root element पे depend करती है, refresh कर लो, आपने सही हो जाएंगा, ठीक है, तो हमेशा आपके root element के हिसाब से ऊचलती है,

00:47:06HTML element के अपने कभी भी form size scene नहीं करते हैं, यह सिर्फ मैंना example देके समझा है, ताकि आपको समझ भाएं, ठीक है, तो ये बात हुए आपने पास अपनी REM unit के, उसके पाद अपन चलते हैं, VW और VH unit के उपर, कि VW unit कहां काम आती है, और VH unit कहां पे काम आती है,

00:47:28VW unit नाम से clear है, viewport width और VH unit नाम से clear है, viewport height, ठीक है, तो viewport width और viewport क्या होगी आपकी, height होगी, तो अगर किसी भी element की viewport width और viewport height साइब करनी है, तो उसके लिए पन इसको use लेते हैं, ठीक है, जैसे मालूम मैं यहाँ पर कहता हूँ,

00:47:50यहाँ पर आओ, एक box ले लिए यहाँ पर, दो box ले लेते हैं, उनको क्या नाम दे रहता है आपने, box one, box two, मैं यहाँ पर देता हूँ, box three, और equal box ले लेता हूँ, जिसको मैं आपर कहता हूँ, box four, ठीक है, target करो इनको, मैं कहता हूँ, box three को target कर लो,

00:48:18और box three को मैंने यहाँ पर target करके, एक background color मैंने यहाँ पर दे दिया, वो मैं आपर कहता हूँ, जैसे blue,

00:48:28height अपने यहाँ पर इसको दे देता है, मैं height देता हूँ, 100 pixel, ठीक है, और उसके अलावा width जो मैं यहाँ आपर दे रहा हूँ, वो मैं दे रहा हूँ, 50 VW,

00:48:3950 VW में हाँ पर इसको क्या गरा हूँ, height, height भी यहाँ पर यह दो ना, height भी यहाँ पर यह दे दो, VW,

00:48:46VH, sorry, height मैं आपर VH दे दी, ठीक है, तो यह basically height तो VH हमेशा hero section के लिए एपन इसको यूज लेते हैं, जो भी अपन hero section मनाते हैं, वहाँ के लिए use लेते हैं,

00:48:58VH हमेशा आप कहीं पर भी देख लोगे, किसी का भी और देखोगे, VH हमेशा use होता है hero section के लिए, जहाँ पर भी website का hero section मनेगा, hero section मतलब जो आपका top पे navbar के बाद दूसरा slider आजाता है आपका, ठीक है, तो यहाँ पर मैंने बुला width 50 VW कर देना, height 100 VH कर देना, और आजा�

00:49:28ठीक है, अब देखो क्या हो रहा है, यह जो आपने 50 VH दिए, यह आपके viewport के हिसाब से set है, viewport के हिसाब से set है, वो set हो रही है आपके idol, door, responsive दिख रहा है का आपको यह पूरा, तो यह हमेशा viewport छोटा हुआ, उसके हिसाब से 50 VW कितनी होगी, उसके हिसाब से 50 VW कितनी हो�

00:49:58इसके हिसाब से 50 VW कितनी होगी, और 100 VH कितनी होगी, वो हमेशा viewport के हिसाब से set होगी, तो जितना भी viewport होगा, उसके हिसाब से set होगी, हमेशा parent के respect में चलते ही, जो भी आपका viewport होगा, उसके हिसाब से set होगी, जितना भी आप इसको VH, VW दोगे, उसके हिसाब से set रहे

00:50:28सर हीरो सेक्षेν मतलब एक्जामबल से समझाओ यह लो भई एक्जामबल देने हो

00:50:44मैंज़ात हूँ मसोल्ड स्टोर के उपड़ यह रहा है हीरो सेक्षेन

00:50:48मतलब हीरो सेक्षेन आपका यही होता है मिश्या

00:50:54जिसमें आपका स्लाइटर लगा हूँ है

00:50:56यह आपका hero section

00:50:57यह आपका hero section है

00:51:01जय से मालो मैं किसी दूसरी website बताऊ

00:51:03skill वाला किप़ आजाते है

00:51:04यह आपका hero section

00:51:11पूरी device के अंदर आ ला हुआ

00:51:13इदर को इस तरह की

00:51:14इस तरह के

00:51:14भाष्ट हो के

00:51:16यह website पूरी नहीं आ रही है

00:51:22अपनी lms बन के आ रहा है

00:51:23बहुत चल्ब बन जाएगा

00:51:25इसी के उपर काम चल रहा है भी

00:51:33JS कब स्टार्ट होगी ज़र

00:51:43JS स्टार्ट होगी अपने

00:51:45कम्प्लीट

00:51:46CSS और बूट सैप के कम्प्लीट होने के बाद

00:51:49तो यह मालू नए साल में स्टार्ट होगी

00:51:52नया साल और नई चीज

00:51:54अगर हम सेक्शन के अंदर

00:51:57मैक्जिम विर्ट और मिनिम विर्ट दे तो

00:51:58रेस्पोंसिव होगा उसके अंदर जो दो तीन

00:52:00बॉक्स है या रेस्पोंसिव होगा

00:52:02देखो यह आपको ओटमेटिकली क्लियर हो जाएगा

00:52:04अब भी इसको डाउट ही रहने तो

00:52:06जब मैं प्रोजेक्ट बनाऊंगा तब आपको ओटमेटिकली क्लियर हो जाएगा तो इसमें मैं सारी चीज़े कवर करेंगा

00:52:11सर रवी के प्रोजेक्ट को रेस्पोंसिव करेंगे तो कार सेंटर में आएगा क्या हाँ सेंटर में आएगा रेस्पोंसिव हलाकि वो रेस्पोंसिव ही नहीं कह सकते

00:52:25कि वो सिर्फ एक card ही है उसको तो क्या ही responsive बनाओगे ठीक है वो तो इस सिर्फ एक card ही है वो तो बहुत सारे multiple card हो तब उसको समझ सकते हैं अभी तो सिर्फ एक

00:52:36card है तो उसमें तो क्या ही responsive की बात करेंपन अभी यह सिर्फ टास्क है आपके properties

00:52:41कि लिए लोना और में को यह भी पता रहेंगी आप मतलब वो प्रैक्टिस कर रहे हैं या नहीं कर रहे हैं सूरज के लिए सर सिक्वेंस लाइक

00:52:51CSS, Bootstrap, Tailwind and then JS नहीं अपने HTML पढ़ें अपन CSS पढ़ें प्रोजेक्ट बनाएंगे बूटसेप पढ़ेंगे प्रोजेक्ट बनाएंगे फिर उसके बाद अपन अपन जावा स्टार्ट करेंगे

00:53:04Tailwind CSS मैं आपको बढ़ाओ और React के अंदर, उसी के अंदर मैं आपको बढ़ाओं आपको CSS में कैसे अपलाए करते हैं और React में कैसे अपलाए करते हैं उसको

00:53:11सर दो रभीका सही है वैसे ही बनेगा, यस बिल्गुल वैसे ही बनेगा

00:53:18सार ये वाला चेक कराए

00:53:25क्या वेज जेँ है अबने इतना पुराना

00:53:27हाँ सही है

00:53:29मैंने है चेक कर लिया इसको

00:53:31रैस्पॉंसिव का चेक करना है कै इसको

00:53:37चीक है बिल्कुल परफेक्ट है ये तो सही

00:53:43रैस्पॉंसिव है दो मेंowania हो रहा है

00:53:45और अगर device change हो तो तीन में convert हो जाएगा बिलकुल सही है एक दम perfect responsive है बिलकुल सही है एक दम perfect

00:53:53ठीक है चलो बाई एक चीज पे हो डिसकस कर लेते हैं जो remaining रही है फिर उसके बाद अपने कुछ एक दूचीज़े remaining रही है और वो important है जैसे grid और animation

00:54:09ग्रेड और एनिमेशन दो चीजे हो रहें फिर उसके बाद अपन प्रोजेक्ट बनाएंगे मतलब नेक्स वीक के अंदर अपना प्रोजेक्ट बनाने बने है चलो वाई एक चीज पर डिसकस कर लेते हैं अपने एक चीज देखी थी कॉंबिनेटर सेलेक्टर और कॉंबिनेट

00:54:39को जैसे मालोग एक्ट्रिबूट वाले एलिमेंट में आपने लेता हूं जैसे मैंने आपने लिया इन्पुट कॉल एंड टेक्स्ट यह क्या है आपका इन्पुट टेक्स्ट है ऐसे ही मैं यहां पर कहतेता हूं इन्पुट कॉल एंड पास्वर्ट दो मैंने आपने लिए

00:55:09यूजरी फाइल में लो और यहां पर कहे दो आप एक्ट्रीभ्यूट.stml वाइट लगा लो यहां पर आ जाओ

00:55:23स्टाइल कर लो और एक्ट्रिबुट स्लेक्टर समालो की कैसे यूज लेते हैं जैसे मालो मैं यहां पर इसको

00:55:32करना चाता हूँ कि इंपुट टै áreas टको तो मैं एट्रीगुट सलेक्टर की तफुट टार्गेट कर सकता हूँ देख़ो कैसे

00:55:38जैसे म Здесь में इस टार्गेट करना चाता हूँ और उसकी वैल्लू भी में यापर पास पह देता हूँ

00:55:46मैं बोलता हूँ कि मेरे पास जो इंपूट है अब भी में अगर इंपूट करके टार्गेट करूआ जैसे मैंने इंपूट करके बुला कि बॉर्डर आप कर देना तू पिक्सल सॉलिट और ग्रीम कलर की यह मैंने अपर बुला

00:56:01तो दोनों की बॉर्डर चेंज हो गई तो दोनों की चेंज हो गई बॉर्डर मैं नहीं चाहता हूँ कि इसकी बॉर्डर लग रखूँ और इसकी बॉर्डर लग रखूँ मतलब टेक्स्ट की और पासवर की तो उसके लिए आपके पास एट्रिब्यूट स्लेक्टर ही कामा है

00:56:31को आप डार्गेट करना चाते हों इनपुट के अंदर जिसका टाइब यहां पर क्या है जिसका टाइप यहां पर पासवर्ड है

00:56:53उसको मैं यहाँ पर target करना चाहता हूँ और उस पर मैं border create करना चाहता हूँ

00:56:58pixel की बना चाहता हूँ, solid बना चाहता हूँ, बट radio की बना चाहता हूँ

00:57:03तो वो मैंने यहाँ पर कह दिया, तो दोनों अलग अलग है, यह आपके attribute selector होते हैं

00:57:08बस इतनी सी बात है, attribute selector के अंदर, ठीक है, तो यह अपने पास अपना attribute selector होता है

00:57:29कि लियर है यहाँ तक की चीच

00:57:38All clear, ठीक है, सरक किसी particular अलग चाहता है

00:58:08अगर element को target करने के लिए attribute selector का यूज करते है, क्या, यह बिल्कुल

00:58:11किसी particular, अगर element को target करना है, तो अपन attribute selector यूज करते हैं

00:58:16Sign out करे, सर, array में multiple attributes पास कर सकते है, क्या, नहीं, अपन multiple attribute पास नहीं करते है

00:58:23वो array यह वाला array नहीं है, जो अपने java script में बन परते

00:58:27यहाँ पर सिर्फ अपन क्या करते है, यहाँ पर सिर्फ अपन अपने attribute को पास करते है

00:58:34ठीक है, clear है यहाँ तक की चीज, अगर यहाँ तक की चीज clear है, तो यह बताओ, yes sir, clear है, कोई doubt नहीं है

00:58:51और attendance का point 1 में आपको बताता हूँ, attendance के point 1 के अंदर आपको mention करना है

00:58:58और वो क्या है, वो एक doubt आ रहा है किसी का, sir, scss क्या है, scss ही mention करते है, attendance के point 1 के अंदर

00:59:07attendance के point 1 के अंदर mention करना है scss

00:59:11scss क्या होती है, scss क्या होती है, cash skating style shift, scss क्या होती है, sscss का मतलब हुदर cacss, cacss

00:59:23सास वाली उपन यूज़ करते है ऐसे डबलेस तो वो होती है यह CSS का एडवांस वर्दन है मतलब आप जो फाइल बनाओगी वह SCSS वाली फाइल बनाओगे अब भी मैं कैसे बनाता हूँ

00:59:35जैसे मैं बनाता हूँ style.css वा बनाओगे style.scss करके ठीक है तो यह जो SCSS होता है वो CSS वाली फाइल होती है बस उसका compiler SCSS हो जाता है वो उसमें convert करता है

00:59:49आगे यह बढ़ा होगी क्या नहीं SCSS अपने course में नहीं है SCSS अपने course में नहीं है SCSS अलाकि advanced CSS है जरूरी है

01:00:02जैसे अपन किसी भी container को target करते हैं तो अपन टार्गेट डारिक्ली कर लेते हैं container के अंदर H1 है तो उसके अंदर paragraph tag है लेकिन अगर मैं SCSS की बात करता हूँ

01:00:12तो उस container के अंदर अपने H1 tag को target कर सकते हैं उसी के अंदर paragraph tag को target कर सकते हैं मतलब nesting अलाव हो दी उसमें

01:00:20तो वह ऐसे advance है मतलब थोड़ा सा advance बढ़ जाने हैं मैं आपको एक example देता हूँ उसका यह सिर्फ मैं example दे रहा हूँ अपने course में SCSS नहीं पढ़ रहे हैं ठीक है जैसे मालू मैं यहां पर बनाता हूँ style.scss

01:00:38यह मैंने यहां पर create करी मैं बहुत दो मेरे पास कोई container है जिके अब उस container का मैंने एक background

01:00:47color दे दिया और और मैं कहा देता हूँ green मैं यहां पर देता हूँ это green background color मैं यहां पर इसको दे दिया अब इस container के अंदर ही

01:00:57लो कर देदा है जैसे यह लो कर देना और उसी के अंदर अपने पास परगाफ टैग को भी आप नेश्टिल टार्गेट कर सकते हूं लिए अपर चेंज कर देना आप मैं यह आपर कहले तो यह इस तरीके से

01:01:23सब्सक्राइब करती है, मतलब nesting allowed होती है और इस में तोड़े powerful features भी आते हैं, जो पन यहा पर lose कर सकते है है, वैलिवल्स की तरह है

01:01:31तो तो इस प्री प्रोसेसर से राइट येस एक काम कर सकते है अपन यह जो चीज़े है जैसे मनलोक मान स्टैक में इसको कवर नहीं कर रहे तो इससे डिलेटेट मैं अलग से एक वर्क्शॉप लाके या पिर कोई अलग से ग्लास लाके इस चीज़ से रिलेटेट वहाँ पर अ

01:02:01करने का मुखा भी मिले चीक है बस आप जूड़े रहिए मैं सब चीज़े लाता रहा हुआ दीरे-दीरे येस सर वर्क्शोप प्लीज इन डिस सी एस एस बिल्कुल मैं सब चीज़े ला हुआ धीरे-दीरे सारे चीज़े ला हुआ अभी अपनी एक वर्क्शॉप भी है अ�

01:02:31पर यूज लेके सर्फ तीन चीज़े यूज लेके अपना एक्सपेंस ट्रेकरिंग आपर बनाएंगे मतलब वो जैसे मालों आपकी सैलेरी कितनी हैं आप कितना खर्चा कर रहे हो कितना आपके बास बच रहा है वो सारे चीज़े बनाएं

01:02:46स्सस्स देखो यह से डबल एस वाई सी एसस का तो आपको बता है

01:03:02अब देखो यहां पर अपन आते है

01:03:14पॉइंट टू के उपर मैं आपको पॉइंट टू भी बता जाता हूँ

01:03:17आज की क्लास का पॉइंट टू और वो आपका यहां पर रहेगा

01:03:22क्या क्या चीज़े देखिए आज अपने maximum width, minimum width और units के उपर अपने डिसकस करा

01:03:27तो units आपको यहां पर पॉइंट टू है

01:03:29attendance के पॉइंट टू के अदर आपको मेंशिन करना है units

01:03:32attendance के पॉइंट टू के अदर आपको मेंशिन करना है units

01:03:37यह आज की attendance का पॉइंट टू है

01:03:39ठीक है?

01:03:41तो यहां तक की practice करना, चीज़े समझना, बाकी फिर अपन मिलते हैं

01:03:45में नेक्स लास केंदर