Day - 20 | Learn CSS Flexbox (Part 2) | Flex Child Properties + Navbar

Name: Day - 20 | Learn CSS Flexbox (Part 2) | Flex Child Properties + Navbar
Uploaded: 2025-12-17T09:17:23+00:00
Duration: 59 min 44 s
Channel: skillwaala
Description: 👨&zwj;💻 What You’ll Learn in This Class: ✅ Recap of CSS Flexbox basics (Parent properties) ✅ Understanding Flex Child Properties — • align-self • flex-grow, flex-shrink, and flex-basis ✅ Building a responsive Navbar using Flexbox ✅ Practical Flexbox layout tasks for better understanding ✅ Real-world examples and live coding explanation

skillwaala

2 weeks ago

👨‍💻 What You’ll Learn in This Class:
✅ Recap of CSS Flexbox basics (Parent properties)
✅ Understanding Flex Child Properties —
• align-self
• flex-grow, flex-shrink, and flex-basis
✅ Building a responsive Navbar using Flexbox
✅ Practical Flexbox layout tasks for better understanding
✅ Real-world examples and live coding explanation

Category

📚

Learning

Transcript

Display full video transcript

00:00झाल झाल

00:30जाल वाइस, गुड इवनिंग एवरिवन, गुड इवनिंग, साइनाथ, SYS, RST, Gopal, Ashish, Alka and other students, एक बार साब रेस्पोंस कर दो कि मेरी वाइस क्लियर है,

00:59और स्क्रीन भी विजिबल है, इस चीज़ का भी रेस्पोंस कर देगा, एक बार सब रेस्पोंस कर दो कि यह सर्वाइस क्लियर है और स्क्रीन भी विजिबल है, ठीक है,

01:15आशीश ने कुछ भीजा है, रपन नीवरा, वापस क्लियर करो, ठीक है,

01:29सहीए, चीक है, यह भी सहीए, रपकाने चुबेजा है, परफेक्ट, गुड इवनिंग सौराव, गुड इवनिंग सूरज, गुड इवनिंग, गुड इवनिंग,

01:47ठीक है, यह भी सहीए, यह किसने बनाया है, इनके बीच में इतनी स्पेसिंग क्यों आ रही है, क्या लगाए इनके बीच में, हम,

02:01इनके बीच में, क्या ख़र दिया है, ठीक है, परफेक्ट, सही है, गुड इवनिंग, यह लिया दो,

02:24रवी गड़ेगी, बर्ट सर बीच की स्पेस कैसे सही होगा, यह आपने बनाया है ही सही नहीं है,

02:33खुछ दो गड़बड है इसमें, यह आपके कंटेनर्स जो है, यह इस तरीके से आपने लिए है, इसका देखू क्या बनाया है, आपने में डिव लिया,

02:44उसके अंदर आपके कंटेनर है, कंटेनर के अंदर बॉक्स वन, ठीक है, यह में लिए है, फिर उसके अंदर यह कंटेनर है, ठीक है, और इस कंटेनर को आपने हाइड दे रखिये,

03:01बुटति लेकों, एक ंंदर अपने ली, कंटेनर अपने लिए है, अंदर बॉक्स अपने ले रखाएड,

03:30पूर्ट एक तो पूर्ट तो उट श्रेग तो और एक आलाइन को ने बैस लाइन अपने रखाए श्कुआ अटाके आपकर तो स्कूर्स चैन्टर

03:56यहां पर लगा लोपना अलाइन आइटम यहां से करके देखा करूँ ना अलाइन आइटम सेंटर की अब नहीं कर रही है तुस्त तो बड़ पड़े है कंटेनर में कंटेनर की हाइट क्या है

04:19क्या है

04:26कर दो

04:33इसको तोड़ा तोड़ा सही नहीं मैंना अपने रवी इसको सही करना

04:38परफेक्ट सब्सक्राइब

04:45अब यह चोटे बड़े कैसे हो रहे है डिव

04:50इसको सही करना जो डिव चोटे बड़े हो रहे है इसको सही करना जो डिव

04:57करना जो डिव चोटे बड़े हो रहे है गुड इवनिंग यूजी गेमिंग

05:04इसको सही करना इसमें कुछ मिस्टेक्स है प्रोपर्टी सही से नहीं लगाई भी तो इब प्रोपर्टी देखना और फिर इसको सही करना

05:22अ

05:26कि

05:29कि

05:31कि

05:34कि

05:37कि सिपुल करेगी सब मैं जो बनाया हो कैसा है यह बिल्कुल सही है सिपुल

05:41कि

05:44कि सब्सक्राइब

05:46कि

05:47कि

05:48कि

05:49कि

05:50कि

05:51कि

05:52कि

05:53कि

05:54कि

05:55कि

05:56कि

05:57कि

05:58कि

05:59कि

06:00कि

06:01कि

06:02कि

06:03कि

06:04कि

06:05कि

06:06कि

06:07कि

06:08कि

06:09कि

06:10कि

06:11कि

06:12कि

06:13कि

06:14कि

06:15कि

06:16कि

06:17कि

06:18कि

06:19कि

06:21कि

06:22कि

06:23कि

06:24कि

06:27कि

06:28कि

06:30कि

06:31क

06:33क

06:34क

06:36वो मैंने create कर दी जैसे मालों मैंने 4 boxes बना दिया और मैं आपर कहता हूँ यह first है यह second है यह third है यह fourth है यह आपका flex container है यह आपका flex items ऐसार है ठीक है जल दिसे इसको styling कर लेते हैं मैंने style करा

06:52मैंने गुला कि मेरे पाल जो मेरा container है उसको मैंने target किया और उसके पर अपने एक बॉर्डर बनाई वह बना देते हैं और इसके width मैं आपर गयता हूँ 100% कर देना

07:08हाइड आप यहाँ पर जो भी आपको बनाई है जैसे width लिए मैं हाइड कर देता हूँ चीक है यह आपका main container है इसके अंदर जो भी child container है उसको अपन टार्गेट कर लेते हैं अब देखो मैंने क्या किया था container फिर उसके बाद करेडर देन फिर उसके बाद मैंने बुला कि उ

07:38मैं कहीं देता हूं कि आप width set कर देना, width आप कर देना जैसे 100Pixels और height आप यहां पर पर लेता हुए 100Pixels चीक है यह काम कर देना और उसके अलावा MPB border आप बना देना और वह मैं कहे देता हूं 3Pixels की solid और brown color की आप यहां पर border बना देना चीक है तो यह काम भने कर किया अ�

08:08ही क्या हो रहा है इस तरीके से पने पास टयायक्षों आ रहिए अपन चेंज कर सकते हैं वह कैसे गरेंगे आपन कंटीनर की पर देख रहे थे थे फैने हाँ यहां पर करा और मैंने बहुडा फेले डिस्प्लेट अफ्लेए यहां लागा इस टूढ़ा होगि तो जैसे इसकी �

08:38अपने डिसकस कराता अपने यहां पर justify content और अलाइन अईक्सिटम की

08:51justify content अगर मैं यहां पर लगाता हूँ चीक है जैसे मैंने यहां पर लगा अपना

08:55मैं लगा तो अपना justify content और मैं लगा एक center तो यह कैसे चलेगा यह चलेगा आपके

09:05अबने यहां पर में एक्सिस कैसे और मैं ने यहां पर इ अपना यां आइक्सेश में और आपना

09:09और एक्सक्राइब करता हूँ चीक करके और मैं बोलता हूं कि Buddy और मैं यहां पर अपना

09:29प्रेट्स डाइरिक्शन जो है वह में यहां पर कहता हूं ठीक है फिर उसके बाद अपने बुला जस्टिफाइब कॉंटेंट मैंने बुला सेंटर तो अब कैसे सेंटर में आएगा अब भी अगर आप इसको देखोगे तो दिखो कैसे सेंटर में आ रहा है यह सेंटर में आ �

09:59सिर्फ में बतार हो अलाइंड कॉंटेट भी अपने देखा था अलाइंड कॉंटेंट वर्क करता है आपके अधिस्प्लेइफ रच लगाते के उपर जा हो सुरी थे ब्रच ब्रच और आप यहां पर इसको अध्यों चोपकर और आहां को लाईन कांटेंट्टांट को पहा�

10:29अब यह अपने पास फूली रहेंगे जैसे जैसे डिस्प्लेश जोगा वैसे वह आपके यूग कंटेनर से वह आरेंज हो कि आते रहेंगे तो यह अपने देखा था अपना फ्लैक्स व्राइप प्रोपर्टी गेप पर देखी अब नेक्स अपने डिसकस करते हैं अपने चा�

10:59अब अपने पास यहां पर अपने डिसकस करते हैं तो चाइल कंटेनर पर डिसकस करते हैं तो चाइल कंटेनर के अदर अपने पास कौनवांसी प्रोपर्टी जाती है अब मतलब फ्लैक्स आइटम के उपर कौनवांसी प्रोपर्टी जाती है उस पर अपन यहां पर डिसकस क

11:29पर जो अपने पास अपने फ्लेक्स आइटम है वो कौन-कौन से है वो अपने पास अपना ये बॉक्स है ये वाला बॉक्स है ये बॉक्स है ये बॉक्स है ये सारे अपके फ्लेक्स आइटम्स ही है चीक है तो चलो अपन यहां पर अपने इनके उपर अपने चाहिल के उपर �

11:59रहे रही होई बस मैंने सबको एक particular class यहां पर assign कर दी हर एक child को इसको मैंने box 1 दे दी इसको box 2 दे दी इसको box 3 दे दी इसको box 4 दे दी तो अब देखो first अपने पास जो property आती है वो अपने पास आती है

12:14अब flex grow property क्या काम आती है कि जो अपने item है उसको कितना अपने को grow करवाना है कितना space अपने को देना है उसके लिए अपन यहां पर अपने flex grow property यूज़ लेते हैं जैसे मैं यहां पर बोलता हूँ

12:39मैं सबको टार्गेट करता हूँ जितने भी चाहिद है मैंने box one को टार्गेट करा चीक है और मैंने इसको पर लगा अपना flex grow property और मैंने बुला one चीक है अभी मैंने बुला flex grow और one किसको बुला

12:52चाहिए जो अपने पास कहता one तो यहाँ पर one को मैंने जैसे बुला तो वो automatically यहाँ पर grow हो गया one यहाँ पर वो grow हो गया अब सबको अपने को टार्गेट करना पड़ेगा तब ही यह difference आपको समझे बाएगा कि grow किस तरह के जबाग करता है मैंने box two को यहाँ पर लिखा ठीक ह

13:22यहाँ पर भी fx grow लगाता हूं मैंने यहाँ पर भी fx grow लगा या इसको भी जाते हैंिげ अपना flags grow वन के देता हूं मैं बदे

13:27लिखा बन नहीं है ञेंदर सबके अंदर मैंने बन दिया तोесकर सब की size यहाँ पर सेम है अब मैं यहाँ पर बोलता हूं कि मेरे पास जो कि MERा

13:52flex grow में यहां पर क्या बोल रहूं

13:542 कह रहा हूं

13:55तो देखो यहां पर

13:56जो अपना 1, 1, 3

13:59और 4 जो चाइल है

14:00वो तो अपने पास 1, 1 ही ले रहे

14:02लेकिन जो 2 वाला है उसको मैं है

14:04flex grow 2 दिया इसका मतलब

14:061 का 2 टाइम चीक है

14:082 का मतलब क्या हो गया जो

14:10तो 1 अपने पास है उसका 2 time अपन यहाँ पर कह रहे हैं

14:13अगर मैं यहाँ पर कह देता कि अपने पास 3 कर देना

14:17तो यहाँ पर यह क्या हो जायागा अपना 3 time हो जायागा

14:20ठीक है यह अपने पास क्या हो जायागा अपना 3 time हो जायागा

14:24तो जैसे मैं 3 दे रहा हूँ

14:26तो जो अपना ये box 2 है

14:28ये किसका 3 टाइम हो जाएगा

14:30box 1 का, 3 का

14:32और 4 का, ठीक है

14:33अगर ये 1 ले रहा है, जैसे अपना box 3

14:361 ले रहा है, अपना box 4 1 ले रहा है

14:38अपना box 1 1 ले रहा है

14:39तो अपना जो box 2 है

14:41वो 3 टाइम रेगा किसका box 1 का

14:43ठीक है

14:45चैक करो तो देखो यहाँ पर यह

14:47same size लेकिन यह

14:493 टाइम है जो अपना box 2 है

14:51वो अपना 3 टाइम है किसका

14:521, 3 और 4 का जैसे मालूम है

14:55यहाँ पर कहता हूँ कि यह box 3 को 2 टाइम रगना

14:57तो अब box 3 जो है

14:59वो 2 टाइम रहेगा किसका

15:01जो 1 टाइम है उसका 2 टाइम है

15:03तो इसका अपना box 1

15:051 टाइम है box 4 1 टाइम है

15:07और यह 3 टाइम रहने वाला है तो जो किस तरीके

15:09से रहें जो क्या हैगा

15:10आपका यह 1 टाइम है यह क्या है

15:13यह 3 टाइम है यह 2 टाइम है

15:15और यह one time है तो यह अपना flex grow होता है कि अपने item को कितना grow करवाना है

15:21कितना available space अपने को यहां पर set करना है अपने according अपनी हिसाब से

15:26चीक है तो यह अपने पास अपना flex grow property होती है

15:30यहाँ तक की चीज के लिए रहे flex grow property क्या काम आती है

15:45अपने पास और प्रोपर्टीज भी आती है अपने प्लैक्स श्रिंक भी आता है

16:09अपने पास ठीक है मतलब जैसे मालो मैं आइटम को कितना श्रिंक करना चाहता हूँ

16:14space कम है तो उस हिसाब से तो वहाँ पर अपन उसको यूज लेते है

16:18आरेस्ट करें से two time in the sense its width two time yes

16:24जो अपने इसकी initial width दिये उसका two time यहाँ पर यह ले रहा है

16:29जैसे 100 pixel है तो अब जैसे आपने इसको one बोला है तो यह automatically इस one के हिसाब से इसकी जो बेड़ती है उसके हिसाब से यह आपर क्या करेगा उसको ग्रूप रवाएगा

16:40इसकी अगर 100 pixel है तो यह इसको three time करेगा यह इसको two time करेगा और यह जो one time में जो है वही रखेगा

16:48तो यह अपने flags grow property होती है जो अपनी आपर यूज ले रहे ठीक है फिर उसके बाद next अपने आगे चलते हैं अपने पास और को इसको यूज लेते हैं जैसे यहां पर आता हूं मैं सब पर लगाता हूं एक बार के लिए

17:16इसको तो कमेंट करतो जो flags grow लगाया सब के उपर कमेंट कर देते हैं इसको भी कमेंट कर दो ठीक है और इसको भी पर कर देते हैं comment परफेक्ट तो अपने पास जो containers है वो इस तरीके से आ रहे हैं अब मैं यहां पर अपना shrink लगाता हूं मैंने बुला कि email को यहां पर लगान

17:46के लिए अपन यहां पर आते हैं और इसमें से justify content और align item को में एक बार comment कर देता हूं ठीक है वेब तो अपने करी रखा है और इसकी value अपने दी बन ऐसे ही मैं यहां पर भी देता हूं पना फ्लैक्स श्रिंक

18:02कि इसको पन देते हैं टू

18:04और यहां पर आ जाओ यहां पर देते अपने फ्लैक्स श्रिंक और इसको मैं देता हूं 2 जैसे ओ और यहां परकलए अपना फ्लैक्स श्रिंक ठीक है जिसे इसको त्रीनुत

18:32अब श्रिंक वर कैसे नहीं कर रहा है रुको एक इनिट आप

18:38अब बॉक्स वन है फ्लैक्स श्रिंक अपने आपर इसको बन दिया

18:46आप

18:50कि अ

19:02कि अब श्रिंक वर कैसे नहीं कर रहा है कि वोक्स वन को लुग हूँ

19:21कि अ

19:32कि अ

19:40अब लेक्स रिंक को दापना कि अबना कितना स्पेस कम है

19:44एक में इस प्रोपर्टी को थोड़ा सा ना एक बार देख के बताता हूं क्या है फ्लैक्स रिंक कर पार सर्च करो फ्लैक्स श्रिंक

19:55अ

19:56इसी बेविया लो यह से इस पहला तामा

20:05कि अ

20:06कि अ

20:07अ

20:09कि अ

20:11अ

20:13अ

20:15कि अ

20:25अ

20:27अ

20:29अ

20:31कि अ

20:33अ

20:35कि

20:37अ

20:39कि

20:41अ

20:43कि

20:45इसकी डिफॉल्ट बैल्यू क्या होती है वन होती है ठीक है और

20:49और

20:50अ

20:53एक बार के लिए फ्लैक्स ग्रूब यह बन रहने देते हैं

20:56अ

20:58कि

20:59अ

21:00कि अ

21:01कि अ

21:02कि अ

21:03कि अ

21:04कि अ

21:05कि

21:06इसके फ्लैक्स ग्रूब को आप बन रखो

21:08ठीक है वैसे चाहिल की प्रोपर्टी इतनी यूज आती नहीं

21:11ही नहीं है उन्हें elements को set करने के लिए

21:19अब देखो यहां पर श्रिंक को पने कराओ

21:22चेंजेस श्रिंक प्रोपर्टी

21:27कि यहां पर आओ और

21:30कि

21:32कि

21:34कि

21:36कि

21:38कि

21:40कि

21:43बॉक्स अपना उतना ही है लेकिन यह यहां पर कि

21:47अपना जो श्रिंक है जैसे मैं इसको चेंज करता हूं मुदता हूं

21:50थी कर देना ठीक है और यह अपने किसका कराओ आपने बॉक्स टू का

21:58ग्रोफ को चेंज कर दूआ, आप बोल दो, यहां पर five कर देना और जो शृंक को भी आप five कर देना तो जो box two है वो अभी भी उतना ही महांपर arrange हो रहा है चलो इसको मैं बताता हूं आपको, आगे बताता हूं इसको shrink कैसे use करते हैं, ठीक है, तो यह कुछ अपने properties है, अपने �

22:28प्लेक्स श्रिंकर जो है

22:44एक बार डोकॉटेशन देखो क्या है इसकी

22:58काम करते हैं पर बैग्राउं कलर ही लगाते पर भी है यहां पर आओ मैं जो मेरा बॉक्स वन है

23:19इसको अटा दो इसको भी अटा दो जो ग्रूब लगा है इसको अटा देखो अब देखो यहां पर जो अपना में कंटेनर उसके उपर अपने

23:37इसको अपने जो भी देनी है यह इस तरीके से अपना यह बना रहा रहा है उसके बाद अपने पास क्या है ना जो कंटेनर है उसके अंदर जो अपने चाइल आप

23:39जो ग्रूब देनी है अबने बाद बना रहा है उसके बाद अपने पास क्या है ना जो कंटेनर है उसके अंदर जो अपने चाइल उसको अपने यहां पर

24:06curriculum कर रखा है

24:07टिके

24:10जिसको पने पोड़र दे रखी है, सब चीजे दे रखी है

24:13अब में आपर जो बॉक्स दन है उसको एक

24:16बैंग्राउंड करें रब को जैसे माह बने ब्लाउनлан दे रिया

24:19जो ऑफसे हैं उसको भी अपनिंग बैंग्राउंड देते हैं

24:22यहां पर आके चेक करते हैं तो पने पास 1234 यह अपने बॉक्स यहां पर बने भी आ रहे हैं

24:52अब मैं यहां पर आता हूं कि मेरे पास जो बॉक्स वन है उसके उपर मैंने यहां पर लगा अपना फ्लैक्स श्रिंक और उसको मैंने यहां पर पास कर लिया हुआ

25:14यहां पर अपने पास करें के लियुक्त हीं और इसको मैंने फ्लैक्स श्रिंक और यहां पर मैंने लगा तो अपना पास करते हैं ख़िक और उसको मैंने यह पास करें हैं

25:32तो यह 123 अपने पास आ रहा ही जो क्या रहा है इस चरीके से

25:41एक काम करो अपने फ्लेक्स श्रिंक तो लगा है कि लेकिन अपने जो चाइल है उनको अपन फ्लेक्स यहां पर लगाता है अपनी फ्लेक्स की एक और प्रोपर्टी आती है बेसिस

25:52है एक एक प्रोपर्टी लगाता है एक बाटें तो यह बन ने फास फिस यहां पर रगाया और इसका एक पर 50

26:17में आपके लिए यह लोग लेना और टीके लेड़ने आपके लिए यह लोग लेना और टीके

26:47अपने कांट करते हैं इसको अपने कितनी थी 300 पिक्सल इस कंटेनर की टोटल विर्थ मैं आपके लिए एक को यहां पर पास करिए तो अब जो आपकी यहां पर कंटेनर से देखो कैसे यह श्रिंक वर करता है

27:15कि आपने अपना में कंटेनर कितने विर्थ का रखा है ठीक है आपने बुला कि मेरा जो में कंटेनर है वो रहेगा 600 पिक्सल विर्थ का ठीक है फिर उसके बाद मैंने बुला कि मेरे जो यहां पर चाइंड है

27:35तो मैंने यहां पर बुला कि मेरे पास यहां पर जो मेरा चाइंड है उसका बेसिस कितना रहेगा 300 पिक्सल ठीक है

27:49यहां पर बुला कि जो मेरे हर बॉक्स का साइज है वो कितना रहेगा 300 पिक्सल क्योंकि यह सारे आपके चाइल है यहां पर रहने वाला है यह मैंने आपर साइट कर दिया

28:11और जो अपने पास अपना यहां पर क्या है अपने चाइड उसको 300 पिक्सल का रखना अब देखो यहां पर इस 600 पिक्सल में 300 पिक्सल के तीन चैल्ड आपको यहां पर काणने अरेंज करने

28:28क्योंकि टोटल 900 पिक्सल हो रहा है आप अगर आप देखोगे तो तो अब मैंने बोला कि जो मेरे पास मेरा बॉक्स वन है उसका फ्लैक्स रखना यहां पर बन तीक है तो उसको श्रिंक करेगा मतलब मैं अपर आरेंज करवा रहा हूं इसको बॉक्स वन को मैने बोला कि आप �

28:58जैसे मालूम मैं इसको भी श्रिंक करना जाता हूँ तो यहां पर और यह बन तो यहां पर आपको श्रिंक पता जलेगा यह दोनों का श्रिंक सेम है और इसका श्रिंक यहां पर आता है

29:10जैसे इंस्पैट करके समय हम उसको मैं यहां पर आता हूँ धून करने के कोई सब् pedas

29:17सङसे यह इसको मैं या ऐप टारगेट करता हूँ ठीक है फिर आप रहता है श्रिंग निवा जेन्ट फिर मैं ersकी लो खुर हुग वन har只

29:29जोड़ा है ठीक है मैंने बुला कि आप इसको रखो जीरू या फिर आप रखो जीरू का मतलब है 300 पिक्सल रहना तो फिर इसके बाद मैंने बुला बॉक्स टू बॉक्स टू को आप श्रिंक रख लो त्री टाइम चीक है तो फोर टाइम जो भी अपने को रखना है टू टा�

29:59से रेंज कर दिये वो सारे कंटेनर ताकि वो उससे बहार ना जाए ठीक है तो यह अपने पास अपना फ्लैक से श्रिंक होता है और ऐसे ही फ्लैक्स अपने दू चीज़े देख लिए एक तो श्रिंक देख लिया और एक अपने देख लिया है आपर कौन सी प्रोपर्टी अ

30:29है तो यही कुछ चैङल की प्रोपर्टीज आपने देख़े अपने प्र Sm

30:31कि अपने फ्लैक्स ओ देख़े किया और ऐख लेक अपने फ्लैक्स गूह देखिए तो यह तीन प्रोपर्टिज आती है अपने किसके अंदर

30:43काइ नसप वेश्मास अन्दर

30:44यहां तक की चीज के लिए आप से भी को

30:55पीकू करे रहे हैं नंबर ओफ एलिमेंट्स इंक्रीज करके देखिए सर शायद वर्क करेगा या फिर डिव की विर्थ इंक्रीज कीजिए तब

31:06करेगा या इस बिल्गुल ट Rights जो श्रुक रहे है वो अपना

31:15ऊपने नट के विष्च zij यहां पर वो काम करता है ठीक है यहां

31:26के लिए रहे है आरे

31:36सरी श्रिंग के

32:06यह आपर इस बिल्कुल विट अपन यहाँ पर साइट कर रहे हैं इसकी विट पर ही लगता है अपना श्रिंगी जो पर ने लगाया है अब देखो यह तो पर ने डिसकस कर आपने डिस्प्लेय फ्लैक्स प्रोपर्टी पे आपको कुछ टास्क है जो आपको करने है जो मैंने �

32:36अपनाते हैं अपने CSS के उपर और UI टास्क उपर आता हूंगा है यह वाला आपने बनाई लिया अब यह वाला टास्क आप कंप्लीट बना सकते हूं यह कार्ड आपको यहाँ पर क्रिएट करना है सेम आपको एक डिव लेना है उस डिव के अंदर आपको क्या करना है उपर �

33:06आइकन के लिए ज सब्सक्राइस के तरह सच कुल सकते हैं तो परबाट के जैसे मैं पर आप को फॉलाइकन के यहाँ को आ एकराएकन को बहुत सारी Лily उछान जारे को.

33:32या फिर इसको करना है तो मैं इस पर क्लिक करूँगा तो देखो राइट साइड इसका कुछ एक नया बॉक्स ओपन हो क्या रहा है यहाँ पर अगर आप इसको यूज करना चाहते हो तो इसको स्क्रॉल गर उसने बता रहा है वारप के लिए यूज करना है एंड्रोड के लि�

34:02हैट के अंदर उस स्टाइल शीट वारे लिंग को पेस्ट कर देना पहला तो पामी यह से रियन लिंक है फिर उसके बाद اगर आप इस क्रॉल करके देखोगे तो यह रहा आपका आईकन का पूर स्पैंट टैग के अंदर लिखावा इसको कॉपी करके जहां पर लगावे व

34:32यहां बРИ नँहार पर उंपर दोड़ों हो जाए गया धर यह लिए अपने

34:39पास यहां पर आ रहा है अब यह नीची यहां कि आ रहा है कि यह अपका

34:45इंट लाइन गो एक और इसकी प्रोपर्टी के यहां है बिस्प्ले इन-लाइन और इसकी

34:49ब्लॉक है इसलिए वो नीच जा रहा है यह की लाइन में लाना चाहते हो तो क्या करोगे यह की लाइन में लाना चाहते हो तो इसके उपर कलर प्रोपर्टी सारी अपलाई होती है यह जो

35:10तो यहां पर फॉनसा प्रोपर्टी भी लगया घी ला चाहते हो तो यहां पर फॉनसाइज प्रोपर्टी मों

35:39लगाया और मैंने बुला 30 पिक्सल कर देना तो अपने आइकन की फॉन साइज भी इंक्रीज हो जाएगी 30 पिक्सल में ज्यादा चेंज नहीं आ रहे तो इसको और चेंज करके दिख लो आप खोल दो 100 पिक्सल करके देख लो 100 पिक्सल भी नहीं लग रही मतलब फॉन साइज �

36:09यहां पर चेंज करता हूं तो इसले के प्लेवी जैक्रीज हो एक है यह इस से कर क्यों चेंज नहीं हो रही कि इन्लाइन यहां पर लिखेकर लिक्वीवचे पर इन लेंसिर बिल्ग लिखता हम पहीए लों नाइन तो

36:39करके मैं यहां पर बोलता हूँ phone size और मैंने बोला 50 pixel तो इसकी phone size यो 50

36:46pixel size हो जानी चिए तो दिए यहां पर इसकी phone size change हो गई 50 pixel यहां पर

36:50set हो गई ठीक है ऐसा क्यों हो रहा था यह वाली apply क्यों नहीं हो रही थी क्योंकि यहां पर यह

36:55क्लास लगी है यह इसकी inline css है और यह inline css कहां से आ रही है यह अपनी इस link के चुआ रही है जो आपने

37:03cdl link के यूज करा रहा है इसलिए वह अपनी properties पर अप्लाइन हो रही थी इसकी जो initial property थी वह ही apply हो रही थी

37:10font size की ठीक है तो यह font आप यहां पर use कर लेना और इसको complete बना लेना फिर उसके बाद आपको यह content लिखना है फिर उसके बाद आपको यह paragraph टैक के अंदर लेना है और view detail का एक बटन बनाना है बस यह आपका एक task है ठीक है यह पहला task है जो आपको यहां पर create करना है उसके बा

37:40आपको एक div लेना है और उस div के अंदर आपको एक background image लगानी है फिर उसके बाद आपको क्या करना है एक और div लेना है जिसके अंदर आपको क्या करना है चार div लेने है पहला div यह रहेगा उस div के अंदर दूसरा div यह रहेगा तीसरा यह रहेगा और चोथा यह रहेगा एक div

38:10जिसमें आपको ये Card बना दे पहला एक Card बना दे तो ये आपको कौन सा Task है

38:19second task है

38:20यह आज का task है आपके 2 task होगे

38:23ठीक है

38:25और एक task और दे रहता हूँ

38:27जो आप बना लेना जब भी आपको

38:29जब तक time मिले दो दिन के अंदर

38:31फिर उसके बाद अपना आगे देखेंगे

38:33तब और आप बना देना

38:36यह तीसरा task की यह है

38:38ठीक है

38:39इसके अंदर आपको क्या करना है

38:40एक पूरा div लेना है

38:42उसके अंदर आपको उपर

38:45topic नेवबार आपको यहाँ पर

38:47create करनी है

38:47अब नेवबार कैसे create कर सकते हूँ

38:50मैं बताता हूँ नेवबार कैसे create करोगे

38:51आपको एक नेवबार बनानी है

38:53फिर उसके बाद आपको यहाँ पर नीचे एक डिव लेना है

38:57उसके अंदर दो डिव लेने हैं जिसमें left और right दो डिव है

39:01left और right कैसे आएंगे वो जब आप उसकी display flex property लगा होगे

39:06तो left right अरेंच हो जाएंगे

39:07फिर उसके बाद यह वाला जो डिव है

39:09इसके उपर अपने यहाँ पर इसने padding लगा रखी है

39:12और direction से फिर अक्षस सर्माई यह सारे चीज़े लिखी वी है

39:15यह बहुत easy है बना के देखना है इसको

39:18बना लोगे आप जहां तक में को लगता है ठीक है

39:20तो यह अपने task है जो आपको यहाँ पर complete करने है

39:26इन task को complete करना आप

39:30अब देखो यहाँ पर nevvart अपन कैसे बना सकते है

39:35नvvart बना के दिख लेते है क्योंकि

39:36नvvart बनानी आनीची है

39:40यहाँ पर अपन

39:45इसी के अंदर एक और

39:48और फाइल बनाते हैं मेडिया में मत बनाओ और वो मैं कहा देता हूं नेव बार टॉट एस्टी में चीक है अब पर यहां पर एक नेववार बनाते हैं

40:16नेव बार कैसे बना सकते हैं किसी के पास कोई आइडिया

40:46अब लेता हूं चैक है चलो अपन बनाते हैं क्या इस्ट्रक्चर रह सकता है नेव बार का इंगा और यहां पर अपना नेव टेग ही ले ले लेता हैं और अपने नेव टेग बढ़ाता हैं

40:50बनाते क्या स्ट्रक्टर रह सकता है ने उबार का मैं यहां पर अपनी बॉइळर प्लीट लगा लेता हूँ और यहां पर आके अपने नीओसने इम उल अभी लेता हूँ यहां लाग очень पालन

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

41:45ड़ने पर लेता हूं जिसमें लिस्ट पर लेता हूं यहां पर एक बडल ले लेता हूं और उस बड़न में पन काद अवना जया हूं

42:06आपन कुछ भी कहाँ जैते हैं जैसे यहाँ पर आके चेक करो इसने क्या के रगए अगर Contact तो मैं आपकर गया तो

42:11Contact तो आपन एक काम पर करते हैं लौग-इन कह दता हूं मैं ये अपना

42:17अगवार बनानी है अब भी अगर आप देखो गई तो आपके पास structure कैसा आएगा जो

42:21HTML का structure है skill वाला लिखावा है home courses about contact पूर लोगे इस तरीके चारा सब यह की line के इंदर आ है

42:28अब अपने को यहाँ पर क्या करना है यहाँ पर अपने को अपनी नयवार यहाँ पर अपने को create करनी है

42:35तो चलो यहाँ पर create करते हैं सबसे पहले मैं यहाँ पर अपना internal CSS लिखके style कर लेता हूँ

42:41और मैं यहाँ पर universal selector लगा के मैं बोला हूँ कि आप margin को zero कर देना और padding को क्या कर देना जीरो कर देना यह क्यों लगा रहा हूँ क्योंकि आपके यहाँ पर initial यहाँ पर margin और padding apply होती है 16 pixel या फिर 16 pixel के something margin या padding apply होती है आपके body पर वो मैं यहाँ पर बोला हूँ कि 00 लोखो उस

43:11मैं चाहता हूँ कि जितने भी boxes में यहाँ पर बना हूँ उसके अंदर उसकी width और height के अंदर आपकी padding और आपकी border include होनी चाहिए वो काम मैं करना चाहता हूँ ठीक है तो यह जैसे मैंने लगाए इसमें margin zero और padding zero तो बिल्कुल body पर जाके चिपके हो क्योंकि initial margin padding लगी थी व

43:41मैं करता हूँ ठीक है और यहाँ पर अपर इसको target कर लेते हैं मैं करता हूँ dot navbar ठीक है और इसके उपर अपर लगा देते हैं अपना display property और वो क्या लगा होगे आप flags जैसे display flags लगा होगे सब एक line के अंदर आ जाएंगे यह लोग यह आपका skill वाला एक line में आ गया

43:58यह एक line में आ गया, login button एक line में आ गया ठीक है फिर उसके बाद मैं यहाँ पर लगाता हूँ अपना justify content और मैं यहाँ पर कहा देता हूँ

44:06अपना space between, space between में क्यों कहा रहा हूँ, क्योंकि सब के बीच में यहाँ पर spacing हो जानी चाहिए, आपका skill वाला के बीच में भी spacing होगे, आपकी यहाँ पर आगी login बटन आपका right side चाहिए, फिर उसके बाद अपन लगा देते हैं अपना align item, align item में मैं कहा देता हूँ

44:22सेंटर कर देना, मतलब cross axis में उसको center में कर देना, तो cross axis में भी center में हो जाएगा, ताकि बटन से ही आजया, बाकी चीज़े से नहीं जाएगा, फिर उसके बाद अपन यहाँ पर कहते हैं, एक background color अपन कुछ भी दे देते हैं, और background color जैसे मैं इसके अंदर देता हूँ, यह

44:52परफेक्ट, फिर उसके बाद अपन इसके अंदर एक काम और करते हैं, अपने पास देखो, जो अपने पास यहाँ पर अपनी जो list है, unorder list है, उसको अपन यहाँ पर target कर लेता है, मैं यहाँ पर इस div को तो एक class देता हूँ, कि अपन इसको class कर देता हूँ, यह लोगों के �

45:22अपने पर इस देता हूँ, जो एक बार के लिए लोगों के टार्गेट कर देता हूँ, उसकी font size और इस तरीके सारा अपने पास यहाँ पर आओ, और उसके अलावा मैं यहाँ पर font width चेंज कर देता हूँ, और उसको मैं यहाँ पर गयता हूँ, और color

45:52करते हूँ, तो इस तरीके से अपने पास ही आ रहा है, ठीक है, तो यह तो अपने पास क्या हो गया अपना logo, फिर उसके बाद अपने क्या ले रहे हैं, अपने nav links भी ले रहे हैं, तो इस nav links को भी मैं यहाँ पर target कर लेता हूँ, और इसमें अपन जो भी अपने list की जो property होत

46:22हैं, तो यह जो आपकी unorder list है, यह क्या हो गया, आपका parent हो गया, और list item आपकी क्या हो गया, child हो गया, तो यहाँ पर भी आप display flex लगा सकते हो गई, आपको लोगे display, आपको लोगे flex, तो जैसे display flex लगा हो गया, सब यह की line में आ जाएगे, यह लो, अब इनके बीच में spacing करन

46:52आपर home course about contact इस तरही के जार है, ठीक है, फिर उसके बाद अपने पास जो अपना anchor tag है, उसके नीचे देखो, यहाँ पर underline बनी वी आ रही है, underline हटाने के लिए अपने पास कौन सी property आती है, तो मैं यहाँ पर nav links के अंदर anchor tag को target कर लेता हूँ, और उसमें कर देता हूँ, text

47:22color है, वो आप यहाँ पर कर देना white, तो जैसे आप यहाँ पर देखो, text का color white हो जाएगा, चीक है, उसके लावा और क्या changes करने है, आपने text का color change कर दिया, phone की width थोड़ी सी बूल कर देता है, अपने इसको phone width में आपर कहता हूँ, जैसे 600 कर देना आप इसकी ticket, तो अपने पा

47:52चीक है, मैं कहता हूँ कि आप 15 pixel की top से bottom पे लगा देना, चीक है, और left right से जैसे मैं यहाँ पर गहता हूँ, जैसे 40 pixel की लगा देना, एक बार आपने जीप करके कुछ भी लगा देना, तो अपने बास इस तरीके सारा है, skill वाला home courses about contact, और यह login का button, login के button को भी customize कर लो, कोई

48:22उसको आप यहाँ पर target करना चाते हो, तो आपने BTN को यहाँ पर target कर लिया, चीक है, और इस BTN के उपर अपन क्या करेंगे, अपने इस button को यहाँ पर target कर लिया, अब इस button को मैं यहाँ पर background color देता हूँ, जैसे मैं यहाँ पर कहता हूँ कि green color का, आप यहाँ बटन मनाना, �

48:52इस में थोड़े से वो changes करते हैं अपन, और वो changes अपन यहाँ पर क्या करते हैं, वो अपन कहते हैं कि padding लगा देना, padding मैं ने दे दी, जैसे मैं कहते हूँ 10 pixel की top bottom से दे देना, 20 pixel की left right से दे देना, यह लो, यह login इस तरीके से आ रहा है, ठीक है, और अपने इस पर water radius भी ल�

49:22पास pointer कर देना, cursor अपने पास pointer आना चाहिए, जब मैं उसके पर cursor लेके जाओ, ठीक है, और phone size अपन चेंज कर देते हैं, जैसे मैं आपर कहता हूँ 18 pixel कर देना वी लिए phone size, कुछ भी करके देखूँगी तो automatically आपको पता चल जाएगा, यह login का button आपने पास इस तरीके जमें

49:52मैं कहा देता हूँ कि green के अंदर थोड़ा सा उसको dark कर देना हो, ठीक है, यह यहाँ पर आ रहा है, यह थोड़ा सा dark कर देना हो, जब आप उसके पर over करो, तो बटन इस तरीके से आएगा, तो जब आप इस पर over करोगी तो बटन इस तरीके से आएगा, home course about contact पे भी over करो, मत

50:22तो अपने पास जो color है, वो change हो कि यहाँ पर गया हो जाना चाहिए, black हो जाना चाहिए, yellow आप इस पर over करोगे, home courses contact about, तो यह इस तरीके से अपने पास आएगे, ठीक है, तो नेववार बनाना बड़ा ही easy है, अगर आपको नेववार बनानी है, तो बहुत easy का में नेववा

50:52ठीक है, तो यह अपने एग नेववार बनाई है, तो same आपको जो task में ने दिया है, उसके अंदर भी same ऐसे ही नेववार बनी भी है, वो नेववार आपको यहाँ पर create करनी है

51:22लेकिन इस नेववार के अंदर भी अगर आप देखोगे तो यह तो दिक्कते हैं अभी, और वो क्या है, देखो जैसे मैं इसको inspect करके check करता हूँ, मैंने inspect करा और मैंने बुला मैं को responsive इस आप सब check करना है, अब देखो मैं यहाँ पर इसको छूटी device में डेकी जाता हूँ

51:52जाता हूँ कि यह responsive रहे अपने पास, जैसे मैं आपर इसको इतनी मतलब जैसे मालू मैं कह रहा हूँ कि यहाँ पर जैसे मैं 700 से नीचे आ रहा हूँ, तो यह responsive हो जानी चाहिए नहीं बाद, आपका logo पहले आजाना चाहिए, फिर उसके बाद आपके जो new items हैं हो आजाने च

52:22इतनी नयवबार को पन responsive कैसे बना सकते हैं, क्योंकि इसके अंदर responsive है एक चीज़ तो कि अपन responsive कैसे बनाएंगे, ऐसे ही अगर मैं इसको उपर fixed रखना चाहता हूँ, तो fixed कैसे रखूंगा, तो दो तीन properties अपन और पढ़ेंगे, तिर उसके बाद आपको automatically एक complete नयवबार �

52:52सकते हूँ, तो आपको वो नयवबार वहाँ पर बनानी है, सिभूल करेंगे सर जैसे नयवबार में आपने बटन बनाया और उसका size आपको padding से increase कर सकते हैं, ना तो तो तोनों में से कौन सा use करना best है, पैडिंग यूज करना best है, क्योंकि अपन hide और width यूज नहीं करेंगे

53:22जिसाब से उसमें आरे ही जो क्या हैगा, बटन में कभी भी width और height नहीं लगाते है, बटन पर, width height काम आता है अपने किसी भी element और वो कौन सा element, जैसे मालब कोई box को set करना है, ठीक है, या फिर कोई card बनाना है, वहाँ पर अपन उसको use लेते हैं, ठीक है, सब ज़ेगे use नह

53:52किलियर है यहां तक की चीज़े आप सभी को

54:02yes sir, clear, okay

54:18sir, हर website के नहवबार का height seem लगना होता है, क्या कोई standard size maintain करना होता है, या कोई भी size दे सकते है

54:29हर website के नहवबार का, नहीं, ऐसा कुछ ही नहीं है, कि हर website के नहवबार का size है, वो fix है, कि यही रखना है

54:36लेकिन अपन नहवबार के अंदर भी weight or height अपन side नहीं करते हैं, अपन उसको

54:41जो side करते हैं, वो open padding की दुरू side करते हैं, कि इतनी spacing रहनी चीज़े, अगर आप देखो कि इस port को मैंने weight or height यूज करी नहीं गहीं

54:49यहाँ पर देखो नहवबार मैंने weight or height, कहीं भी weight or height मैंने use करीगी, क्योंकि weight or height काम आती है

54:55element किसी box को side करना है, वहाँ पर, यह भी मेरा काम, पूरे box को मैं को spread ही रखना है इसके अंदर, मैं को इसकी width और height side करनी नहीं है, तो मैं को spread ही रखना है तो उससे साब समय नहीं इसको set कर दिया

55:07सिभूल करें कि सर अगर किसी चीज के height and width fix रखना है और वो zoom in करने पर उसका height and width fix रहे और change नहीं हो पाए, तो कैसे करें साथ

55:27किसी भी element की width और height fix रखना है, जब को unit अपने pending रह गई शाह थी, unit पर अपने डिसकस नहीं करा, मैंने सिर्फ आपको pixel भी बताए

55:35मैंने सिर्फ आपको pixel भी बताए, ऐसे अपने पास EM, REM यह units भी आती है, यह मैं आपको कल वाली class में जरूर explain को हुआँ कि units किस तरीके चे होती है, और आप किसी भी element की width और height कैसे fix कर सकते हो, उससे related अपने एक चीज भी miss कर दी, और वो है maximum width, maximum height, minimum height और minimum width यह चीज अपने

56:05तो कल अपन इसी चीज पर discuss करेंगे, कल मैं इक बार देखूंगा, क्या-क्या चीज रिमेनिंग रही है, उस पर discuss करेंगे, अलागि अभी आगे और भी चीज रिमेनिंग है, लेकिन उससे पहले अगर कुछ remaining रह रहा है, जिससे आपके concept के लिए नहीं हो रहे है, वो चीज

56:35flex, flex mention मत करना, attendance के .1 के अंदर, attendance के .1 के अंदर आपको mention करना है नयवबार, क्योंकि आपने भी नयवबारी देखिये, तो आपको attendance के .1 के अंदर नयवबार mention करना है, यह attendance का .1 है

57:05ऐसे ही सेम अटनेंस के पॉइंट टू के अंदर आपको मेंचेन करना है और वो मेंचेन करना है आपको यहाँ पर

57:20अपने प्रोपर्टी लगाई थी स्पेस बिट्वेंट वो लगा थे आप

57:27यह अटनेंस के पॉइंट टू के अंदर मेंचेन करना है यह अटनेंस का पॉइंट वन है यह अटनेंस का पॉइंट टू है जो आपको फिल करना है अपने फॉर्म के अंदर

57:42अगर कोई डाउट है तो अपने डाउट बताओ

57:45नहीं तो आज की क्लास फिर अपने रखते

57:47बाकिएपन डिसकस करेंगे पनी कलवाली क्लास के अंदर

58:13सरद नूट है करना

58:15मैं आपको बोला था अपको जो इसका जो गिटब կेझा है про और शेर करना।

58:18अच्छे सरड करके फिर बताऊ है

58:20आपने ये शेयर कर दिया ये आपने वर्चल का रहा है इसका इस का गिटब

58:25का URL मेरे को शेयर करो

58:27यह GitHub नहीं है