Complete MUI (Material UI) Guide in React (Full Stack Web Development Course Batch - 3)

Name: Complete MUI (Material UI) Guide in React (Full Stack Web Development Course Batch - 3)
Uploaded: 2025-09-09T05:56:34+00:00
Duration: 42 min 40 s
Channel: skillwaala
Description: 🎯 What You’ll Learn Today ✅ Introduction to MUI (Material UI) – Why it’s popular in React ✅ Installing & setting up MUI in your React project ✅ Exploring MUI Components: Button, Typography, TextField, Card, AppBar, Drawer Grid & Box (Layout System) ✅ Styling with MUI: sx prop styled() API

skillwaala

4 months ago

🎯 What You’ll Learn Today
✅ Introduction to MUI (Material UI) – Why it’s popular in React
✅ Installing & setting up MUI in your React project
✅ Exploring MUI Components:
Button, Typography, TextField, Card, AppBar, Drawer
Grid & Box (Layout System)
✅ Styling with MUI:
sx prop
styled() API

Category

📚

Learning

Transcript

Display full video transcript

00:00ठीक है तो आज अपन डिसकस करने वाले है अपने

00:07M.U.I के उपर आगे की चीजों के पर अपन डिसकस करने वाले है

00:10तो

00:12इस पर आप सभी को एक बार सब इस चीज पर कमेंड कर दो

00:17कि यह सर स्क्रीन विजीबल है सब कुछ परफेक्ट है

00:20स्क्रीन मैंने शेयर कर दी है और मैं दूसरे टैप के उपर आ जाता हूँ एक बार के लिए

00:24थाकि आप एक बार रैस्पोंस करतो उस चीज के उपर की स्क्रीन बिल्कुल

00:27सही है सब कुछ परफेक्ट है और फिर अपन क्लास कंट्यूनि करें

00:31तो यहां पर अपने ब्राउजर पर आ जाओ और यहां पर आके अपन मुआ के उपर आ जाते हैं अपने मट्रील यूआ के उपर जो अपन डिसकस कर रहे थे और इसी के

00:49इंस्टोलेशन पर मैं आ जाता हूं तो अपने कुछ चीज़े इसमें डिसकस कर ली थी अपने कॉंपोनेंट्स अपने यहां पर देखे थे जिसमें अपने ओटो कंप्लीट बटन बटन ग्रूप चैक बॉक्स फ्लोटिंग एक्शन बटन स्लाइडर स्विच टैक्स फिल्

01:19झाल झाल झाल झाल झाल

01:49तो अपने आजाते हैं अपने वापस डिस्प्ले के उपपर

02:18तो यहां पर अपने कुछ चीज़े इसमें डिसकस करी थी यहां तक अपन आगे थे टाइप अपने देखा था ऐसी अगर अपने अपने को अलर्ट लगाना तो अपने को अलट को यहां पर इसको एंपोर्ट करके यूज कर सकते हैं अपने पास

02:39थोड़ा सा एक बार अपन देख लेते हैं क्या क्या चीज़ अपने देख ली थी अपने

02:42M.U.I. के अंदर विजुल स्टुडियो कोड पर आ जाओ और M.U.I. पने यहाँ पर उपन कर रखा है इसको मैं एक बार रन कर लेता हूं

02:48GIT BASH गुपन ऑपन कर लेते हैं और यहाँ पर CD करके अपन किस में आ जाता है अपनी

02:54Frontend के अंदर और NPM Run देख लिए तो इसको अपन यहाँ पर रन कर लेते हैं और चेक करते हैं

03:02कि अपने क्या कहा चीजी देख ली ती तो यह कुछ चीजे अपने हापर डिसकस करी थी इसी में आगे जलते हैं अगर अपने को अलट्स लगाने तो यहां पर अलट करके इसने कॉंपोनेंट दे रहा है जिसको अपन यहां पर यूज कर सकते हैं बैकडॉप की बात करें तो �

03:32पर अपने पास यह ओपन हो क्या है जैसे आप लॉग इन करते हो ना वहां पर अपने जो भी अकाउंट्स होते हैं वह अपने को यहां पर शो होते हैं ठीक है फिर उसके बाद

04:00प्रोगरेस six-six परहें प्रोगरेस वहां पने पास होता है जैसे यहां पर प्रोगरेस बता

04:06रहा है यहां पर इसने बना रख्यांगी एकशिप टां यहां पर उसे जासि Tubdική अपने पास प्लीूज लेला हुए और प्रोगरेस स्टार्टे गए सब्र between को यहांपर between

04:20यहां पर अपने को उनको यूज लेना है

04:21जैसे यहां पर progress चल रही है

04:2360%, 70%, 80%, 90%

04:25ठीक है तो यहां पर

04:27progress अपने पास चल रही है

04:28इसने value दे रखिए उस value के basis पर

04:30अपने पास यहां पर अपनी progress यहां पर run हो रही है

04:32ठीक है फिर उसके बाद next अपन

04:34यहां पर चले जैसे linear इसने पास कर रही है

04:36linear के अंदर अपने पास color option भी दे रहे है

04:38color यहां पर pass करेंगे linear progress में

04:40तो color अपन यहां पर pass कर सकते है

04:42ठीक है वोई value progress दे रही है

04:44तो उसके basis पर अपने को यह use कर रहा है

04:46skeleton इसमें क्या है

04:50अपने पास यह तो basically structure है

04:52अपन snack bar के उपर चलते है

04:54snack bar अपने पास जैसे मैं इस पर click करूँआ तो देखो

04:56यहां पर अपने पास अपनी snack bar open हो क्या रही है

04:58यह option अपने पास

05:00subject इस option दे रहा है top left से आप इसको open कर सकते हो

05:03ऐसे यहां से top center से कर सकते हो

05:05top right से कर सकते हो bottom से कर सकते हो

05:06bottom center से कर सकते हो, bottom left से

05:08कर सकते हो, ठीक है, तो इस तरीके साब

05:10इसको use कर सकते हो, उसके

05:12बाद next अपन आगे चलते हैं

05:14यहाँ पर,

05:17यह तो basically अपन ने देखी थे

05:18अपने उसके अंदर भी थे, अपने पास, अपने

05:20bootstrap में, वो ही चीज़ है, ठीक है, इसमें cancel

05:22लाइगरी, यह सारे चीज़ आती है, और भी बहुत सारे

05:24इसमें अपने पास है, उनको अपन कस्टमाइज करके

05:26use कर सकते है, एप बार,

05:28एप बार की अगर अपन यहाँ पर बात करें, तो अपनी

05:30now bar यहाँ पर है, जैसे यहाँ पर basic

05:32अपने पास my account, इसको close करें तो यह पने पास

05:40close हो रहा है, यहाँ पर इसने profile भी दे रखी है, profile शो रही है,

05:44account, dashboard, logout का बटन दे रखा है, products, pricing, blog इस तरी कि अपने को दे रखा है, जैसे ही

05:50app bar अपने पास यहाँ पर बनी वी है, यह वाली app bar बनी वी है, अब देखो basically इसका code क्या है,

05:54code को understand करना ज़रूरी है, कि code क्या लिखावा है, जैसे मालो में इसका show code करता हूँ और अपन इसका code

06:00चेक करते हैं, तो इसने की code यहाँ पर लिख रखा है, जैसे जो अपने इसको use करके देखते हैं, अपने ECF bar को, मैंने यहाँ पर क्या किया है, इस code को copy किया, और यहाँ पर अपन एक नया component क्रियेट कर लेते हैं, या तो इसने जो name दे रखा है, वही name आप पास कर दो, या

06:30name देखो, इसका drawer app bar इसने रख रखा है, चीक है, मतलब function-based component का name क्या रख रखा है, एक बार चेक कर लेना, आपने सही कर आपने नाम रखा है, और जहाँ पर आप इसको क्या कर रहे हो, जहां से आप इसको export कर रहे हो, वहाँ पर भी इसका name क्या कर दो, नैव बार कर दो, व

07:00नैव बार कर देते हैं, चीक है, app.gsx में top of the page में उसको यहाँ पर import कर लेता हूँ, अपने नैव बार को, yellow, नैव बार को पने यहाँ पर import कर लिया, perfectly सब चीजे चल रहे हैं, तो आपको यहाँ पर आपकी नैव बार show हो जानी चीए, refresh करो, refresh करने पर कुछ ने कुछ ने क�

07:30drawer app bar, कहीने कहीं तो अपने सही जगे पास नहीं करा, drawer app bar यहाँ पर यहाँ यहाँ यूज कर रहा है, लेकिन अपने इसको क्या कर दिया है, अपने इसको ठीक है, तो यहाँ पर इसको नैव बार कर दो, नैव बार में से dot करके अपने को यह निकालना है, चीक है, तो यह नै�

08:00ठीक है सब कुछ सही है

08:06अंजुम करें कि हम लोग टाइप स्क्रिप्ट भी सीखने वाले हैं

08:12नहीं अपने इस कोर्स में टाइप स्क्रिप्ट नहीं है

08:14लेकिन टाइप स्क्रिप्ट वाला कोर्स बहुत जलाने वाला है

08:22तो आप TypeScript वहाँ से सीख सकते हो

08:23लेकिन ये सारे चीज़ यहाँ से सीखो

08:25फिर TypeScript वाला जब वो बैज आएगा तो उसमें TypeScript भी सीख लेना आप

08:29ठीक है

08:29ठीक है अब देखो यहाँ पर अपन ने जो नेवबार बनाई है

08:37इसको अपन वर्क करवाते है

08:38यहाँ पर यह नेवबार है जैसे मैं को इस नेवबार को वर्क करवाना है

08:41जैसे मैं यहाँ पर Home क्लिक करूँ तो अपन Home Page पर जाया

08:44About क्लिक करते है

08:45About Page पर जाया

08:46Contact क्लिक करते है

08:47Contact Page पर जाया

08:47तो यहाँ पर अपन जल्दी से Create करते है

08:49जैसे मैंने यहाँ पर बनाया about.gsx एक component create कर लिया, इस component को अपन create कर लेते हैं और इसको मैं यहाँ पर एक h1 tag देता हूं, जिसमें मैं यहाँ पर कहता हूं about component, ठीक है, about component करके अपने कह लिया, और अपने पास और कौन कौन से हैं इसके अंदर, एक अपने पास है contact, तो यहा�

09:19h1 tag अपन यहाँ पर ले लेते हैं और यहाँ पर अपन कहते है, contact component, ठीक है, यह मैंने component बना लिए, अब अपने को इनके urs बनाने तो किसके थूरू बना देते हैं, react router dom के तूरू तो अपने को इंस्टॉल करना पड़ेगा, तो cd करके अपन क्या करते हैं, अपने front end में आ

09:49जल्दी से, चीक है, तो यहाँ पर आके अपन कर लेते हैं, import, किसको import करना है, कहां से import करना है, अपने react router dom में से अपन बुलाने वाले अपने browser router को, तो मैं यहाँ पर बुला लेता हूँ अपने browser router को, दूसरा अपन यहाँ पर क्या बुलाएंगे, अपने routes को अपन यहाँ

10:19को दो कि एंदर अपनी अपने अपने यहां पर बोने हैं और ना पर अपने णौट के अंदर बैकर पहलाय पहले पाई पर आत्प में Subscribe

10:36प्रवान इसलिए जोपना एलिम्ytt है वह एलिमंट यहां पर पास कर दो एलिमेंट कौन सा वाला तो यहां पर अपने-पर आपकें कर Iya यह एक

10:43पर पास कर दो, element कौन सा है आपका about वाला component, तो यहां पर about वाले component को लगा दो, चीक है, यह सब चीज़े अपन करके आचुगे, इसलिए मैं explain नहीं कर रहा है, इन चीज़ों को अपन directly use कर रहे हैं, दूसरा मैं यहां पर एक और route ले लेता हूं, जिसमें अपन यहां पर अप

11:13और अपना नेव बार है, common रखने वाले है अपन, तो common रखने वाले है, तो इसको यहां पर लगा दो, बस इतना सा काम कर लो, देखो सब कुछ perfectly चल रहा है, वही सारी चीज़े कोई changes नहीं हुआ है, अगर आप यहां पर करते हो अपना slash about, तो आपका about वाला component आजाना ची�

11:43अगर आप यहां पर आते हो, slash किस के उपर, अपने contact के उपर, तो आप contact component पर आ रहे हो, perfect है, लेकिन अपन इस पर click करने पर आना ही चीज़े, चलो, इसका code देखते है, इसने नव बार बना रखी है, इसने नव बार बना क्या रखी है, एक काम करो, इसने जो टाइप लिग

12:13रैप कर लो इसको, ठीक है, विंडोस जिसमें से props कर रहा है, और ये mobile open, ये इसने responsively use कर रखा है, ठीक है, और इसमें इसने condition लगा रखी, handle drawer toggle करके, और उसको true false करवा रही है, अब drawer इसने पास कर रखा है, एक drawer इसने यहापर बना रखा है, जिसमें UI करके, और 9 items इसने यह

12:43पर लूप चला रहा है, और लूप क्या चला रहा है? map चला कर रहा है, map चला कर उससे item को59 item को रिट कर रहा है, मतलब उसके अंर जो item है, उनको kinda कर रहा है, और उसके वेशिस पर यहाप को यह पर इन कर करके � nostril, इस तरीके say, इसने

13:09यहाँ पर इसने इसमें map चला रहा है, इस area के उपर map चला रहा है

13:12इसको मैं change करके area of object में convert कर देता हूं, मैं यहाँ पर home ना रखके

13:16इसको तो करता हूं cut और यहाँ पर एक object पास करता हूं जिसमें अपन कह देते हैं

13:21अपना item, चीक है, यहां फिर अपन कहादेते है, nav, और nav के अंदर अपन पास कहादेते हैं, किसको, अपने home को, second में यहां पर पास कर रहा हूं, अपना url और url के अंदर, जो url आपने generate करा है, वो पास कर दो, slash, अपने पास home के लिए क्या url है, slash यह रहने दो, चीक है, same ऐ

13:51सब्सक्राइब आपने पास कई अपने पास क्या है ृपल आप यहां पर उपने पास न पर देखो अगर आप यहां पर देख तो आपके पास आगई ऐर अब

14:18error क्यों आ रही है क्योंकि यहाँ पर अब आपका नेव आइटम में से

14:22आइटम नहीं आ रहा होगा अब आपका जो नेव आइटम है उसमें जब आइटम पर आपने

14:27चला है तो आपके सारे object ट्रेट हो क्या रहे है जो array के अंदर

14:30बने वे है तो आपको आइटम में से डॉट करके क्या निकालना पड़ेगा आइटम में से डॉट करके आपको यहाँ पर निकालना पड़ेगा अपना

14:36नेव और यहाँ पर भी आईटम में से

14:38डॉट करके क्या निकालना पड़ेगा नेव

14:40यह तो है अपने पास कौन सा अपना ड्रोवर

14:42मतलब responsive के अंदर जब आए तब की बात है

14:44लेकिन original यह है अपने पास

14:46जो अपने को normal बड़ी screen में

14:48दिख रहा है तो यहाँ पर भी आके अगर आप

14:50देखोगे स्क्रॉल करके तो इसने नेव आईटम पर क्या

14:52चला रहा है अपना map चला रहा है जिसमें अपने पास

14:54आईटम आ रहे है आईटम में से dot करके मैं यहाँ पर

14:56क्या निकाल लेता हूं नेव और यहाँ पर भी आईटम में से dot करके

14:59अपन क्या निकाल लेता है अपना नेव चीक है तो यहाँ पर आप देखोगे आपकी नेव बार आ रही है

15:03home about contact लेकिन अभी अपन जा नहीं पा रहे है क्यों नहीं जा पा रहे है क्योंकि

15:07यहाँ पर अपने को click करने पर वहाँ पर भीजना है तो कुछ मत करो यह जो आपने काम करा यह

15:26आप इस link टेक के अंदर किसको पास कर देंगे अपने url मतलब किस object के उपर hit हुआ है उसी

15:32object का url होना चाहिए तो यहाँ पर 2 के अंदर या पास करते क्या

15:36और two के अंदर अपन क्या पास करेंगे इस item के अंदर अपने पास अपना nav भी आ रहा है और इस item के अंदर आपका url भी आ रहा है क्योंकि अपने array of object में गनोट कर दिया है उसको complete यह जो है आपका array of object है तो इसमें आपका nav भी आ रहा है और url भी आ रहा है complete object आ रहा है अपन

16:06आ रहा है, उसमें से डॉट करके आप क्या निकालोगे अपना URL निकालने वाले हो, उस URL के उपर आपको भीजना है, ठीक है, तो देखो, यहाँ पर अगर आप होम पे क्लिक करें, होम पे आपने भी कुछ पास निकरा, अबाउट पर अबाउट पर आगए, कॉंटेक्ट पर क

16:36आपको आपको सिम्णा पड़े और उसको यूस करना पड़ेगा, क्या लिखाउए, कुंद क्लिक करने पर इस

17:01तो URL जा रहा है

17:31तो एक बाद करके बताओ कि असर यहां तक की चीज किलियर है

17:35अरजुन करें इसके बाद वाले बैच में नहीं है

17:49टाइप स्क्रिप्ट टाइप स्क्रिप्ट का बैच आएगा लेकिन वह आपको अनौंस कर दिया जाएगा कब आने वाला है वो

17:54ठीक है

17:55I hope जब तक YouTube ठीक हो जाए

18:00Yes पिलकुल Context API

18:01Context API में क्या दिक्कत आ गई

18:03Good evening sir इस बैच की recording class कहां से एक्सेस कर सकते हो

18:07इस बैच की recording class आप एक्सेस कर सकते हो

18:10Delhi motion के उपर

18:11तो आपको community join करनी पड़ेगी

18:12community आपने join कर रख योगी मेरे साब से

18:15तो वहाँ पर इस class की recordings मिलती है

18:17ठीक है

18:19मारे अगरे कि sir वो भी आप पढ़ाएंगे

18:29TypeScript yes मैं ही पढ़ाऊँगा

18:31Tension मतलो

18:31Development से related सारे काम मैं ही करूँगा

18:34तो Tension मतलो आप उस चीज़ की

18:35धीरे धीरे पन सब चीज़े सीखेंगे

18:39जैसे जैसे अगे बढ़ते जाएंगे

18:42साहिल करेंगे sir कभी कभी वो recorded class का link open नहीं होता

18:52तो आप कुछ मतकूँ daily motion पर जाओं

18:54आपर skill वाला नाम से बनावा होगा

18:56जैसे अपन यहाँ पर आते है

19:00daily motion करके अपने पास यहाँ पर यह है

19:07इस पर मैं आता हूँ ठीक है यहाँ पर आके अपने को क्या करना है

19:11यहारा skill वाला

19:17इस skill वाला के उपर आओ

19:19यहाँ पर सारी recording है

19:20अगर आप यहाँ पर playlist देखोगे

19:23तो animation course है content writing course है

19:25अपना web development best 3

19:27अब तक कि जितनी भी classes हुई है

19:29उसकी recording यह रही अपने पास

19:30ठीक है तो यहाँ से आके access करो ना

19:33उसको क्या दिक्कत क्या है

19:34कोई दिक्कत वाली बात ही नहीं है

19:35यहाँ से आप आके उनको आराम से access करो

19:37ठीक है

19:39ठीक है

19:39ठीक्यू सर रिकार्डिंग क्लास की information के लिए

19:52ओके यह तो मेरा काम है

19:54तो मैं आपको जरूर बता हूँगा

19:55कि आपको कोई दिक्कत ना आए

19:57शायल करें

20:02ओ अच्छा यह भी ठीक है सर

20:03यह YouTube की जैसे यह बस आपको जाके

20:04skill वाला सर्च करना है

20:05डेली मोशन के उपर

20:06और वहाँ पर जाके skill वाला सर्च करके

20:09जो अपनी प्लेइलिस्ट है उस पर जाओ और प्लेइलिस्ट पर जाके

20:12उसी वीडियो को देख लो जो क्लास हुई है

20:14जरूर इनले आप बेट करो उस चीटका कि अपलोड कब

20:17अपलोड हुई है या अपलोड हो जाती है

20:19मौर्निंग में अपलोड हो जाएगी जैसे अभी अपनी क्लास है

20:21तो मौर्निंग टक वो अपलोड हो जाती है उसके उपर

20:23ठीक है

20:36ठीक है चलो अपन आगे बढ़ते है

20:46अब देखो यह तो अपन ने अपनी नयवबार बनाई और उस नयवबार को वर्क भी करवाया अपने

20:52आगे आ जाता है पन उसी के अंदर

20:54M.U.I. के उपर आ जाते है

20:57तो यहाँ पर बहुत सारी नयवबार है

20:59इसने एक िरह बना रखा है और इसे ने कार्ड बना रखा है कारण आपने पास आपनेकर नेम भी बता रहा है या फिर जो फूर रहा है उसका नेम और

21:25तो यह इस तरीके से यहां पर अपने इसको यूज कर सकते हैं जैसे यह

21:45पर सकता है जैसे यहां पर छोटा सा कौर बाला हूँ तो कब अपना इनिमेशन आ रहा है उसके बास पर के ऊपर आते हैं इसने क्या दे रखा artistic lack

21:56कोड करोंगे तो यहां पर कम्प्लीट इसका कोड

21:59है चोटता सा कोड है

22:00इसको यूज कर सकते है से यह वाला है

22:03अपने पास इस पर फॉर क्लिक कई यह उसी पर अपना topics क्लिक करा रहा हूं तो ऊस पर अपन

22:07और अगर उस पे ख्लिक करें तो इस पर अपना इनीमीशन आ रहा है उसके बात पेपर के ऊपर आते पेपर में इसने च्छा दे रखा है यह अपने पास पेपर बिसेली क्लास अपनी या मतलब कॉम पर in-tech यह पर यहां पर यूश कर सकते है इस तरीके से पेपर टाइप में �

22:37इसमें आप चेंज भी गर सकते हैं अब इतना मेहनत करने की जब नी है बस ये कोड उटा और यहाँ पर इसको

22:46अपन कम्पलीट कस्टमाइज कर सकते हैं प्लस कम्पलीट इसको बैक एंड के साथ कनेक्ट करके की रिसेंट में कौन-कौन सी

22:52चैट्स है, फैवरेट कौन सी कर रखी है, अरकाईव कौन

22:54कौन सी है, वो सारी अपने इसके अंदर आ जाती है, ठीक है,

22:58फिर उसके बाद, ये तो basically अपने पास हुई है, जो अपनी

23:01नेवबार होती है, नेवबार की तरह अपने पास यहाँ पर है, ठीक है,

23:05पिर उसके बाद अपने ड्रोवर के उपर चलते, ड्रोवर बैसिकली अपने पास जाए पर क्लिक करूँवाहा है, लेफ्ट साइट से वो रहा है, तो यूस कर सकते है इस सब चीजों को,

23:26इसके बाद आपने चलते है लिंक के ऊपर लिंक बेसिकलिए अपने पास वही link का काम करता है यह लिंक तो अपने पास इपने पास अपने पास a us कर लेंगे पानी के टुटा करता है तो वही यूज कर लेंगे ठीक है

23:40मैन्न के उपन के ऐगा। ऐसे मैं तो मैंने क्लिक कराओं मैं आपना हरी आपन करेंग्ट में अबहलों मेलिगेशी दिसने काम इसके फ्रंट ना काम अपना है।

24:02पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहां पर यहा

24:32के बाद speed dials, speed dials के अंदर ये इस तरीके से speed dial अपना आता है, cursor ले जाने पर work कर रहा ही है, ठीक है, click करने पर नहीं कर रहा है, cursor ले जाने पर, फिर आपकी scope पर जा रहे हो, यहां पर जोगो अपने पास ये भी लगावा है, scope पर,

24:43ठीक है, playground, playground right, down, left, कहाँ पर use करना है, वहाँ पर click करके अगर आप इसको use करना चाते हैं, तो वहाँ पर इसका code ये देदेगा, जो click करके आप देऊगे, वही code अपने पास इसका जायागा, ठीक है, फिर उसके बाद next पर चलते है, steppers, steppers basically अपने पास यहाँ पर क्या है, कि क

25:13करना है, तो skip कर दो, finish, yellow, आपके all steps complete हो गए, जैसे अपन e-commerce website पे देखते हैं, तो कुछ steps होते हैं, सबसे पहले आपको अपना address फिल करना होता है, फिर second आपको payment का steps होता है, और third में अपने पास यहाँ पर ही बताता है, successfully आपका order हो चुका है, तो इस तरीके से अपने steps द

25:43करवाने है, third में अपने पास जो है, अपना जो payment के options है, वो आपको select करने है, तो इस तरीके से अपन यहाँ पर steps pass कर सकते हैं, ठीक है, तो यह steps है, यहाँ पर देखो animated भी इसने आपर दे रखिये, इस तरीके से अगर आप इसको use करना चाहों तो इस तरीके से भी use कर सकते ह

26:13इस तरीके से अपन इसको use करना जाए, वो अपने उपर है, इसको कहीं न कहीं use करेंगे, अपने प्रोजेक्स में tension मतलो, taps कि अगर अपन बात करें, अपन टैप के उपर आगए, वन के उपर, टू के उपर, थ्री के उपर, कौन सी टैप के उपर अपन आगए, उसके लिए

26:43अपने पास यहां पर box, फिर उसके बाद containers, containers यहां पर container fluid यूज करना है, या फिर fixed यूज करना है, वो सारे containers यहां पर है, grid, grid जो अपन यूज करते है, वो यी grid है अपने इसके इंदर, ठीक है, कि आपको क्या grid set करना है, जैसे grid लिया, फिर grid के इंदर इसने grid पास करा, size कि

27:13यहां पर अपन कवर कर रहे हैं और यहां पर इसने size 4 दे दी फिर row wise अपन इसको किस तरीके से देख रहे हैं वही सारी चीजे जो अपने CSS में पढ़ी थी ठीक है यहां जपन सैट करके use भी कर सकते हैं जैसे 4, 8, 12 यहां पर 12 की spacing दी मैंने यहां फिर 8 की spacing दी code copy करा use करा ठीक ह

27:43करना पड़ेगा तो यहीं से सैट करके अपने इनको use कर सकते हैं ठीक है यह तो deprecate हो गया अपने पास इसको छोड़ो stack stack अपने पास यहां पर इस तरीके से अपने stack बने हुए item 123 इस तरीके से stack बीच में अपने पास divider भी लगावा है अगर divider वाले stack अपने को चीए तो div

28:13सकते हो जैसे मालो ऐसा कई काम आपको करना image list दिखानी है अपनी ठीक है किसी भी website पर जारो image की complete list चलती वे आए अपने पास तो उस तरीके से अपने इसको use कर सकते है code लिखने चाहेगी इसको use कर लो ठीक है जैसे अपने पास यह complete list बनी वी है इसमें यहां पर इस पर अ�

28:43भी कर सकते हो ठीक है बस यह कुछ चीज़े है फिर उसके बाद यूटिल्स जो है उसको तो अभी के लिए skip करो अब यह पर नहीं देख रहे हैं चीज़ों को ठीक है उसके अलावा एक दू चीज़े और पता देता हूँ

28:56MUI के अंदर जो important है जैसे मालो अपन यहां पर कोई box लेते हैं और इस box को मैं खुद की CSS यहां पर लगाना चाहता हूँ चीज़े मालो मैंने यहां पर एक box लिया अपन एक box create करते हैं इस browser router के बाद ही मैंने यहां पर क्या लिया एक box अपने यहां पर create करा और इस box के अंद

29:26तो वह error दे रहा है बॉक्स इंपोर्ट नहीं हुआ बॉक्स को MUI से इंपोर्ट करोगो यह MUI से आता है आपका box ठीक है तो उसको अपन यहां पर इंपोर्ट कर लिया यह लो भाई box आपका यहां पर इंपोर्ट हो चुका है ठीक है

29:41अब देखो यहां पर अपने को किस तरीके से एक्सेस करना है

30:01आज की attendance का point one मैं यहां पर बता देता हूं point one मैं आपको इसी में बताता हूं जैसे अपने यह box लिया अब इसको अपने को inline CSS लिखने है तो open कैसे लिखते है

30:09sx करके मैंने sx लगाया और sx करके यहां पर अपने इस तरीके से लिखते है तो यही आज की attendance का point one है जिसमें आपको mention करना है sx ठीक है

30:17यह sx अपनी prop property है जिसके तो open यहां पर अपनी CSS अपलाई कर सकते है अपने MUI के अंदर

30:23ठीक है inline CSS है यह अपने पार जैसे मालों मैंने इस पर background color लगाया मैंने यहां पर बोला background color

30:29background color मैंने यहां पर कह दिया कि आप यहां पर क्या कर देना green कर देना तो इसका background color क्या हो जाना चाहिए

30:34यह green हो जाना चाहिए यह लो green background color हो गया ऐसे ही अपन यहां पर style component भी यहां पर अपन यूज कर सकते है जिसमें अपनी style अलग तरीके से component का name change कर सकते है तो किस तरीके से कर सकते है

30:47मैं यहां पर बुलाता हूँ अपने style को ठीक है यह style कहा चाता है यह आपके MUI से आता है जिसको मैं यहां पर बुलाए style अब में को किसको style करना है मैं यहां पर बोला हूँ कि मेरे पास जो box है उसको मैं style करना चाहता हूँ लेकिन मैंने यह नहीं बताया कि किस particular box को मैं यहा

31:17मैं यहाँ पर कहता हूँ, कि इसका जो color है, वो आप color pass कर देना, और color यहाँ पर क्या कर देना, color white कर देना, चीए, third, third मैं यहाँ पर कहता हूँ, कि इसकी width जो है, वो width आप यहाँ पर pass कर देना, और width कितनी करनी है, width आप यहाँ पर कर देना, इसकी 400 pixel, चीए, third, third, fourth अपन य

31:47कि किस box के लिए करना चाहता हूं मैंने सिर्फ यह बताया कि अपने इस

31:51मुआ के अंदर जितने भी box है मैं उसमें किसी box को टरगेट करके यह property उसके उपर

31:56apply करना चाहता हूं यह CSS property उसके उपर apply करना चाहता हूं तो अपन यहां

32:00पर क्या करेंगे इसको एक variable में assign करेंगे तो मैं यहां पर इसको एक variable में assign कर दिता हूं कॉंस्ट करके अपने यहां पर आसाइंड कर देते कुछ भी variable यहां पर कर दो जैसे मैं यहां पर करता हूं style box new

32:16यह मैंने यहां पर इसको यह आसाइन कर दिया एक काम कर उसका नेम चेंज करो

32:28बॉक्स न्यू करके अपन इसका नेम दे देते एक बार के लिए

32:35पूर्मिट लेता है कि ये

32:42बी कैपिटल देने तो चलो अब देखो यहाँ पर वेने बुला इसको बॉक्स न्यू करके अपन ने आपर इसको पास करा है

32:51अब ये styling आपको लगानी किसके उपर है

32:53जैसे मालो आप लगाना चाहते हो किसके उपर

32:55इस box के उपर लगाना चाहते हो

32:57तो यहाँ पर इस box को आप box ना रखे

32:59आप क्या रखोगे इसको रखोगे आप box new

33:02यहाँ पर आप pass करोगे कि मिले को किसके ऊपर लगानी है अपने box new के ऊपर लगानी है तो box new यहाँ पर अपने इसको pass कर दिया अब इस जो box था उसकी जो property है वो कौन सी apply होगी

33:14कौन सी apply होगी sx को तो हटा दो जो लगा रखी है नहीं तो double apply होगी इसके उपर box new अपन ने यहाँ पर लगा रहा है और किसके उपर लगा रहा है इस वाले box के उपर अभी भी यह box ही है क्योंकि यहाँ पर देखो style में box आ रहा है मैंने उस box को target करके उसको एक नया नीम assign कर �

33:44चीक है उसकी जो font size है वो पन यहाँ पर change कर देते है और change करके पन यहाँ पर करते है 200 pixel चीक है जादा होई बहुत तो मैंने 200 pixel कर दिया यहाँ पर 200 मत बोलो यार बहुत ज़्यादा हो जाएगी वो 50 pixel कर दो चीक है तो इस तरीके से अपने पास उसकी font size increase हो गई चीक है जैस

34:14उसकी margin क्या हो जाएगी, auto हो जाएगी, perfect, तो यहाँ पर अगर अपने को style करना है, अपने MUI के अंदर, तो अपने style के इस तरीके से करते हैं, अपने MUI में style करने के लिए, अपने style को use लेते हैं, यहाँ तो यह तरीका है, style करने का, अगर आप style करना चाहते हो, MUI के अंदर, �

34:44तो मैंने यहाँ पर box mention करा है, तो box mention करा, box mention करके पर उसको target कर लिया, बस उसको एक नए नेम से assign कर दिया,

34:51क्योंकि box नाम से बहुत सारे है

34:53box सिर्फ एक ही तोड़ी ना है

34:55जैसे मालो आपने यहाँ पर एक और box बना दिया भई

34:57आपने बोला एक और box है

34:59ठीक है और उस box के अंदर अपन content दे देते हैं

35:02लॉरेम करके 20 का content ठीक है

35:04अभी दूसरा another box है अपने पास

35:06तो वो another box तो ने target हुआ है

35:08target हुआ है सिर्फ क्या यह

35:10आएकर समझ में तो इस तरीके से अपने इसको यूज लेते है

35:22यहाँ तक की चीज के लिए रहके आप सबी को

35:36आपको इसको थोड़ा सा और इस पर practice करनी है

36:02और इसको पुरा अच्छे से explore करना जितना मैंने बताया है

36:06क्योंकि अपन इसी को आगे यूज करेंगे

36:08इसकी कई चीज़े अपन यूज करने वाले है

36:11प्रिरीत करें कि web development प्लस AI क्लास है

36:17अभी yes क्लास अपनी 7-10 पे है वो

36:20web development और AI वाली क्लास

36:22चीक है

36:23तो उस क्लास में अपन अपने AI पे discuss करने वाले है

36:28कि web development पे अपन AI को किस तरीके से use करेंगे

36:32और आपके वो जो doubt है ना कि AI की वज़े से job चली जाएगी

36:36यह हो जाएगा वो हो जाएगा वो doubt भी आपका clear हो जाएगा वाँ पर

36:39ठीक है तो वो साथ दस पे अपनी क्लास है उस क्लास को आपको join करनी है AI वाली क्लास को

36:45अरजुन करे है recording playlist कैसे access करेंगे सर बता दीजी एक बार

36:57recording playlist आपको कैसे access करनी है बताते है रुप जाओ अभी एक बार

37:01one two three four one three four eight जो भी है वो बगये सर यूट्यूब में आपने

37:11github का link भी add किया था code के लिए daily motion में कहा है daily motion में अपने

37:16add कर देते हैं कोई दिक्कत नहीं है उसको add करवा दूँगा मैं कल ठीक है कल add करवा दूँगा उसको

37:20चाहिड daily motion में add नहीं होगा वो अब देखो daily motion में आके आपको अपनी

37:24playlist इस तरीके से access करने हैं मैं एक बार वापस बता दता हूँ repeat कर दता हूँ

37:27on stage को I hope कि आपको clear हो जाया अब यहां पर daily motion आके आपको search करना है अपने

37:33ब्राउजर पे daily motion के उपर आपको आना है YouTube जैसा ही platform है ठीक है तो यहां पर आके आपको कुछ नहीं करना अपना

37:40account create कर लेना और आपको यहां पर आके सर्च करना है skill वाला यह देखो मैंने सर्च कर रखा है skill वाला

37:47skill वाला सर्च करोगे तो वही skill वाला अपने पास यहां पर अपना क्या बना हुआ है account बना हुआ है तो आपको इस account के उपर आना है और यहां पर आके आपको क्या करना है

37:57playlist में आना है और playlist में आके आपको access करनी है सारी चीजे web development course best 3 की playlist यह रही अगर आप SEO का course भी ले रहे हो तो यह रहा content writer का यह रहा और अपना animation वाला course यह रहा तो यहां पर आके अपनी class access करो और उसको continue रखो जब तक अपना चैनल नहीं आता चैनल आने के बाद आपन उसको

38:27मिल जाएगी यहां पर सारी classes अपनी uploaded है चीक है इसमें github वाला link जो है वो मैं provide करवा दूँगा वो मैं एक पर बात कर लूँगा टीम से और उसको यहां पर लगवा दूँगा चीक है

38:57कि अब तर नहीं आपन त्री फोर एट करेंगे सर रिप्लाइप लीज सैटरेडे संडे डाउट सेशन होता है कि टेली मोशन पर नहीं

39:26अभी कोई डाउट सेशन नहीं हो रहा अपना अभी तो अपन क्लासेश ही ले रहे है

39:30अटेंडेंस का पॉइंट टू क्या है अटेंडेंस का पॉइंट टू आपको स्टाइल मेंशन करना है पहला तो SX था जिसके तूपर यहां पर स्टाइलिंग करते हैं इन लाइन और अगर अपने को यहां पर किसी भी

39:43कॉपने अपने मेट्रील्य अब है के अगर अपन कस्टमाइज करना चाते है अपनी CSS के तूपर अपन कैसे करते हैं तो यहां पर स्टाइल आपको मैंशन करना है पॉइंट नंबर टू के अंदर यह आज की अटेंडेंस का पॉइंट टू है ठीक है

40:13ठीक है तो इसको आप complete करना और अपनी जो AI वाली class है वो अपनी साथ दस के उपर है

40:31साथ बच के दस मिनिट तो आप उसको join करना उसमें अपन डिसकस करने वाले हैं अपने AI के उपर

40:39ठीक है मतलब क्या क्या AI tools आप यहां पर use कर सकते हो अपने development के अंदर किस तरीके से AI आपकी help करता है

40:48AI से आप कैसे help ले सकते हैं अपने code के लिए और आपको यह भी पता जालेगा कि without web development करें आप AI की help भी नहीं ले सकते हैं

40:56ठीक है तो AI तो अच्छी चीज है आपके काम को easy करता है ठीक है

41:01coding में आपकी किस तरीके से help करेगा AI और यहां पर अगर अपन बात करें अपने AI के तो अपन डीबगिंग किस तरीके से करेंगे

41:10अपने code में किस तरीके से अपन यहां पर help ले सकते है problem solving कैसे अगर सकते है अपने code का

41:15किस तरीके से अपन AI से code लिखवा सकते है

41:18ये कुछ चीज़ें अपन discuss करेंगे

41:19तो जैसे chat GPT अपना

41:21chat GPT पर अपन यहाँ पर discuss करेंगे

41:23किस तरीके से है