📖 Today’s Class: Building Login, Registration & Admin Panel (Frontend UI)   📅 Skillwaala’s Free Full Stack Web Development Course - video Dailymotion

skillwaala

🎯 Today’s Learning Outcomes  🎯 Learning Outcomes  By the end of this class, students will be able to: ✅ Design a Registration Page with proper input fields and responsive layout. ✅ Build a Cart Page UI showing products, quantity controls, and total price. ✅ Start creating an Admin Panel UI with sidebar, dashboard layout, and navigation. ✅ Implement React Router navigation between user pages and admin pages. ✅ Apply Tailwind CSS utilities to create modern and responsive UI elements.

Transcript

00:00है ना विवेंग बुट इवन रिम ये वार सब्सक्राइब कर दो भी वाइश के लियर है बुट इवनिग अर्जुन

00:11गुट इवनिंग प्रिविट अद अधर इसरेंट्स अपने प्रेंट्स विविट आपने लिए इन करें

00:30ठीक है ठीक है ठीक है चलो पर आगे डिसकस करते हैं आज वादी क्लास के अंदर आपको स्क्रीन शेयर कर दाता हूं

00:46एक बाए रइस्पॉंस कर दो कि आपको स्क्रीन भी वी बीजीबल है और वह इसको के लिए है ही यह रेस्पॉंस कर दो तक अपन उस फोल्डर पर आजाते हैं जिस फोल्डर पर अपन काम कर रहते हैं

01:06मैं आप पर उस folder को ओपन कर लेता हूं file then open folder और और जिस folder पर काम कर रहे तो उस पर आ जाते है अपन

01:15अपने बनाया था project class करके folder इस project class वाले folder के उपर पर आ जाता हूं छीक है

01:24और अभी सिर्फ अपन frontend के उपर काम कर रहे तो अपन frontend पे ही discuss करेंगे अभी लिए

01:30यहाँ पर अपने git bash को open कर लेते हैं और एक बार के लिए इसको run कर लेते हैं और देख लेते हैं कितनी चीज़े अपने यहाँ पर create कर ली

01:42चीक है

01:47तो सीरी करके मैं यहाँ पर front end वाले folder में आ जाता हूँ फिर उसके बाद अपने इसको run कर लेते हैं npm run और अपने पास देव जो command अपने आपने आपने लिए देते हैं ठीक है तो यह अपने पास run हो जाएगा

02:04इसको मैं run कर लेता हूँ अपने ब्राउजर पर और अपने चेक करते हैं क्या क्या चीज़े अपने यहाँ पर create कर लेती है यह अपनी search bar थी यह अपना home का section था यह contact वाला section अपने यहाँ पर बनाये थे ठीक है इस पर click करते हैं contact पहले ने चीए work नहीं कर लाई है

02:26यह अपना login वाला है contact वाला बनाया यह नहीं क्या

02:35नहीं वाल पर आओ एक बार

02:42अच्छे यहाँ पर link नहीं करे वे वो ठीक है यहाँ पर लगा दू लिंक कर दूँ

02:55to pay click करके अपने यहाँ पर कहले है home पर आज जाना चीह

03:04एक यह सब चीजे है अपने पास यहाँ पर होता है इससे

03:11कारण पर जाना चीह यह क्या issue वाला है

03:16कॉंटेक्ट वाला पीच कहा गया अपना

03:19पीजिस

03:21कॉंपरेंट

03:22फाइल

03:31देन उपन फोल्डर

03:32देन अपना जो

03:35फोल्डर था

03:35वो कौन सा था अपने पास

03:38प्रोजेक्ट क्लास करके था गया

03:39फोल्डर तो सही ओपन है

03:53कर बड़ कर दीगा कुछ

04:01एक बार इसके उपर आओ

04:04इसी फोल्डर पर ताम कर रहते हैं अपन

04:05मेबी

04:07इस पर आजओ एक बार

04:11एक बार आपन चेक कर लिए

04:12बाकी फाइल्स कहा है इसमें से

04:25बैश को उपन कर लो

04:31और मैं यहाँ पर कमान लिखता हूं किट्टू

04:49बुल वाली

04:54अल्रेडी अप्टू डेटा

04:56अपने अपने कार्ट और सारी चीज़े बनाई थी कहां गई वो

05:11अल्रेडर सारी बढ आतर

05:41अच्छा वो सारी चीज़े ही नीज में और ये तो दिकत हो गई

06:07अच्छा की काम कीका है लुआ काम किया ओंडर अपनो और अपने नहीं बना यह था

06:27और सिर्फ अपना कर दो रहा है था इया विव लॉकाने बना गॉज़ काह था नहीं में और अच्छा था और उसके अलावा अपने और ही धुकत हो अपने प् bulbs 2 लिख और

06:34यही काम किया था, अपने अपने प्रोडक्स दिखा दिये थे, बस इतना सा काम अपने किया था, उस प्रोजेक्ट पर है, मतलब जो अपने बनाया था, ठीके, तो अपने इसको चेंज कर लेंगे, कोई दिक्कत नहीं हो, तो अपने उसको वहाँ से पुश कर दूँगा, तो �

07:04जोनी की वेज़े से हो गया वह, चलो कोई बात नहीं, अपने काम करेंगे, उस सिस्टम से में इसको पुश कर दूँगा, पूरा डेटा तो वह इसमें आ जाएगा, ठीके, तो वह उपकल इसमें ले ले लेंगे, तो कोई दिक्कत वाली बात नहीं है, जहां तक अपने बन

07:34है, अभी के लिए अपना देख लेते हैं, फिर उसके बाद अपन करते हैं इसको सभी, ठीक है, तो छलो, अपना आगे दिख दे, तो यहां पर अपने जो अपना

07:59ठीक है और उसके अंदर अपने लॉग इन बनाता अब यह अपन रेजिस्ट्रेशन बनाते हैं फिर उसके बाद अपन बाकी का कोड ले आएंगे बाद में

08:08कलवारी क्लास में मिल जाएगा वो कोड ठीक है तो जल्दी से काम करो

08:14यहां पर सीडी करके किसमें आजाओ अपने फ्रेंट एंड के उपर आजाओ और इसको रन कर दो अपने पास क्या है अपना कार्ट वाला वो अपन यहां पर क्रियेट करते हैं फिर उसके बाद अपन आगे देख लेंगे

08:33कि मैं यहां पर इसको ओपन करता हूं है अब यहां पर अपने लॉग इन में आया था लॉग इन टू कंटिनु जिसमें अपन ईमेल आईडी दे रहे और पासवड दे रहे पासवड को में भी शो और हैड भी अपने करवा दिया था करवाले

08:49अब अपने को क्या करवाना है अपना registration के लिए अपने को यहां पर करवाना है तो registration के लिए अपने यहां पर एक नया component अपने को बनाना पड़ेगा तो जल्दी से मैं आपके अंदर ही यहां पर

09:00rej.jsx करके अपना एक component में आदे इसको मैं यहां पर create कर देता हूं RFC करके create कर दो ठीक है और इसके अंदर अपन यहां पर इसको अपन पास कर देता है अपने app.jsx के अंदर चिक इसका URL बनाना पड़ेगा तो मैं यहां पर कहता हूं slash route और यहां पर अपना path बात मैं कहता हू

09:30आरीजी वाला component है वो पन यहां पर pass करते हैं यह अपने यहां पर इसको प्रिएट करती है ठीक है तो जब मैं slash पर hit करवाओंगा तो किस component पर आज़ाऊंगा अपने यहां पर

09:39आरीजी वाले component के उपर तो यहां पर login.jsx के उपर आओ नहीं नैवबार पर आओ और उसको लगा दो यहां पर ठीक है नैवबार में यह अपना जो लगाओ है लोगिन का लगाओ है लोगिन पर अपन उस पर hit करेंगे तो अपना login वाला component आएगा और login वाले के अंदर ही अप

10:09अपने मैं कहाता हूँ slash REG URL पे चला जाना चाहिए तो अभी अगर आप चेक करोगे जैसे मैं इस पर क्लिक कर रहा हूँ इसका मतलब मैं किस पर चला जाओंगा slash REG के उपर अपन यहां पर आ गए ठीक है अब अपने काम करते हैं वापस पूरा बनाएं उससे बढ़िए य

10:39कर लेता हूँ और इसको लगा देता हूँ अपने REG के अंदर ठीक है इस complete को मैं यहां पर लगा देता हूँ और उसके अलावा इसके अंदर अपने use state और navigate भी ले रहा है तो दोनों को अपन यहां पर ले आते हैं एक तो आपको क्या लाना पड़ेगा अपना वह सेम का सेम

11:09यूज नेविगेट को एक बार import कर लो मैं यहां पर कह लेता हूँ यूज नेविगेट इंपोर्ट हो जाना चाहिए और दूसरा use state होक है तो use state को भी मैं यहां पर import कर लेता हूँ ठीक है तो यह अपना REG है और मैं यहां पर जो अपने को content लिखना है वो content अपन यहां पर

11:39ठीक है जैसे create your account और और और भी तो आते हैं इमोजी बस इतनी ही गया ठीक है यह कह रहता हूँ ठीक है यह मैंने यह आप पर लगा गया create your account तो जब मैं इस पर click करूँगा तो अपन किस पर आना चाहिए अपने REG पर आ जाना चाहिए लेकिन अभी भी कुछ इशू है इश

12:09चीज़ों को भी यहां पर लेया हूँ ठीक है copy paste कर लेते हैं कि वापस बनाने से कोई मतलब नहीं है उस चीज़ को यहां पर मैं इसको भी क्या कर लेता हूँ अपना copy कर लेता हूँ और यहां पर अपने REG के अंदर आ कि उसको लगा देते हैं उसके अलावा अपना link tag भी ह

12:39अब इसके अंदर अपने को क्या करना है इसके अंदर अपने को इपनी details देना है यहां पर क्या करता हूं

12:47में यहाँ पर क्या कहता हूँ येstalk यहाँ पर कहता हूँ इस सेटियु कर लो और

13:14इमेल की फिल्ड भी बना दो जल्दी से को इसी को मैं यहां से यहां तक कॉपी कर लेता हूं और यहीं पर अपन इसको क्या कर देता है अपने नीचा के पेस्ट कर देता है यह लो यह फिल्ड किस की हो जाएगी अपनी यहां पर अपन कह देता है यह इमेल की हो जाएगी तो म

13:44को ठीक है और उसके

13:46अलावा अपने को यहाँ पर क्या करना है

13:48बटन को चेंज करना है

13:49मैं यहाँ पर कहता हूँ अपना रजिस्टर

13:51रजिस्टर का बटन बना देता हूँ इसको

13:53तो यहाँ पर आजाओ और यह लोगिन लिखा हुआ है

13:55इसको change कर दो और यहाँ पर लिख दो register

13:58ठीक है तो यहाँ पर अपन अपना register दिखा देते हैं

14:04register बला जाएगा और यहाँ पर

14:05अपन don't have an account ना कहके

14:08आप अपन कह देते हैं already have an account

14:10तो आपको क्या करना है login पर आ जाओ

14:12ठीक है तो मैं यहाँ पर कहता हूँ already

14:14already have an account

14:18तो आपन यहाँ पर क्या करना है

14:20आपको login पर आना है वही

14:21register नहीं करना अब आप किस पर आ जाओ

14:24अगर आपको पहले से account बनावा है तो login के उपर

14:26आप आ जाओ ठीक है और यहाँ पर

14:28URL किस पर हिट होना चाहिए वो slash login के उपर हिट होना चाहिए

14:32पस इतने से changes करेंगे तो अपना registration भी ready है

14:35जैसे मैं यहाँ पर एक बार फिर आता हूँ

14:37home पर आ जाते है अपन एक बार के लिए

14:39जैसे मैं इस पर क्लिक करूँ है login to continue

14:41यहाँ पर email, password, login है

14:43अगर register करेंगे तो यहाँ पर full name, email, password

14:48और यहाँ पर अपन login पर वापस आ जाएंगे

14:50ठीक है तो यह अपना login और अपना registration अपना ready है

14:54क्योंकि अपन login और registration के basis पर ही उसके card item अपन दिखाने वाले है

14:59यहाँ तक की चीज़ के लिए रहे तो एक बार comment करके बताओ

15:02कि असर यहाँ तक की चीज़ के लिए रहे, इसमें कोई doubt नहीं है

15:04यहाँ तक की चीज़ के लिए रहे तो एक बार comment करके बताओ

15:10कि असर यहाँ तक की चीज़ के लिए रहे, इसमें कोई doubt नहीं है

15:12क्योंकि अपने copy paste कराओ, copy paste में तो doubt होना भी नीची है

15:32तो यहां पर बनाते हैं अपना कार्ट पर सेक्षन यहां पर करते हैं अपना कार्ट यहां पर अपने को शो हो जाना चाहिए बागी पेजिस लेकर आएगे बहुत चल्द अपन

15:57अब जैसे ही मैं क्लिक करो तो किस पर आ जाने चाहिए पर अपने कार्ट के उपर तो मैं यहाँ पर एक नया कॉंपोनेंट बनाता हूँ

16:04पेजिस के अंदर ही मैंने बनाया कार्ट.jsx करके और इसको अपन यहाँ पर क्रियेट कर देते हैं

16:09एपने कार्ट यहाँ पर क्रियेट हो जाएगा

16:13अब अपने को क्या बनाना है अपना कार्ट वाला कॉंपोनेंट मैं आ पर कार्ट क्रेते हुआ यह अपने के लिए बस इतना में सा क्याँ खा look

16:20और इसको class name देखे, मैं यहाँ पर margin देता हूँ एक बार के लिए

16:24mb, और वो अपन यहाँ पर अब d के लिए एक बार यह दिख जाए, इसलिए अपन प्रास कर रहे है

16:32और यह कब आना चाहिए, जब navbar के अंदर में किस पर क्लिक करो, अपने slash card के उपर

16:36तो यह रहा अपना card वाला, इसके उपर क्लिक करते ही अपने को बीजना है, तो यहाँ पर to लगा दो

16:41और आपन किस पर चलदा जाने चाहिए, slash card के उपर

16:44क्या अपने URL बना है, नहीं बना है, पहले URL बना हो उसका, तो यहाँ बराके उसका URL बना हो, आप बोलोगे

16:49route, route के अंदर आप यहाँ पर क्या पास करोगे अपना path, path आपने slash card करके ही decide किया था

16:55और element के अंदर अपन यहाँ पर अपना element पास कर देंगे, ठीक है, element के अंदर अपन यहाँ पर क्या करेंगे, अपना element पास कर देंगे

17:03वो मैं यहाँ पर pass कर चाहे यह ता हो अपना कार्ट वाले component बस इतना सा काम करतू� поэтому घैसे ही his

17:09उस के उपर क्लिक करूँगा अपनी network पर इस कार्ट के उपर अपनी कार्ट वाले component के उपर

17:15ठीक है वो आ गया हुआ लेकिन वो शो नहीं हो रहा क्योंकि अभी भी margin बहुत कम लगी है margin increase करके देख लो जा तो

17:22ठीक है तो मैंने slash card पर हीट करा तो यहां पर वह अभी भी शो नहीं हो रहा है आई हो बात नहीं यहां पर देखो अब अपने को क्या करना अपने

17:34card यहां पर दिखाने मतलब जो भी product मैं यहां पर add to card करूँगा वह product अभी यहां पर अपने

17:39अपने products बनायते हैं अपने card पर अपने create कर रहते हैं उस पर जैसे add to card पर click करूँ तो अपने card के अंदर अपने

17:46products आने चाहिए फिर उसके अंदर increment decrement यह सारे चीज़ें अपने अदर add कर देंगे तो जल्दी से अपन इस card को यहां पर create करते हैं अपने card वाले

17:57जो option है उसको यहां पर अपन create करते हैं ठीक है तो इक काम करते हैं card को भी अपन कैसे दिखाते हैं जैसे अपने यहां पर login registration दिखा है

18:06same ऐसे ही अपन क्या दिखाएंगे अपने card को भी

18:09अपना एक नया box open होगा है

18:11और उसके अंदर अपन यहाँ पर अपने card को दिखाते हैं

18:13थोड़ा सा अच्छा लगेगा

18:14तो जल्दी से अपन यहाँ पर वोई same सी कुछ classes में यहाँ पर लगा देता हूँ

18:18जैसे अपने एक class लगाई थी अपनी fixed

18:20मैं आपर कहता हूँ fixed

18:21और यहाँ पर अपन कहते हैं अपना inside पर zero कर देना आप

18:25ठीक है

18:25और इसका जो background color है वो आप यहाँ पर black कर देना

18:29और उसके अलावा जो background की opacity है

18:33जो background की opacity है वो आप यहाँ पर side कर देना

18:3645

18:37में भी 45 ही set करना अच्छी लगेगी

18:40तो यहाँ पर आगे चेक कर लो आपने क्या लगाई थी opacity

18:43यहाँ पर 45 ही लगाई है

18:45तो इसकी opacity मैंने क्या कर दी

18:4745 और यहाँ पर अपन लगा ज़ते है background blur

18:51ठीक है और blur भी अपन यहाँ पर किस device की हसाब से लगा रहे है

18:55अपने smd से आप से चीक है और मैं यहाँ पर लगा था अपना flags justify center और items center ठीक है ताकि वो div अपना center में आ जाए ठीक है

19:08यह काम अपने यहाँ पर करा तो आपको card component यहाँ पर लिखा ओवा देखा लिखा तरीकिसे

19:11लेकिन अपनेको तो यहाँ पर एक div बनाना है और जिसके अंदर अपने को अपने सारे card item अपने को दिखाने है

19:19तो इसको तो मैं हटाता हूँ और यहां पर एक div ले लेता हूँ और इस div के अंदर ही अपने सारे cart item दिखाने वाले हैं

19:25तो इसको मैं आपर class name देता हूँ और class name देके अपन इहां पर कहते हैं

19:29इसका bg जो है वो आप यहां पर white कर देना background color white हो जाना चीए

19:33width अपन इहां पर कह देता है full कर देना ओर maximum width है वो है अपने यहां पर MD के इसापसे

19:40set कर देते है SSD xl झोभी आपको पिनी एक्सल कर देता हो इपिलिए ठीक है तो यहां पर अपनी

19:48Excel च्छल करदेत Pan

20:01बॉकसा बनतिया रहा ने पास इस तरीके से अब इसके अंदर अपने को पाकी

20:04चीज़ भिए आपने को एप्लाई करनी है ए दिक के यह अपर दिया और राउंडेड अकसेल

20:11कर दिया शेड़ अपने लगा दी कि अब इसके अंदर ही वो सेम अपने को बटन

20:16लगाना है कौन सा बटन लगाना है अपने को यहाँ पर

20:17close वाला चीक है

20:19close वाला जो अपन बटन ले रहे थे वो बटन अपन लगाना चाहते हैं

20:22तो यहाँ पर एक बटन देता हूँ और उसके अंदर अपन उसको लगा देता है

20:25अपने जो बटन लिया था हूँ

20:26वो क्या नाम से था अपने पास

20:28यहाँ पर यह वाला अपने लिया था

20:30ठीक है तो इसको मैं copy कर लेता हूँ

20:32और card के अंदर अपन इसको यहाँ पर

20:34use कर लेते हैं यहाँ पर आ जाओ

20:36और यहाँ पर उस button को लगा दो

20:38तो वो बटन अपन यहाँ पर लगा देते हैं

20:40क्या नाम से था आयो आयो

20:41close circle इसको यहाँ पर लगा देते हैं

20:44और यहाँ पर आके

20:46अपने चेक करेंगे तो यह बटन आ रहा है

20:47इस बटन को भी close वाला same button अपन

20:49बनाना चाहते हैं तो भी same classes

20:51मैं इसके उपर लगा देता हूँ

20:53मैं यहाँ पर लिखता हूँ class name

20:54चीक है और यहाँ पर

20:56सबसे पहले जो अपना main div है

20:58उसको मैं यहाँ पर relative देता हूँ

21:00मैंने बोला relative ठीक है

21:02अब यह जो अपना button है

21:04इसको भी अपन यहाँ पर classes पास कर देते हैं

21:06इसको मैं कहा देता हूँ अपना

21:07कि आप इसको absolute pass करना

21:09ठीक है और top से आप इसको यहाँ पर 3 set कर देना

21:14ठीक है top से 3 का set कर देना

21:16और right से आप यहाँ पर इसको set कर देना

21:18जैसे मैंने right से set करा

21:19और right से अपन यहाँ पर कहा देते हैं

21:213 का set कर देना

21:22तो यहां पर काट पर आओ यह बटन अपने पास तरीके से आरहा है

21:35इसकी भी size यहां पर अपन चेंज कर देते हैं

21:37जैसे मैं आपर कहता हूं कि जो इसका text है वह आप यहां पर gray कर देना

21:42600, 700 जो भी आपको लगाना है

21:44या फिर यहाँ पर आके उस button को देख लो क्या classes लगा लिए ती

21:47यह same class ही लगा देता हूँ ना मैं उठा के

21:50यह same class इसके उपढ़ लगा दो

21:52यही same class इसके उपढ़ लगा दो

21:55ताकि button same सा रहे है ठीक है तो जैसे मैं इस पर click करूआ तो अपने उसको close करवाना है

22:01कैसे करवाओगे वहing use Navigate आपको लेना है यहाँ पर

22:04तो यहाँ पर अपन ले लेंगे किसको अपने use Navigate को

22:07थीक है

22:08तो मैं है आपर बुला लिया तो अपना use Navigate

22:11use Navigate को अपने आपर बुला लिया

22:13और इसको एक variable में assign कर दो

22:15मैं है आपर कहता हम const

22:17और navigate नाम के एक variable में इसको assign करते थे हैं

22:21तो use navigate अपना import हो गया

22:25navigate कहाँ पर करना चीए यह जब इस button के उपर click को

22:28तो यहाँ पर जल्दी से लगा दो

22:29यहाँ पर आप क्या लगा होगे अपना on click और on click पर अपन यहाँ पर लगा देते हैं

22:33इसको अपने use navigate को

22:35अपने home page के उपर बस इतना सा काम मैंने यहाँ पर करा हूँ

22:41तो जैसे मैं इस पर click करोँगा तो वो अपने navigate कर देगा

22:45अब अपन यहाँ पर आगे create करते हैं

22:51पहले तो यहाँ पर दिखा देते कि यह अपना card है तो इस button के बाद भी मैंने यहाँ पर

22:55एक as to tag लिया और उसमें पर क्या देते हैं

22:57कि your cart

22:59चीक है

23:00यहाँ पर दिखा दो your

23:02cart

23:04भई आपके cart product क्या है

23:07और

23:07लोस कैसे हो गया है

23:10यहाँ पर दिखा दो आपके cart product

23:12यहाँ पर क्या है

23:13चीक है तो जैसे मैं ने आपर एक bag ले लिया

23:16और bag लेके

23:18यहाँ पर दिखा रही है वाला तो यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर आपने पास यहाँ पर लिखा वा रहा है

23:23इसको जल्दी से अपन केस्टमाईज कर लेते हैं तो इस S2 टैक को मैं यहाँ पर क्लास देता हूँ

23:27और class देखे अपन यहाँ पर कहते हैं

23:30कि इसको text जो है

23:32वो आप यहाँ पर to excel कर देना

23:34इसका text चीक है

23:36उसके अलावा font को आप यहाँ पर

23:38क्या कर देना अपना bold कर देना

23:40font अपने पास bold लो क्या आना चीए

23:42और जो text है उसको आप

23:44purple color के अंदर वो ही 500-600

23:46जो भी आपको pass करना है वो pass कर दो

23:48और जो text है वो अपना यहाँ पर

23:51center के अंदर आना चीए और इसके नीचे

23:52भी कुछ content लेता हूँ तो उसके लिए मैं margin bottom

23:55लगाता हूँ जो से 4 की चीक है

23:56तो यह अपने यहाँ पर अपना apply करा

23:59यह card अपने पास यहाँ पर लिखा वा रहा है

24:01अब card के अंदर अपने को क्या क्या चीज़े दिखानी है

24:04card के अंदर अपने को अपनी सारी चीज़े दिखानी है

24:06जैसे अपने पास अपनी image हो गई

24:09इस product का title हो गया

24:11product की price हो गई

24:13increment, decrement हो गया जो अपन दिखाना चाते है

24:15ये सारी चीज़े अपन यहाँ पर लगा देते है

24:18तो जल्दी से एक काम करते है

24:20ये काम मैं करता हूँ

24:21एक unorder list लेके उसके अंदर करता हूँ

24:23ताकि list item के अंदर अपन एक list item मनाएंगे

24:25फिर बागे list item दिखाते जाएंगे अपन

24:27तो मैंने यहाँ पर एक URL लिया

24:30और उसके अंदर एक list item लिया

24:32अब इस list item के अंदर ही

24:34अपन अपनी सारे चीज़े दिखा देते है

24:36जैसे अपने unorder list ली और इसके अंदर list item लिया

24:39अब इसके अंदर सबसे पहले मैं दिखा देता हूँ

24:41अपनी image ठीक है

24:43image अपन यहाँ पर दिखा देते हैं

24:45फिर उसके बाद अपन यहाँ पर क्या लेने वाले हैं

24:48उसके बाद अपन यहाँ पर दिखाएंगे अपना

24:50जो भी product का name होगा

24:52तो मैं यहाँ पर एक डिव ले लेता हूँ

24:54और इस डिव के अंदर अपन यहाँ पर अपने product का name अपन शोग कर देंगे

24:58जैसे मालू मैंने एक s3 tag लिया

25:00और मैंने यहाँ पर कह दिया

25:01कोई apple

25:02ठीक है apple करके अपन यहाँ पर कह दिया

25:05apple watch कह देता हूँ

25:07ठीक है, apple watch ठीक है

25:09तो इस तरीके से अपने पास यह अपना क्या हो जायागा यहाँ पर

25:12यह title हो जायागा

25:14फिर उसके बाद अपने कुछ क्या दिखानी है

25:16इसकी price दिखानी है तो यहाँ पर एक paragraph टेग ले लेता हूँ

25:19जिसमें अपन यहां पर क्या दिखा देंगे उसकी प्राइज दिखा देंगे अभी के लिए प्राइज कुछ

25:22भी दिखा दो 56 बेने याँ पर दिखा दी ठीक है और उसके बाद

25:28next और क्याद्वी चीज़ दिखा नहीं अपने को और कुछ चीज़ भी दिखा

25:35जैसे मालों अपन यहां पर दिखाना चाहते हैं

25:37decrement और increment वाला और उसके अलावा quantity अपन यहां पर दिखा देते हैं

25:43तो वह भी दिखा दो यहां पर

25:45पहले अपन इसको थोड़ा सा बना है

25:47UI को तो पता चलेगा कि कैसे है क्या बन रहा है

25:49उसके बाद अपने चीज़े लिखा देंगे

25:51जैसी यह नोडल लिस्ट लिए है

25:53एक बाद चेक करूँ बना क्या हो आपर

25:55यहां पर देखो अपर

25:57Apple Watch लिखा हो आ रहा है

25:59Image ले लो एक कोई सी भी

26:01मैं यहां पर कहलता हूँ

26:03Apple Watch

26:05Image

26:07तो यहां पर images में आके

26:09भी यह image ले ले लेता हूँ

26:11मैं यहां से इसको मैं कर लेता हूँ

26:13Copy Image Address

26:15यहां पर आ जाओ और यहां पर इसको लगा दो

26:17ठीक है

26:19यह image अपनी यहां पर आ जाने चीए

26:21image बहुत बढ़ी आ रही है

26:23जल्दी से इसको चेंज करो

26:25मैं यहां पर क्लास नीम

26:27इस image के उपर क्लास नीम लगा देता है

26:29और इसको मैं कहा देता हूँ कि इसके width जो है

26:31वह आप जिससे 16 कर देना

26:3364 टिक्सल ही रहनी चाहिए

26:35width आप इसकी यहां पर 16 कर देना

26:37height भी यहां पर 16 कर देना

26:39ताकि same ratio में आ जाए अपने पास

26:41object जो है उसको अपन यहां पर कह देता है

26:43कि आप cover कर देना object को

26:45और rounded तो आपको करनी ही है

26:47और उसके अलावा

26:49अपने पास इसके उपर border भी आप यहां पर बना देना

26:53यह काम अपन ने किस पर आपनी

26:55इस image के उपर तो यह एक छूटी सी image

26:57image अपने को यहां पर लिखा देरी है

26:59अगर ज्यादा छोटी आ रही है तो थोड़ी सी increase कर लो

27:01अगर आप करना चाहो तो जैसे width 16 कर रही है

27:03तो 16 ना करके मैं यहां पर कह देता हूं

27:05जैसे 20 ठीक है

27:07और height भी अपन यहां पर क्या कह देता है

27:09तो image फूरी सी अपने पास बढ़िया जाएगी

27:11फिर apple watch लिखा हुआ है

27:13इसकी price यहां पर अपने पास आ रही है

27:15तो यहां पर यह जो अपना product का name है

27:17इसको भी अपन यहां पर set कर लेते

27:19उससे पहले अपन unorder list को एक बार set करते हैं

27:21यहां पर unorder list के उपर मैं

27:23class neem लगा जता हूं

27:25और class neem लगाके यहां आपर कहता हूं

27:27कि आप इसको divide करना

27:28टीक है ओर why direction ned

27:31में आपको divide करना है

27:33और divide जो है वो divider You have wanna

27:36आपको यहां पर लगाना isto jest

27:38और � je आपर कहता हूं

27:40gray ठीक है और gray color

27:42म時ने आपको MR. $300

27:44यहां पर acquire एक बास कर दो

27:46प्रॉडक्स आएंगे तो ओटोमेटिकली यहां पर एक डिवाइड वाली यहां पर क्लास नीम देता हूं और

27:57लावा जो आइटम्स है वो किसमें रहने चाहिए सेंटर में रहने चाहिए तो यहाँ पर अपना अपने पास अपने पास और अपने प्राइज आ रही है तो इसको भी अपन यहाँ पर कहा देता है

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

28:55लिखावा रहा है

28:56जैसे मैंने फ्लैक्स बन करा

28:57तो फ्लैक्स बन में लिए पंजो हो गया

29:00ठीक है

29:00फिर उसके बाद

29:02अपने पास यहाँ पर क्या है

29:03पना परग्राफ टेग है

29:04जिसमें हमें और प्रास प्रिंट कर वा रहे है

29:06तो प्राइस को भी

29:08यहाँ पर जल्दी से class दे दो

29:09मैं यहाँ पर class दे देता हूँ

29:10और यह जो अपना paragraph tag है

29:14इसको मैं कहा देता हूँ

29:15text को आप यहाँ पर sm कर देना

29:17और उसके अलावा जो text है

29:19वो आप यहाँ पर green color के अंदर दिखा देना

29:22और green में जैसे 600

29:23अपन यहाँ पर pass कर देता है

29:25तो price कुछ इस तरीके से अपने पास यहाँ पर आनी चीए

29:28semi bold पर यहाँ पर नहीं लगाया

29:31तो मैं यहाँ पर कहता हूँ

29:32text और उसको आप यहाँ पर bold कर देना

29:35text और

29:38sorry font bold होता है

29:40font और उसको

29:44आप यहाँ पर क्या कर देना

29:45अपना bold कर देना

29:46font अपने पास bold हो क्या जाएगा

29:49उसकी price का

29:50यहाँ तक की चीज़ कोई दिक्कत नहीं होगी

29:53वेसे मेरे इसाब से

29:53फिर उसके बाद next अपन यहाँ पर क्या करते हैं

29:56एक div लेते हैं और उसके अंदर अपन

29:58increment और decrement वाले बटन भी अपन यहाँ पर दिखा देते हैं

30:02देखो कैसे

30:02यहाँ तक का तो बिल्कुल सही था

30:04एक div मैं यहाँ पर ले लेता हूँ

30:06और उस div के अंदर अपन यहाँ पर अपना

30:08एक बटन लेंगे जिसको मैं यहाँ पर क्या दूँँँगा

30:10अपना increment का यह increment यह increment जो भी आप दिखाना चाहते हो

30:15उसके अलावा अपन यहाँ पर एक spend tag लेते हैं

30:19और उसके अंदर अपन अभी के लिए कुछ भी दिखा देते हैं

30:21फिर उसके बाद अपन यहाँ पर क्या करेंगे

30:24एक बटन और ले लेते हैं

30:26और उस बटन को मैं कहा देता हूँ यहाँ पर increment

30:28चीक है तो एक increment का बटन है एक decrement का बटन है

30:32जैसे अपन इस पर क्लिक करें तो increment और decrement होना चीए

30:35एक काम करो अपने react icons को यहाँ पर use करो

30:39और अच्छे से icons बना लो यहाँ पर मैं कहा देता हूँ react icons

30:42तो यहाँ पर अपने react icons पर आ जाते हैं

30:45और यहाँ पर आके अपन चेक करते हैं

30:48यहाँ तक की चीज के लिए रहे

30:49यह screen कैसे

31:12पहले screen शो हो रही थी ना

31:15यह screen कैसे होगी बंद अचानक से

31:18मैं को लग रहा है

31:20मैं को side by side comment भी on रखने चीज़िए

31:22आपके दूसरे cell phone के अंदर या फिर कहीं पर

31:25थाकि मैं को पता रहे कि आप

31:27कोई शुआ रहे एक लास में तो

31:29सर आप comment नहीं देखते नहीं

31:33कमेंट कहां से देखूं मैं

31:44कोई बात नहीं आपको

31:45recorded के अंदर इसकी screen आपको

31:47visible रहेगी recorded में टेंचन वाली बात नहीं है

31:50recorded में आपर record हुई है पूरी

31:52सर आपके सिस्टम में audio नहीं है क्या है ना

32:20audio लेकिन ऐसा कोई audio आया नहीं मेरे पास तो

32:22volume भी फुल है ऐसा तो कोई notification ही नहीं है

32:30कार्ट jsx फिर से समझाओ सर शुरू से कुछ देखा ही नहीं ठीक है मैं एक

32:38बार वापस समझा देता हूं क्या किया अपने देखो अपने क्या किया अपने अपने अपना

32:45अपने अपने पहला एक टिव लिया और उस तरीके से अपना कार्ट यहां पर दिखा दे रहा हैं तो यहां पर अपने जुड़ लिया है इस डिव के

33:01पर वो ही same classes लगाई है जो अपने किस पर लगाई थी login वाले पर लेकिन उसके अंदर जो डीब लिया है उस पर अपने हुई

33:07फिर उसके बाद उसके अंदर एक बटन वही same button बना है अपने close करने के लिए

33:16एस टू टैग लिया और एस टू टैग के अंदर यो कार्ट लिखा है

33:18अनॉडर लिस्ट लिए उस अनॉडर लिस्ट के अंदर मैंने सारे लिस्ट आइटम दिखा रहा हूँ

33:23मतलब जितने ने भी कार्ट के प्रोड़क होंगे वो सारे लिस्ट आइटम में आने वाले है

33:26पहली अनॉडर लिस्ट अपने यहाँ पर create करी और उसमें first list आइटम के अंदर पहला तो image लगा दिए अपने

33:31दूसरा आपने आपने एक div लिया है जिसके अब

33:50ठीक है तो यह अपने पास अपने बटन है यह increment का बटन है और यह decrement का बटन है इनको अपन create करते है

33:57ठीक है तो यहाँ पर अपन react icons का use ले रहे

34:00ताकि यहाँ पर अपन बटन दिखा सके हैं

34:03तो एक तो अपन प्लस का और एक माइनस का बटन यहाँ पर ले लेते हैं

34:06मैं यहाँ पर कहता हूँ प्लस

34:07तो यहाँ पर अगर आप देखोगी तो प्लस का बटन अपने पास यह रहा

34:12इस plus वाले बटन को मैं यहाँ पर import कर लेता हूँ

34:14मैंने यहाँ पर इसको import कर लिया

34:16तो यहाँ पर आ जाओ

34:18और इस plus वाले बटन को यहाँ पर import कर लो

34:21दूसरा अपने पास यहाँ पर क्या है

34:23दूसरा अपना minus का है

34:24तो मैं यहाँ पर minus वाले को भी import कर लेता हूँ

34:42अब देखो अपने को यहाँ पर क्या करना है

34:49अब अपने को यहाँ पर यहाँ पर यह लगाने है बटन्स जल्दी से लगा दो

34:57इसके अंदर तो अपन लगा देंगे अपना कौन सा

34:59जो अपने आपर आइकन लिए है अपना फा माइनस

35:02ठीक है फा माइनस को यहाँ पर लगा दो

35:05और सेम ऐसे ही

35:07यहाँ पर अपन किसको लगा देंगे अपने

35:09फा प्लस को

35:11फा प्लस को लगा दो भई

35:13ठीक है तो यहाँ पर आपको इस तरीके से

35:15वो अपने आइकन्स दीख जाएंगे

35:17minus और plus वाले इनको जल्दी से customize कर लो

35:19थोड़ा सा अच्छा बना लो ताकि अच्छ लेगी

35:21तो इस बटन को मैं यहाँ पर class देता हूँ

35:23और इसको open create कर लेते हैं

35:24तो यह जो decrement वाला जो button है

35:27इसको open create कर लेते हैं

35:28यहाँ पर आते हैं और यहाँ पर मैं लगाता हूँ

35:30class name, class name लगाके मैं कहता हूँ

35:33कि x direction में आप यहाँ पर 2 की padding दे देना

35:35उसके अलावा y direction में अपन यहाँ पर 1 की padding दे देते हैं

35:40और जो इसका background color है

35:42वो अपन यहाँ पर कहते है purple color आप यहाँ पर कर देना

35:45और 300 आप यहाँ पर कर देना

35:47चीक है, rounded आप इसको कर देना

35:49rounded आप यहाँ पर करी देना इस बटन को

35:51और उसके अलावा

35:53जब मैं इसके उपर hover करूँ

35:55तो hover के उपर जो इसका

35:57bg color है वो आप यहाँ पर

35:59purple के अंदर जैसे थोड़ा सा

36:01डार कर देना 400 या फिर 500

36:03जो भी आपको करवाना है

36:04यह बटन अपने बनाया अपना किसका

36:07decrement का, चीक है तो यह अपना

36:09decrement वाला बटन अपने यहाँ पर

36:11बनातिया, ऐसे ही

36:13सेम अपन यहाँ पर

36:15py2 दो एक बार थोड़ा सा अच्छा लगएगा

36:17बटन, py2 देके देख लो, तो यहाँ पर

36:20साग रहा है, सेम ऐसे ही अपन किसको बनाते हैं

36:22अपने, यहाँ पर

36:24increment वाले को, तो यही मैं copy कर लेता हूं

36:27और इसी को मैं यहाँ आपको copy कर कर के कहां पर

36:28paste कर देता हूं, अपने इस button के अंदर

36:31छीक है? इसको copy कर के आपन

36:32इसको इस button के अंदर paste कर देते हैं

36:34तो यह अपना increment और यह अपना decrement

36:37यह जो अपन spend tag लिया है

36:39इसको भी अपन जल्दी से थोड़ा सा

36:41यहाँ पर padding दे देते हैं

36:42दोनों direction से x direction में

36:44मैं आपर class name देता हूँ और px यहाँ पर

36:46जैसे 2 pass कर देता हूँ

36:472 में देखो कितना space लेता है

36:49तो यहाँ पर अपना increment और decrement

36:51अपने पास यहाँ पर आ गया

36:52तो यह अपना increment और decrement है

36:55जो अपन यहाँ पर आगे work करवाएंगे

36:57और कैसे करवाएंगे वो तो आला कि आपको पताईए

36:59सबको कि किस तरीके से अपन यहाँ पर

37:01अपना increment और decrement यहाँ पर

37:03दिखाने वाले हैं ठीक है फिर उसके बाद next अपने ये बटन लिए हैं फिर अपन यहाँ पर अपनी

37:09total price दिखा देते हैं जो भी अपने को total price दिखानी है तो यह div तो अपने पास किसी चीच का हो गया यह div अपने पास

37:16यहाँ पर हो गया अपने buttons के लिए

37:18यह जो div ली आता

37:20यह अपने किस के लिए हो गया था

37:21जो अपने increment और decrement अपना दिखाया है

37:24उस increment और decrement के लिए

37:26अपने इसको use लिया है

37:27एक काम करते है इस div के उपर

37:30मैं एक class लगा देता हूँ ताकि

37:31यह center मेरे मैं यहाँ पर class name लगा देता हूँ

37:33और class name लगा गया अपन यहाँ पर करते है

37:36अपना flex

37:38item center कर देना आप

37:40ठीक है

37:41item center कर देना और उसके

37:43अलावा gap जो है

37:45वो आप यहाँ पर टूका रख लेना

37:47ठीक है यह अपने पास करा

37:49अपने इस buttons के लिए

37:51परफेक्ट ठीक है

37:53यहाँ पर देखा आपने एक चीज

37:55px2 करके लगाई ना एक बार

37:57px1 लगाओ उसमें

37:58px2 जाता हो दिये तो आप px1 रहने तो

38:00इस तरीके से यह अपना increment और decrement

38:03वाला button यहाँ पर ready है

38:04उसके बाद अपने को यहाँ पर क्या दिखाना है

38:07अपनी उसके बाद अपन यहाँ पर

38:09अपनी total price भी दिखा देता है

38:10और फिर उसके बाद delete वाला button भी दिखा देता है

38:13तो यहाँ पर इस div के बाद

38:15यह जो div लिया है आपने

38:16इस div के बाद ही मैं एक paragraph

38:19tag ले लेता हूँ और उसके अंदर अपन यहाँ पर

38:21जैसे total price दिखा देता है

38:22तो मैं यहाँ पर लगा देता हूँ

38:31अपनी total price को भी highlight कर देता है

38:33जल्दी से तो मैं यहाँ पर कहता हूँ

38:35text, text आप यहाँ पर

38:37क्या करना

38:38text आप यहाँ पर red color में देता हूँ

38:40अभी के लिए बाद में आपन चेंज कर लेंगे इसको

38:42text red दे देना

38:44और जो

38:46font है उसको आप यहाँ पर

38:48bold करो

38:50इसको bold करो और इसको semi bold करो

38:52वह आपकी total price है तो मैं यहाँ पर इसको

38:54कहता हूँ इसको आप semi bold कर दो

38:56और इसको bold कर दो तो इस तरीके से

38:59यह आपकी price है

39:00और यह आपकी total price यहाँ पर आ जानी चीए

39:02है ठीक है एक मिनिट है अपने जो उपर डिव लिया है इसको डिवाइड करके नीचे भेज़ते टोटल प्राइस को तब ही अच्छा लगेगा

39:20ठीक है

39:28चलो इसको आगे कर लेंगे अब यहाँ पर अपने एक बटन लगा देते हैं वो अपन डिलीट का लगा देते हैं तो मैं यहाँ पर आके सर्च कर लेता हूँ उपना डिलीट

39:46चीक है डिलीट का लगा देते हैं जैसे यह वाला डिलीट है इसको मैं ले लेता हूँ यहाँ से इंपोर्ट कर लो यहाँ से अपन इसको इंपोर्ट कर लेते हैं और यहाँ पर अपना डिलीट लगा देते हैं चीक है यह अपना इसी के अंदर अपना पैरेग्राफ टैग ह

40:16यहां पर लगा देते हैं अपन किसको अपना डिलीट वाला इंपोर्ट कर लो इक बार उपर

40:21MD डिलीट करके जो आ रहा है और यहां पर लगा दो इसको

40:27MD डिलीट स्विप करके आ रहा है और इसको अपन यहां पर लगा देते हैं

40:34तो आके चेक करो, वो बटन आपको यहाँ पर आना चाहिए, इसको जल्दी से थोड़ा सा चेंज कर लो, कैसे करोगी चेंज, यहाँ पर आप लगाओगी class name, और class name लगा कि मैं यहाँ पर कहता हूँ, text, text आप gray का यहाँ पर पास कर देना, gray में आप जैसे 700 इसको पास कर देन

41:04और जो text है, वो आप यहाँ पर एक बार के लिए Excel करके देख लो, कितना बड़ा वो अपना icon बन क्या रहा है, Excel में नहीं आ रहा सही, तो थोड़ा सा और increase कर लो इसको, Excel ना देके आपन यहाँ पर करते है, 2XL, ठीक है, 2XL करके देख लो, 2XL में सही आ रहा है, बिल्कुल

41:34तो होवर पर वो cursor pointer आ जाएगा, यह डिलीट वाला, चीक है, तो इस तरीके से अपने पास ही कहा जाएगा, अपना delete यहाँ पर आ जाएगा, जिसमें अपन यहाँ पर क्या दिखा रहे है, अपना delete यहाँ पर अपन दिखा रहे है, यह जो अपने 56 लिया है, इसको total price को यहा

42:04प्रिंट करवा देंगे, यह अपनी price आ जाएगी, और यह increment, increment और यह आपका button है, ठीक है, डिलीट करने का, फिर उसके बाद अपन यहाँ पर अपनी total price और जो सारे चीज़े वो प्रिंट करवा देंगे, ठीक है, यह तो जैसे एक ही अपना list item था, और अपने काम करते है, �

42:341, 2, 3, 4, 5, ठीक है, इसी के उपर अपन क्या चला देते हैं, अपना map, map चला के अपन यहाँ पर print करवा देते हैं, ताकि यही multiple time print हो जाए अपना, इसी another list को मैं यहाँ से क्या कर लेता हूँ, cut, और यहाँ पर कर देते हैं अपन इसको paste, ठीक है, चेक करें, तो यहाँ पर �

43:04पहला काम तो ही करो, image को छोटी रखो, क्योंकि अपन इसको pop-up की जैसे दिखा रहे हैं, तो image को छोटा कर दो, जो आपने image लिए, उसको width आप यहाँ पर कम ही रखो उसकी, 14 ही रखो जैसे, क्योंकि image की width ज़्यादा होगी, तो फिर वो space भी ज़्यादा लेगा, ठीक है, image

43:34ठीक है, ठीक है, जैसे जैर 50 करके मैं आप पर जैर इंडेक्स रगादा हूँ उसको पर, यह अपने card पर click करा, card

44:0450 पर हो जाना चीज़ था वैसे, चलो यह भी कर देंगे, एक बार अपन आगे देख लेते हैं, यह अपने यहाँ तक का काम बिल्गुद सही है अपना, अब यहाँ पर अपन दिखा देते हैं, अपनी total price और अपने core क्या चीज़ दिखानी देती है, check out, process to check out, यह सारे ची�

44:34अपनी class name और अपनी total price जो अपने को दिखानी है, तो एक paragraph टैक ले देता हूँ, जिसमें मैं यहाँ पर कहता हूँ total, आपका total क्या हो क्या रहा है, वोपन यहाँ पर कहता है, जिसे 56 डॉलर था, तो यहाँ पर 56 डॉलर ही मैं यहाँ पर कहता हूँ, ठीक है, तो यहाँ अप

45:04लगा दो, class name लगा के अपने कह देते है margin top, टॉप से आप यहाँ पर six की margin देदे देना, और text को आप यहाँ पर क्या करते है अपना right side करते हैं, ठीक है, टेक्स को आप यहाँ पर क्या करते हैं, राइट साइट करते हैं, इस 56 को भी एक काम करूँ, ऐसे ना लेके अपन एक

45:34करता हूं कि टेक्स्ट को आप यहां पर क्या करना है यह जो है इसको बोल भी कर दो यह जो प्राइज आ रही है इसको बोल करना चाहूं नहीं तो इसको बोल कर देते हैं यह जो अपने लिया है

45:55इसको margin drop से पने दिये paragraph tag को एक काम करो ना यह मत करो यह जो total है इसको देनी है आपने वो तो इसको text आप कर दो LG हो जाना चाहिए और font को आप यहां पर कर दो कि अपना semi bold हो जाना चाहिए

46:16और जो text है वो अपन यहां पर कह देते हैं कि gray color के अंदर आप यहां पर 700 इसको पास कर देना तो वो अपना total इस तरीके से रिखाई दे रहा है तो यह अपने पास इस तरीके से अपना total यहां पर होके आ रहा है

46:42फिर उसके बाद अपने को एक button लगाना है और उस button पर अपने को लिखना है checkout

46:47चकाउट का aक button लगाना है जल्दी से button लगा दो तो यहां पर अपन क्यादते है अपना button और button में है checkout

46:54जब इस पर क्लिक करेंगे तो अपने को पेमेंट करना है

46:58वो सारा काम अपना आगे करेंगे

46:59जब उपना बैकेंड वाले चीज़ी देखेंगे

47:01क्लास नीम लगा देता हूँ

47:02मार्जिन टॉप से मैंने यहाँ पर इसको 4 की मार्जिन दे दी

47:05और इसका जो बैक्राउंड कलर है

47:07वो आप यहाँ पर परपल लग लेना

47:08परपल मैं आप यहाँ पर 600 रख देना

47:10ठीक है और जो टेक्स्ट है

47:12वो आप यहाँ पर वाइट कलर में कर देना इसका

47:15और PX अपन यहाँ पर लगा देता है

47:17जिससे 6 की और PY करके

47:19मैं यहाँ पर लगा देता हूँ की

47:20ठीक है और आप यहाँ पर इसको

47:22rounded भी कर देना जब मैं इसके उपर

47:24hover करू तब hover के उपर भी कुछ changes करने है

47:27तो hover पर आप यहाँ पर कर देना

47:29कि जब hover करे तब इसका

47:31जो background color है वो आप यहाँ पर

47:33dark कर देना B.G. जो है वो purple

47:35के अंदर आप यहां पर इसको

47:36जैसे 800 कर देना

47:39ठीक है? तो यह अपना check out वाला

47:41button हो जाएगा

47:42ठीक है यह check out वाला button अपने बाज यहां पर आ रहा है

47:45इस तरीके से

47:48किलिक है यहां तक की चीच

47:49यहां तक की चीच की लिए रहे तो गर

47:51कमेंट करके बताओ कि यहां तक की चीज़ के लिए रहे इसमें को डाउट नहीं है

47:54अब देखो यहां पर यह जो इशु आ रहा था इसका सॉल्यूशन करते है एक बार के लिए

48:21अपने क्या किया यह fix it inside करके लिए है और इसको अपने ठीक है

48:28जैट इंडेक्स केडारे म हैं इसको और वाइड ही डिएरेक्षिन में है तो आप यहां पर क्या करदेट

48:29पास नहीं करते हैं पर यह काम करते हैं मैं इसको ओवर्फ्लो पास कर देता हूं ठीक है इसको मैं कहता हूं ओवर्फ्लो और ओवर्फ्लो अपना वाई डायरेक्शन में तो वाई में मैं कह देता हूं कि आप इसका जो वाई डायरेक्शन में ओवर्फ्लो है वह आप यहां प

48:59और फ्लो पर निट सेट कर दिया, उसके अलावा अपने एक काम करते हैं, इसकी maximum height मैं आपर सेट कर देता हूँ, maximum height आप यहाँ पर सेट कर देना, और वो अपन यहाँ पर कह देता है, जैसे 90 VH, क्योंकि टोटल तो 100 VH होती ही, तो मैं 90 VH यहाँ पर एक बार इसकी maximum height सेट करत

49:29वो अपनी उस नयओबार के पीछे जा रहा है, नयओबार, नयओबार, नयओबार, नयओबार

49:37यह अपना काट था ना, इसको Z index पास कर दिता हूँ, इसको जैड और इसको 50 पास कर दो एक बार के लिए,

49:54जैंड इंडेक्स को 50 पास करो ठीक है तो अब आपका कार्ट अपनी जाएगा मेरे साब से बीचे यह इस तरी किसा आपका कार्ट आ रहे हैं यह आपर

50:02ठीक है एजी

50:18एक एमेक्स भी लगा देता हूं मैं और उसे फॉर्ड के पूंड पर सेट कर रहते हैं

50:24यह राउंड एक क्यों नहीं हो रहा है इदर से ठीक है चलो कर देंगे इसका सॉलूशन भी यहां तक की चीज़ समझे में के आप सभी को

50:32यह सर क्लियर सर ओके ठीक है ठीक है ठीक है ठीक है चलो आज की अटेंस के मैं आपको 0.1 और 0.2 बताता हूं

50:40अटेंस के 0.1 के अंदर आपको mention करना है REG registration ठीक है

50:46REG mention करना आपको 0.1 के अंदर और 0.2 के अंदर आपको mention करना है CART CART

50:52यह attendance के 0.1 और 0.2 होगे जो आपको attendance के 0.1 और 0.2 के अंदर फिल करना है

📖 Today’s Class: Building Login, Registration & Admin Panel (Frontend UI) 📅 Skillwaala’s Free Full Stack Web Development Course

Category

Transcript

Be the first to comment

Recommended